From 6035971a88bc769ee4590a753466bc94f7fc4cd2 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Tue, 23 Sep 2014 17:49:31 +0200
Subject: [PATCH] Various Styles Bug fixed and improvement

Conflicts:
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html
---
 .../canvasdesigner/editors/background.html    |  9 +-
 .../src/canvasdesigner/editors/border.html    |  2 -
 .../src/canvasdesigner/editors/border.less    | 10 +-
 .../src/canvasdesigner/editors/color.html     |  4 -
 .../editors/googlefontpicker.html             |  3 +-
 .../src/canvasdesigner/editors/margin.html    |  2 -
 .../src/canvasdesigner/editors/padding.html   |  2 -
 .../src/canvasdesigner/editors/radius.html    |  2 -
 .../src/canvasdesigner/editors/slider.html    |  3 +-
 .../src/tuning/editors/layout.html            | 10 ++
 .../src/tuning/editors/layout.js              | 16 ++++
 .../src/tuning/editors/layout.less            | 96 +++++++++++++++++++
 12 files changed, 133 insertions(+), 26 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/tuning/editors/layout.html
 create mode 100644 src/Umbraco.Web.UI.Client/src/tuning/editors/layout.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/tuning/editors/layout.less

diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
index 3bd3bc686b..8463374504 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
@@ -1,7 +1,9 @@
 
 <div ng-controller="Umbraco.canvasdesigner.background">
 
-    <h5>{{item.name}}</h5>
+    <div class="box-slider">
+        <spectrum colorselected="item.values.color"></spectrum>
+    </div>    
 
     <div class="box-slider">
         <div class="imagePickerPreview" ng-click="open(item.values)" style="background-image:{{ item.values.imageorpattern }}">
@@ -10,11 +12,6 @@
         </div>
     </div>
 
-    <div class="box-slider">
-        <spectrum colorselected="item.values.color"></spectrum>
-        <!--<i ng-if="item.values.color != ''" ng-click="item.values.color = ''" class="icon icon-delete colorPickerDelete"></i>-->
-    </div>
-
 </div>
 
 <script type="text/ng-template" id="mediaPickerModal.html">
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
index 55837e9484..582a9bcce2 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.border" class="bordereditor">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             <li ng-repeat="border in borderList" class="border-{{border}}" ng-class="{selected: selectedBorder.name == border}" ng-click="setselectedBorder(border)"></li>
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less
index 4b65c60c8a..0901e4e6e6 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less
@@ -28,31 +28,31 @@
 
 /***start-lessStyle--ALIAS-***/
 
