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

Adds support for grid row configuration and styling

Browse Source
This commit is contained in:
per ploug
2014-11-05 15:44:29 +01:00
parent 7c5ad67a9f
commit adfdbaec46
13 changed files with 550 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/Umbraco.Web.UI.Client/src/common/directives/editors/umbRawModel.directive.js Normal file
View File

@@ -0,0 +1,99 @@
/*
example usage: <textarea json-edit="myObject" rows="8" class="form-control"></textarea>
jsonEditing is a string which we edit in a textarea. we try parsing to JSON with each change. when it is valid, propagate model changes via ngModelCtrl
use isolate scope to prevent model propagation when invalid - will update manually. cannot replace with template, or will override ngModelCtrl, and not hide behind facade
will override element type to textarea and add own attribute ngModel tied to jsonEditing
*/
angular.module("umbraco.directives")
.directive('umbRawModel', function () {
return {
restrict: 'A',
require: 'ngModel',
template: '<textarea ng-model="jsonEditing"></textarea>',
replace : true,
scope: {
model: '=umbRawModel',
validateOn:'='
},
link: function (scope, element, attrs, ngModelCtrl) {
function setEditing (value) {
scope.jsonEditing = angular.copy( jsonToString(value));
}
function updateModel (value) {
scope.model = stringToJson(value);
}
function setValid() {
ngModelCtrl.$setValidity('json', true);
}
function setInvalid () {
ngModelCtrl.$setValidity('json', false);
}
function stringToJson(text) {
try {
return angular.fromJson(text);
} catch (err) {
setInvalid();
return text;
}
}
function jsonToString(object) {
// better than JSON.stringify(), because it formats + filters $$hashKey etc.
// NOTE that this will remove all $-prefixed values
return angular.toJson(object, true);
}
function isValidJson(model) {
var flag = true;
try {
angular.fromJson(model);
} catch (err) {
flag = false;
}
return flag;
}
//init
setEditing(scope.model);
var onInputChange = function(newval,oldval){
if (newval !== oldval) {
if (isValidJson(newval)) {
setValid();
updateModel(newval);
} else {
setInvalid();
}
}
};
if(scope.validateOn){
element.on(scope.validateOn, function(){
scope.$apply(function(){
onInputChange(scope.jsonEditing);
});
});
}else{
//check for changes going out
scope.$watch('jsonEditing', onInputChange, true);
}
//check for changes coming in
scope.$watch('model', function (newval, oldval) {
if (newval !== oldval) {
setEditing(newval);
}
}, true);
}
};
});

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

