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

Adjust grid editor layout configuration (#9887)

Browse Source 
* Fix wrong end closing tag

* Add button type attribute

* Assign null instead of undefined

* Left align text in row button

* Assign temporary rows to currentLayout

* Cleanup output

* Register functions in vm

* Move nameChanged property to init function

* Don't set toggled as checked when switching columns in row

* Use existing behaviour to set allowAll

* Remove vm.layout again

* copy rows when adding new section + clean up rows on submit and close

Co-authored-by: Niels Lyngsø <nsl@umbraco.com>
Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Bjarne Fyrstenborg
2021-05-07 10:23:19 +02:00
committed by GitHub
parent 6e16550b84
commit aaa13303b2
4 changed files with 149 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
View File

@@ -4,10 +4,37 @@ angular.module("umbraco")
var vm = this;
vm.toggleAllowed = toggleAllowed;
vm.configureSection = configureSection;
vm.deleteSection = deleteSection;
vm.selectRow = selectRow;
vm.percentage = percentage;
vm.scaleUp = scaleUp;
vm.scaleDown = scaleDown;
vm.close = close;
vm.submit = submit;
vm.labels = {};
function init() {
$scope.currentLayout = $scope.model.currentLayout;
$scope.columns = $scope.model.columns;
$scope.rows = $scope.model.rows;
$scope.currentSection = null;
// Setup copy of rows on sections
if ($scope.currentLayout && $scope.currentLayout.sections) {
$scope.currentLayout.sections.forEach(section => {
section.rows = Utilities.copy($scope.rows);
// Check if rows are selected
section.rows.forEach(row => {
row.selected = section.allowed && section.allowed.includes(row.name);
});
});
}
var labelKeys = [
"grid_addGridLayout",
"grid_allowAllRowConfigurations"
@@ -28,46 +55,43 @@ angular.module("umbraco")
}
}
$scope.currentLayout = $scope.model.currentLayout;
$scope.columns = $scope.model.columns;
$scope.rows = $scope.model.rows;
$scope.currentSection = undefined;
$scope.scaleUp = function(section, max, overflow){
function scaleUp(section, max, overflow){
var add = 1;
if(overflow !== true){
add = (max > 1) ? 1 : max;
if (overflow !== true){
add = (max > 1) ? 1 : max;
}
//var add = (max > 1) ? 1 : max;
section.grid = section.grid+add;
};
}
$scope.scaleDown = function(section){
function scaleDown(section){
var remove = (section.grid > 1) ? 1 : 0;
section.grid = section.grid-remove;
};
}
$scope.percentage = function(spans){
function percentage(spans){
return ((spans / $scope.columns) * 100).toFixed(8);
};
}
/****************
Section
*****************/
$scope.configureSection = function(section, template){
if(section === undefined){
function configureSection(section, template) {
if (section === null || section === undefined) {
var space = ($scope.availableLayoutSpace > 4) ? 4 : $scope.availableLayoutSpace;
section = {
grid: space
grid: space,
rows: Utilities.copy($scope.rows)
};
template.sections.push(section);
}
$scope.currentSection = section;
$scope.currentSection.allowAll = section.allowAll || !section.allowed || !section.allowed.length;
};
}
$scope.toggleAllowed = function (section) {
section.allowAll = section.allowAll || !section.allowed || !section.allowed.length;
$scope.currentSection = section;
}
function toggleAllowed(section) {
section.allowAll = !section.allowAll;
if (section.allowed) {
@@ -76,21 +100,22 @@ angular.module("umbraco")
else {
section.allowed = [];
}
};
}
$scope.deleteSection = function(section, template) {
function deleteSection(section, template) {
if ($scope.currentSection === section) {
$scope.currentSection = undefined;
$scope.currentSection = null;
}
var index = template.sections.indexOf(section)
template.sections.splice(index, 1);
};
}
function selectRow(section, row) {
$scope.selectRow = function (section, row) {
section.allowed = section.allowed || [];
var index = section.allowed.indexOf(row.name);
if (row.allowed === true) {
if (row.selected === true) {
if (index === -1) {
section.allowed.push(row.name);
}
@@ -98,22 +123,32 @@ angular.module("umbraco")
else {
section.allowed.splice(index, 1);
}
};
}
$scope.close = function() {
function close() {
if ($scope.model.close) {
cleanUpRows();
$scope.model.close();
}
};
}
$scope.submit = function () {
function submit() {
if ($scope.model.submit) {
cleanUpRows();
$scope.model.submit($scope.currentLayout);
}
};
}
function cleanUpRows () {
$scope.currentLayout.sections.forEach(section => {
if (section.rows) {
delete section.rows;
}
});
}
$scope.$watch("currentLayout", function(layout){
if(layout){
if (layout) {
var total = 0;
_.forEach(layout.sections, function(section){
total = (total + section.grid);

51
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
View File

@@ -34,38 +34,37 @@
<div class="tr">
<button type="button" class="btn-reset td uSky-templates-column"
ng-class="{last:$last, selected:section==currentSection}"
ng-class="{last: $last, selected: section == currentSection}"
ng-repeat="section in currentLayout.sections"
ng-click="configureSection(section, currentLayout)"
ng-style="{width: percentage(section.grid) +'%'}">
ng-click="vm.configureSection(section, currentLayout)"
ng-style="{width: vm.percentage(section.grid) +'%'}">
<span class="sr-only">
<localize key="grid_editGridLayout">Edit grid layout</localize>
</span>
<localize key="grid_editGridLayout">Edit grid layout</localize>
</span>
</button>
<button type="button" class="btn-reset td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
ng-click="configureSection(undefined, currentLayout)"
ng-style="{width: percentage(availableLayoutSpace) + '%'}">
ng-click="vm.configureSection(null, currentLayout)"
ng-style="{width: vm.percentage(availableLayoutSpace) + '%'}">
<i class="icon icon-add" aria-hidden="true"></i>
<span class="sr-only">
<localize key="grid_addGridLayout">Add grid layout</localize>
</span>
</a>
</button>
</div>
</div>
</div>
<div ng-if="currentSection != null" style="padding-bottom: 50px;">
<div ng-if="currentSection" style="padding-bottom: 50px;">
<umb-control-group label="@general_width">
<div class="grid-size-scaler">
<button type="button" class="btn-link" ng-click="scaleDown(currentSection)">
<button type="button" class="btn-link" ng-click="vm.scaleDown(currentSection)">
<i class="icon icon-remove" aria-hidden="true"></i>
</button>
<span>{{currentSection.grid}}</span>
<button type="button" class="btn-link"
ng-click="scaleUp(currentSection, availableLayoutSpace)">
<button type="button" class="btn-link" ng-click="vm.scaleUp(currentSection, availableLayoutSpace)">
<i class="icon icon-add" aria-hidden="true"></i>
</button>
</div>
@@ -74,7 +73,7 @@
<umb-control-group hide-label="true">
<i class="icon-delete red" aria-hidden="true"></i>
<button type="button" class="btn btn-small btn-link"
ng-click="deleteSection(currentSection, currentLayout)">
ng-click="vm.deleteSection(currentSection, currentLayout)">
<localize key="general_delete" class="ng-isolate-scope ng-scope">Delete
</localize>
</button>
@@ -85,7 +84,7 @@
<umb-toggle
class="umb-toggle-group-item__toggle"
checked="currentSection.allowAll"
on-click="toggleAllowed(currentSection)"
on-click="vm.toggleAllowed(currentSection)"
show-labels="true"
label-position="right"
label-off="Allow all row configurations"
@@ -99,25 +98,25 @@
<div class="control-group uSky-templates-rows">
<ul class="unstyled">
<li ng-repeat="row in rows track by $id(row)">
<li ng-repeat="row in currentSection.rows track by $id(row)">
<div class="flex">
<umb-checkbox model="row.allowed"
<umb-checkbox model="row.selected"
input-id="rowconfig-{{$index}}"
on-change="selectRow(currentSection, row)">
on-change="vm.selectRow(currentSection, row)">
</umb-checkbox>
<button
ng-click="row.allowed = !row.allowed; selectRow(currentSection, row)"
class="btn-reset flex flex-auto">
<button type="button"
class="btn-reset flex flex-auto tl"
ng-click="row.selected = !row.selected; vm.selectRow(currentSection, row)">
<span class="preview-rows columns" style="margin-top: auto;">
<span class="preview-row">
<span class="preview-col"
ng-class="{last:$last}"
ng-repeat="area in row.areas"
ng-style="{width: percentage(area.grid) + '%'}">
ng-class="{last:$last}"
ng-repeat="area in row.areas"
ng-style="{width: vm.percentage(area.grid) + '%'}">
<span class="preview-cell"></span>
</span>
@@ -125,7 +124,7 @@
</span>
<span>
{{row.name}}<br/>
{{row.name}}<br />
<small>{{row.areas.length}} cells</small>
</span>
</button>
@@ -153,13 +152,13 @@
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
action="vm.close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="submit()">
action="vm.submit()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>

71
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
View File

@@ -2,10 +2,26 @@ function RowConfigController($scope, localizationService) {
var vm = this;
vm.configureCell = configureCell;
vm.closeArea = closeArea;
vm.deleteArea = deleteArea;
vm.selectEditor = selectEditor;
vm.toggleAllowed = toggleAllowed;
vm.percentage = percentage;
vm.scaleUp = scaleUp;
vm.scaleDown = scaleDown;
vm.close = close;
vm.submit = submit;
vm.labels = {};
function init() {
$scope.currentRow = $scope.model.currentRow;
$scope.columns = $scope.model.columns;
$scope.editors = $scope.model.editors;
$scope.nameChanged = false;
var labelKeys = [
"grid_addRowConfiguration",
"grid_allowAllEditors"
@@ -25,12 +41,8 @@ function RowConfigController($scope, localizationService) {
$scope.model.title = value;
}
}
$scope.currentRow = $scope.model.currentRow;
$scope.columns = $scope.model.columns;
$scope.editors = $scope.model.editors;
$scope.scaleUp = function(section, max, overflow) {
function scaleUp(section, max, overflow) {
var add = 1;
if (overflow !== true) {
add = (max > 1) ? 1 : max;
@@ -39,19 +51,19 @@ function RowConfigController($scope, localizationService) {
section.grid = section.grid + add;
};
$scope.scaleDown = function(section) {
function scaleDown(section) {
var remove = (section.grid > 1) ? 1 : 0;
section.grid = section.grid - remove;
};
}
$scope.percentage = function(spans) {
function percentage(spans) {
return ((spans / $scope.columns) * 100).toFixed(8);
};
}
/****************
area
*****************/
$scope.configureCell = function(cell, row) {
function configureCell(cell, row) {
if ($scope.currentCell && $scope.currentCell === cell) {
delete $scope.currentCell;
}
@@ -75,12 +87,13 @@ function RowConfigController($scope, localizationService) {
$scope.editors.forEach(function (e) { e.allowed = cell.allowed.indexOf(e.alias) !== -1 });
$scope.currentCell = cell;
$scope.currentCell.allowAll = cell.allowAll || !cell.allowed || !cell.allowed.length;
}
};
cell.allowAll = cell.allowAll || !cell.allowed || !cell.allowed.length;
$scope.toggleAllowed = function (cell) {
$scope.currentCell = cell;
}
}
function toggleAllowed(cell) {
cell.allowAll = !cell.allowAll;
if (cell.allowed) {
@@ -89,21 +102,22 @@ function RowConfigController($scope, localizationService) {
else {
cell.allowed = [];
}
};
}
$scope.deleteArea = function (cell, row) {
function deleteArea(cell, row) {
if ($scope.currentCell === cell) {
$scope.currentCell = null;
}
var index = row.areas.indexOf(cell)
row.areas.splice(index, 1);
};
}
$scope.closeArea = function() {
// This doesn't seem to be used?
function closeArea() {
$scope.currentCell = null;
};
}
$scope.selectEditor = function (cell, editor) {
function selectEditor(cell, editor) {
cell.allowed = cell.allowed || [];
var index = cell.allowed.indexOf(editor.alias);
@@ -115,22 +129,20 @@ function RowConfigController($scope, localizationService) {
else {
cell.allowed.splice(index, 1);
}
};
}
$scope.close = function () {
function close () {
if ($scope.model.close) {
$scope.model.close();
}
};
}
$scope.submit = function () {
function submit() {
if ($scope.model.submit) {
$scope.model.submit($scope.currentRow);
}
};
}
$scope.nameChanged = false;
var originalName = $scope.currentRow.name;
$scope.$watch("currentRow", function(row) {
if (row) {
@@ -141,6 +153,7 @@ function RowConfigController($scope, localizationService) {
$scope.availableRowSpace = $scope.columns - total;
var originalName = $scope.currentRow.name;
if (originalName) {
if (originalName != row.name) {
$scope.nameChanged = true;

26
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
View File

@@ -41,10 +41,10 @@
<div class="tr">
<button type="button" class="btn-reset td uSky-templates-column"
ng-class="{last:$last, selected:cell==currentCell}"
ng-repeat="cell in currentRow.areas"
ng-click="configureCell(cell, currentRow)"
ng-style="{width: percentage(cell.grid) + '%'}">
ng-class="{last: $last, selected: cell == currentCell}"
ng-repeat="cell in currentRow.areas"
ng-click="vm.configureCell(cell, currentRow)"
ng-style="{width: vm.percentage(cell.grid) + '%'}">
<span class="sr-only">
<span class="sr-only">
<localize key="grid_editRowConfiguration">Edit row configuration</localize>
@@ -53,8 +53,8 @@
</button>
<button type="button" class="btn-reset td uSky-templates-column add"
ng-click="configureCell(null, currentRow)"
ng-style="{width: percentage(availableRowSpace) + '%'}">
ng-click="vm.configureCell(null, currentRow)"
ng-style="{width: vm.percentage(availableRowSpace) + '%'}">
<i class="icon icon-add" aria-hidden="true"></i>
<span class="sr-only">
<localize key="grid_addRowConfiguration">Add row configuration</localize>
@@ -68,11 +68,11 @@
<umb-control-group label="@general_width">
<div class="grid-size-scaler">
<button type="button" class="btn-link" ng-click="scaleDown(currentCell)">
<button type="button" class="btn-link" ng-click="vm.scaleDown(currentCell)">
<i class="icon icon-remove" aria-hidden="true"></i>
</button>
<span>{{currentCell.grid}}</span>
<button type="button" class="btn-link" ng-click="scaleUp(currentCell, availableRowSpace, true)">
<button type="button" class="btn-link" ng-click="vm.scaleUp(currentCell, availableRowSpace, true)">
<i class="icon icon-add" aria-hidden="true"></i>
</button>
</div>
@@ -84,7 +84,7 @@
<umb-control-group hide-label="true">
<i class="icon-delete red" aria-hidden="true"></i>
<button type="button" class="btn btn-small btn-link" ng-click="deleteArea(currentCell, currentRow)">
<button type="button" class="btn btn-small btn-link" ng-click="vm.deleteArea(currentCell, currentRow)">
<localize key="general_delete" class="ng-isolate-scope ng-scope">Delete</localize>
</button>
</umb-control-group>
@@ -93,7 +93,7 @@
<umb-toggle class="umb-toggle-group-item__toggle"
checked="currentCell.allowAll"
on-click="toggleAllowed(currentCell)"
on-click="vm.toggleAllowed(currentCell)"
show-labels="true"
label-position="right"
label-off="{{vm.labels.allowAllEditors}}"
@@ -108,7 +108,7 @@
<umb-checkbox model="editor.allowed"
input-id="editorconfig-{{$index}}"
on-change="selectEditor(currentCell, editor)">
on-change="vm.selectEditor(currentCell, editor)">
<i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
<small class="input-label--small">({{editor.alias}})</small>
</umb-checkbox>
@@ -132,13 +132,13 @@
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
action="vm.close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="submit()">
action="vm.submit()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>