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

GridView Configaration UI

Browse Source
This commit is contained in:
per ploug
2014-06-26 11:27:45 +02:00
parent 8a93c8371c
commit c8c2d2d601
6 changed files with 778 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/Umbraco.Web.UI.Client/src/less/gridview.less
View File

@@ -519,7 +519,7 @@
margin: 20px;
}
.usky-grid .uSky-templates-template .tb:hover {
.usky-grid .uSky-templates-template a.tb:hover {
border:5px solid @blue;
}
@@ -532,7 +532,7 @@
cursor:pointer;
position: relative;
}
.usky-grid .uSky-templates-template .tr {
height: 100%;
position: relative;
@@ -548,6 +548,10 @@
border-right: 1px dashed @grayLight !important;
}
.usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
background-color: @blue;
}
/**************************************************************************************************/
/* template column */
@@ -576,10 +580,82 @@
border: 2px solid @grayLight;
margin:0px;
background-color: @grayLighter;
}
}
.usky-grid .mainTdpt {
height: 35px;
border: 1px dashed @grayLight;
margin:0px;
background-color: rgba(228, 228, 228, 0.41);
}
}
/**************************************************************************************************/
/* Configuration specific styles */
/**************************************************************************************************/
.usky-grid-configuration .uSky-templates{
text-align: left;
}
.usky-grid-configuration ul{
display: block;
}
.usky-grid-configuration ul li{
display: block;
width: auto;
text-align: left;
}
.usky-grid-configuration .uSky-templates .uSky-templates-template{
margin: 0px 20px 20px 0px;
width: 60px;
}
.usky-grid-configuration .uSky-templates .uSky-templates-template .tb{
height: 50px;
border-width: 2px !important;
padding: 0px;
border-spacing:2px;
}
.usky-grid-configuration .uSky-templates .uSky-templates-template .tb:hover{
border-width: 2px !important;
}
.usky-grid-configuration .uSky-templates-column{
display: block;
float: left;
margin-left: -1px;
}
.usky-grid-configuration .uSky-templates-column.last{
margin-right: -1px;
}
.usky-grid-configuration .uSky-templates-column.add{
text-align: center;
font-size: 20px;
line-height: 70px;
color: #ccc;
text-decoration: none
}
.usky-grid-configuration .uSky-templates-rows .uSky-templates-row{
margin: 0px 50px 20px 0px;
width: 60px;
}
.usky-grid-configuration .uSky-templates-rows .uSky-templates-row .tb{
border-width: 2px !important;
padding: 0px;
border-spacing:2px;
}
.usky-grid-configuration .uSky-templates-rows .mainTdpt{
height: 10px !important;
}
.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}

39
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js
View File

