yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More visual tweaks to the grid to handle deletes

Browse Source 
also rolls back a couple of bower "tweaks" that ended up being horrible
This commit is contained in:
per ploug
2014-05-13 09:45:09 +02:00
parent 482750ab6a
commit e8f4e7663f
10 changed files with 83 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/bower.json
View File

@@ -17,6 +17,7 @@
],
"dependencies": {
"typeahead.js": "~0.10.2",
"ace-builds": "~1.1.3"
"ace-builds": "~1.1.3",
"rgrove-lazyload": "*"
}
}

4
src/Umbraco.Web.UI.Client/gruntFile.js
View File

@@ -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: '**',

0
src/Umbraco.Web.UI.Client/lib/lazyload/empty.js
View File

4
src/Umbraco.Web.UI.Client/lib/lazyload/lazyload.min.js vendored
View File

@@ -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<g;++f)j[b].push({urls:[a[f]],callback:f===g-1?c:null,obj:d,context:s})}}if(!(i[b]||!(p=i[b]=j[b].shift()))){q||(q=h.head||h.getElementsByTagName("head")[0]);a=p.urls;f=0;for(g=a.length;f<g;++f){c=a[f];if(o)c=r("link",{charset:"utf-8","class":"lazyload",href:c,rel:"stylesheet",type:"text/css"});else{c=
r("script",{charset:"utf-8","class":"lazyload",src:c});c.async=false}if(e.ie)c.onreadystatechange=function(){var t=this.readyState;if(t==="loaded"||t==="complete"){this.onreadystatechange=null;n()}};else if(o&&(e.gecko||e.webkit))if(e.webkit){p.urls[f]=c.href;u()}else setTimeout(n,50*g);else c.onload=c.onerror=n;q.appendChild(c)}}}function u(){var b=i.css,a;if(b){for(a=v.length;a&&--a;)if(v[a].href===b.urls[0]){k("css");break}l+=1;if(b)l<200?setTimeout(u,50):k("css")}}var e,q,i={},l=0,j={css:[],js:[]},
v=h.styleSheets;return{css:function(b,a,c,d){m("css",b,a,c,d)},js:function(b,a,c,d){m("js",b,a,c,d)}}}(this,this.document);

6
src/Umbraco.Web.UI.Client/src/common/directives/grid/grid.rte.directive.js
View File

@@ -17,6 +17,8 @@ angular.module("umbraco")
//we always fetch the default one, and then override parts with our own
tinyMceService.configuration().then(function (tinyMceConfig) {
//config value from general tinymce.config file
var validElements = tinyMceConfig.validElements;
var fallbackStyles = [{title: "Page header", block: "h2"}, {title: "Section header", block: "h3"}, {title: "Paragraph header", block: "h4"}, {title: "Normal", block: "p"}, {title: "Quote", block: "blockquote"}, {title: "Code", block: "code"}];
@@ -44,10 +46,10 @@ angular.module("umbraco")
}
//queue rules loading
stylesheets.push("/views/propertyeditors/grid/config/grid.default.rtestyles.css?" + new Date().getTime());
stylesheets.push("views/propertyeditors/grid/config/grid.default.rtestyles.css?" + new Date().getTime());
angular.forEach(["umbraco.grid.rte"], function (val, key) {
stylesheets.push("/css/" + val + ".css?" + new Date().getTime());
stylesheets.push("/css/" + val + ".css");
await.push(stylesheetResource.getRulesByName(val).then(function (rules) {
if(rules.length > 0){

67
src/Umbraco.Web.UI.Client/src/less/gridview.less
View File

@@ -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;
}

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.backgrounds.css
View File

@@ -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); }

9
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View File

@@ -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();

41
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -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">
<!-- Empty cell tools -->
@@ -140,29 +141,29 @@
</div>
<!-- Empty cell tools -->
<div class="cellPanel"
ng-if="cell.controls.length == 0">
<!-- Empty cell tools -->
<div class="cellPanel"
ng-if="cell.controls.length == 0">
<p class="placeholder"
ng-click="addTinyMce(cell)">
Start writing here...
</p>
<p class="placeholder"
ng-click="addTinyMce(cell)">
Start writing here...
</p>
<div class="iconBox" ng-click="addTinyMce(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableRte">
<i class="icon icon-edit"></i>
</div>
<div class="iconBox" ng-click="addTinyMce(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableRte">
<i class="icon icon-edit"></i>
</div>
<div class="iconBox" ng-click="addMedia(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableMedia">
<i class="icon icon-picture"></i>
</div>
<div class="iconBox" ng-click="addMacro(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableMacro">
<i class="icon icon-settings-alt"></i>
</div>
<div class="iconBox" ng-click="addMedia(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableMedia">
<i class="icon icon-picture"></i>
</div>
<div class="iconBox" ng-click="addMacro(cell)" ng-if="(cell.controls.length == 0 || currentCell == cell) && model.config.items.enableMacro">
<i class="icon icon-settings-alt"></i>
</div>
</div>
</div>

2
src/Umbraco.Web.UI.Client/test/config/karma.conf.js
View File

@@ -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',