307 lines
16 KiB
HTML
307 lines
16 KiB
HTML
<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-property-editor clearfix" id="umb-grid">
|
|
|
|
<umb-editor-sub-header ng-if="showReorderButton()" appearance="white">
|
|
|
|
<umb-editor-sub-header-content-right>
|
|
<umb-button
|
|
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, $event)"
|
|
ng-class="{
|
|
'-has-config': row.hasConfig,
|
|
'-active': row === active,
|
|
'-active-child': row === currentRowWithActiveChild}"
|
|
|
|
bind-click-on="{{row === active || row === currentRowWithActiveChild}}"
|
|
data-rowid="{{row.$uniqueId}}">
|
|
|
|
<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 || row === currentRowWithActiveChild) && !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)" localize="title" title="@delete"></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 === currentCellWithActiveChild}"
|
|
ng-model="area.controls"
|
|
ng-click="clickCell($index, row.areas, row, $event)"
|
|
|
|
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 || area === currentCellWithActiveChild) && !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" umb-grid-hack-scope 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"
|
|
umb-grid-hack-scope
|
|
ng-repeat="control in area.controls"
|
|
ng-click="clickControl($index, area.controls, area, $event)"
|
|
ng-class="{'-active': control === active}"
|
|
|
|
bind-click-on="{{control === active}}"
|
|
umb-set-dirty-on-change="{{control.value}}"
|
|
data-itemid="{{control.$uniqueId}}">
|
|
|
|
<div class="umb-control-click-overlay" ng-show="control !== active && !sortMode"></div>
|
|
|
|
<div class="umb-control-collapsed umb-control-handle" ng-show="sortMode">
|
|
{{ getTemplateName(control) }}
|
|
</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">
|
|
{{ getTemplateName(control) }}
|
|
</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)" localize="title" title="@delete"></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 && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
|
|
<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>
|
|
|
|
</div>
|