@@ -1,29 +1,33 @@
var uSkyGridConfig = [
{
columns: [
layouts: [
{
grid: 12,
percentage: 100,
cellModels: [
rows: [
{
name: "Single column",
models: [{
grid: 12,
percentage: 100
}]
}, {
columns: [{
grid: 12,
percentage: 100
}]
},
{
name: "Article",
models: [{
grid: 4,
percentage: 33.3,
allowed: ["media","quote"]
}, {
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}]
models: [{
grid: 4,
percentage: 33.3,
allowed: ["media","quote"]
}, {
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}]
},
{
name: "Article, reverse",
models: [
@@ -92,6 +96,7 @@ var uSkyGridConfig = [
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{

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

@@ -53,8 +53,8 @@ angular.module("umbraco")
$scope.checkContent = function() {
var isEmpty = true;
if ($scope.model.value &&
$scope.model.value.columns) {
angular.forEach($scope.model.value.columns, function (value, key) {
$scope.model.value.sections) {
angular.forEach($scope.model.value.sections, function (value, key) {
if ( value.rows && value.rows.length > 0) {
isEmpty = false;
}
@@ -65,21 +65,16 @@ angular.module("umbraco")
{
$scope.model.value = undefined;
}
}
};
$scope.addTemplate = function (template) {
$scope.model.value = {
gridWidth: "",
columns: []
};
angular.forEach(template.columns, function (value, key) {
var newCol = angular.copy(value);
newCol.rows = [];
$scope.model.value.columns.splice($scope.model.value.columns.length + 1, 0, newCol);
$scope.model.value = angular.copy(template);
//default row data
_.forEach($scope.model.value.sections, function(section){
section.rows = [];
});
}
};
// *********************************************
@@ -88,34 +83,29 @@ angular.module("umbraco")
$scope.setCurrentRow = function (row) {
$scope.currentRow = row;
}
};
$scope.disableCurrentRow = function () {
$scope.currentRow = null;
}
};
$scope.addRow = function (column, cellModel) {
$scope.getAllowedLayouts = function(column){
var layouts = $scope.model.config.items.layouts;
column.rows.splice(column.rows.length + 1, 0,
{
uniqueId: $scope.setUniqueId(),
cells: [],
cssClass: ''
});
if(column.allowed && column.allowed.length > 0){
return _.filter(layouts, function(layout){
return _.indexOf(column.allowed, layout.name) >= 0;
});
}else{
return layouts;
}
};
for (var i = 0; i < cellModel.models.length; i++) {
var cells = column.rows[column.rows.length - 1].cells;
var model = angular.copy(cellModel.models[i]);
cells.splice(
cells.length + 1, 0,
{
model: model,
controls: []
});
}
$scope.addRow = function (column, layout) {
//copy the selected layout into the rows collection
var row = angular.copy(layout);
column.rows.push(row);
};
$scope.removeRow = function (column, $index) {
@@ -124,7 +114,8 @@ angular.module("umbraco")
$scope.openRTEToolbarId = null;
$scope.checkContent();
}
}
};
// *********************************************
// Cell management functions
@@ -132,20 +123,23 @@ angular.module("umbraco")
$scope.setCurrentCell = function (cell) {
$scope.currentCell = cell;
}
};
$scope.disableCurrentCell = function (cell) {
$scope.currentCell = null;
}
};
$scope.cellPreview = function(cell){
if($scope.availableEditors && cell && cell.allowed && angular.isArray(cell.allowed)){
var editor = $scope.getEditor(cell.allowed[0]);
if(cell && cell.$allowedEditors){
var editor = cell.$allowedEditors[0];
return editor.icon;
}else{
return "icon-layout";
}
}
};
// *********************************************
// Control management functions
@@ -196,14 +190,11 @@ angular.module("umbraco")
return components.join("");
};
$scope.setEditorPath = function(control){
control.editorPath = "views/propertyeditors/grid/editors/" + control.editor.view + ".html";
};
$scope.addControl = function (editor, cell, index){
var newId = $scope.setUniqueId();
var newControl = {
uniqueId: newId,
$uniqueId: newId,
value: null,
editor: editor
};
@@ -212,11 +203,14 @@ angular.module("umbraco")
index = cell.controls.length;
}
//populate control
$scope.initControl(newControl, index+1);
cell.controls.splice(index + 1, 0, newControl);
};
$scope.addTinyMce = function(cell){
var rte = _.find($scope.availableEditors, function(editor){return editor.alias === "rte";});
var rte = $scope.getEditor("rte");
$scope.addControl(rte, cell);
};
@@ -228,28 +222,99 @@ angular.module("umbraco")
cell.controls.splice($index, 1);
};
$scope.allowedControl = function (editor, cell){
if(cell.model.allowed && angular.isArray(cell.model.allowed)){
return _.contains(cell.model.allowed, editor.alias);
}else{
return true;
}
$scope.percentage = function(spans){
return ((spans/12)*100).toFixed(1);
};
// *********************************************
// Init grid
// *********************************************
/* init grid data */
if ($scope.model.value && $scope.model.value != "") {
if (!$scope.model.config.items.enableGridWidth) {
$scope.model.value.gridWidth = $scope.model.config.items.defaultGridWith;
}
}
$scope.checkContent();
// *********************************************
// INITIALISATION
// these methods are called from ng-init on the template
// so we can controll their first load data
//
// intialisation sets non-saved data like percentage sizing, allowed editors and
// other data that should all be pre-fixed with $ to strip it out on save
// *********************************************
// *********************************************
// Init template + sections
// *********************************************
$scope.initSection = function(section){
section.$percentage = $scope.percentage(section.grid);
var layouts = $scope.model.config.items.layouts;
if(section.allowed && sectionn.allowed.length > 0){
return _.filter(layouts, function(layout){
section.$allowedLayouts = _.indexOf(section.allowed, layout.name) >= 0;
});
}else{
section.$allowedLayouts = layouts;
}
};
// *********************************************
// Init layout / row
// *********************************************
$scope.initRow = function(row){
if(!row.areas){
row.areas = [];
}
//set a disposable unique ID
row.$uniqueId = $scope.setUniqueId();
//populate with data
_.forEach(row.areas, function(area){
if(!area.controls){
area.controls = [];
}
area.$percentage = $scope.percentage(area.grid);
if(!area.allowed){
area.$allowedEditors = $scope.availableEditors;
area.$allowsRTE = true;
}else{
area.$allowedEditors = _.filter($scope.availableEditors, function(editor){
return _.indexOf(area.allowed, editor.alias) >= 0;
});
if(_.indexOf(area.allowed,"rte")>=0){
area.$allowsRTE = true;
}
}
});
};
// *********************************************
// Init control
// *********************************************
$scope.initControl = function(control, index){
control.$index = index;
//if its a path
if(_.indexOf(control.editor.view, "/") >= 0){
control.$editorPath = control.editor.view;
}else{
//use convention
control.$editorPath = "views/propertyeditors/grid/editors/" + control.editor.view + ".html";
}
};
});
// *********************************************

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

@@ -5,13 +5,15 @@
<div class="uSky-templates tb" ng-show="!model.value || model.value == ''">
<div class="tr">
<div class="td middle">
<div class="uSky-templates-template" ng-repeat="template in uSkyGridConfig" style="">
<div class="uSky-templates-template"
ng-repeat="template in model.config.items.templates" style="">
<div class="tb" ng-click="addTemplate(template)">
<div class="tr">
<div class="td uSky-templates-column"
ng-class="{last:$last}"
ng-repeat="column in template.columns"
style="width:{{ column.percentage }}%">
ng-repeat="section in template.sections"
ng-init="initSection(section)"
style="width:{{ section.$percentage }}%">
</div>
</div>
</div>
@@ -25,24 +27,26 @@
<!-- template picker end -->
<!-- Grids -->
<div class="usky-grid-width" style="width:{{ model.value.gridWidth }}px">
<div class="usky-grid-width">
<div class="tb">
<!-- for each column in model -->
<div
class="usky-column td"
ng-class="{last:$index==model.value.columns.length-1}"
ng-repeat="column in model.value.columns"
style="width:{{column .percentage}}%">
ng-class="{last:$last}"
ng-repeat="section in model.value.sections"
ng-init="initSection(section)"
style="width:{{section.$percentage}}%">
<div ui-sortable="sortableOptions" ng-model="column.rows">
<div ui-sortable="sortableOptions" ng-model="section.rows">
<!-- for each row in column -->
<!-- for each row in template section -->
<div
ng-repeat="row in column.rows"
ng-repeat="row in section.rows"
class="usky-row"
ng-mouseover="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()"
ng-init="initRow(row)"
ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
<!-- Row tool -->
@@ -58,7 +62,7 @@
<span ng-if="deletePrompt">
Are you sure?
<a href style="text-decoration: underline" ng-click="removeRow(column, $index)">Yes</a>
<a href style="text-decoration: underline" ng-click="removeRow(section, $index)">Yes</a>
</span>
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
@@ -85,43 +89,42 @@
<!-- cells in row -->
<div
style="width:{{ cell.model.percentage }}%"
ng-class="{last:$index==row.cells.length-1,first:$first}"
style="width:{{ area.$percentage }}%"
ng-class="{last:$last,first:$first}"
class="td mainTd usky-cell"
ng-repeat="cell in row.cells">
ng-repeat="area in row.areas">
<!-- if cell is empty tools -->
<!-- if area is empty tools -->
<div
class="usky-control usky-control-placeholder"
ng-if="cell.controls.length == 0">
ng-if="area.controls.length == 0">
<div
ng-if="cell.model.allowed && cell.model.allowed.length === 1"
ng-init="singleEditor = getEditor(cell.model.allowed[0])"
ng-if="area.allowed && area.allowed.length === 1"
ng-init="singleEditor = area.$allowedEditors[0]"
class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
<a href ng-click="addControl(singleEditor, cell)">
<a href ng-click="addControl(singleEditor, area)">
<i class="icon {{singleEditor.icon}}"></i>
<div class="help-text">{{singleEditor.name}}</div>
</a>
<p class="placeholder" ng-click="addControl(singleEditor, cell)">
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
Start writing here...
</p>
</div>
<div ng-if="!cell.model.allowed || cell.model.allowed.length > 1">
<div ng-if="!area.allowed || area.allowed.length > 1">
<p class="placeholder" ng-click="addTinyMce(cell)">
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)">
Start writing here...
</p>
<div class="cell-tools-add">
<div
class="iconBox"
ng-repeat="editor in availableEditors track by editor.alias"
ng-click="addControl(editor,cell)"
ng-show="allowedControl(editor, cell)">
ng-repeat="editor in area.$allowedEditors track by editor.alias"
ng-click="addControl(editor,area)">
<i class="icon {{editor.icon}}"></i>
</div>
</div>
@@ -131,33 +134,31 @@
<!-- Controls in cell -->
<div
ng-repeat="control in cell.controls"
ng-class="{last:$index==cell.controls.length-1,
removingControl:currentRemoveControl == control,
toolsControl:currentToolsControl == control,
selectedControl:currentControl == control}"
ng-repeat="control in area.controls"
ng-class="{last:$last,
removingControl:currentRemoveControl == control,
toolsControl:currentToolsControl == control,
selectedControl:currentControl == control}"
ng-mouseover="setCurrentControl(control)"
ng-mouseleave="disableCurrentControl(control)"
ng-init="setEditorPath(control); controlIndex = $index;"
ng-init="initControl(control, $index)"
class="usky-control">
<!-- Filled cell tools -->
<div class="cell-tools"
ng-animate="'fade'"
ng-if="control && ( currentControl == control)">
<div class="cell-tools-add"
ng-if="cell.model.max === undefined || cell.model.max < cell.controls.length"
ng-if="area.max === undefined || area.max < area.controls.length"
ng-mouseover="setCurrentToolsControl(control)"
ng-mouseleave="disableCurrentToolsControl(control)">
<div
class="iconBox"
ng-repeat="editor in availableEditors"
ng-click="addControl(editor,cell, controlIndex)"
ng-show="(currentToolsControl == control) && allowedControl(editor, cell)">
ng-repeat="editor in area.$allowedEditors"
ng-click="addControl(editor,area, control.$index)"
ng-show="(currentToolsControl == control)">
<i class="icon {{editor.icon}}"></i>
</div>
@@ -176,7 +177,7 @@
<span ng-if="deletePrompt">
Are you sure?
<a href style="text-decoration: underline" ng-click="removeControl(cell, controlIndex)">Yes</a>
<a href style="text-decoration: underline" ng-click="removeControl(area, control.$index)">Yes</a>
</span>
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
@@ -186,8 +187,8 @@
<!-- Redering the editor for specific control -->
<div
ng-if="control && control.editorPath"
ng-include="control.editorPath"
ng-if="control && control.$editorPath"
ng-include="control.$editorPath"
class="usky-cell usky-cell-{{control.editor.view}}">
</div>
</div>
@@ -213,15 +214,20 @@
<div class="tr">
<div class="td middle">
<ul>
<li ng-repeat="cellModel in column.cellModels">
<div class="tb mainTbpt" ng-click="addRow(column, cellModel)">
<li ng-repeat="layout in section.$allowedLayouts" ng-init="initRow(layout)" >
<div class="tb mainTbpt" ng-click="addRow(section, layout)">
<div class="tr">
<div style="width:{{ cell.percentage; }}%" class="middle mainTdpt td" ng-repeat="cell in cellModel.models">
<i class="icon {{cellPreview(cell)}}"></i>
<div
style="width:{{ area.$percentage}}%"
class="middle mainTdpt td"
ng-repeat="area in layout.areas">
<i class="icon {{cellPreview(area)}}"></i>
</div>
</div>
</div>
<small>{{cellModel.name}}</small>
<small>{{layout.name}}</small>
</li>
</ul>
@@ -238,9 +244,6 @@
</div>
<!-- column repeat end -->
</div>
</div>
<!-- grid wrapper end -->
</div>

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

@@ -2,39 +2,252 @@ angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
function ($scope, $http, assetsService, $rootScope, dialogService, mediaResource, gridService, imageHelper, $timeout) {
var emptyModel = {
enableGridWidth: true,
defaultGridWith: "",
enableBackground: true,
enableSkipTopMargin: true,
defaultSkipTopMargin: false,
enableSkipBottomMargin: true,
defaultSkipBottomMargin: false,
enableSkipLeftMargin: true,
defaultSkipLeftMargin: false,
enableSkipRightMargin: true,
defaultSkipRightMargin: false,
enableSkipControlMargin: true,
defaultSkipControlMargin: false,
enableFullScreen: true,
defaultFullScreen: false,
enableBoxed: true,
defaultBoxed: false,
enableRte: true,
enableMedia: true,
enableMacro: true,
enabledEditors: [ "rte", "media", "macro" ],
enableMultiCells: true,
approvedBackgroundCss: "",
gridConfigPath: "views/propertyeditors/grid/config/grid.default.config.js"
}
var emptyModel = {
templates:[
{
name: "1 column",
sections: [
{
grid: 12,
}
]
},
{
name: "2 column",
sections: [
{
grid: 4,
},
{
grid: 8
}
]
},
{
name: "2 column reversed",
sections: [
{
grid: 8,
},
{
grid: 4
}
]
}
],
layouts:[
{
name: "Headline",
areas: [
{
grid: 12,
editors: ["Headline","subHeadline"]
}
]
},
{
name: "Article",
areas: [
{
grid: 4
},
{
grid: 8
}
]
}
],
gridConfigPath: "views/propertyeditors/grid/config/grid.default.config.js"
};
/****************
template
*****************/
$scope.configureTemplate = function(template){
if($scope.currentTemplate && $scope.currentTemplate === template){
delete $scope.currentTemplate;
}else{
//if no template is passed in, we can assume we are adding a new one
if(template === undefined){
template = {
name: "",
sections:[
]
};
$scope.model.value.templates.push(template);
}
$scope.currentTemplate = template;
}
};
$scope.deleteTemplate = function(index){
$scope.model.value.templates.splice(index, 1);
};
$scope.closeTemplate = function(){
//clean-up
_.forEach($scope.currentTemplate.sections, function(section, index){
if(section.grid <= 0){
$scope.currentTemplate.sections.splice(index, 1);
}
});
$scope.currentTemplate = undefined;
};
/****************
Section
*****************/
$scope.configureSection = function(section, template){
if($scope.currentSection && $scope.currentSection === section){
delete $scope.currentSection;
}else{
if(section === undefined){
var space = ($scope.availableTemplateSpace > 4) ? 4 : $scope.availableTemplateSpace;
section = {
grid: space
};
template.sections.push(section);
}
$scope.currentSection = section;
}
};
$scope.deleteSection = function(index){
$scope.currentTemplate.sections.splice(index, 1);
};
$scope.closeSection = function(){
$scope.currentSection = undefined;
};
/****************
layout
*****************/
$scope.configureLayout = function(layout){
if($scope.currentLayout && $scope.currentLayout === layout){
delete $scope.currentLayout;
}else{
//if no template is passed in, we can assume we are adding a new one
if(layout === undefined){
layout = {
name: "",
areas:[
]
};
$scope.model.value.layouts.push(layout);
}
$scope.currentLayout = layout;
}
};
$scope.deleteLayout = function(index){
$scope.model.value.layouts.splice(index, 1);
};
$scope.closeLayout = function(){
//clean-up
_.forEach($scope.currentLayout.areas, function(area, index){
if(area.grid <= 0){
$scope.currentLayout.areas.splice(index, 1);
}
});
$scope.currentLayout = undefined;
};
/****************
area
*****************/
$scope.configureArea = function(area, layout){
if($scope.currentArea && $scope.currentArea === area){
delete $scope.currentArea;
}else{
if(area === undefined){
var space = ($scope.availableLayoutSpace > 4) ? 4 : $scope.availableLayoutSpace;
area = {
grid: space
};
layout.areas.push(area);
}
$scope.currentArea = area;
}
};
$scope.deleteArea = function(index){
$scope.currentLayout.areas.splice(index, 1);
};
$scope.closeArea = function(){
$scope.currentArea = undefined;
};
/****************
utillities
*****************/
$scope.scaleUp = function(section, max){
var add = (max > 2) ? 2 : max;
section.grid = section.grid+add;
};
$scope.scaleDown = function(section){
var remove = (section.grid > 2) ? 2 : section.grid;
section.grid = section.grid-remove;
};
$scope.toggleCollection = function(collection){
if(collection === undefined){
collection = [];
}else{
delete collection;
}
}
$scope.percentage = function(spans){
return ((spans/12)*100).toFixed(1);
};
/****************
watchers
*****************/
$scope.$watch("currentTemplate", function(template){
if(template){
var total = 0;
_.forEach(template.sections, function(section){
total = (total + section.grid);
});
$scope.availableTemplateSpace = 12 - total;
}
}, true);
$scope.$watch("currentLayout", function(layout){
if(layout){
var total = 0;
_.forEach(layout.areas, function(area){
total = (total + area.grid);
});
$scope.availableLayoutSpace = 12 - total;
}
}, true);
/****************
editors
*****************/
gridService.getGridEditors().then(function(response){
$scope.editors = response.data;
});
/* init grid data */
if (!$scope.model.value || $scope.model.value == "") {
if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) {
$scope.model.value = emptyModel;
}

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

@@ -1,109 +1,267 @@
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController">
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
<p><strong>Config file path:</strong></p>
<table cellpadding="20" style="margin-bottom:20px">
<tr>
<td>
<input ng-model="model.value.gridConfigPath" type="text" style="width:500px;">
</td>
</tr>
</table>
<div style="width: 600px">
<div class="control-group uSky-templates" ng-if="!currentTemplate">
<umb-control-group label="Template grids" description="Grids are the overall layout for the grid editor, usually you only need one or two overall templates" hide-label="false">
<!--<p><strong>Allowed row settings:</strong></p>
<table cellpadding="20" style="margin-bottom:20px">
<tr>
<td>
<p><i class="icon icon-paint-roller"></i>&nbsp;Enable/Disable row background</p>
<input ng-model="model.value.enableBackground" type="checkbox">
<label for="">Enable</label>
</td>
<td>
<p><i class="icon icon-navigation-top"></i>&nbsp;Enable/Disable top margin</p>
<input ng-model="model.value.enableSkipTopMargin" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultSkipTopMargin" type="checkbox">
<label for="">Default value</label>
</td>
<td>
<p><i class="icon icon-navigation-bottom"></i>&nbsp;Enable/Disable bottom margin</p>
<input ng-model="model.value.enableSkipBottomMargin" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultSkipBottomMargin" type="checkbox">
<label for="">Default value</label>
<ul class="unstyled"
ui-sortable
ng-model="model.value.templates">
<li ng-repeat="template in model.value.templates">
</td>
</tr>
<tr>
<td>
<p><i class="icon icon-navigation-first"></i>&nbsp;Enable/Disable left margin</p>
<input ng-model="model.value.enableSkipLeftMargin" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultSkipLeftMargin" type="checkbox">
<label for="">Default value</label>
</td>
<td>
<p><i class="icon icon-navigation-last"></i>&nbsp;Enable/Disable right margin</p>
<input ng-model="model.value.enableSkipRightMargin" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultSkipRightMargin" type="checkbox">
<label for="">Default value</label>
</td>
<td>
<p><i class="icon icon-fullscreen"></i>&nbsp;Enable/Disable control margin</p>
<input ng-model="model.value.enableSkipControlMargin" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultSkipControlMargin" type="checkbox">
<label for="">Default value</label>
</td>
</tr>
<tr>
<td>
<p><i class="icon icon-width"></i>&nbsp;Enable/Disable full screen</p>
<input ng-model="model.value.enableFullScreen" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultFullScreen" type="checkbox">
<label for="">Default value</label>
</td>
<td>
<p><i class="icon icon-frame"></i>&nbsp;Enable/Disable boxed</p>
<input ng-model="model.value.enableBoxed" type="checkbox">
<label for="">Enable</label>
<br />
<input ng-model="model.value.defaultBoxed" type="checkbox">
<label for="">Default value</label>
</td>
</tr>
</table>-->
<div class="uSky-templates-template" style="float: left">
<a href class="tb" ng-click="configureTemplate(template)">
<div class="tr">
<div class="td uSky-templates-column"
ng-class="{last:$last}"
ng-repeat="section in template.sections"
style="width:{{ percentage(section.grid) }}%">
</div>
</div>
</a>
</div>
<!--<p><strong>Allowed editors:</strong></p>
<table cellpadding="20" style="margin-bottom:20px">
<tr>
<td>
<p ng-repeat="editor in editors">
<input type="checkbox"
checklist-model="model.value.enabledEditors"
checklist-value="editor.alias">
&nbsp;<i class="icon {{editor.icon}}"></i>&nbsp; {{editor.name}}
</p>
</td>
</tr>
</table>-->
<p><strong>Others settings:</strong></p>
<table cellpadding="20" style="margin-bottom:20px">
<tr>
<td>
<p><input ng-model="model.value.enableMultiCells" type="checkbox">&nbsp;<i class="icon icon-edit"></i>&nbsp;Multiple controls in cell</p>
<!--<p>Approved background stylesheet path:&nbsp;<input ng-model="model.value.approvedBackgroundCss" type="text" style="width:300px;"></p>-->
</td>
</tr>
</table>
<div>
<a ng-click="configureTemplate(template)" href>{{template.name}}</a><br/>
<small>{{template.sections.length}} configurable sections</small><br/>
<a class="btn btn-small btn-link" href ng-click="deleteTemplate($index)"><i class="icon-delete red"></i> Delete template </a>
</div>
<br style="clear: both"/>
</li>
</ul>
<button class="btn btn-small"
prevent-default
ng-click="configureTemplate()"><i class="icon-add"></i>Add template</button>
</div>
<div ng-if="currentTemplate">
<h5>Template</h5>
<umb-control-group label="Name" hide-label="false">
<input type="text" class="" ng-model="currentTemplate.name" />
</umb-control-group>
<umb-control-group label="Sections" description="Choose a section from the grid to edit" hide-label="false">
<div class="uSky-templates-template"
style="margin: 0; width: 350px; position: relative;">
<div class="tb" style="height: 70px; border-width: 2px; padding: 2px">
<div class="tr">
<a class="td uSky-templates-column"
ng-class="{last:$last, selected:section==currentSection}"
ng-repeat="section in currentTemplate.sections"
ng-click="configureSection(section, currentTemplate)"
style="width:{{ percentage(section.grid) }}%">
</a>
<a class="td uSky-templates-column add" ng-if="availableTemplateSpace > 0"
ng-click="configureSection(undefined, currentTemplate)"
style="width:{{ percentage(availableTemplateSpace) }}%">
<i class="icon icon-add"></i>
</a>
</div>
</div>
</div>
<div ng-if="currentSection" style="padding-bottom: 50px;">
<h5>Modify template Section</h5>
<umb-control-group label="Size" hide-label="false">
<div class="grid-size-scaler">
<a href ng-click="scaleDown(currentSection)">
<i class="icon icon-remove"></i>
</a>
{{currentSection.grid}}
<a href ng-click="scaleUp(currentSection, availableTemplateSpace)">
<i class="icon icon-add"></i>
</a>
</div>
</umb-control-group>
<umb-control-group hide-label="true">
<ul class="unstyled">
<li>
<label>
<input type="checkbox"
ng-model="currentSection.allowAll"
ng-checked="currentSection.allowed === undefined"
ng-change="toggleCollection(currentSection.allowed, currentSection.allowAll)" />
Allow all layouts
</label>
</li>
</ul>
<div ng-if="currentSection.allowAll === false">
<hr />
<ul class="unstyled">
<li ng-repeat="layout in model.value.layouts">
<label>
<input type="checkbox"
checklist-model="currentSection.allowed"
checklist-value="layout.name"> {{layout.name}}
</label>
</li>
</ul>
</div>
</umb-control-group>
<button prevent-default ng-click="closeSection()" class="btn btn-small">Finish editing section</button>
<a class="btn btn-small btn-link"
href
ng-click="deleteSection($index)"><i class="icon-delete red"></i> Delete section </a>
</div>
</umb-control-group>
<umb-control-group hide-label="false" ng-if="!currentSection">
<button prevent-default ng-click="closeTemplate()" class="btn btn-small">
Finish editing template
</button>
</umb-control-group>
</div>
</umb-control-group>
</div>
<div style="max-width: 600px">
<div class="control-group uSky-templates" ng-if="!currentLayout">
<umb-control-group
label="Layouts"
description="Layouts are predefined layouts of editors arranged in a row of cells with different editors associated"
hide-label="false">
<div class="control-group uSky-templates-rows">
<ul class="unstyled"
ui-sortable
ng-model="model.value.templates">
<li ng-repeat="layout in model.value.layouts">
<div class="uSky-templates-row" style="float: left">
<a href class="tb mainTbpt" ng-click="configureLayout(layout)">
<div class="tr">
<div style="width:{{ percentage(area.grid); }}%" class="middle mainTdpt td" ng-repeat="area in layout.areas">
<i class="icon {{areaPreview(area)}}"></i>
</div>
</div>
</a>
</div>
<div>
<a ng-click="configureLayout(layout)" href>{{layout.name}}</a><br/>
<small>{{layout.areas.length}} configurable areas</small><br/>
<a class="btn btn-small btn-link" href ng-click="deleteTemplate($index)"><i class="icon-delete red"></i> Delete layout </a>
</div>
<br style="clear: both"/>
</li>
</ul>
<button class="btn btn-small"
prevent-default
ng-click="configureLayout()"><i class="icon-add"></i>Add layout</button>
</div>
</umb-control-group>
</div>
<div ng-if="currentLayout">
<h5>Layout</h5>
<umb-control-group
label="Name"
hide-label="false">
<input type="text" class="" ng-model="currentLayout.name" />
</umb-control-group>
<umb-control-group label="Areas" hide-label="false" description="Choose an area from the layout to edit">
<div class="uSky-templates-template"
style="margin: 0; width: 350px; position: relative;">
<div class="tb" style="height: 70px; border-width: 2px; padding: 2px">
<div class="tr">
<a class="td uSky-templates-column"
ng-class="{last:$last, selected:area==currentArea}"
ng-repeat="area in currentLayout.areas"
ng-click="configureArea(area, currentLayout)"
style="width:{{ percentage(area.grid) }}%">
</a>
<a class="td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
ng-click="configureArea(undefined, currentLayout)"
style="width:{{ percentage(availableLayoutSpace) }}%">
<i class="icon icon-add"></i>
</a>
</div>
</div>
</div>
<div ng-if="currentArea" style="padding-bottom: 50px;">
<h5>Modify layout area</h5>
<umb-control-group label="Size" hide-label="false">
<div class="grid-size-scaler">
<a href ng-click="scaleDown(currentArea)">
<i class="icon icon-remove"></i>
</a>
{{currentArea.grid}}
<a href ng-click="scaleUp(currentArea, availableLayoutSpace)">
<i class="icon icon-add"></i>
</a>
</div>
</umb-control-group>
<umb-control-group hide-label="true">
<ul class="unstyled">
<li>
<label>
<input type="checkbox"
ng-model="currentArea.allowAll"
ng-checked="currentArea.allowed === undefined"
ng-change="toggleCollection(currentArea.allowed, currentArea.allowAll)" />
Allow all layouts
</label>
</li>
</ul>
<div ng-if="currentArea.allowAll === false">
<hr />
<ul class="unstyled">
<li ng-repeat="editor in editors">
<label>
<input type="checkbox"
checklist-model="currentArea.allowed"
checklist-value="editor.alias">
<i class="icon {{editor.icon}}"></i> {{editor.name}}
</label>
</li>
</ul>
</div>
</umb-control-group>
<button prevent-default ng-click="closeArea()" class="btn btn-small">Finish editing area</button>
<a class="btn btn-small btn-link"
href
ng-click="deleteArea($index)"><i class="icon-delete red"></i> Delete area </a>
</div>
</umb-control-group>
<umb-control-group hide-label="false" ng-if="!currentArea">
<button prevent-default ng-click="closeLayout()" class="btn btn-small">Finish editing layout</button>
</umb-control-group>
</div>
</div>
</div>