-.all-ALIAS- () when  (@bordersize-ALIAS- > 0) {
+.all-ALIAS- () when  (isnumber(@bordersize-ALIAS-)) {
     border: @bordersize-ALIAS- + 0px;
     border-color:@bordercolor-ALIAS-;
     border-style:@bordertype-ALIAS-;
 }
 
-.left-ALIAS- () when  (@leftbordersize-ALIAS- > 0) {
+.left-ALIAS- () when  (isnumber(@leftbordersize-ALIAS-)) {
     border-left: @leftbordersize-ALIAS- + 0px;
     border-left-color:@leftbordercolor-ALIAS-;
     border-left-style:@leftbordertype-ALIAS-;
 }
 
-.right-ALIAS- () when  (@rightbordersize-ALIAS- > 0) {
+.right-ALIAS- () when  (isnumber(@rightbordersize-ALIAS-)) {
     border-right: @rightbordersize-ALIAS- + 0px;
     border-right-color:@rightbordercolor-ALIAS-;
     border-right-style:@rightbordertype-ALIAS-;
 }
 
-.top-ALIAS- () when  (@topbordersize-ALIAS- > 0) {
+.top-ALIAS- () when  (isnumber(@topbordersize-ALIAS-)) {
     border-top: @topbordersize-ALIAS- + 0px;
     border-top-color:@topbordercolor-ALIAS-;
     border-top-style:@topbordertype-ALIAS-;
 }
 
-.bottom-ALIAS- () when  (@bottombordersize-ALIAS- > 0) {
+.bottom-ALIAS- () when  (isnumber(@bottombordersize-ALIAS-)) {
     border-bottom: @bottombordersize-ALIAS- + 0px;
     border-bottom-color:@bottombordercolor-ALIAS-;
     border-bottom-style:@bottombordertype-ALIAS-;
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
index f1d42396d5..260f31c967 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
@@ -1,11 +1,7 @@
 
-<div ng-controller="Umbraco.canvasdesigner.color">
-    
-    <h5>{{item.name}}</h5>
 
     <div class="box-slider">
         <spectrum colorselected="item.values.color"></spectrum>
-        <!--<i ng-if="item.values.color != ''" ng-click="item.values.color = ''" class="icon icon-delete colorPickerDelete"></i>-->
     </div>
 
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html
index 62cd7c6e50..43f9d534b0 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html
@@ -1,13 +1,12 @@
 
 <div ng-controller="Umbraco.canvasdesigner.googlefontpicker">
 
-    <span class="field-title">{{item.name}}:</span>
     <div class="box-slider">
         <div class="fontFamilyPickerPreview" ng-click="open(item.values)" ng-style="setStyleVariant()">
             <span>Aa</span>
             {{ item.values.fontFamily }}
+            <i ng-if="item.values.fontFamily != ''" ng-click="item.values.fontFamily = ''" class="icon icon-delete fontPickerDelete"></i>
         </div>
-        <i ng-if="item.values.fontFamily != ''" ng-click="item.values.fontFamily = ''" class="icon icon-delete fontPickerDelete"></i>
     </div>
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html
index 5cec9840ee..145c38f2f3 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html
@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.margin">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider"> 
         <ul class="box-preview">
             <li ng-repeat="margin in marginList" class="border-{{margin}}" ng-class="{selected: selectedmargin.name == margin}" ng-click="setSelectedmargin(margin)"></li>
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html
index 9ab33075d7..e645ce0a67 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html
@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.padding">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             <li ng-repeat="padding in paddingList" class="border-{{padding}}" ng-class="{selected: selectedpadding.name == padding}" ng-click="setSelectedpadding(padding)"></li>
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html
index 80b52f1f03..328698b44b 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html
@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.radius">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html
index d25667750b..f33d314841 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html
@@ -1,7 +1,8 @@
 
 <div ng-controller="Umbraco.canvasdesigner.slider">
-    <h5>{{item.name}}:</h5>
+
     <div class="box-slider">
         <div ui-slider min="{{item.min}}" max="{{item.max}}" step="1" ng-model="item.values.slider"></div>
     </div>
+
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.html
new file mode 100644
index 0000000000..8f9117c11c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.html
@@ -0,0 +1,10 @@
+
+<div ng-controller="Umbraco.tuning.layout">
+
+    <div class="box-slider">
+        <input type="radio" ng-model="item.values.layout" value="box"> Box
+        <input type="radio" ng-model="item.values.layout" value="wide"> Wide
+        <input type="radio" ng-model="item.values.layout" value="full"> Full
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.js
new file mode 100644
index 0000000000..2dadfde372
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.js
@@ -0,0 +1,16 @@
+
+/*********************************************************************************************************/
+/* slider editor */
+/*********************************************************************************************************/
+
+angular.module("umbraco.tuning")
+
+.controller("Umbraco.tuning.layout", function ($scope) {
+
+    if (!$scope.item.values) {
+        $scope.item.values = {
+            layout: ""
+        }
+    }
+
+})
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.less
new file mode 100644
index 0000000000..8512da21e2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/layout.less
@@ -0,0 +1,96 @@
+
+/************************************************************************/
+/* wide -ALIAS- -CSS- */ 
+/************************************************************************/
+
+/***start-lessParam--ALIAS-***/
+@layout-ALIAS-:box;
+/***end-lessParam--ALIAS-***/
+
+/***start-lessStyle--ALIAS-***/
+
+.box1200-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 1140px;
+}
+
+.box992-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 940px;
+}
+
+.box768-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 720px;
+}
+
+.boxFull-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 100%;
+}
+
+.wide1200-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 1140px;
+}
+
+.wide992-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 940px;
+}
+
+.wide768-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 720px;
+}
+
+.wideFull-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 100% !important;
+}
+
+.fullFull-ALIAS- () when  (@layout-ALIAS- = full) {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    -SCHEMACONTAINER- {
+        .wide768-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 992px) {
+    -SCHEMACONTAINER- {
+        .wide992-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 1200px) {
+    -SCHEMACONTAINER- {
+        .wide1200-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 768px) {
+    -SCHEMA- {
+        .box768-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 992px) {
+    -SCHEMA- {
+        .box992-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 1200px) {
+    -SCHEMA- {
+        .box1200-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+/***end-lessStyle--ALIAS-***/ 
\ No newline at end of file