@@ -5,7 +5,7 @@
overflow-y:hidden!important;
}
IFRAME {overflow:hidden;}
IFRAME {overflow:hidden;}
// Sortabel
@@ -29,7 +29,7 @@
background: none !important;
color: #999 !important;
padding: 0 !important;
margin: 0 !important;
margin: 0 !important;
}
.usky-grid .ui-sortable-helper .cell-tools{
@@ -66,7 +66,7 @@
.usky-grid .right {
float:right;
}
// general layout components
// -------------------------
@@ -108,10 +108,10 @@
text-align: center;
}
.usky-grid .mainTb {
.usky-grid .mainTb {
border-collapse: separate;
}
.usky-grid .mainTd {
.usky-grid .mainTd {
position:relative;
}
@@ -120,10 +120,10 @@
// COLUMN
// -------------------------
.usky-grid .usky-column {
}
.usky-grid .usky-column.last {
}
@@ -206,6 +206,11 @@
cursor: move
}
.usky-grid .cell-tools-edit{
position: absolute;
top: 80px;
right: 5px;
}
// CONTROL
@@ -216,9 +221,9 @@
-webkit-transition: all .20s ease-in-out;*/
position:relative;
display:block;
/*
border: 1px dashed rgba(255, 0, 0, .0);
border: 1px dashed rgba(255, 0, 0, .0);
border-bottom-width: 1px;
*/
@@ -247,7 +252,7 @@
}
.usky-grid .usky-control-inner{
min-height: 60px;
min-height: 60px;
}
@@ -255,7 +260,7 @@
// CONTROL PLACEHOLDER
// -------------------------
.usky-grid .usky-control-placeholder {
min-height: 50px;
min-height: 20px;
position: relative;
text-align: center;
text-align: -moz-center;
@@ -266,7 +271,7 @@
font-size: 14px; opacity: 0.7; text-align: left;
padding: 5px;
border:1px solid rgba(182, 182, 182, 0.3);
height: 50px;
height: 20px;
}
.usky-grid .usky-control-placeholder:hover .placeholder{
@@ -293,7 +298,7 @@
.usky-grid .usky-editor-placeholder i{
color: @grayLight;
font-size: 85px;
line-height: 85px;
line-height: 85px;
display: block;
margin-bottom: 10px;
}
@@ -326,7 +331,7 @@
resize: none;
font-style: italic;
}
.usky-grid .cellPanelRte {
min-height:60px;
}
@@ -382,7 +387,7 @@
}
.usky-grid ul {
@@ -450,7 +455,7 @@
background-color: #F7F7F7 !important;
}
// MEDIA EDITOR
// -------------------------
.usky-grid .fullSizeImage {
@@ -488,18 +493,18 @@
/**************************************************************************************************/
.usky-grid .usky-cell{
}
.usky-grid .usky-row{
}
.usky-grid .usky-control{
margin: 10px 0 0 0;
padding: 5px;
}
.usky-grid .usky-templates-columns{
margin-top: 30px;
}
@@ -526,7 +531,7 @@
overflow:hidden;
width:100%;
}
.usky-grid .uSky-templates-template {
display:inline-block;
width:100px;
@@ -538,9 +543,9 @@
border:5px solid @blue;
}
.usky-grid .uSky-templates-template .tb {
width:100%;
height:150px;
.usky-grid .uSky-templates-template .tb {
width:100%;
height:150px;
padding:10px;
background-color: @grayLighter;
border: 5px solid @grayLight;
@@ -548,11 +553,11 @@
position: relative;
}
.usky-grid .uSky-templates-template .tr {
.usky-grid .uSky-templates-template .tr {
height: 100%;
position: relative;
}
.usky-grid .uSky-templates-template .tb .uSky-templates-column {
height:100%;
border: 1px dashed @grayLight;
@@ -583,7 +588,7 @@
}
.usky-grid .mainTbpt:hover {
.usky-grid .mainTbpt:hover {
border-color:@blue;
}
@@ -592,13 +597,13 @@
border-spacing: 3px;
border-collapse: separate;
height: 35px;
border: 2px solid @grayLight;
border: 2px solid @grayLight;
margin:0px;
background-color: @grayLighter;
}
.usky-grid .mainTdpt {
}
.usky-grid .mainTdpt {
height: 35px;
border: 1px dashed @grayLight;
border: 1px dashed @grayLight;
margin:0px;
background-color: rgba(228, 228, 228, 0.41);
overflow: hidden;
@@ -674,7 +679,7 @@
/**************************************************************************************************/
.usky-grid-configuration .uSky-templates{
text-align: left;
}
}
.usky-grid-configuration ul{
display: block;
@@ -737,4 +742,3 @@
}
.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}

14
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.controller.js Normal file
View File

@@ -0,0 +1,14 @@
function imageFilePickerController($scope, dialogService, mediaHelper) {
$scope.pick = function() {
dialogService.mediaPicker({
multiPicker: false,
callback: function(data) {
$scope.model.value = mediaHelper.resolveFile(data, false);
}
});
};
}
angular.module('umbraco').controller("Umbraco.PrevalueEditors.ImageFilePickerController",imageFilePickerController);

14
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/imagepicker.html Normal file
View File

@@ -0,0 +1,14 @@
<div ng-controller="Umbraco.PrevalueEditors.ImageFilePickerController" class="umb-editor umb-mediapicker">
<ul class="umb-sortable-thumbnails">
<li style="width: 120px; height: 100px; overflow: hidden;">
<a href ng-click="pick()" class="icon-holder" ng-hide="model.value">
<i class="icon icon-add large" ></i>
<small>Choose...</small>
</a>
<img ng-src="{{model.value}}" alt="" ng-show="model.value">
<a href class="picked-image" ng-click="model.value = null" ng-show="model.value"><i class="icon icon-delete"></i></a>
</li>
</ul>
</div>

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

@@ -1,11 +1,45 @@
var uSkyGridConfig = [
{
style:[
{
label: "Set a background image",
description: "Set a row background",
key: "background-image",
view: "imagepicker",
modifier: "url({0})"
},
{
label: "Set a font color",
description: "Pick a color",
key: "color",
view: "colorpicker"
}
],
config:[
{
label: "Preview",
description: "Display a live preview",
key: "preview",
view: "boolean"
},
{
label: "Class",
description: "Set a css class",
key: "class",
view: "textstring"
}
],
layouts: [
{
grid: 12,
percentage: 100,
rows: [
{
name: "Single column",
@@ -13,7 +47,7 @@ var uSkyGridConfig = [
grid: 12,
percentage: 100
}]
},
},
{
name: "Article",
@@ -96,7 +130,7 @@ var uSkyGridConfig = [
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{
@@ -326,4 +360,4 @@ var uSkyGridConfig = [
}
]
}
];
];

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

@@ -0,0 +1,73 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridController.Dialogs.Config",
function ($scope, $http) {
var placeHolder = "{0}";
var addModifier = function(val, modifier){
if (!modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
return modifier.replace(placeHolder, val);
}
}
var stripModifier = function (val, modifier) {
if (!val || !modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
var paddArray = modifier.split(placeHolder);
if(paddArray.length == 1){
if (modifier.indexOf(placeHolder) === 0) {
return val.slice(0, -paddArray[0].length);
} else {
return val.slice(paddArray[0].length, 0);
}
}else{
return val.slice(paddArray[0].length, -paddArray[1].length);
}
}
}
$scope.styles = angular.copy($scope.dialogOptions.config.items.styles);
$scope.config = angular.copy($scope.dialogOptions.config.items.config);
var element = $scope.dialogOptions.gridItem;
if(angular.isObject(element.config)){
_.each($scope.config, function(cfg){
var val = element.config[cfg.key];
if(val){
cfg.value = stripModifier(val, cfg.modifier);
}
});
}
if(angular.isObject(element.styles)){
_.each($scope.styles, function(style){
var val = element.styles[style.key];
if(val){
style.value = stripModifier(val, style.modifier);
}
});
}
$scope.saveAndClose = function(){
var styleObject = {};
var configObject = {};
_.each($scope.styles, function(style){
if(style.value){
styleObject[style.key] = addModifier(style.value, style.modifier);
}
});
_.each($scope.config, function (cfg) {
if (cfg.value) {
configObject[cfg.key] = addModifier(cfg.value, cfg.modifier);
}
});
$scope.submit({config: configObject, styles: styleObject});
};
});

40
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="umb-panel" ng-controller="Umbraco.PropertyEditors.GridController.Dialogs.Config">
<div class="umb-panel-body no-header with-footer compact">
<umb-pane>
<div ng-if="config">
<h4>Settings</h4>
<umb-property
property="configValue"
ng-repeat="configValue in config">
<umb-editor model="configValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>
<div ng-if="styles">
<h4>Style</h4>
<umb-property
property="styleValue"
ng-repeat="styleValue in styles">
<umb-editor model="styleValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>
</umb-pane>
</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="saveAndClose()" class="btn btn-primary">
<localize key="buttons_save">Save</localize>
</a>
</div>
</div>
</div>
</div>

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

@@ -0,0 +1,15 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditorController.Dialogs.EditConfig",
function ($scope, $http) {
$scope.renderModel = {};
$scope.renderModel.name = $scope.dialogOptions.name;
$scope.renderModel.config = $scope.dialogOptions.config;
$scope.saveAndClose = function(isValid){
if(isValid){
$scope.submit($scope.renderModel.config);
}
};
});

31
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html Normal file
View File

@@ -0,0 +1,31 @@
<form name="gridConfigEditor">
<div class="umb-panel" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController.Dialogs.EditConfig">
<div class="umb-panel-body no-header with-footer compact">
<umb-pane>
<h4>{{renderModel.name}}</h4>
<p>Settings will only save if the entered json configuration is valid</p>
<textarea name="configSource"
validate-on="'blur'"
rows="20" class="umb-editor umb-textarea"
umb-raw-model="renderModel.config"></textarea>
<div class="alert alert-error" ng-show="gridConfigEditor.$invalid === true">
This configuration is not valid json, and will not be saved.
</div>
</umb-pane>
</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="saveAndClose(gridConfigEditor.$valid)" class="btn btn-primary">
<localize key="buttons_save">Save</localize>
</a>
</div>
</div>
</div>
</div>
</form>

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

@@ -99,8 +99,8 @@ angular.module("umbraco")
start: function (e, ui) {
ui.item.find('.mceNoEditor').each(function () {
notIncludedRte = []
tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'))
notIncludedRte = [];
tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
});
},
@@ -119,7 +119,7 @@ angular.module("umbraco")
}, 500, false);
}
}
};
// *********************************************
// Add items overlay menu
@@ -218,18 +218,32 @@ angular.module("umbraco")
if(row){
section.rows.push(row);
}
};
$scope.removeRow = function (section, $index) {
if (section.rows.length > 0) {
section.rows.splice($index, 1);
$scope.openRTEToolbarId = null;
$scope.initContent();
}
};
$scope.editGridItemSettings = function (gridItem) {
dialogService.open(
{
template: "views/propertyeditors/grid/dialogs/config.html",
gridItem: gridItem,
config: $scope.model.config,
callback: function(data){
gridItem.styles = data.styles;
gridItem.config = data.config;
}
});
};
// *********************************************
// Cell management functions
@@ -401,6 +415,7 @@ angular.module("umbraco")
_.forEach(section.rows, function(row, index){
if(!row.$initialized){
var initd = $scope.initRow(row);
//if init fails, remove
if(!initd){
section.rows.splic(index, 1);
@@ -420,12 +435,15 @@ angular.module("umbraco")
//merge the layout data with the original config data
//if there are no config info on this, splice it out
var original = _.find($scope.model.config.items.layouts, function(o){ return o.name === row.name; });
var original = _.find($scope.model.config.items.layouts, function (o) { return o.name === row.name; });
if(!original){
return null;
}else{
//make a copy to not touch the original config
original = angular.copy(original);
original.styles = row.styles;
original.config = row.config;
//sync area configuration
_.each(original.areas, function(area, areaIndex){

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

@@ -1,6 +1,7 @@
<div ng-controller="Umbraco.PropertyEditors.GridController" class="usky-grid">
<div ng-if="contentReady">
<!-- Template picker -->
<div class="uSky-templates tb" ng-show="!model.value || model.value == ''">
<div class="tr">
@@ -41,9 +42,8 @@
<!-- for each row in template section -->
<div ng-repeat="row in section.rows"
class="usky-row"
ng-mouseover="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()"
ng-class="{'selectedControl':currentRow == row && currentControl === null}">
ng-mouseenter="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()">
<!-- Row tool -->
<div class="row-tools" ng-animate="'fade'" ng-if="currentRow == row && currentControl === null">
@@ -52,8 +52,8 @@
<div class="cell-tools-remove">
<div class="iconBox"
ng-click="deletePrompt = true"
ng-mouseover="setCurrentRemoveControl(row)"
ng-mouseover="disableCurrentRemoveControl(row)">
ng-mouseenter="setCurrentRemoveControl(row)"
ng-mouseleave="disableCurrentRemoveControl(row)">
<span ng-if="deletePrompt">
Are you sure?
@@ -65,17 +65,24 @@
</div>
<div class="cell-tools-move">
<div class="iconBox"
ng-mouseover="setCurrentMovedRow(row)"
ng-mouseleave="disableCurrentMovedRow(row)">
<a class="iconBox"
href>
<i class="icon icon-navigation"></i>
</div>
</a>
</div>
<div class="cell-tools-edit">
<a href class="iconBox" ng-click="editGridItemSettings(row)">
<i class="icon icon-settings-alt"></i>
</a>
</div>
</div>
<!-- row container -->
<div class="{{row.cssClass}} mainContainer usky-row-inner"
ng-class="{last:$last,first:$first,warnhighlight:currentRemoveControl == row, infohighlight:currentMovedRow == row}">
ng-class="{last:$last,first:$first, warnhighlight:currentRemoveControl == row, infohighlight:currentMovedRow == row}">
<div class="mainTb">
<div class="tb">
<div class="tr">
@@ -89,7 +96,6 @@
<!-- if area is empty tools -->
<div class="usky-control usky-control-placeholder"
ng-if="area.controls.length == 0">
<div ng-if="area.allowed && area.allowed.length === 1"
ng-init="singleEditor = area.$allowedEditors[0]"
class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
@@ -168,7 +174,6 @@
<i class="icon icon-navigation"></i>
</div>
</div>
</div>
<div class="usky-control-inner" ng-class="{last:$last,
@@ -250,6 +255,3 @@
</div>
</div>

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

@@ -3,6 +3,39 @@ angular.module("umbraco")
function ($scope, $http, assetsService, $rootScope, dialogService, mediaResource, gridService, imageHelper, $timeout) {
var emptyModel = {
styles:[
{
label: "Set a background image",
description: "Set a row background",
key: "background-image",
view: "imagepicker",
modifier: "url({0})"
},
{
label: "Set a font color",
description: "Pick a color",
key: "color",
view: "colorpicker"
}
],
config:[
{
label: "Preview",
description: "Display a live preview",
key: "preview",
view: "boolean"
},
{
label: "Class",
description: "Set a css class",
key: "class",
view: "textstring"
}
],
columns: 12,
templates:[
{
@@ -195,11 +228,42 @@ angular.module("umbraco")
delete collection;
}
};
$scope.percentage = function(spans){
return ((spans / $scope.model.value.columns) * 100).toFixed(1);
};
$scope.removeConfigValue = function(collection, index){
collection.splice(index, 1);
};
var editConfigCollection = function(configValues, title, callbackOnSave){
dialogService.open(
{
template: "views/propertyeditors/grid/dialogs/editconfig.html",
config: configValues,
name: title,
callback: function(data){
callbackOnSave(data);
}
});
};
$scope.editConfig = function(){
editConfigCollection($scope.model.value.config, "Settings", function(data){
$scope.model.value.config = data;
});
};
$scope.editStyles = function(){
editConfigCollection($scope.model.value.styles, "Styling", function(data){
$scope.model.value.styles = data;
});
};
/****************
watchers
*****************/
@@ -236,9 +300,19 @@ angular.module("umbraco")
if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) {
$scope.model.value = emptyModel;
} else {
if (!$scope.model.value.columns) {
$scope.model.value.columns = emptyModel.columns;
}
if (!$scope.model.value.config) {
$scope.model.value.config = [];
}
if (!$scope.model.value.styles) {
$scope.model.value.styles = [];
}
}
});

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

@@ -1,7 +1,6 @@
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
<div style="width: 600px">
<div class="control-group uSky-templates" ng-if="!currentTemplate">
<umb-control-group label="Grid layouts" description="Layouts are the overall work area for the grid editor, usually you only need one or two differnt layouts" hide-label="false">
@@ -27,7 +26,7 @@
<div>
<a ng-click="configureTemplate(template)" href>{{template.name}}</a><br />
<small>{{template.sections.length}} layout areas</small><br />
<small>{{template.sections.length}} sections</small><br />
<a class="btn btn-small btn-link" href ng-click="deleteTemplate($index)"><i class="icon-delete red"></i> Delete layout </a>
</div>
@@ -39,20 +38,21 @@
<button class="btn btn-small"
prevent-default
ng-click="configureTemplate()">
<i class="icon-add"></i>Add layout
<i class="icon-add"></i>Add new layout
</button>
</umb-control-group>
</div>
<div ng-if="currentTemplate">
<h5>Layout</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 an area in the layout to edit" hide-label="false">
<umb-control-group label="Sections" description="Choose a section in the layout 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">
@@ -74,8 +74,7 @@
</div>
<div ng-if="currentSection" style="padding-bottom: 50px;">
<h5>Modify layout area</h5>
<umb-control-group label="Size" hide-label="false">
<umb-control-group label="Width" hide-label="false">
<div class="grid-size-scaler">
<a href ng-click="scaleDown(currentSection)">
<i class="icon icon-remove"></i>
@@ -128,7 +127,7 @@
<div>
{{layout.name}}<br />
<small>{{layout.areas.length}} configurable columns</small><br />
<small>{{layout.areas.length}} configurable sections</small><br />
</div>
<br style="clear: both" />
@@ -138,11 +137,11 @@
</div>
</umb-control-group>
<button prevent-default ng-click="closeSection()" class="btn btn-small">Finish editing area</button>
<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 area</a>
ng-click="deleteSection($index)"><i class="icon-delete red"></i>Delete section</a>
</div>
</umb-control-group>
@@ -163,10 +162,10 @@
<div style="max-width: 600px">
<div class="control-group uSky-templates" ng-if="!currentLayout">
<div class="control-group uSky-templates" ng-if="!currentTemplate">
<umb-control-group
label="Row configurations"
description="Rows are predefined columns of editors arranged horizontally"
description="Rows are predefined cells arranged horizontally"
hide-label="false">
<div class="control-group uSky-templates-rows">
@@ -188,7 +187,7 @@
<div>
<a ng-click="configureLayout(layout)" href>{{layout.name}}</a><br />
<small>{{layout.areas.length}} columns</small><br />
<small>{{layout.areas.length}} cells</small><br />
<a class="btn btn-small btn-link" href ng-click="deleteLayout($index)"><i class="icon-delete red"></i> Delete row </a>
</div>
@@ -214,7 +213,7 @@
<input type="text" class="" ng-model="currentLayout.name" />
</umb-control-group>
<umb-control-group label="Layout areas" hide-label="false" description="Choose column from the row to edit">
<umb-control-group label="Layout areas" hide-label="false" description="Choose a cell from the row 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">
@@ -236,15 +235,12 @@
</div>
<div ng-if="currentArea" style="padding-bottom: 50px;">
<h5>Modify column</h5>
<umb-control-group label="Size" hide-label="false">
<umb-control-group label="Width" 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>
@@ -252,7 +248,6 @@
</umb-control-group>
<umb-control-group hide-label="true">
<ul class="unstyled">
<li>
<label>
@@ -280,25 +275,80 @@
</div>
</umb-control-group>
<button prevent-default ng-click="closeArea()" class="btn btn-small">Finish editing column</button>
<button prevent-default ng-click="closeArea()" class="btn btn-small">Finish editing cell</button>
<a class="btn btn-small btn-link"
href
ng-click="deleteArea($index)"><i class="icon-delete red"></i> Delete column </a>
ng-click="deleteArea($index)"><i class="icon-delete red"></i> Delete cell </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 row</button>
</umb-control-group>
</div>
</div>
<div style="max-width: 600px">
<div style="max-width: 600px" ng-if="!currentTemplate && !currentLayout">
<umb-control-group label="Columns" hide-label="false" description="Total combined number of columns in the grid layout">
<input type="text" class="" ng-model="model.value.columns" />
</umb-control-group>
<umb-control-group label="Settings" hide-label="false" description="Configure what settings editors can change">
<ul class="unstyled list-icons umb-contentpicker"
ui-sortable
ng-model="model.config">
<li ng-repeat="configValue in model.value.config">
<i class="icon icon-navigation handle"></i>
<a href="#" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
<i class="icon icon-delete red hover-show"></i>
<i class="icon-settings-alt-2 hover-hide"></i>
{{configValue.label}}
</a>
</li>
</ul>
<ul class="unstyled list-icons">
<li>
<i class="icon icon-add blue"></i>
<a href="#" ng-click="editConfig()" prevent-default>
Edit settings
</a>
</li>
</ul>
</umb-control-group>
<umb-control-group label="Styles" hide-label="false" description="Configure what styling editors can change">
<ul class="unstyled list-icons umb-contentpicker"
ui-sortable
ng-model="model.value.styles">
<li ng-repeat="style in model.value.styles">
<i class="icon icon-navigation handle"></i>
<a href="#" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
<i class="icon icon-delete red hover-show"></i>
<i class="icon-brush hover-hide"></i>
{{style.label}}
</a>
</li>
</ul>
<ul class="unstyled list-icons">
<li>
<i class="icon icon-add blue"></i>
<a href="#" ng-click="editStyles()" prevent-default>
Edit style configuration
</a>
</li>
</ul>
</umb-control-group>
</div>
</div>