Add WebCms
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user