Grid row config - use new overlay directive
This commit is contained in:
Mads Rasmussen
@@ -1,8 +1,8 @@
|
||||
function RowConfigController($scope) {
|
||||
|
||||
$scope.currentRow = angular.copy($scope.dialogOptions.currentRow);
|
||||
$scope.editors = $scope.dialogOptions.editors;
|
||||
$scope.columns = $scope.dialogOptions.columns;
|
||||
|
||||
$scope.currentRow = $scope.model.currentRow;
|
||||
$scope.editors = $scope.model.editors;
|
||||
$scope.columns = $scope.model.columns;
|
||||
|
||||
$scope.scaleUp = function(section, max, overflow) {
|
||||
var add = 1;
|
||||
@@ -88,10 +88,6 @@ function RowConfigController($scope) {
|
||||
}
|
||||
}, true);
|
||||
|
||||
$scope.complete = function () {
|
||||
angular.extend($scope.dialogOptions.currentRow, $scope.currentRow);
|
||||
$scope.close();
|
||||
}
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController", RowConfigController);
|
||||
angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController", RowConfigController);
|
||||
|
||||
@@ -1,102 +1,87 @@
|
||||
<div class="umb-panel usky-grid usky-grid-configuration"
|
||||
ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
|
||||
<div class="umb-panel-body no-header with-footer">
|
||||
|
||||
<div class="umb-forms-settings">
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
|
||||
|
||||
<h5><localize key="grid_addRowConfiguration" /></h5>
|
||||
<p><localize key="grid_addRowConfigurationDetail" /></p>
|
||||
|
||||
<div class="alert alert-warn ng-scope" ng-show="nameChanged">
|
||||
Modifying a row configuration name will result in loss of
|
||||
data for any existing content that is based on this configuration.
|
||||
</div>
|
||||
<div class="umb-form-settings">
|
||||
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentRow.name" />
|
||||
</umb-control-group>
|
||||
<h5><localize key="grid_addRowConfiguration" /></h5>
|
||||
<p><localize key="grid_addRowConfigurationDetail" /></p>
|
||||
|
||||
<div class="uSky-templates-template"
|
||||
style="margin: 0; width: 350px; position: relative;">
|
||||
<div class="alert alert-warn ng-scope" ng-show="nameChanged">
|
||||
Modifying a row configuration name will result in loss of
|
||||
data for any existing content that is based on this configuration.
|
||||
</div>
|
||||
|
||||
<div class="tb" style="height: auto; border: none !important; background: none">
|
||||
<div class="tr">
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentRow.name" />
|
||||
</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>
|
||||
<div class="uSky-templates-template"
|
||||
style="margin: 0; width: 350px; position: relative;">
|
||||
|
||||
<a class="td uSky-templates-column add"
|
||||
ng-click="configureCell(undefined, currentRow)"
|
||||
ng-style="{width: percentage(availableRowSpace) + '%'}">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tb" style="height: auto; border: none !important; background: none">
|
||||
<div class="tr">
|
||||
|
||||
<div ng-if="currentCell" style="padding-bottom: 50px;">
|
||||
<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_width">
|
||||
<div class="grid-size-scaler" >
|
||||
<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>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
<a class="td uSky-templates-column add"
|
||||
ng-click="configureCell(undefined, currentRow)"
|
||||
ng-style="{width: percentage(availableRowSpace) + '%'}">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="currentCell" style="padding-bottom: 50px;">
|
||||
|
||||
<umb-control-group label="@general_width">
|
||||
<div class="grid-size-scaler" >
|
||||
<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>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
|
||||
<umb-control-group hide-label="true">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
ng-model="currentCell.allowAll"
|
||||
ng-checked="currentCell.allowed === undefined"
|
||||
ng-change="toggleCollection(currentCell.allowed, currentCell.allowAll)" />
|
||||
<localize key="grid_allowAllEditors"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<umb-control-group hide-label="true">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
ng-model="currentCell.allowAll"
|
||||
ng-checked="currentCell.allowed === undefined"
|
||||
ng-change="toggleCollection(currentCell.allowed, currentCell.allowAll)" />
|
||||
<localize key="grid_allowAllEditors"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div ng-if="currentCell.allowAll === false">
|
||||
<hr />
|
||||
<ul class="unstyled">
|
||||
<li ng-repeat="editor in editors">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
checklist-model="currentCell.allowed"
|
||||
checklist-value="editor.alias">
|
||||
<i class="icon {{editor.icon}}"></i> {{editor.name}}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="currentCell.allowAll === false">
|
||||
<hr />
|
||||
<ul class="unstyled">
|
||||
<li ng-repeat="editor in editors">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
checklist-model="currentCell.allowed"
|
||||
checklist-value="editor.alias">
|
||||
<i class="icon {{editor.icon}}"></i> {{editor.name}}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-footer">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="btn-toolbar umb-btn-toolbar pull-right">
|
||||
<a href ng-click="close()" class="btn btn-link">
|
||||
<localize key="general_cancel">Cancel</localize>
|
||||
</a>
|
||||
|
||||
<a href ng-click="complete()" class="btn btn-primary">
|
||||
<localize key="general_ok" class="ng-isolate-scope ng-scope">Done</localize>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -120,26 +120,38 @@ angular.module("umbraco")
|
||||
Row
|
||||
*****************/
|
||||
|
||||
$scope.configureLayout = function(layout){
|
||||
$scope.configureLayout = function(layout) {
|
||||
|
||||
if(layout === undefined){
|
||||
layout = {
|
||||
name: "",
|
||||
areas:[
|
||||
var layoutsCopy = angular.copy($scope.model.value.layouts);
|
||||
|
||||
]
|
||||
};
|
||||
$scope.model.value.layouts.push(layout);
|
||||
}
|
||||
if(layout === undefined){
|
||||
layout = {
|
||||
name: "",
|
||||
areas:[
|
||||
|
||||
]
|
||||
};
|
||||
$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;
|
||||
};
|
||||
|
||||
dialogService.open(
|
||||
{
|
||||
template: "views/propertyEditors/grid/dialogs/rowconfig.html",
|
||||
currentRow: layout,
|
||||
editors: $scope.editors,
|
||||
columns: $scope.model.value.columns
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
//var rowDeletesPending = false;
|
||||
|
||||
@@ -168,4 +168,11 @@
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="rowConfigOverlay.show"
|
||||
model="rowConfigOverlay"
|
||||
view="rowConfigOverlay.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user