From e8f4e7663fb9af4c6c9069767bea04e7812fb317 Mon Sep 17 00:00:00 2001 From: per ploug Date: Tue, 13 May 2014 09:45:09 +0200 Subject: [PATCH] More visual tweaks to the grid to handle deletes also rolls back a couple of bower "tweaks" that ended up being horrible --- src/Umbraco.Web.UI.Client/bower.json | 3 +- src/Umbraco.Web.UI.Client/gruntFile.js | 4 ++ .../lib/lazyload/empty.js | 0 .../lib/lazyload/lazyload.min.js | 4 -- .../directives/grid/grid.rte.directive.js | 6 +- .../src/less/gridview.less | 67 ++++++++++++------- .../grid/config/grid.default.backgrounds.css | 8 --- .../propertyeditors/grid/grid.controller.js | 9 +++ .../src/views/propertyeditors/grid/grid.html | 41 ++++++------ .../test/config/karma.conf.js | 2 +- 10 files changed, 83 insertions(+), 61 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/lib/lazyload/empty.js delete mode 100644 src/Umbraco.Web.UI.Client/lib/lazyload/lazyload.min.js delete mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.backgrounds.css diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index 0fcdd89b3b..5b9c05049f 100644 --- a/src/Umbraco.Web.UI.Client/bower.json +++ b/src/Umbraco.Web.UI.Client/bower.json @@ -17,6 +17,7 @@ ], "dependencies": { "typeahead.js": "~0.10.2", - "ace-builds": "~1.1.3" + "ace-builds": "~1.1.3", + "rgrove-lazyload": "*" } } diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 3fa6feeb5b..864a562a8f 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -121,6 +121,10 @@ module.exports = function (grunt) { dest: 'lib/typeahead/typeahead.bundle.min.js', src: 'bower_components/typeahead.js/dist/typeahead.bundle.min.js' }, + { + dest: 'lib/lazyload/lazyload.min.js', + src: 'bower_components/rgrove-lazyload/lazyload.js' + }, { dest: 'lib/ace/', src: '**', diff --git a/src/Umbraco.Web.UI.Client/lib/lazyload/empty.js b/src/Umbraco.Web.UI.Client/lib/lazyload/empty.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/Umbraco.Web.UI.Client/lib/lazyload/lazyload.min.js b/src/Umbraco.Web.UI.Client/lib/lazyload/lazyload.min.js deleted file mode 100644 index bc49920cfe..0000000000 --- a/src/Umbraco.Web.UI.Client/lib/lazyload/lazyload.min.js +++ /dev/null @@ -1,4 +0,0 @@ -LazyLoad=function(x,h){function r(b,a){var c=h.createElement(b),d;for(d in a)a.hasOwnProperty(d)&&c.setAttribute(d,a[d]);return c}function k(b){var a=i[b],c,d;if(a){c=a.callback;d=a.urls;d.shift();l=0;if(!d.length){c&&c.call(a.context,a.obj);i[b]=null;j[b].length&&m(b)}}}function w(){if(!e){var b=navigator.userAgent;e={async:h.createElement("script").async===true};(e.webkit=/AppleWebKit\//.test(b))||(e.ie=/MSIE/.test(b))||(e.opera=/Opera/.test(b))||(e.gecko=/Gecko\//.test(b))||(e.unknown=true)}}function m(b, -a,c,d,s){var n=function(){k(b)},o=b==="css",f,g,p;w();if(a){a=typeof a==="string"?[a]:a.concat();if(o||e.async||e.gecko||e.opera)j[b].push({urls:a,callback:c,obj:d,context:s});else{f=0;for(g=a.length;f 0){ diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less index 42385aae85..1e8cce54f1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/gridview.less +++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less @@ -99,23 +99,29 @@ } - .usky-grid .usky-row{margin-bottom: 10px;} +.usky-grid .usky-row{ + position: relative; + padding: 20px; + border: 1px dashed rgba(0,0,0,0); +} .usky-grid textarea{ display:none; } + .usky-grid .cellPanel { min-height: 100px; position: relative; text-align: center; text-align: -moz-center; cursor: text; + margin: 10px; } .usky-grid .cellPanel .placeholder{ font-size: 14px; opacity: 0.7; text-align: left; - padding: 10px; + padding: 5px; border:1px solid rgba(182, 182, 182, 0.3); } @@ -125,18 +131,27 @@ .usky-grid .cellMacro { min-height: 65px; - padding-top: 45px; + padding-top: 20px; + padding-bottom: 30px; position: relative; - background-color: rgba(100, 100, 100, 0.35); + background-color: white; + border: 2px dashed @grayLight; text-align: center; text-align: -moz-center; } .usky-grid .cellMacro .tools{ margin: auto; - font-size: 16px; + font-size: 12px; + color: @gray; } + .usky-grid .cellMacro .tools i{ + color: @grayLight; + font-size: 65px; + display: block; + margin-bottom: 10px; + } .usky-grid .controlContainer { transition: all .20s ease-in-out; @@ -145,9 +160,12 @@ position:relative; display:block; - padding: 20px; - margin-top: 10px; - border-bottom: 2px solid rgba(255, 0, 0, .0); + padding: 10px; + margin: 10px; + + border: 1px solid rgba(255, 0, 0, .0); + border-bottom-width: 2px; + -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ } @@ -155,11 +173,12 @@ .usky-grid .controlContainer:hover{ border-bottom:2px solid rgba(182, 182, 182, 0.3); } + - .usky-grid .selectedControl { - + .usky-grid .removingControl{ + border: 1px dashed @red !important; } - + .usky-grid .cellPanelRte { min-height:60px; } @@ -181,10 +200,6 @@ color: #5F5F5F; } - .usky-grid .iconBoxBig i:hover { - color: #000000; - } - .usky-grid .iconBox { padding: 2px 5px 2px 5px; display: inline-block; @@ -194,8 +209,14 @@ border:1px solid rgb(182, 182, 182); } + .usky-grid .iconBox:hover, .usky-grid .iconBox:hover *{ + background: @blue !important; + color: white !important; + } + .usky-grid .iconBox a:hover { text-decoration:none; + color: white !important; } .usky-grid .iconBox.selected { @@ -231,14 +252,7 @@ /* Row tools */ .usky-grid .row-tools { - width: 30px; - position: absolute; - border: 1px solid rgba(207, 207, 207, 0.7); - margin: 0px 0 0 -35px; - padding: 2px; - z-index: 100; - background-color: rgba(250, 250, 250, 1); - display: none; + } .usky-grid .row-tools.selected { @@ -279,7 +293,10 @@ text-align: right; z-index: 500; } - .usky-grid .cell-tools-remove:hover i:before{color: red; font-weight: normal } + + .usky-grid .cell-tools-remove .iconBox:hover, .usky-grid .cell-tools-remove .iconBox:hover *{ + background: @red !important; + } .usky-grid .div-macro { display: inline-table; @@ -385,7 +402,7 @@ } .usky-grid .usky-column { - padding:20px 20px 20px 20px; + padding:10px; margin-left:-1px; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.backgrounds.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.backgrounds.css deleted file mode 100644 index a1a5adab11..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.backgrounds.css +++ /dev/null @@ -1,8 +0,0 @@ -.background-content-approved-color-1 { background-color: rgba(52, 52, 52, 1); } -.background-content-approved-color-2 { background-color: rgba(52, 52, 52, 0.4); } -.background-content-approved-color-3 { background-color: rgba(227, 227, 227, 1); } -.background-content-approved-color-4 { background-color: rgba(248, 248, 248, 1); } -.background-content-approved-color-5 { background-color: rgba(230, 126, 34, 1); } -.background-content-approved-color-6 { background-color: rgba(158, 22, 23, 1); } -.background-content-approved-color-7 { background-color: rgba(138, 198, 10, 1); } -.background-content-approved-color-8 { background-color: rgba(24, 94, 101, 1); } 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 3b7207a8f3..d4901b2572 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 @@ -267,6 +267,15 @@ angular.module("umbraco") $scope.currentToolsControl = null; } + $scope.setCurrentRemoveControl = function (Control) { + $scope.currentRemoveControl = Control; + } + + $scope.disableCurrentRemoveControl = function (Control) { + $scope.currentRemoveControl = null; + } + + $scope.setUniqueId = function (cell, index) { var date = new Date(); 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 8c19015b8d..1a2091dbcc 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 @@ -62,7 +62,8 @@ toolsControl:currentToolsControl == control, selectedControl:currentControl == control || isOpenRTEToolbar(control), jumbotron:row.boxed}" - ng-mouseover="setCurrentControl(control)" ng-mouseleave="disableCurrentControl(control)" + ng-mouseover="setCurrentControl(control)" + ng-mouseleave="disableCurrentControl(control)" class="controlContainer"> @@ -140,29 +141,29 @@ - -
- + +
+ -

- Start writing here... -

+

+ Start writing here... +

-
- -
+
+ +
-
- -
- -
- -
+
+ +
+ +
+ +
-
+
diff --git a/src/Umbraco.Web.UI.Client/test/config/karma.conf.js b/src/Umbraco.Web.UI.Client/test/config/karma.conf.js index ee11484bf6..d7d5786246 100644 --- a/src/Umbraco.Web.UI.Client/test/config/karma.conf.js +++ b/src/Umbraco.Web.UI.Client/test/config/karma.conf.js @@ -7,7 +7,7 @@ module.exports = function(karma) { // list of files / patterns to load in the browser files: [ - 'lib/jquery/dist/jquery.min.js', + 'lib/jquery/jquery-2.0.3.min.js', 'lib/angular/1.1.5/angular.js', 'lib/angular/1.1.5/angular-cookies.min.js', 'lib/angular/1.1.5/angular-mocks.js',