From 9db3dbd730e13c73bef3f908c3912be266d10142 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Fri, 16 May 2014 11:40:39 +0200
Subject: [PATCH] Style improvement focus schema in front when roll-over in
 panel

---
 src/Umbraco.Web.UI.Client/preview/index.html  |  46 ++-
 .../src/less/tuning.panelStyles.less          | 341 ++++++++++--------
 .../src/tuning/index.html                     |  46 ++-
 .../src/tuning/tuning.controller.js           |   8 +-
 .../src/tuning/tuning.front.js                |   5 +
 src/Umbraco.Web.UI/Umbraco/js/tuning.front.js |   5 +
 src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js |   6 +-
 src/Umbraco.Web.UI/Umbraco/preview/index.html |  38 +-
 8 files changed, 276 insertions(+), 219 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/preview/index.html b/src/Umbraco.Web.UI.Client/preview/index.html
index c3f5d5c3f8..3c17ec9fff 100644
--- a/src/Umbraco.Web.UI.Client/preview/index.html
+++ b/src/Umbraco.Web.UI.Client/preview/index.html
@@ -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>
 
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 @@
 
 <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>
 
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 @@
 
                 </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>
 
