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

Fixes U4-7438 Grid - Sorting of controls/editors

Browse Source
This commit is contained in:
Rune Strand
2015-11-25 21:15:09 +01:00
parent 66ee3503a5
commit 3a5d7f0442
2 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ angular.module("umbraco")
var draggedRteSettings;
$scope.sortableOptions = {
$scope.sortableOptionsRow = {
distance: 10,
cursor: "move",
placeholder: "ui-sortable-placeholder",
@@ -46,8 +46,8 @@ angular.module("umbraco")
start: function (e, ui) {
// Fade out row when sorting
ui.item.context.style.opacity = "0.5";
ui.item.context.style.display = "block";
ui.item.context.style.opacity = "0.5";
draggedRteSettings = {};
ui.item.find(".mceNoEditor").each(function () {
@@ -81,6 +81,7 @@ angular.module("umbraco")
cursor: "move",
placeholder: "ui-sortable-placeholder",
handle: ".umb-control-bar",
helper: "clone",
connectWith: ".umb-cell-content",
forcePlaceholderSize: true,
tolerance: "pointer",
@@ -140,6 +141,11 @@ angular.module("umbraco")
},
start: function (e, ui) {
// fade out control when sorting
ui.item.context.style.display = "block";
ui.item.context.style.opacity = "0.5";
// reset dragged RTE settings in case a RTE isn't dragged
draggedRteSettings = undefined;
ui.item.context.style.display = "block";
@@ -155,6 +161,10 @@ angular.module("umbraco")
},
stop: function (e, ui) {
// Fade in control when sorting stops
ui.item.context.style.opacity = "1";
ui.item.parents(".umb-cell-content").find(".mceNoEditor").each(function () {
if ($.inArray($(this).attr("id"), notIncludedRte) < 0) {
// add all dragged's neighbouring RTEs in the new cell

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

@@ -35,6 +35,7 @@
</div> <!-- .templates-preview -->
<!-- template picker end -->
<!-- Grids -->
<div class="umb-grid-width">
<div class="tb">
@@ -45,7 +46,7 @@
ng-init="initSection(section)"
ng-style="{width: section.$percentage + '%'}">
<div ui-sortable="sortableOptions" ng-model="section.rows">
<div ui-sortable="sortableOptionsRow" ng-model="section.rows">
<!-- for each row in template section -->
<!-- ng-mouseenter="setCurrentRow(row)" -->
@@ -59,8 +60,6 @@
'-active-child': hasActiveChild(row, 'row')}"
on-outside-click="clickOutsideRow($index, section.rows)">
<div class="umb-row-title-bar">
<div class=".umb-grid-right">
@@ -108,7 +107,7 @@
'-has-config' :hasConfig(area),
'-active': area.active,
'-active-child': hasActiveChild(area, 'cell')}"
ng-model="area.controls"
ng-model="area.controls"
ng-click="clickCell($index, row.areas)"
on-outside-click="clickOutsideCell($index, row.areas)">
@@ -120,8 +119,7 @@
<!-- Cell with editors -->
<div class="umb-cell-content -has-editors"
ng-if="area.controls.length > 0"
ng-class="{'-active': area.active}"
ui-sortable="sortableOptionsCell">
ng-class="{'-active': area.active}">
<div class="umb-grid-has-config" ng-if="hasConfig(area)">
Styles is applied
@@ -133,54 +131,57 @@
</div>
</div>
<!-- Controls in areas -->
<div
class="umb-control"
ng-repeat="control in area.controls"
ng-click="clickControl($index, area.controls)"
ng-class="{'-active': control.active}"
on-outside-click="clickOutsideControl($index, area.controls)">
<div ui-sortable="sortableOptionsCell" ng-model="area.controls">
<div class="umb-control-click-overlay" ng-show="!control.active"></div>
<!-- for each control in areas -->
<div class="umb-control"
ng-repeat="control in area.controls"
ng-click="clickControl($index, area.controls)"
ng-class="{'-active': control.active}"
on-outside-click="clickOutsideControl($index, area.controls)">
<div class="umb-control-inner">
<div class="umb-control-click-overlay" ng-show="!control.active"></div>
<div class="umb-control-bar">
<div class="umb-control-inner">
<div class="umb-control-title" ng-if="control.active">
{{control.editor.name}}
</div>
<div class="umb-control-bar">
<div class="umb-tools" ng-if="control.active">
<div class="umb-control-title" ng-if="control.active">
{{control.editor.name}}
</div>
<div class="umb-control-tool">
<i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)"></i>
<umb-confirm-action
ng-if="control.deletePrompt"
direction="left"
on-confirm="removeControl(area, $index)"
on-cancel="hidePrompt(control)">
</umb-confirm-action>
</div>
<div class="umb-tools" ng-if="control.active">
</div>
<div class="umb-control-tool">
<i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)"></i>
<umb-confirm-action
ng-if="control.deletePrompt"
direction="left"
on-confirm="removeControl(area, $index)"
on-cancel="hidePrompt(control)">
</umb-confirm-action>
</div>
</div>
</div>
<!-- Redering the editor for specific control -->
<div ng-if="control && control.$editorPath"
ng-include="control.$editorPath"
class="umb-cell-{{control.editor.view}}">
</div>
</div>
<!-- Redering the editor for specific control -->
<div ng-if="control && control.$editorPath"
ng-include="control.$editorPath"
class="umb-cell-{{control.editor.view}}">
</div>
</div>
</div>
</div>
<!-- Controls repeat end -->
<!-- if area is empty tools -->
<div class="umb-grid-add-more-content">
<div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">+ Add content</div>
</div>
</div>
<!-- Controls repeat end -->
<!-- if area is empty tools -->
<div class="umb-grid-add-more-content">
<div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">+ Add content</div>
</div>
</div>