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

Merge pull request #4514 from umbraco/temp8-4430-grid-settings-to-use-editorservice

Browse Source 
#4430 change grid-editor settings to use editorService
This commit is contained in:
Bjarke Berg
2019-02-12 12:39:13 +01:00
committed by GitHub
parent 7cd600e58a 786c9ff3cc
commit cdef97efba
10 changed files with 332 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.controller.js Normal file
View File

@@ -0,0 +1,16 @@
function EditConfigController($scope) {
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
$scope.submit = function() {
if($scope.model && $scope.model.submit) {
$scope.model.submit($scope.model);
}
}
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.EditConfigController", EditConfigController);

53
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html
View File

@@ -1,3 +1,25 @@
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.EditConfigController">
<umb-editor-view>
<form novalidate name="EditConfigForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<form name="gridConfigEditor">
<h4>{{model.name}}</h4>
@@ -12,3 +34,34 @@
</div>
</form>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="submit()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>
</div>

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

@@ -1,10 +1,25 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController",
function ($scope) {
function ($scope, localizationService) {
function init() {
setTitle();
}
function setTitle() {
if (!$scope.model.title) {
localizationService.localize("grid_addGridLayout")
.then(function(data){
$scope.model.title = data;
});
}
}
$scope.currentLayout = $scope.model.currentLayout;
$scope.columns = $scope.model.columns;
$scope.rows = $scope.model.rows;
$scope.currentSection = undefined;
$scope.scaleUp = function(section, max, overflow){
var add = 1;
@@ -57,9 +72,12 @@ angular.module("umbraco")
template.sections.splice(index, 1);
};
$scope.closeSection = function(){
$scope.currentSection = undefined;
};
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
$scope.$watch("currentLayout", function(layout){
if(layout){
@@ -71,4 +89,6 @@ angular.module("umbraco")
$scope.availableLayoutSpace = $scope.columns - total;
}
}, true);
init();
});

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

@@ -1,8 +1,31 @@
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController">
<div class="umb-forms-settings">
<h5><localize key="grid_addGridLayout" /></h5>
<umb-editor-view>
<form novalidate name="LayoutConfigForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="umb-forms-settings form-horizontal">
<p><localize key="grid_addGridLayoutDetail" /></p>
<umb-control-group label="@general_name">
@@ -32,7 +55,7 @@
</div>
</div>
<div ng-if="currentSection" style="padding-bottom: 50px;">
<div ng-if="currentSection != null" style="padding-bottom: 50px;">
<umb-control-group label="@general_width">
<div class="grid-size-scaler">
@@ -111,4 +134,27 @@
</div>
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>
</div>

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

@@ -1,5 +1,19 @@
function RowConfigController($scope) {
function RowConfigController($scope, localizationService) {
function init() {
setTitle();
}
function setTitle() {
if (!$scope.model.title) {
localizationService.localize("grid_addRowConfiguration")
.then(function(data){
$scope.model.title = data;
});
}
}
$scope.currentRow = $scope.model.currentRow;
$scope.editors = $scope.model.editors;
$scope.columns = $scope.model.columns;
@@ -69,6 +83,12 @@ function RowConfigController($scope) {
$scope.closeArea = function() {
$scope.currentCell = undefined;
};
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
$scope.nameChanged = false;
var originalName = $scope.currentRow.name;
@@ -93,6 +113,10 @@ function RowConfigController($scope) {
}
}, true);
init();
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController", RowConfigController);

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

@@ -1,8 +1,30 @@
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
<div class="umb-form-settings">
<h5><localize key="grid_addRowConfiguration" /></h5>
<umb-editor-view>
<form novalidate name="RowConfigurationForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<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">
@@ -14,7 +36,7 @@
<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>
@@ -54,7 +76,7 @@
</a>
</div>
</umb-control-group>
<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>
@@ -97,4 +119,27 @@
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>
</div>

16
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js Normal file
View File

@@ -0,0 +1,16 @@
function DeleteRowConfirmController($scope) {
$scope.close = function() {
if($scope.model.close) {
$scope.model.close();
}
}
$scope.submit = function() {
if($scope.model && $scope.model.submit) {
$scope.model.submit($scope.model);
}
}
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController", DeleteRowConfirmController);

38
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
View File

@@ -1,4 +1,13 @@
<div>
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController">
<umb-editor-view>
<umb-editor-container>
<umb-box>
<umb-box-content>
<h3 class="alert alert-warn ng-scope">Warning!</h3>
@@ -15,4 +24,31 @@
<localize key="general_areyousure">Are you sure?</localize>
</p>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="close()">
</umb-button>
<umb-button
type="button"
button-style="warning"
label-key="general_delete"
action="submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-view>
</div>

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

@@ -1,6 +1,6 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
function ($scope, gridService) {
function ($scope, gridService, editorService) {
var emptyModel = {
styles:[
@@ -89,28 +89,23 @@ angular.module("umbraco")
};
$scope.model.value.templates.push(template);
}
var layoutConfigOverlay = {
currentLayout: template,
rows: $scope.model.value.layouts,
columns: $scope.model.value.columns,
view: "views/propertyEditors/grid/dialogs/layoutconfig.html",
size: "small",
submit: function(model) {
editorService.close();
},
close: function(model) {
editorService.close();
}
};
$scope.layoutConfigOverlay = {};
$scope.layoutConfigOverlay.view = "views/propertyEditors/grid/dialogs/layoutconfig.html";
$scope.layoutConfigOverlay.currentLayout = template;
$scope.layoutConfigOverlay.rows = $scope.model.value.layouts;
$scope.layoutConfigOverlay.columns = $scope.model.value.columns;
$scope.layoutConfigOverlay.show = true;
editorService.open(layoutConfigOverlay);
$scope.layoutConfigOverlay.submit = function(model) {
$scope.layoutConfigOverlay.show = false;
$scope.layoutConfigOverlay = null;
};
$scope.layoutConfigOverlay.close = function(oldModel) {
//reset templates
$scope.model.value.templates = templatesCopy;
$scope.layoutConfigOverlay.show = false;
$scope.layoutConfigOverlay = null;
}
};
$scope.deleteTemplate = function(index){
@@ -135,50 +130,44 @@ angular.module("umbraco")
};
$scope.model.value.layouts.push(layout);
}
$scope.rowConfigOverlay = {};
$scope.rowConfigOverlay.view = "views/propertyEditors/grid/dialogs/rowconfig.html";
$scope.rowConfigOverlay.currentRow = layout;
$scope.rowConfigOverlay.editors = $scope.editors;
$scope.rowConfigOverlay.columns = $scope.model.value.columns;
$scope.rowConfigOverlay.show = true;
$scope.rowConfigOverlay.submit = function(model) {
$scope.rowConfigOverlay.show = false;
$scope.rowConfigOverlay = null;
};
$scope.rowConfigOverlay.close = function(oldModel) {
$scope.model.value.layouts = layoutsCopy;
$scope.rowConfigOverlay.show = false;
$scope.rowConfigOverlay = null;
var rowConfigOverlay = {
currentRow: layout,
editors: $scope.editors,
columns: $scope.model.value.columns,
view: "views/propertyEditors/grid/dialogs/rowconfig.html",
size: "small",
submit: function(model) {
editorService.close();
},
close: function(model) {
editorService.close();
}
};
editorService.open(rowConfigOverlay);
};
//var rowDeletesPending = false;
$scope.deleteLayout = function(index) {
var rowDeleteOverlay = {
dialogData: {
rowName: $scope.model.value.layouts[index].name
},
view: "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html",
size: "small",
submit: function(model) {
$scope.model.value.layouts.splice(index, 1);
editorService.close();
},
close: function(model) {
editorService.close();
}
};
$scope.rowDeleteOverlay = {};
$scope.rowDeleteOverlay.view = "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html";
$scope.rowDeleteOverlay.dialogData = {
rowName: $scope.model.value.layouts[index].name
};
$scope.rowDeleteOverlay.show = true;
$scope.rowDeleteOverlay.submit = function(model) {
$scope.model.value.layouts.splice(index, 1);
$scope.rowDeleteOverlay.show = false;
$scope.rowDeleteOverlay = null;
};
$scope.rowDeleteOverlay.close = function(oldModel) {
$scope.rowDeleteOverlay.show = false;
$scope.rowDeleteOverlay = null;
};
editorService.open(rowDeleteOverlay);
};
@@ -210,26 +199,22 @@ angular.module("umbraco")
};
var editConfigCollection = function(configValues, title, callback) {
var editConfigCollectionOverlay = {
config: configValues,
title: title,
view: "views/propertyeditors/grid/dialogs/editconfig.html",
size: "small",
submit: function(model) {
callback(model.config);
editorService.close();
},
close: function(model) {
editorService.close();
}
};
$scope.editConfigCollectionOverlay = {};
$scope.editConfigCollectionOverlay.view = "views/propertyeditors/grid/dialogs/editconfig.html";
$scope.editConfigCollectionOverlay.config = configValues;
$scope.editConfigCollectionOverlay.title = title;
$scope.editConfigCollectionOverlay.show = true;
$scope.editConfigCollectionOverlay.submit = function(model) {
callback(model.config);
$scope.editConfigCollectionOverlay.show = false;
$scope.editConfigCollectionOverlay = null;
};
$scope.editConfigCollectionOverlay.close = function(oldModel) {
$scope.editConfigCollectionOverlay.show = false;
$scope.editConfigCollectionOverlay = null;
};
editorService.open(editConfigCollectionOverlay);
};
$scope.editConfig = function() {

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

@@ -158,28 +158,4 @@
</umb-control-group>
</div>
<umb-overlay ng-if="layoutConfigOverlay.show"
model="layoutConfigOverlay"
view="layoutConfigOverlay.view"
position="right">
</umb-overlay>
<umb-overlay ng-if="rowConfigOverlay.show"
model="rowConfigOverlay"
view="rowConfigOverlay.view"
position="right">
</umb-overlay>
<umb-overlay ng-if="editConfigCollectionOverlay.show"
model="editConfigCollectionOverlay"
view="editConfigCollectionOverlay.view"
position="right">
</umb-overlay>
<umb-overlay ng-if="rowDeleteOverlay.show"
model="rowDeleteOverlay"
view="rowDeleteOverlay.view"
position="right">
</umb-overlay>
</div>