@@ -143,22 +152,15 @@
-
-
-
-
-
- -
-
-
-
- {{ palette.name }}
-
-
-
-
-
-
+
PALETTE COLORS
+
+ -
+
+
+
+ {{ palette.name }}
+
+
@@ -208,10 +210,6 @@
-
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
index df06e2617c..3bcc6047ce 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less
@@ -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 *******/
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html
index c3f5d5c3f8..3c17ec9fff 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/index.html
+++ b/src/Umbraco.Web.UI.Client/src/tuning/index.html
@@ -10,9 +10,13 @@
-
Loading ...
+
Loading ...
-
+
+
+
+
+
@@ -63,10 +67,15 @@
-
+
+
- {{subSection.name}}
+
+ {{subSection.name}}
+
@@ -143,22 +152,15 @@
-
-
-
-
-
- -
-
-
-
- {{ palette.name }}
-
-
-
-
-
-
+
PALETTE COLORS
+
+ -
+
+
+
+ {{ palette.name }}
+
+
@@ -208,10 +210,6 @@
-
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
index 3be4de50a7..4363db64c2 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
@@ -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
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
index ec0b2658aa..a9770fbc00 100644
--- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
+++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
@@ -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) {
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
index ec0b2658aa..a9770fbc00 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js
@@ -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) {
diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
index 0bc968aca4..a866e9d7a5 100644
--- a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js
@@ -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
diff --git a/src/Umbraco.Web.UI/Umbraco/preview/index.html b/src/Umbraco.Web.UI/Umbraco/preview/index.html
index 5160e4aa20..2eac1fa82e 100644
--- a/src/Umbraco.Web.UI/Umbraco/preview/index.html
+++ b/src/Umbraco.Web.UI/Umbraco/preview/index.html
@@ -54,7 +54,7 @@
+
@@ -67,10 +67,15 @@
-
+
+
- {{subSection.name}}
+
+ {{subSection.name}}
+
@@ -145,24 +150,17 @@
-
+
-
-
-
-
-
- -
-
-
-
- {{ palette.name }}
-
-
-
-
-
-
+
PALETTE COLORS
+
+ -
+
+
+
+ {{ palette.name }}
+
+