yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style improvement

Browse Source 
focus schema in front when roll-over in panel
This commit is contained in:
antoine
2014-05-16 11:40:39 +02:00
parent 8a1dd96294
commit 9db3dbd730
8 changed files with 276 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/Umbraco.Web.UI.Client/preview/index.html
View File

@@ -10,9 +10,13 @@
<body id="tuningPanel" ng-controller="Umbraco.tuningController">
<div class="loading" ng-show="!frameLoaded">Loading ...</div>
<div class="wait" ng-show="!frameLoaded">Loading ...</div>
<div class="tuning" ng-show="frameLoaded">
<div id="demo-iframe-wrapper" ng-show="frameLoaded" class="{{previewDevice.css}}">
<iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
</div>
<div class="tuning" style="display:none" ng-class="{show:frameLoaded}">
<div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
@@ -63,10 +67,15 @@
<div ng-repeat="section in category.sections">
<accordion close-others="true">
<accordion-group ng-repeat="subSection in section.subSections" is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-group ng-repeat="subSection in section.subSections"
ng-class="{true:'selected', false:''}[isOpen]"
is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-heading>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">{{subSection.name}}</span>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">
{{subSection.name}}
</span>
</accordion-heading>
<div class="div-field" ng-repeat="field in subSection.fields">
@@ -143,22 +152,15 @@
<div ng-show="settingIsOpen == 'presetColors'">
<tabset vertical="false">
<tab heading="Preset colors">
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
</tab>
</tabset>
<h2>PALETTE COLORS</h2>
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
@@ -208,10 +210,6 @@
</div>
<div id="demo-iframe-wrapper" class="{{previewDevice.css}}">
<iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
</div>
<script src="/umbraco/lib/lazyload/lazyload.min.js"></script>
<script src="/umbraco/js/tuning.loader.js"></script>

341
src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
View File

