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

Gridview design polish

Browse Source
This commit is contained in:
per ploug
2014-09-11 14:50:05 +02:00
parent a3ad8e2cab
commit 5d2ac582b7
6 changed files with 228 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,6 +58,7 @@
float:right;
}
// general layout components
// -------------------------
.usky-grid .tb {
@@ -124,6 +125,9 @@
border: 1px dashed rgba(0,0,0,0);
}
.usky-grid .tb:hover .usky-row{
border-bottom:1px dashed rgba(182, 182, 182, 0.3);
}
/*.usky-grid .selectedRow {
border: 1px solid rgba(182, 182, 182, 0.3);
@@ -146,8 +150,13 @@
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 150px;
opacity: 0.3;
}
.usky-grid .cell-tools:hover{
opacity: 1;
}
.usky-grid .cell-tools-add {
@@ -157,36 +166,19 @@
left: 0;
right: 0;
z-index: 500;
opacity: 0.3;
}
.usky-grid .cell-tools-add-single i{
font-size: 85px;
color: @grayLight;
display: block;
line-height: 55px;
margin-bottom: 10px;
.usky-grid .usky-control:hover .cell-tools-add{
opacity: 1;
}
.usky-grid .cell-tools-add-single a:hover i{color: @gray;}
.usky-grid .cell-tools-add-single a{text-decoration: none;}
.usky-grid .cell-tools-add-single p{
display: none;
}
.usky-grid .single-editor-rte p{
display: block;
}
.usky-grid .single-editor-rte i, .usky-grid .single-editor-rte div{
display: none;
}
.usky-grid .cell-tools-remove {
display:inline-block;
position: absolute;
top: -20px;
right: -20px;
top: 0px;
right: 5px;
text-align: right;
z-index: 500;
}
@@ -199,8 +191,8 @@
.usky-grid .cell-tools-move {
display:inline-block;
position: absolute;
top: 20px;
right: -20px;
top: 40px;
right: 5px;
z-index: 500;
cursor: move
}
@@ -216,17 +208,20 @@
position:relative;
display:block;
/*
border: 1px dashed rgba(255, 0, 0, .0);
border-bottom-width: 1px;
*/
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
margin: 10px 0 0 0;
}
.usky-grid .usky-control:hover{
/*border: 1px solid rgba(182, 182, 182, 0.3);*/
border-bottom: 1px solid rgba(182, 182, 182, 0.3);
//border-bottom: 1px solid rgba(182, 182, 182, 0.3);
}
.usky-grid .usky-control-placeholder:hover{
@@ -234,15 +229,17 @@
border-bottom:1px solid rgba(182, 182, 182, 0.0) !important;
}
.usky-grid .removingControl{
.usky-grid .warnhighlight{
border: 1px dashed @red !important;
}
.usky-grid .movingControl{
.usky-grid .infohighlight{
border: 1px dashed @blue !important;
}
.usky-grid .usky-control-inner{
min-height: 60px;
}
@@ -262,6 +259,7 @@
border:1px solid rgba(182, 182, 182, 0.3);
height: 50px;
}
.usky-grid .usky-control-placeholder:hover .placeholder{
border:1px solid rgba(182, 182, 182, 0.8);
}
@@ -301,7 +299,6 @@
border: none;
background: #fff;
outline: none;
width: 98%;
resize: none;
color: @gray;
}
@@ -320,17 +317,6 @@
resize: none;
font-style: italic;
}
.usky-grid .cellPanelRte {
min-height:60px;
@@ -501,7 +487,7 @@
}
.usky-grid .usky-control{
margin: 15px 30px 0px 10px;
margin: 10px 0 0 0;
padding: 5px;
}
@@ -509,6 +495,18 @@
margin-top: 30px;
}
.usky-grid .usky-row-inner{
margin-right: 45px;
border: 1px dashed transparent;
}
.usky-grid .usky-control-inner{
padding: 5px;
margin-right: 45px;
margin-bottom: 10px;
border: 1px dashed transparent;
}
/**************************************************************************************************/
/* template */
@@ -598,6 +596,69 @@
}
/**************************************************************************************************/
/* overlay */
/**************************************************************************************************/
.usky-grid .cell-tools-menu{
position: absolute;
width: 360px;
height: 380px;
overflow: auto;
border: 1px solid #ccc;
margin-top: -190px;
margin-left: -150px;
background: white;
padding: 7px;
top: 0;
left: 50%;
z-index: 666;
-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);
}
.usky-grid .cell-tools-menu h5{
border-bottom: 1px solid #d9d9d9;
color: #999;
padding: 10px;
margin-top: 0;
}
.usky-grid .elements{
display: block;
padding: 0;
margin: 0;
}
.usky-grid .elements li{
display: inline-block;
width: 90px;
height: 80px;
margin: 5px;
padding: 5px;
overflow: hidden;
font-size: 11px;
}
.usky-grid .elements li:hover, .usky-grid .elements li:hover *{
background: #2e8aea;
color: white;
}
.usky-grid .elements a{
color: #222;
text-decoration: none;
}
.usky-grid .elements i{
font-size: 30px;
line-height: 50px;
color: #999;
display: block
}
/**************************************************************************************************/
/* Configuration specific styles */

