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

style control bars + add outside click to deselect controls and cells

Browse Source
This commit is contained in:
Mads Rasmussen
2015-11-16 10:57:06 +01:00
parent b6b3dee8ed
commit 4bc5bb9c64
3 changed files with 61 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -177,6 +177,11 @@
border-color: @blue;
}
.umb-grid .umb-cell-tool {
}
/*
.umb-grid .cell-tools {
transition: all .20s ease-in-out;
-moz-transition: all .20s ease-in-out;
@@ -199,6 +204,7 @@
.umb-grid .cell-tools:hover{
opacity: 1;
}
*/
.umb-grid .cell-tools-add {
color: @blue;
@@ -665,16 +671,33 @@
.umb-grid .umb-control-bar {
opacity: 0;
background: @blue;
padding: 2px 10px;
display: block;
padding: 2px 5px;
color: #ffffff;
font-size: 10px;
height: 0;
display: flex;
transition: height 0.1s ease-in, opacity 0.1s ease-in;
align-items: center;
}
.umb-grid .umb-control-title {
display: flex;
align-items: center;
}
.umb-grid .umb-control.-active .umb-control-bar {
opacity: 1;
height: 25px;
}
.umb-grid .umb-control-tools {
margin-left: auto;
}
.umb-grid .umb-control-tool {
font-size: 16px;
margin-right: 5px;
}
/**************************************************************************************************/

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

@@ -213,9 +213,14 @@ angular.module("umbraco")
// Row management function
// *********************************************
$scope.clickRow = function (row) {
$scope.clickRow = function (row, event) {
$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentControl = null;
$scope.currentRow = row;
event.stopPropagation();
};
$scope.setWarnighlightRow = function (row) {
@@ -305,9 +310,16 @@ angular.module("umbraco")
// Area management functions
// *********************************************
$scope.clickCell = function (cell) {
$scope.clickCell = function (cell, row, event) {
$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentControl = null;
$scope.currentRow = row;
$scope.currentCell = cell;
event.stopPropagation();
};
$scope.setCurrentCell = function (cell) {
@@ -339,9 +351,16 @@ angular.module("umbraco")
// *********************************************
// Control management functions
// *********************************************
$scope.clickControl = function (control) {
$scope.clickControl = function (control, cell, row, event) {
$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentControl = null;
$scope.currentRow = row;
$scope.currentCell = cell;
$scope.currentControl = control;
event.stopPropagation();
};
$scope.disableCurrentControl = function (Control) {
@@ -403,6 +422,9 @@ angular.module("umbraco")
index = cell.controls.length;
}
$scope.currentControl = null;
$scope.currentControl = newControl;
//populate control
$scope.initControl(newControl, index + 1);

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

@@ -54,7 +54,7 @@
<!-- ng-mouseleave="disableCurrentRow()" -->
<div class="umb-row"
ng-repeat="row in section.rows"
ng-click="clickRow(row)"
ng-click="clickRow(row, $event)"
ng-class="{'-active': currentRow === row}">
<div class="umb-row-title-bar">
@@ -128,7 +128,7 @@
'-active': currentCell == area}"
ui-sortable="sortableOptionsCell"
ng-model="area.controls"
ng-click="clickCell(area)">
ng-click="clickCell(area, row, $event)">
<!-- Cell placeholder -->
<div class="umb-cell-content -placeholder"
@@ -146,18 +146,17 @@
<!-- ng-mouseover="setCurrentControl(control)" -->
<!-- ng-mouseleave="disableCurrentControl(control)" -->
<div ng-repeat="control in area.controls"
ng-click="clickControl(control)"
ng-click="clickControl(control, area, row, $event)"
ng-class="{'-active': currentControl === control}"
ng-animate="'fade'"
class="umb-control">
<!-- Filled cell tools -->
<!-- Filled cell tools
<div class="cell-tools"
ng-class="{'with-prompt': control.deletePrompt}"
ng-animate="'fade'"
ng-if="control && (currentControl == control)">
<!-- delete control -->
<div class="cell-tools-remove">
<div class="iconBox"
ng-click="showPrompt(control)"
@@ -174,7 +173,6 @@
</div>
</div>
<!-- move control -->
<div class="cell-tools-move">
<a class="iconBox"
ng-mouseover="setInfohighlightControl(control)"
@@ -184,7 +182,6 @@
</a>
</div>
<!-- setting area -->
<div class="cell-tools-edit" ng-if="hasSettings && $first">
<a class="iconBox"
ng-mouseover="setInfohighlightArea(area)"
@@ -196,6 +193,7 @@
</div>
</div>
-->
<div class="umb-control-inner" ng-class="{last:$last,
infohighlight:currentInfohighlightControl == control,
@@ -205,11 +203,16 @@
<div class="umb-control-bar">
<div class="umb-control-title">
<div class="umb-control-tool">
<i class="umb-control-tool-icon icon-navigation"></i>
</div>
{{control.editor.name}}
</div>
<div class="umb-control-tools">
<div class="umb-control-tool" ng-click="removeControl(area, $index)">
<i class="umb-control-tool-icon icon-trash"></i>
</div>
</div>
</div>