@@ -3,18 +3,18 @@ html {
}
body {
height: 100%;
padding: 0;
margin: 0;
text-align: center;
background-color: #fafbfd;
height: 100%;
padding: 0;
margin: 0;
text-align: center;
background-color: #fafbfd;
}
h2 {
color: #d9d9d9;
text-align: center;
font-size: 14px;
margin-left:10px;
margin-left: 10px;
font-size: 14px;
color: #d9d9d9;
text-align: center;
}
.tuning #TuningBg {
@@ -39,71 +39,73 @@ h2 {
}
.show {
display:block !important;
display: block !important;
}
.wait {
margin:10px 0 0 0;
margin: 10px 0 0 0;
}
.tuning .tuning-wrapper {
height: 100%;
overflow-y: auto;
text-align: left;
height: 100%;
overflow-y: auto;
text-align: left;
}
.tuning .wrapper-pading {
padding:10px
padding: 10px;
}
.tuning #TuningBg.open {
margin-left: 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
margin-left: 0;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.tuning .colpick {
z-index: 99999999;
z-index: 99999999;
}
.tuning .nav {
margin-bottom: 10px;
color: #ffffff;
margin-top: 12px;
margin-bottom: 30px;
border-bottom: none;
text-transform: uppercase;
padding:0 10px
}
.tuning .nav-tabs > li > a {
color: #d9d9d9 !important;
background-color: #1D1D1D !important;
border: none;
border-bottom: 3px solid transparent;
color: #d9d9d9 !important;
background-color: #1D1D1D !important;
border: none;
border-bottom: 3px solid transparent;
}
.tuning .nav-tabs > li.active > a,
.tuning .nav-tabs > li.active > a:hover,
.tuning .nav-tabs > li.active > a:focus {
color: #d9d9d9;
cursor: default;
background-color: #1D1D1D !important;
border: none;
border-bottom: 3px solid #f57020;
color: #d9d9d9;
cursor: default;
background-color: #1D1D1D !important;
border: none;
border-bottom: 3px solid #d9d9d9;
}
.tuning .nav-tabs > li > a:hover {
color: #d9d9d9 !important;
background-color: #1D1D1D !important;
border: none !important;
border-bottom: 3px solid #f57020 !important;
color: #d9d9d9 !important;
background-color: #1D1D1D !important;
border: none !important;
border-bottom: 3px solid #d9d9d9 !important;
}
.tuning .nav > li > a:hover,
.tuning .nav > li > a:focus {
text-decoration: none !important;
color: #d9d9d9 !important;
background-color: #1D1D1D !important;
border: none !important;
border-bottom: 3px solid #f57020 !important;
color: #d9d9d9 !important;
text-decoration: none !important;
background-color: #1D1D1D !important;
border: none !important;
border-bottom: 3px solid #d9d9d9 !important;
}
.tuning .nav-tabs > li > a {
@@ -111,21 +113,19 @@ h2 {
/*border-radius: 2px 2px 0 0;*/
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
margin-top: 1px;
}
.tuning .nav-tabs > li > a {
color: #ffffff;
cursor: pointer;
}
.tuning .nav > li > a {
padding: 5px 10px;
}
.tuning .panel-title > a {
display: block;
font-size: 13px;
line-height: 22px;
color: #d9d9d9;
cursor: pointer;
padding: 5px 7px;
}
.tuning .panel-title > a span {
@@ -133,48 +133,98 @@ h2 {
}
.tuning .panel-title > a:hover {
color: #ffffff;
text-decoration: none;
}
/* .panel-heading */
.tab-pane {
border-bottom: 1px solid #343434;
}
.tuning .panel-heading {
padding: 0 10px;
padding: 0;
}
.tuning .panel-default > .panel-heading {
background-color: #1D1D1D;
color: #d9d9d9;
border-color: none;
border-radius: 0;
border-left: 4px transparent solid;
}
.tuning .panel-default > .panel-heading:hover,
.tuning .panel-default.selected > .panel-heading
{
text-decoration: none;
background-color: rgba(255, 255, 255, 0.09);
border-left: 4px #f57020 solid;
color: #d9d9d9;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.tuning .panel-title > a {
display: block;
font-size: 13px;
line-height: 22px;
color: #d9d9d9;
cursor: pointer;
padding: 5px 0 5px 17px;
}
.tuning .panel-default > .panel-heading h4 {
margin: 0 0 0 -4px;
border-top: 1px solid #343434;
}
.panel-group .panel+.panel {
margin-top: 0px;
}
.tuning .panel-default.selected {
margin:1px 0 0 0;
}
.tuning .panel-default.selected > .panel-heading h4 {
color: #d9d9d9;
border-bottom: 1px solid #6D6D6D;
margin: 0 0 0 0;
border-top: none;
}
.tuning .panel-default.selected > .panel-heading h4 a {
padding: 5px 0 5px 13px;
}
/* panel */
.tuning .panel-default {
background-color: #1D1D1D;
border: 0px solid rgba(217, 217, 217, 0.5);
border-radius: 0;
}
.tuning .panel-group .panel {
border-radius: 1px;
}
.tuning .panel {
margin-bottom: 5px;
background-color: rgba(85, 85, 85, 0.76);
border: 1px solid rgba(217, 217, 217, 0.5);
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tuning .panel-default > .panel-heading {
color: #333;
background-color: rgba(85, 85, 85, 0.76);
border-color: rgba(217, 217, 217, 0.5);
border-radius: 2px;
}
.tuning .panel-default > .panel-heading:hover {
color: #ffffff;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.41);
.panel-collapse {
background-color: rgba(255, 255, 255, 0.09);
border-left: 4px #f57020 solid;
}
.tuning .btn-default-save,
.tuning .btn-default-save:focus {
float: right;
margin-top: 5px;
margin-top: 20px;
color: #fff;
background-color: #f57020;
background-color: #53a93f;
border-color: #ccc;
border-radius: 2px;
margin-right: 20px;
}
.tuning .btn-default-save:hover {
@@ -204,8 +254,7 @@ h2 {
}
.tuning .panel-body {
border-top: 1px solid rgba(217, 217, 217, 0.5) !important;
border-top-color: rgba(217, 217, 217, 0.5) !important;
border-top: none !important;
}
.tuning select {
@@ -338,24 +387,24 @@ h2 {
}
.tuning .tuning-tools div {
display: block;
padding: 8px 8px 8px 9px;
margin: 5px 0 0 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
background: #353535;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
display: block;
padding: 8px 8px 8px 9px;
margin: 5px 0 0 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
background: #353535;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.tuning .tuning-tools div:hover,
.tuning .tuning-tools div.selected {
color: rgba(255, 255, 255, 0.8);
background: #1D1D1D;
color: rgba(255, 255, 255, 0.8);
background: #1D1D1D;
}
.tuningImagePicker {
@@ -378,15 +427,15 @@ h2 {
}
.tuningImagePicker .image-preview {
display: inline-block;
width: 110px;
height: 60px;
cursor: pointer;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 2px solid #F3F2F2;
display: inline-block;
width: 110px;
height: 60px;
cursor: pointer;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 2px solid #F3F2F2;
}
.tuningImagePicker .image-preview:hover,
@@ -420,10 +469,6 @@ h2 {
color: #242424;
}
.tuning h4 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.tuning .fontFamilyPickerPreview {
float: left;
width: 90%;
@@ -456,7 +501,7 @@ h2 {
.tuning .palette {
padding: 0;
margin: 20px 0 20px 0;
margin: 20px 0 20px 20px;
list-style: none;
}
@@ -504,71 +549,71 @@ h2 {
/******* IFRAME *******/
.desktop {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.laptop {
width: 1024px;
height: 740px;
width: 1024px;
height: 740px;
}
.iPad-portrait {
width: 769px;
height: 929px;
width: 769px;
height: 929px;
}
.iPad-landscape {
width: 1024px;
height: 675px;
width: 1024px;
height: 675px;
}
.smartphone-portrait {
width: 320px;
height: 504px;
width: 320px;
height: 504px;
}
.smartphone-landscape {
width: 480px;
height: 256px;
width: 480px;
height: 256px;
}
.border {
margin: 75px auto;
background-color: #ffffff;
border-radius: 10px;
opacity: 1.0;
box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
transition: all 0.5s ease-in-out;
margin: 75px auto;
background-color: #ffffff;
border-radius: 10px;
opacity: 1.0;
box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3;
transition: all 0.5s ease-in-out;
}
iframe {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.flip:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/******* preview-device *******/
ul.preview-device {
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid #343434;
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid #343434;
}
ul.preview-device li {
@@ -584,25 +629,25 @@ ul.preview-device li {
}
ul.preview-device li div {
border-bottom: 1px solid #343434;
padding: 10px;
padding: 10px;
border-bottom: 1px solid #343434;
}
ul.preview-device li:hover,
ul.preview-device li.selected {
background-color: rgba(255, 255, 255, 0.09);
border-left: 4px #f57020 solid;
background-color: rgba(255, 255, 255, 0.09);
border-left: 4px #f57020 solid;
}
ul.preview-device li i {
color:#d9d9d9;
font-size: 80px;
line-height: 80px;
font-size: 80px;
line-height: 80px;
color: #d9d9d9;
}
ul.preview-device li span {
color:#d9d9d9;
display: block;
display: block;
color: #d9d9d9;
}
/******* font-face *******/

46
src/Umbraco.Web.UI.Client/src/tuning/index.html
View File

@@ -10,9 +10,13 @@
<body id="tuningPanel" ng-controller="Umbraco.tuningController">
<div class="loading" ng-show="!frameLoaded">Loading ...</div>
<div class="wait" ng-show="!frameLoaded">Loading ...</div>
<div class="tuning" ng-show="frameLoaded">
<div id="demo-iframe-wrapper" ng-show="frameLoaded" class="{{previewDevice.css}}">
<iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
</div>
<div class="tuning" style="display:none" ng-class="{show:frameLoaded}">
<div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">
@@ -63,10 +67,15 @@
<div ng-repeat="section in category.sections">
<accordion close-others="true">
<accordion-group ng-repeat="subSection in section.subSections" is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-group ng-repeat="subSection in section.subSections"
ng-class="{true:'selected', false:''}[isOpen]"
is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-heading>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">{{subSection.name}}</span>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">
{{subSection.name}}
</span>
</accordion-heading>
<div class="div-field" ng-repeat="field in subSection.fields">
@@ -143,22 +152,15 @@
<div ng-show="settingIsOpen == 'presetColors'">
<tabset vertical="false">
<tab heading="Preset colors">
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
</tab>
</tabset>
<h2>PALETTE COLORS</h2>
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
@@ -208,10 +210,6 @@
</div>
<div id="demo-iframe-wrapper" class="{{previewDevice.css}}">
<iframe id="resultFrame" ng-src="{{pageId}}" frameborder="0"></iframe>
</div>
<script src="/umbraco/lib/lazyload/lazyload.min.js"></script>
<script src="/umbraco/js/tuning.loader.js"></script>

8
src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
View File

@@ -101,6 +101,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel);
}
var setSelectedSchema = function (schema) {
document.getElementById("resultFrame").contentWindow.setSelectedSchema(schema);
}
// Refresh with selected tuning palette
$scope.refreshtuningByPalette = function (colors) {
@@ -254,9 +258,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
$scope.schemaFocus = schema;
}
// Accordion open event
// Focus schema in front
$scope.accordionWillBeOpened = function (schema) {
$scope.futurSchemaFocus = schema;
setSelectedSchema(schema);
}
// Preload of the google font

5
src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
View File

@@ -7,6 +7,11 @@ var refrechLayout = function (parameters) {
eval(string);
}
var setSelectedSchema = function (schema) {
$("[tuning-over]").css('outline', 'none');
$(schema).css('outline', '2px solid blue');
}
var closeIntelTuning = function (tuningModel) {
if (tuningModel) {

5
src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
View File

@@ -7,6 +7,11 @@ var refrechLayout = function (parameters) {
eval(string);
}
var setSelectedSchema = function (schema) {
$("[tuning-over]").css('outline', 'none');
$(schema).css('outline', '2px solid blue');
}
var closeIntelTuning = function (tuningModel) {
if (tuningModel) {

6
src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
View File

@@ -149,6 +149,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel);
}
var setSelectedSchema = function (schema) {
document.getElementById("resultFrame").contentWindow.setSelectedSchema(schema);
}
// Refresh with selected tuning palette
$scope.refreshtuningByPalette = function (colors) {
@@ -304,7 +308,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
// Accordion open event
$scope.accordionWillBeOpened = function (schema) {
$scope.futurSchemaFocus = schema;
setSelectedSchema(schema);
}
// Preload of the google font

38
src/Umbraco.Web.UI/Umbraco/preview/index.html
View File

@@ -54,7 +54,7 @@
</div>
<div ng-show="settingIsOpen == 'setting'" class="wrapper-pading">
<div ng-show="settingIsOpen == 'setting'" >
<tabset vertical="false">
@@ -67,10 +67,15 @@
<div ng-repeat="section in category.sections">
<accordion close-others="true">
<accordion-group ng-repeat="subSection in section.subSections" is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-group ng-repeat="subSection in section.subSections"
ng-class="{true:'selected', false:''}[isOpen]"
is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
<accordion-heading>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">{{subSection.name}}</span>
<span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">
{{subSection.name}}
</span>
</accordion-heading>
<div class="div-field" ng-repeat="field in subSection.fields">
@@ -145,24 +150,17 @@
</div>
<div ng-show="settingIsOpen == 'presetColors'" class="wrapper-pading">
<div ng-show="settingIsOpen == 'presetColors'">
<tabset vertical="false">
<tab heading="Preset colors">
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
</tab>
</tabset>
<h2>PALETTE COLORS</h2>
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
<p>{{ palette.name }}</p>
</li>
</ul>
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>