17
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="cell-tools-menu"
ng-style="overlayMenu.style"
ng-mouseleave="closeItemOverlay()">
<h5>Insert control</h5>
<ul class="elements">
<li ng-repeat="editor in area.$allowedEditors">
<a ng-click="addControl(editor, overlayMenu.area, overlayMenu.$index)" href>
<i class="icon {{editor.icon}}"></i>
{{editor.name}}</a>
<pre>{{editor}}</pre>
</li>
</ul>
</div>

5
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
View File

@@ -1,3 +1,6 @@
<div ng-controller="Umbraco.PropertyEditors.Grid.TextStringController">
<textarea class="textstring" id="{{control.uniqueId}}_text" ng-keyup="adjustSize($event)" ng-model="control.value" style="{{control.editor.config.style}}" placeholder="Write here..."></textarea>
<textarea
class="textstring input-block-level" id="{{control.uniqueId}}_text"
ng-keyup="adjustSize($event)" ng-model="control.value"
style="{{control.editor.config.style}}" placeholder="Write here..."></textarea>
</div>

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

@@ -111,6 +111,42 @@ angular.module("umbraco")
}
// *********************************************
// Add items overlay menu
// *********************************************
$scope.overlayMenu = {
show: false,
style: {},
area: undefined,
key: undefined
};
$scope.addItemOverlay = function(event, area, index, key){
$scope.overlayMenu.area = area;
$scope.overlayMenu.index = index;
$scope.overlayMenu.style = {};
$scope.overlayMenu.key = key;
//todo calculate position...
var offset = $(event.target).offset();
var height = $(window).height();
var width = $(window).width();
if((height-offset.top) < 250){
$scope.overlayMenu.style.bottom = 0;
$scope.overlayMenu.style.top = "initial";
}else if(offset.top < 300){
$scope.overlayMenu.style.top = 190;
}
$scope.overlayMenu.show = true;
};
$scope.closeItemOverlay = function(){
$scope.currentControl = undefined;
$scope.overlayMenu.show = false;
$scope.overlayMenu.key = undefined;
};
// *********************************************
// Template management functions
@@ -254,6 +290,8 @@ angular.module("umbraco")
})();
$scope.addControl = function (editor, cell, index){
$scope.closeItemOverlay();
var newControl = {
value: null,
editor: editor
@@ -386,6 +424,7 @@ angular.module("umbraco")
//set width
area.$percentage = $scope.percentage(area.grid);
area.$uniqueId = $scope.setUniqueId();
//set editor permissions
if(!area.allowed || area.allowAll === true){

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

@@ -43,18 +43,17 @@
class="usky-row"
ng-mouseover="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()"
ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMovedRow == row, selectedRow:currentRow == row && currentControl === null}">
ng-class="{'selectedControl':currentRow == row && currentControl === null}">
<!-- Row tool -->
<div class="row-tools" ng-animate="'fade'"
ng-if="currentRow == row && currentControl === null">
<div class="row-tools" ng-animate="'fade'" ng-if="currentRow == row && currentControl === null">
<!-- delete row -->
<div class="cell-tools-remove">
<div class="iconBox"
ng-click="deletePrompt = true"
ng-mouseover="setCurrentRemoveControl(row)"
ng-mouseleave="disableCurrentRemoveControl(row)">
ng-mouseover="disableCurrentRemoveControl(row)">
<span ng-if="deletePrompt">
Are you sure?
@@ -75,9 +74,8 @@
</div>
<!-- row container -->
<div ng-class="{last:$index==model.value.length-1,first:$first}"
class="{{row.cssClass}} mainContainer">
<div class="{{row.cssClass}} mainContainer usky-row-inner"
ng-class="{last:$last,first:$first,warnhighlight:currentRemoveControl == row, infohighlight:currentMovedRow == row}">
<div class="mainTb">
<div class="tb">
<div class="tr">
@@ -96,65 +94,55 @@
ng-init="singleEditor = area.$allowedEditors[0]"
class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
<a href ng-click="addControl(singleEditor, area)">
<i class="icon {{singleEditor.icon}}"></i>
<div class="help-text">{{singleEditor.name}}</div>
</a>
<div class="help-text" style="margin-bottom: 15px">
To start, click the <i class=" icon {{singleEditor.icon}} blue">
</i> below and add your first {{singleEditor.name}}
</div><br/>
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
Start writing here...
</p>
<div class="iconBox">
<a href ng-click="addControl(singleEditor, area)">
<i class="icon {{singleEditor.icon}}"></i>
</a>
</div>
</div>
<div ng-if="!area.allowed || area.allowed.length > 1">
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)">
Start writing here...
</p>
<div class="help-text" style="margin-bottom: 15px">
To start, click the <i class=" icon icon-add blue">
</i> below and add your first element
</div><br/>
<div class="cell-tools-add">
<div class="iconBox"
ng-repeat="editor in area.$allowedEditors track by editor.alias"
ng-click="addControl(editor,area)">
<i class="icon {{editor.icon}}"></i>
<div class="cell-tools-add"
ng-if="!currentToolsControl"
ng-animate="'fade'">
<div class="iconBox">
<a href ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
<i class=" icon icon-add"></i>
</a>
</div>
<div ng-if="overlayMenu.show && overlayMenu.key == area.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
</div>
</div>
</div>
<!-- Controls in cell -->
<div ng-repeat="control in area.controls"
ng-class="{last:$last,
movingControl:currentMovedControl == control,
removingControl:currentRemoveControl == control,
toolsControl:currentToolsControl == control,
selectedControl:currentControl == control}"
ng-mouseover="setCurrentControl(control)"
ng-mouseleave="disableCurrentControl(control)"
ng-animate="'fade'"
class="usky-control">
<!-- Filled cell tools -->
<div class="cell-tools"
ng-animate="'fade'"
ng-if="control && ( currentControl == control)">
<div class="cell-tools-add"
ng-if="area.max === undefined || area.max < area.controls.length"
ng-mouseover="setCurrentToolsControl(control)"
ng-mouseleave="disableCurrentToolsControl(control)">
<div class="iconBox"
ng-repeat="editor in area.$allowedEditors"
ng-click="addControl(editor,area, control.$index)"
ng-show="(currentToolsControl == control)">
<i class="icon {{editor.icon}}"></i>
</div>
<div class="iconBox"
ng-if="currentToolsControl != control">
<i class=" icon icon-add"></i>
</div>
</div>
ng-show="control && (currentControl == control)">
<!-- delete cell -->
<div class="cell-tools-remove">
@@ -163,14 +151,12 @@
ng-mouseover="setCurrentRemoveControl(control)"
ng-mouseleave="disableCurrentRemoveControl(control)">
<span ng-if="deletePrompt">
Are you sure?
<a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
</span>
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
<span ng-show="deletePrompt">
Are you sure?
<a href style="text-decoration: underline" ng-click="removeControl(area, $index)">Yes</a>
</span>
<i ng-show="!deletePrompt" class="icon icon-trash"></i>
</div>
</div>
@@ -185,10 +171,29 @@
</div>
<!-- Redering the editor for specific control -->
<div ng-if="control && control.$editorPath"
ng-include="control.$editorPath"
class="usky-cell usky-cell-{{control.editor.view}}">
<div class="usky-control-inner" ng-class="{last:$last,
infohighlight:currentMovedControl == control,
warnhighlight:currentRemoveControl == control,
selectedControl:currentControl == control}">
<!-- Redering the editor for specific control -->
<div ng-if="control && control.$editorPath"
ng-include="control.$editorPath"
class="usky-cell usky-cell-{{control.editor.view}}">
</div>
</div>
<!-- add stuff -->
<div class="cell-tools-add"
ng-if="!currentToolsControl && control===currentControl && (area.max === undefined || area.max < area.controls.length)"
ng-animate="'fade'">
<div class="iconBox">
<a href ng-click="addItemOverlay($event, area, control.$index, control.$uniqueId)">
<i class=" icon icon-add"></i>
</a>
</div>
<div ng-if="overlayMenu.show && overlayMenu.key == control.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
</div>
</div>