From ed8cccdf5a33b30b6336e471f9f142577c965ef0 Mon Sep 17 00:00:00 2001 From: per ploug Date: Thu, 6 Nov 2014 22:58:35 +0100 Subject: [PATCH] Minor visual annoyances + changed output html changes made due to feedback from Adam, Rune and Simon on how to make the grid as flexible as possible --- .../src/less/gridview.less | 77 +++++++++++---- .../grid/editors/textstring.html | 1 + .../propertyeditors/grid/grid.controller.js | 14 ++- .../src/views/propertyeditors/grid/grid.html | 97 +++++++------------ .../grid/grid.prevalues.controller.js | 17 +++- .../propertyeditors/grid/grid.prevalues.html | 52 +++++----- .../Views/Partials/Grid/Bootstrap2.cshtml | 87 +++++++++++------ .../Views/Partials/Grid/Bootstrap3.cshtml | 59 ++++++----- 8 files changed, 238 insertions(+), 166 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less index 11c7450c25..1b7b4f3b31 100644 --- a/src/Umbraco.Web.UI.Client/src/less/gridview.less +++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less @@ -18,7 +18,7 @@ width: 160px !important; overflow: hidden; padding: 5px; - border-radius:50px; + border-radius:5px; -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); -moz-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); @@ -149,6 +149,7 @@ right: 0; width: 150px; opacity: 0.3; + z-index: 50; } .usky-grid .cell-tools:hover{ @@ -158,11 +159,9 @@ .usky-grid .cell-tools-add { position: absolute; text-align: center; - bottom: -20px; + bottom: 0px; left: 0; right: 0; - z-index: 500; - opacity: 0.3; } .usky-grid .usky-control:hover .cell-tools-add{ @@ -480,7 +479,7 @@ /**************************************************************************************************/ .usky-grid .usky-cell{ - + padding-bottom: 20px; } .usky-grid .usky-row{ @@ -569,29 +568,52 @@ vertical-align: middle; } - .usky-grid .usky-templates-columns .td i{ +.usky-grid .usky-templates-columns .td i{ color: @gray; opacity: 0.8 - } +} - - .usky-grid .mainTbpt:hover { +.usky-grid .mainTbpt:hover { border-color:@blue; - } +} - .usky-grid .mainTbpt { +.usky-grid .mainTbpt { cursor:pointer; border-collapse: separate; min-height: 35px; border: 2px solid @grayLight; margin:0px; padding: 1px; - background-color: @grayLighter; - } +} - .usky-grid .mainTdpt { +.usky-grid .mainTdpt { padding: 1px; - } +} + +.usky-grid .mainTbpt { + height: auto; +} + +.usky-grid .mainTdpt { + height: 11px; + margin: 0; + overflow: hidden; + border: 1px dashed #d9d9d9; + display: block; + float: left; +} + +.mainTdpt span{ + width: 100%; + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0 1px; + height: 10px; + background: @grayLight +} + /**************************************************************************************************/ @@ -603,14 +625,13 @@ height: 380px; overflow: auto; border: 1px solid #ccc; - margin-top: -190px; + margin-top: -270px; margin-left: -150px; background: white; padding: 7px; top: 0; left: 50%; - - z-index: 666; + z-index: 6660; -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); -moz-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45); @@ -677,14 +698,21 @@ .usky-grid-configuration .uSky-templates .uSky-templates-template{ margin: 0px 20px 20px 0px; - width: 60px; + width: 80px; } + .usky-grid-configuration .uSky-templates .uSky-templates-template .tb{ - height: 50px; + max-height: 50px; border-width: 2px !important; padding: 0px; border-spacing:2px; + overflow: hidden; +} + +.usky-grid-configuration .uSky-templates .uSky-templates-template span{ + background: @grayLight; + display: inline-block; } .usky-grid-configuration .uSky-templates .uSky-templates-template .tb:hover{ @@ -695,6 +723,8 @@ display: block; float: left; margin-left: -1px; + border: 1px white solid !important; + background: @grayLighter; } .usky-grid-configuration .uSky-templates-column.last{ @@ -706,9 +736,14 @@ font-size: 20px; line-height: 70px; color: #ccc; - text-decoration: none + text-decoration: none; + background: white; } +.usky-grid-configuration .mainTdpt{ + height: initial; + border: none; +} .usky-grid-configuration .uSky-templates-rows .uSky-templates-row{ margin: 0px 50px 20px 0px; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html index 685e859405..9a63a1c7a5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html @@ -1,5 +1,6 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js index edf3dfb59f..ec47771491 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js @@ -8,7 +8,7 @@ angular.module("umbraco") $scope.currentToolsControl = null; $scope.currentControl = null; $scope.openRTEToolbarId = null; - + $scope.hasSettings = false; // ********************************************* // Sortable options @@ -385,6 +385,11 @@ angular.module("umbraco") $scope.initContent = function() { var clear = true; + //settings indicator shortcut + if($scope.model.config.items.config || $scope.model.config.items.styles){ + $scope.hasSettings = true; + } + if ($scope.model.value && $scope.model.value.sections && $scope.model.value.sections.length > 0) { _.forEach($scope.model.value.sections, function(section){ @@ -453,9 +458,14 @@ angular.module("umbraco") //sync area configuration _.each(original.areas, function(area, areaIndex){ + + var currentArea = row.areas[areaIndex]; + area.config = currentArea.config; + area.styles = currentArea.styles; + //copy over existing controls into the new areas if(row.areas.length > areaIndex && row.areas[areaIndex].controls){ - area.controls = row.areas[areaIndex].controls; + area.controls = currentArea.controls; _.forEach(area.controls, function(control, controlIndex){ $scope.initControl(control, controlIndex); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html index 433698ab49..76a6267825 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html @@ -71,9 +71,9 @@
-
+
- +
@@ -93,51 +93,6 @@ class="td mainTd usky-cell" ng-repeat="area in row.areas" ui-sortable="sortableOptionsCell" ng-model="area.controls"> - -
-
- -
- To start, click the - below and add your first {{singleEditor.name}} -

- -
- - - -
-
- - -
- -
- To start, click the - below and add your first element -

- - -
- -
- - - -
- -
- -
-
- -
-
+ +
+ + + +
- - -
- -
- - - -
- -
-
- + + +
+
+ To start, click the + below and add your first element +

+
+
+ +
+ + + +
+ +
+
+ @@ -231,10 +199,11 @@
- +
+ {{layout.name}} @@ -256,4 +225,4 @@ - + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js index 8f31e9b021..69f1be6577 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js @@ -179,10 +179,17 @@ angular.module("umbraco") delete $scope.currentArea; }else{ if(area === undefined){ - var space = ($scope.availableLayoutSpace > 4) ? 4 : $scope.availableLayoutSpace; + var available = $scope.availableLayoutSpace; + var space = 4; + + if(available < 4 && available > 0){ + space = available; + } + area = { grid: space }; + layout.areas.push(area); } $scope.currentArea = area; @@ -199,9 +206,13 @@ angular.module("umbraco") /**************** utillities *****************/ - $scope.scaleUp = function(section, max){ + $scope.scaleUp = function(section, max, overflow){ + var add = 1; + if(overflow !== true){ + add = (max > 1) ? 1 : max; + } //var add = (max > 1) ? 1 : max; - section.grid = section.grid+1; + section.grid = section.grid+add; }; $scope.scaleDown = function(section){ var remove = (section.grid > 1) ? 1 : section.grid; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html index 8e727ba1df..ca5266fc1f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html @@ -11,18 +11,18 @@
  • -
    - -
    -
    -
    +     +
    +
    +
    -     -
    - +
    +
    {{template.name}}
    @@ -175,15 +175,20 @@
  • -
    - -
    -
    - -
    +     +
    +
    +
    -     -
    +
    + + +
    {{layout.name}}
    @@ -214,10 +219,13 @@ +
    -
    + +
    + - @@ -241,7 +249,7 @@ {{currentArea.grid}} - +
    diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap2.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap2.cshtml index ebf115c053..15523eb511 100644 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap2.cshtml +++ b/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap2.cshtml @@ -1,47 +1,78 @@ @inherits UmbracoViewPage @using Umbraco.Web.Templates -@using Newtonsoft.Json.Linq; +@using Newtonsoft.Json.Linq + +@functions { + public static MvcHtmlString RenderElementAttributes(dynamic contentItem) + { + var attrs = new List(); + JObject cfg = contentItem.config; + + if(cfg != null) + foreach (JProperty property in cfg.Properties()) + attrs.Add(property.Name + "='" + property.Value.ToString() + "'"); + + JObject style = contentItem.styles; + + if (style != null) { + var cssVals = new List(); + foreach (JProperty property in style.Properties()) + cssVals.Add(property.Name + ":" + property.Value.ToString() + ";"); + + if (cssVals.Any()) + attrs.Add("style='" + string.Join(" ", cssVals) + "'"); + } + + return new MvcHtmlString(string.Join(" ", attrs)); + } +} @if (Model != null && !string.IsNullOrEmpty(Model.ToString())) { var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0; -
    -
    - @foreach (var s in Model.sections) - { -
    - @foreach (var row in s.rows) - { -
    -
    -
    +
    +
    - @foreach (var area in row.areas) - { -
    + @foreach (var s in Model.sections){ +
    +
    +
    +
    + + + @foreach (var row in s.rows){ +
    +
    +
    + @foreach (var area in row.areas){ +
    +
    +
    - @foreach (var control in area.controls) - { - if (control != null && control.editor != null && control.editor.view != null) - { - - string editor = "grid/editors/" + control.editor.view.ToString(); - - @Html.Partial(editor, (object)control) - + @foreach (var control in area.controls){ + if (control != null && control.editor != null && control.editor.view != null){ + string editor = "grid/editors/" + control.editor.view.ToString(); + @Html.Partial(editor, (object)control) + } } - } - + +
    +
    }
    - } + } + +
    - } +
    + } +
    -} +
    +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap3.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap3.cshtml index b349ce1521..8cfd4911ba 100644 --- a/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap3.cshtml +++ b/src/Umbraco.Web.UI/Views/Partials/Grid/Bootstrap3.cshtml @@ -32,40 +32,47 @@ { var onlyOneColumn = Model.sections != null ? ((System.Collections.ICollection)Model.sections).Count : 0; -
    -
    - @foreach (var s in Model.sections) - { -
    - @foreach (var row in s.rows) - { -
    -
    -
    +
    +
    - @foreach (var area in row.areas) - { -
    + @foreach (var s in Model.sections){ +
    +
    +
    +
    + + + @foreach (var row in s.rows){ +
    +
    +
    + @foreach (var area in row.areas){ +
    +
    +
    - @foreach (var control in area.controls) - { - if (control != null && control.editor != null && control.editor.view != null) - { - - string editor = "grid/editors/" + control.editor.view.ToString(); - - @Html.Partial(editor, (object)control) - + @foreach (var control in area.controls){ + if (control != null && control.editor != null && control.editor.view != null){ + string editor = "grid/editors/" + control.editor.view.ToString(); + @Html.Partial(editor, (object)control) + } } - } + +
    +
    }
    - } + } + +
    - } +
    + } +
    -} +
    +} \ No newline at end of file