Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust grid editor layout configuration #9887

Merged
merged 13 commits into from
May 7, 2021
Merged

Adjust grid editor layout configuration #9887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
71c6a84
Fix wrong end closing tag
bjarnef Feb 23, 2021
5e746bc
Add button type attribute
bjarnef Feb 23, 2021
db2ca0f
Assign null instead of undefined
bjarnef Feb 23, 2021
3d05880
Left align text in row button
bjarnef Feb 23, 2021
068a78f
Assign temporary rows to currentLayout
bjarnef Feb 23, 2021
a43c29d
Cleanup output
bjarnef Feb 23, 2021
b4c7342
Register functions in vm
bjarnef Feb 23, 2021
69cbc47
Move nameChanged property to init function
bjarnef Feb 23, 2021
fce63b9
Don't set toggled as checked when switching columns in row
bjarnef Feb 23, 2021
7d89bd8
Use existing behaviour to set allowAll
bjarnef Feb 23, 2021
786c561
Remove vm.layout again
bjarnef Feb 23, 2021
45e2254
Merge remote-tracking branch 'origin/v8/dev' into v8/bug/grid-editor-…
nielslyngsoe May 6, 2021
ca4d43d
copy rows when adding new section + clean up rows on submit and close
madsrasmussen May 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 69 additions & 34 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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;
};
}

section.allowAll = section.allowAll || !section.allowed || !section.allowed.length;

$scope.toggleAllowed = function (section) {
$scope.currentSection = section;
}

function toggleAllowed(section) {
section.allowAll = !section.allowAll;

if (section.allowed) {
Expand All @@ -76,44 +100,55 @@ 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);
}
}
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);
Expand Down
51 changes: 25 additions & 26 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -99,33 +98,33 @@
<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>
</span>
</span>

<span>
{{row.name}}<br/>
{{row.name}}<br />
<small>{{row.areas.length}} cells</small>
</span>
</button>
Expand Down Expand Up @@ -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>
Expand Down
Loading