Grid config allow editors toggle (#8357)
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
6ed0d03da3
commit
0d7c65de3e
@@ -2,17 +2,29 @@ angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController",
|
||||
function ($scope, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.labels = {};
|
||||
|
||||
function init() {
|
||||
setTitle();
|
||||
|
||||
var labelKeys = [
|
||||
"grid_addGridLayout",
|
||||
"grid_allowAllRowConfigurations"
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (data) {
|
||||
|
||||
vm.labels.title = data[0];
|
||||
vm.labels.allowAllRowConfigurations = data[1];
|
||||
|
||||
setTitle(vm.labels.title);
|
||||
});
|
||||
}
|
||||
|
||||
function setTitle() {
|
||||
function setTitle(value) {
|
||||
if (!$scope.model.title) {
|
||||
localizationService.localize("grid_addGridLayout")
|
||||
.then(function(data){
|
||||
$scope.model.title = data;
|
||||
});
|
||||
$scope.model.title = value;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,13 +68,15 @@ angular.module("umbraco")
|
||||
};
|
||||
|
||||
$scope.toggleAllowed = function (section) {
|
||||
section.allowAll = !section.allowAll;
|
||||
|
||||
if (section.allowed) {
|
||||
delete section.allowed;
|
||||
}
|
||||
else {
|
||||
section.allowed = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.deleteSection = function(section, template) {
|
||||
if ($scope.currentSection === section) {
|
||||
@@ -90,13 +104,13 @@ angular.module("umbraco")
|
||||
if ($scope.model.close) {
|
||||
$scope.model.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.submit = function () {
|
||||
if ($scope.model.submit) {
|
||||
$scope.model.submit($scope.currentLayout);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.$watch("currentLayout", function(layout){
|
||||
if(layout){
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController">
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController as vm">
|
||||
|
||||
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
<umb-toggle
|
||||
class="umb-toggle-group-item__toggle"
|
||||
checked="currentSection.allowAll"
|
||||
on-click="currentSection.allowAll = !currentSection.allowAll"
|
||||
on-click="toggleAllowed(currentSection)"
|
||||
show-labels="true"
|
||||
label-position="right"
|
||||
label-off="Allow all row configurations"
|
||||
|
||||
@@ -1,15 +1,28 @@
|
||||
function RowConfigController($scope, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.labels = {};
|
||||
|
||||
function init() {
|
||||
setTitle();
|
||||
|
||||
var labelKeys = [
|
||||
"grid_addRowConfiguration",
|
||||
"grid_allowAllEditors"
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (data) {
|
||||
|
||||
vm.labels.title = data[0];
|
||||
vm.labels.allowAllEditors = data[1];
|
||||
|
||||
setTitle(vm.labels.title);
|
||||
});
|
||||
}
|
||||
|
||||
function setTitle() {
|
||||
function setTitle(value) {
|
||||
if (!$scope.model.title) {
|
||||
localizationService.localize("grid_addRowConfiguration")
|
||||
.then(function(data){
|
||||
$scope.model.title = data;
|
||||
});
|
||||
$scope.model.title = value;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,13 +81,15 @@ function RowConfigController($scope, localizationService) {
|
||||
};
|
||||
|
||||
$scope.toggleAllowed = function (cell) {
|
||||
cell.allowAll = !cell.allowAll;
|
||||
|
||||
if (cell.allowed) {
|
||||
delete cell.allowed;
|
||||
}
|
||||
else {
|
||||
cell.allowed = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.deleteArea = function (cell, row) {
|
||||
if ($scope.currentCell === cell) {
|
||||
@@ -102,17 +117,17 @@ function RowConfigController($scope, localizationService) {
|
||||
}
|
||||
};
|
||||
|
||||
$scope.close = function() {
|
||||
if($scope.model.close) {
|
||||
$scope.close = function () {
|
||||
if ($scope.model.close) {
|
||||
$scope.model.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.submit = function () {
|
||||
if ($scope.model.submit) {
|
||||
$scope.model.submit($scope.currentRow);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.nameChanged = false;
|
||||
var originalName = $scope.currentRow.name;
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController as vm">
|
||||
|
||||
<umb-editor-view>
|
||||
|
||||
|
||||
<umb-editor-view>
|
||||
|
||||
<form novalidate name="RowConfigurationForm" val-form-manager>
|
||||
<form novalidate name="RowConfigurationForm" val-form-manager>
|
||||
|
||||
<umb-editor-header
|
||||
name="model.title"
|
||||
@@ -18,119 +16,109 @@
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
|
||||
<div class="umb-form-settings form-horizontal">
|
||||
|
||||
<p><localize key="grid_addRowConfigurationDetail" /></p>
|
||||
|
||||
<div class="alert alert-warn ng-scope" ng-show="nameChanged">
|
||||
<p>Modifying a row configuration name will result in loss of
|
||||
data for any existing content that is based on this configuration.</p>
|
||||
<p><strong>Modifying only the label will not result in data loss.</strong></p>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentRow.name" />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_label">
|
||||
<input type="text" ng-model="currentRow.label" placeholder="Overrides name" />
|
||||
</umb-control-group>
|
||||
|
||||
<div class="umb-form-settings form-horizontal">
|
||||
<div class="uSky-templates-template"
|
||||
style="margin: 0; width: 350px; position: relative;">
|
||||
|
||||
<p><localize key="grid_addRowConfigurationDetail" /></p>
|
||||
<div class="tb" style="height: auto; border: none !important; background: none">
|
||||
<div class="tr">
|
||||
|
||||
<div class="alert alert-warn ng-scope" ng-show="nameChanged">
|
||||
<p>Modifying a row configuration name will result in loss of
|
||||
data for any existing content that is based on this configuration.</p>
|
||||
<p><strong>Modifying only the label will not result in data loss.</strong></p>
|
||||
</div>
|
||||
<a class="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) + '%'}">
|
||||
</a>
|
||||
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentRow.name" />
|
||||
</umb-control-group>
|
||||
<a class="td uSky-templates-column add"
|
||||
ng-click="configureCell(null, currentRow)"
|
||||
ng-style="{width: percentage(availableRowSpace) + '%'}">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_label">
|
||||
<input type="text" ng-model="currentRow.label" placeholder="Overrides name" />
|
||||
</umb-control-group>
|
||||
<div ng-if="currentCell" style="padding-bottom: 50px;">
|
||||
|
||||
<div class="uSky-templates-template"
|
||||
style="margin: 0; width: 350px; position: relative;">
|
||||
<umb-control-group label="@general_width">
|
||||
<div class="grid-size-scaler">
|
||||
<button type="button" class="btn-link" ng-click="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)">
|
||||
<i class="icon icon-add" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<div class="tb" style="height: auto; border: none !important; background: none">
|
||||
<div class="tr">
|
||||
<umb-control-group label="@grid_maxItems" description="@grid_maxItemsDescription">
|
||||
<input type="number" ng-model="currentCell.maxItems" class="umb-property-editor-tiny" placeholder="Max" min="0" />
|
||||
</umb-control-group>
|
||||
|
||||
<a class="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) + '%'}">
|
||||
</a>
|
||||
<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)">
|
||||
<localize key="general_delete" class="ng-isolate-scope ng-scope">Delete</localize>
|
||||
</button>
|
||||
</umb-control-group>
|
||||
|
||||
<a class="td uSky-templates-column add"
|
||||
ng-click="configureCell(null, currentRow)"
|
||||
ng-style="{width: percentage(availableRowSpace) + '%'}">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<umb-control-group hide-label="true">
|
||||
|
||||
<div ng-if="currentCell" style="padding-bottom: 50px;">
|
||||
<umb-toggle class="umb-toggle-group-item__toggle"
|
||||
checked="currentCell.allowAll"
|
||||
on-click="toggleAllowed(currentCell)"
|
||||
show-labels="true"
|
||||
label-position="right"
|
||||
label-off="{{vm.labels.allowAllEditors}}"
|
||||
label-on="{{vm.labels.allowAllEditors}}"
|
||||
style="margin-left: 18px">
|
||||
</umb-toggle>
|
||||
|
||||
<umb-control-group label="@general_width">
|
||||
<div class="grid-size-scaler">
|
||||
<a href ng-click="scaleDown(currentCell)">
|
||||
<i class="icon icon-remove"></i>
|
||||
</a>
|
||||
{{currentCell.grid}}
|
||||
<a href ng-click="scaleUp(currentCell, availableRowSpace, true)">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
<div ng-if="currentCell.allowAll === false">
|
||||
<hr />
|
||||
<ul class="unstyled">
|
||||
<li ng-repeat="editor in editors track by $id(editor)">
|
||||
|
||||
<umb-control-group label="@grid_maxItems" description="@grid_maxItemsDescription">
|
||||
<input type="number" ng-model="currentCell.maxItems" class="umb-property-editor-tiny" placeholder="Max" min="0" />
|
||||
</umb-control-group>
|
||||
<umb-checkbox model="editor.allowed"
|
||||
input-id="editorconfig-{{$index}}"
|
||||
on-change="selectEditor(currentCell, editor)">
|
||||
<i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
|
||||
<small class="input-label--small">({{editor.alias}})</small>
|
||||
</umb-checkbox>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
<umb-control-group hide-label="true">
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link" href="" ng-click="deleteArea(currentCell, currentRow)">
|
||||
<localize key="general_delete" class="ng-isolate-scope ng-scope">Delete</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
<umb-control-group hide-label="true">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
ng-model="currentCell.allowAll"
|
||||
ng-change="toggleAllowed(currentCell)" />
|
||||
<localize key="grid_allowAllEditors"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</umb-editor-container>
|
||||
|
||||
<div ng-if="currentCell.allowAll === false">
|
||||
<hr />
|
||||
<ul class="unstyled">
|
||||
<li ng-repeat="editor in editors track by $id(editor)">
|
||||
|
||||
<umb-checkbox model="editor.allowed"
|
||||
input-id="editorconfig-{{$index}}"
|
||||
on-change="selectEditor(currentCell, editor)">
|
||||
</umb-checkbox>
|
||||
|
||||
<label for="editorconfig-{{$index}}" style="padding: 0; margin-left: -10px;">
|
||||
<i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
|
||||
<small class="input-label--small">({{editor.alias}})</small>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
<umb-editor-footer-content-right>
|
||||
<umb-editor-footer>
|
||||
<umb-editor-footer-content-right>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
|
||||
Reference in New Issue
Block a user