Add WebCms
This commit is contained in:
@@ -0,0 +1,363 @@
|
||||
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",
|
||||
columns: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
name: "Article",
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["media","quote"]
|
||||
}, {
|
||||
grid: 8,
|
||||
percentage: 66.6,
|
||||
allowed: ["rte"]
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
name: "Article, reverse",
|
||||
models: [
|
||||
{
|
||||
grid: 8,
|
||||
percentage: 66.6,
|
||||
allowed: ["rte","macro"]
|
||||
},
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["media","quote","embed"]
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: "Profile page",
|
||||
models: [
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["media"]
|
||||
},
|
||||
{
|
||||
grid: 8,
|
||||
percentage: 66.6,
|
||||
allowed: ["rte"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Headline",
|
||||
models: [
|
||||
{
|
||||
grid: 12,
|
||||
percentage: 100,
|
||||
max: 1,
|
||||
allowed: ["headline"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Three columns",
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["rte"]
|
||||
},
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["rte"]
|
||||
},
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
allowed: ["rte"]
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
grid: 9,
|
||||
percentage: 70,
|
||||
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 6,
|
||||
percentage: 50
|
||||
}, {
|
||||
grid: 6,
|
||||
percentage: 50
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, ]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 8,
|
||||
percentage: 60
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 40
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 40
|
||||
}, {
|
||||
grid: 8,
|
||||
percentage: 60
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
grid: 3,
|
||||
percentage: 30,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
grid: 3,
|
||||
percentage: 30,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
grid: 9,
|
||||
percentage: 70,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 6,
|
||||
percentage: 50
|
||||
}, {
|
||||
grid: 6,
|
||||
percentage: 50
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 33.3
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, {
|
||||
grid: 3,
|
||||
percentage: 25
|
||||
}, ]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}, {
|
||||
grid: 2,
|
||||
percentage: 16.6
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 8,
|
||||
percentage: 60
|
||||
}, {
|
||||
grid: 4,
|
||||
percentage: 40
|
||||
}]
|
||||
}, {
|
||||
models: [{
|
||||
grid: 4,
|
||||
percentage: 40
|
||||
}, {
|
||||
grid: 8,
|
||||
percentage: 60
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
grid: 4,
|
||||
percentage: 33.3,
|
||||
cellModels: [
|
||||
{
|
||||
models: [{
|
||||
grid: 12,
|
||||
percentage: 100
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,15 @@
|
||||
body.mce-content-body {
|
||||
background: transparent !important;
|
||||
overflow-x:hidden !important;
|
||||
padding-bottom: 10px !important;
|
||||
/*margin:0px;*/
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
border-radius:4px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<div ng-if="model.config">
|
||||
<umb-property
|
||||
property="configValue"
|
||||
ng-repeat="configValue in model.config">
|
||||
<umb-editor model="configValue" is-pre-value="true"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
|
||||
<div ng-if="model.styles">
|
||||
<h4>Style</h4>
|
||||
<umb-property
|
||||
property="styleValue"
|
||||
ng-repeat="styleValue in model.styles">
|
||||
<umb-editor model="styleValue" is-pre-value="true"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<form name="gridConfigEditor">
|
||||
|
||||
<h4>{{model.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="model.config"></textarea>
|
||||
|
||||
<div class="alert alert-error" ng-show="gridConfigEditor.$invalid === true">
|
||||
This configuration is not valid json, and will not be saved.
|
||||
</div>
|
||||
|
||||
</form>
|
||||
@@ -0,0 +1,115 @@
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController">
|
||||
|
||||
<div class="umb-forms-settings">
|
||||
|
||||
<h5><localize key="grid_addGridLayout" /></h5>
|
||||
<p><localize key="grid_addGridLayoutDetail" /></p>
|
||||
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentLayout.name" />
|
||||
</umb-control-group>
|
||||
|
||||
<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 currentLayout.sections"
|
||||
ng-click="configureSection(section, currentLayout)"
|
||||
ng-style="{width: percentage(section.grid) +'%'}">
|
||||
</a>
|
||||
|
||||
<a class="td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
|
||||
ng-click="configureSection(undefined, currentLayout)"
|
||||
ng-style="{width: percentage(availableLayoutSpace) + '%'}">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="currentSection" style="padding-bottom: 50px;">
|
||||
|
||||
<umb-control-group label="@general_width">
|
||||
<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, availableLayoutSpace)">
|
||||
<i class="icon icon-add"></i>
|
||||
</a>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group hide-label="true">
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link" href="" ng-click="deleteSection(currentSection, currentLayout)">
|
||||
<localize key="general_delete" class="ng-isolate-scope ng-scope">Delete</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
|
||||
<umb-control-group hide-label="true">
|
||||
<ul class="unstyled">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
ng-model="currentSection.allowAll"
|
||||
style="float: left; margin-right: 10px;"
|
||||
ng-checked="currentSection.allowed === undefined"
|
||||
ng-change="toggleCollection(currentSection.allowed, currentSection.allowAll)" />
|
||||
<localize key="grid_allowAllRowConfigurations"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div ng-if="currentSection.allowAll === false">
|
||||
<hr />
|
||||
|
||||
<div class="control-group uSky-templates-rows">
|
||||
<ul class="unstyled"
|
||||
ui-sortable
|
||||
ng-model="model.value.templates">
|
||||
|
||||
<li ng-repeat="row in rows">
|
||||
|
||||
<label style="display: block">
|
||||
<input type="checkbox"
|
||||
checklist-model="currentSection.allowed"
|
||||
checklist-value="row.name"
|
||||
style="float: left; margin-right: 10px;">
|
||||
|
||||
<div class="preview-rows columns" style="margin-top: 5px; float:left">
|
||||
<div class="preview-row">
|
||||
<div class="preview-col"
|
||||
ng-class="{last:$last}"
|
||||
ng-repeat="area in row.areas"
|
||||
ng-style="{width: percentage(area.grid) + '%'}">
|
||||
|
||||
<div class="preview-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{row.name}}<br />
|
||||
<small>{{row.areas.length}} cells</small><br />
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<br style="clear: both" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
|
||||
|
||||
<div class="umb-form-settings">
|
||||
|
||||
<h5><localize key="grid_addRowConfiguration" /></h5>
|
||||
<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_label">
|
||||
<input type="text" ng-model="currentRow.label" placeholder="Overrides name" />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_name">
|
||||
<input type="text" ng-model="currentRow.name" />
|
||||
</umb-control-group>
|
||||
|
||||
<div class="uSky-templates-template"
|
||||
style="margin: 0; width: 350px; position: relative;">
|
||||
|
||||
<div class="tb" style="height: auto; border: none !important; background: none">
|
||||
<div class="tr">
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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}}
|
||||
<small class="input-label--small">({{editor.alias}})</small>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div>
|
||||
|
||||
<h3 class="alert alert-warn ng-scope">Warning!</h3>
|
||||
|
||||
<p>
|
||||
You are deleting the row configuration '<strong>{{model.dialogData.rowName}}</strong>'
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Modifying a row configuration name will result in loss of
|
||||
data for any existing content that is based on this configuration.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<localize key="general_areyousure">Are you sure?</localize>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
|
||||
|
||||
<div class="umb-editor-placeholder" ng-click="setEmbed()" ng-if="control.value === null">
|
||||
<i class="icon icon-movie-alt"></i>
|
||||
<div class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></div>
|
||||
</div>
|
||||
|
||||
<div ng-if="control.value" ng-bind-html-unsafe="control.value"></div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="embedDialog.show"
|
||||
model="embedDialog"
|
||||
view="embedDialog.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
<p class="red">Something went wrong with this editor, below is the data stored:</p>
|
||||
<pre>{{control | json}}</pre>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.MacroController">
|
||||
|
||||
<div class="umb-editor-placeholder" ng-click="setMacro()">
|
||||
<div ng-if="!preview">
|
||||
<i class="icon icon-settings-alt"></i>
|
||||
<div class="help-text">{{title}}</div>
|
||||
</div>
|
||||
<div ng-if="preview">
|
||||
<div
|
||||
ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
|
||||
ng-bind-html-unsafe="preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="macroPickerOverlay.show"
|
||||
model="macroPickerOverlay"
|
||||
view="macroPickerOverlay.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">
|
||||
|
||||
<div class="umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
|
||||
<i class="icon icon-picture"></i>
|
||||
<div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
|
||||
</div>
|
||||
|
||||
<div ng-if="control.value">
|
||||
<img
|
||||
ng-if="url"
|
||||
ng-click="setImage()"
|
||||
ng-src="{{url}}"
|
||||
class="fullSizeImage" />
|
||||
<input type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="mediaPickerOverlay.show"
|
||||
model="mediaPickerOverlay"
|
||||
view="mediaPickerOverlay.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.RichTextEditorController as vm">
|
||||
|
||||
<div
|
||||
grid-rte
|
||||
configuration="model.config.rte"
|
||||
value="control.value"
|
||||
unique-id="control.$uniqueId"
|
||||
on-link-picker-click="vm.openLinkPicker"
|
||||
on-media-picker-click="vm.openMediaPicker"
|
||||
on-embed-click="vm.openEmbed"
|
||||
on-macro-picker-click="vm.openMacroPicker">
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.linkPickerOverlay.show"
|
||||
model="vm.linkPickerOverlay"
|
||||
position="right"
|
||||
view="vm.linkPickerOverlay.view">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.mediaPickerOverlay.show"
|
||||
model="vm.mediaPickerOverlay"
|
||||
position="right"
|
||||
view="vm.mediaPickerOverlay.view">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.embedOverlay.show"
|
||||
model="vm.embedOverlay"
|
||||
position="right"
|
||||
view="vm.embedOverlay.view">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.macroPickerOverlay.show"
|
||||
model="vm.macroPickerOverlay"
|
||||
view="vm.macroPickerOverlay.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div>
|
||||
<textarea
|
||||
rows="1"
|
||||
umb-auto-resize
|
||||
umb-auto-focus
|
||||
class="textstring input-block-level" id="{{control.uniqueId}}_text"
|
||||
ng-model="control.value"
|
||||
ng-attr-style="{{control.editor.config.style}}" localize="placeholder" placeholder="@grid_placeholderWriteHere"></textarea>
|
||||
</div>
|
||||
@@ -0,0 +1,312 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-editor clearfix" id="umb-grid">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<umb-editor-sub-header-content-right>
|
||||
<umb-button
|
||||
ng-if="showReorderButton()"
|
||||
type="button"
|
||||
icon="icon-navigation"
|
||||
button-style="link"
|
||||
label-key="{{reorderKey}}"
|
||||
action="toggleSortMode()">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
|
||||
<div ng-if="contentReady">
|
||||
|
||||
<!-- Template picker -->
|
||||
|
||||
<div class="templates-preview"
|
||||
ng-show="!model.value || model.value == ''">
|
||||
|
||||
<p><strong><localize key="grid_chooseLayout" /></strong></p>
|
||||
|
||||
<div class="preview-rows layout"
|
||||
ng-repeat="template in model.config.items.templates"
|
||||
ng-click="addTemplate(template)">
|
||||
|
||||
<div class="preview-row">
|
||||
|
||||
<div class="preview-col"
|
||||
ng-repeat="section in template.sections"
|
||||
ng-style="{width: percentage(section.grid) + '%'}">
|
||||
|
||||
<div class="preview-cell">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="preview-overlay">
|
||||
</div>
|
||||
|
||||
<small>{{template.name}}</small>
|
||||
|
||||
</div> <!-- .templates-preview-rows -->
|
||||
|
||||
</div> <!-- .templates-preview -->
|
||||
<!-- template picker end -->
|
||||
|
||||
<!-- Grids -->
|
||||
<div class="umb-grid-width">
|
||||
<div class="tb">
|
||||
|
||||
<!-- for each column in model -->
|
||||
<div class="umb-column td"
|
||||
ng-repeat="section in model.value.sections"
|
||||
ng-init="initSection(section)"
|
||||
ng-style="{width: section.$percentage + '%'}">
|
||||
|
||||
<div ui-sortable="sortableOptionsRow" ng-model="section.rows">
|
||||
|
||||
<!-- for each row in template section -->
|
||||
<!-- ng-mouseenter="setCurrentRow(row)" -->
|
||||
<!-- ng-mouseleave="disableCurrentRow()" -->
|
||||
<div class="umb-row"
|
||||
ng-repeat="row in section.rows"
|
||||
ng-click="clickRow($index, section.rows)"
|
||||
ng-class="{
|
||||
'-has-config': row.hasConfig,
|
||||
'-active': row.active,
|
||||
'-active-child': row.hasActiveChild}"
|
||||
on-outside-click="clickOutsideRow($index, section.rows)"
|
||||
bind-click-on="{{row.active}}">
|
||||
|
||||
<div class="umb-row-title-bar">
|
||||
|
||||
<div class=".umb-grid-right">
|
||||
<div class="umb-row-title">{{row.label || row.name}}</div>
|
||||
|
||||
<div class="umb-grid-has-config" ng-if="row.hasConfig && !sortMode">
|
||||
<localize key="grid_settingsApplied" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row tool -->
|
||||
<div class="umb-tools row-tools" ng-show="row.active && !sortMode">
|
||||
|
||||
<div class="cell-tools-edit row-tool" ng-if="hasSettings">
|
||||
<i class="icon icon-settings" title="@grid_settings" localize="title" ng-click="editGridItemSettings(row, 'row')"></i>
|
||||
</div>
|
||||
|
||||
<div class="cell-tools-remove row-tool">
|
||||
<i class="icon-trash" ng-click="togglePrompt(row)"></i>
|
||||
<umb-confirm-action
|
||||
ng-if="row.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="removeRow(section, $index)"
|
||||
on-cancel="hidePrompt(row)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- row container -->
|
||||
<div class="{{row.cssClass}} umb-row-inner">
|
||||
|
||||
<div class="mainTb">
|
||||
<div class="tb">
|
||||
<div>
|
||||
|
||||
<!-- Areas in row -->
|
||||
<div class="umb-cell td mainTd"
|
||||
ng-repeat="area in row.areas"
|
||||
ng-style="{width: area.$percentage + '%'}"
|
||||
ng-class="{
|
||||
'-has-config': area.hasConfig,
|
||||
'-active': area.active,
|
||||
'-active-child': area.hasActiveChild}"
|
||||
ng-model="area.controls"
|
||||
ng-click="clickCell($index, row.areas, row)"
|
||||
on-outside-click="clickOutsideCell($index, row.areas, row)"
|
||||
bind-click-on="{{area.active}}">
|
||||
|
||||
<!-- Cell -->
|
||||
<div class="umb-cell-content"
|
||||
ng-class="
|
||||
{'-active': area.active,
|
||||
'-has-editors': area.controls.length > 0,
|
||||
'-collapsed': sortMode}">
|
||||
|
||||
<!-- disable drop overlay -->
|
||||
<div class="drop-overlay -disable" ng-if="area.dropNotAllowed">
|
||||
<i class="icon-delete drop-icon"></i>
|
||||
<localize key="grid_contentNotAllowed" />
|
||||
</div>
|
||||
|
||||
<!-- allow drop overlay -->
|
||||
<div class="drop-overlay -allow" ng-if="area.dropOnEmpty">
|
||||
<i class="icon-download drop-icon"></i>
|
||||
<localize key="grid_contentAllowed" />
|
||||
</div>
|
||||
|
||||
<div class="umb-grid-has-config" ng-if="area.hasConfig && !sortMode">
|
||||
<localize key="grid_settingsApplied" />
|
||||
</div>
|
||||
|
||||
<div class="cell-tools" ng-if="area.active && !sortMode">
|
||||
<div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
|
||||
<i class="icon-settings"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-cell-inner" ui-sortable="sortableOptionsCell" ng-model="area.controls">
|
||||
|
||||
<!-- Control placeholder -->
|
||||
<div class="umb-cell-placeholder" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
|
||||
<div class="cell-tools-add -center">
|
||||
<localize ng-if="!sortMode" key="grid_addElement" />
|
||||
<localize ng-if="sortMode" key="grid_dropElement" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- for each control in areas -->
|
||||
<div class="umb-control"
|
||||
ng-repeat="control in area.controls"
|
||||
ng-click="clickControl($index, area.controls, area)"
|
||||
ng-class="{'-active': control.active}"
|
||||
on-outside-click="clickOutsideControl($index, area.controls, area)"
|
||||
bind-click-on="{{control.active}}"
|
||||
umb-set-dirty-on-change="{{control.value}}">
|
||||
|
||||
<div class="umb-control-click-overlay" ng-show="!control.active && !sortMode"></div>
|
||||
|
||||
<div class="umb-control-collapsed umb-control-handle" ng-show="sortMode">
|
||||
{{control.editor.name}}
|
||||
</div>
|
||||
|
||||
<div class="umb-control-inner" ng-hide="sortMode">
|
||||
|
||||
<div class="umb-control-bar umb-control-handle">
|
||||
|
||||
<div class="umb-control-title" ng-if="control.active">
|
||||
{{control.editor.name}}
|
||||
</div>
|
||||
|
||||
<div class="umb-tools" ng-if="control.active">
|
||||
|
||||
<div class="umb-control-tool" ng-if="control.editor.config.settings">
|
||||
<i class="umb-control-tool-icon icon-settings" ng-click="editGridItemSettings(control, 'control')"></i>
|
||||
</div>
|
||||
|
||||
<div class="umb-control-tool">
|
||||
<i class="umb-control-tool-icon icon-trash" ng-click="togglePrompt(control)"></i>
|
||||
<umb-confirm-action
|
||||
ng-if="control.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="removeControl(area, $index)"
|
||||
on-cancel="hidePrompt(control)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Redering the editor for specific control -->
|
||||
<div ng-if="control && control.$editorPath"
|
||||
ng-include="control.$editorPath"
|
||||
class="umb-cell-{{control.editor.view}}">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Controls repeat end -->
|
||||
|
||||
<!-- if area is empty tools -->
|
||||
<div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode">
|
||||
<div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- cells repeat end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row container end -->
|
||||
|
||||
</div>
|
||||
<!-- row repeat -->
|
||||
|
||||
</div>
|
||||
<!-- row sortable end -->
|
||||
<!-- column tools -->
|
||||
|
||||
<div class="umb-add-row" ng-if="!sortMode">
|
||||
|
||||
<a href=""
|
||||
class="iconBox"
|
||||
ng-click="toggleAddRow()"
|
||||
ng-if="!showRowConfigurations">
|
||||
|
||||
<i class=" icon icon-add" title="@general_add" localize="title"></i>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="templates-preview" ng-if="showRowConfigurations">
|
||||
|
||||
<p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows" /></strong></p>
|
||||
|
||||
<div class="preview-rows columns"
|
||||
ng-repeat="layout in section.$allowedLayouts"
|
||||
ng-show="layout.areas.length > 0"
|
||||
ng-click="addRow(section, layout)">
|
||||
|
||||
<div class="preview-row">
|
||||
|
||||
<div class="preview-col" ng-style="{width: percentage(area.grid) + '%'}" ng-repeat="area in layout.areas">
|
||||
|
||||
<div class="preview-cell">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="preview-overlay">
|
||||
</div>
|
||||
|
||||
<small>{{layout.label || layout.name}}</small>
|
||||
|
||||
</div> <!-- .templates-preview-rows -->
|
||||
|
||||
</div> <!-- .templates-preview -->
|
||||
<!-- column tools end -->
|
||||
|
||||
</div>
|
||||
<!-- column repeat end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="editorOverlay.show"
|
||||
model="editorOverlay"
|
||||
view="editorOverlay.view"
|
||||
position="target">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="gridItemSettingsDialog.show"
|
||||
model="gridItemSettingsDialog"
|
||||
view="gridItemSettingsDialog.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,192 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
|
||||
<div style="max-width: 600px">
|
||||
<div class="control-group uSky-templates">
|
||||
|
||||
<h4><localize key="grid_gridLayouts"/></h4>
|
||||
<p><localize key="grid_gridLayoutsDetail" /></p>
|
||||
|
||||
<ul class="unstyled"
|
||||
ui-sortable
|
||||
ng-model="model.value.templates">
|
||||
|
||||
<li ng-repeat="template in model.value.templates">
|
||||
|
||||
<div ng-click="configureTemplate(template)"
|
||||
class="preview-rows layout" style="margin-top: 5px; margin-bottom: 20px; float:left">
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-col"
|
||||
ng-class="{last:$last}"
|
||||
ng-repeat="section in template.sections | filter:zeroWidthFilter"
|
||||
ng-style="{width: percentage(section.grid) + '%', height: '60px'}">
|
||||
<div class="preview-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{template.name}} <br/>
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link"
|
||||
href
|
||||
ng-click="deleteTemplate($index)"><localize key="general_delete" /></a>
|
||||
</div>
|
||||
|
||||
<br style="clear: both" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-small"
|
||||
prevent-default
|
||||
ng-click="configureTemplate()">
|
||||
<i class="icon-add"></i> <localize key="grid_addGridLayout" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 600px">
|
||||
|
||||
<div class="control-group uSky-templates">
|
||||
|
||||
<h4><localize key="grid_rowConfigurations" /></h4>
|
||||
<p><localize key="grid_rowConfigurationsDetail" /></p>
|
||||
|
||||
<div class="control-group uSky-templates-rows">
|
||||
<ul class="unstyled"
|
||||
ui-sortable
|
||||
ng-model="model.value.layouts">
|
||||
|
||||
<li ng-repeat="layout in model.value.layouts">
|
||||
|
||||
<div ng-click="configureLayout(layout)"
|
||||
class="preview-rows columns" style="margin-top: 5px; margin-bottom: 25px; float:left">
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-col"
|
||||
ng-class="{last:$last}"
|
||||
ng-repeat="area in layout.areas | filter:zeroWidthFilter"
|
||||
ng-style="{width: percentage(area.grid) + '%'}">
|
||||
|
||||
<div class="preview-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{layout.label || layout.name}}<br />
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link" href ng-click="deleteLayout($index)">
|
||||
<localize key="general_delete" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br style="clear: both" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-small" prevent-default ng-click="configureLayout()">
|
||||
<i class="icon-add"></i> <localize key="grid_addRowConfiguration" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="max-width: 600px">
|
||||
|
||||
<umb-control-group
|
||||
label="@grid_columns"
|
||||
description="@grid_columnsDetails">
|
||||
<input type="text" class="" ng-model="model.value.columns" />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group
|
||||
label="@grid_settings"
|
||||
description="@grid_settingsDetails">
|
||||
|
||||
<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>
|
||||
<localize key="general_edit" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</umb-control-group>
|
||||
|
||||
|
||||
|
||||
<umb-control-group label="@grid_styles" description="@grid_stylesDetails">
|
||||
<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>
|
||||
<localize key="general_edit" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
Reference in New Issue
Block a user