preview cell with fixed
This commit is contained in:
antoine
@@ -574,7 +574,7 @@
|
||||
|
||||
.usky-grid .mainTbpt {
|
||||
cursor:pointer;
|
||||
border-spacing: 5px;
|
||||
border-spacing: 3px;
|
||||
border-collapse: separate;
|
||||
height: 35px;
|
||||
border: 2px solid @grayLight;
|
||||
@@ -586,6 +586,7 @@
|
||||
border: 1px dashed @grayLight;
|
||||
margin:0px;
|
||||
background-color: rgba(228, 228, 228, 0.41);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -41,26 +41,26 @@
|
||||
|
||||
<!-- 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="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
|
||||
ng-repeat="row in section.rows"
|
||||
class="usky-row"
|
||||
ng-mouseover="setCurrentRow(row)"
|
||||
ng-mouseleave="disableCurrentRow()"
|
||||
ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
|
||||
|
||||
<!-- Row tool -->
|
||||
<div class="row-tools" ng-animate="'fade'"
|
||||
ng-if="currentRow == row && currentControl === null">
|
||||
<div class="row-tools" ng-animate="'fade'"
|
||||
ng-if="currentRow == row && currentControl === null">
|
||||
|
||||
<!-- delete row -->
|
||||
<div class="cell-tools-remove">
|
||||
<div class="iconBox"
|
||||
ng-click="deletePrompt = true"
|
||||
ng-mouseover="setCurrentRemoveControl(row)"
|
||||
ng-mouseleave="disableCurrentRemoveControl(row)">
|
||||
|
||||
ng-click="deletePrompt = true"
|
||||
ng-mouseover="setCurrentRemoveControl(row)"
|
||||
ng-mouseleave="disableCurrentRemoveControl(row)">
|
||||
|
||||
<span ng-if="deletePrompt">
|
||||
Are you sure?
|
||||
<a href style="text-decoration: underline" ng-click="removeRow(section, $index)">Yes</a>
|
||||
Are you sure?
|
||||
<a href style="text-decoration: underline" ng-click="removeRow(section, $index)">Yes</a>
|
||||
</span>
|
||||
|
||||
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
|
||||
@@ -69,62 +69,57 @@
|
||||
|
||||
<div class="cell-tools-move">
|
||||
<div class="iconBox"
|
||||
ng-mouseover="setCurrentMoveControl(row)"
|
||||
ng-mouseleave="disableCurrentMoveControl(row)">
|
||||
ng-mouseover="setCurrentMoveControl(row)"
|
||||
ng-mouseleave="disableCurrentMoveControl(row)">
|
||||
<i class="icon icon-navigation"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- row container -->
|
||||
<div
|
||||
ng-class="{last:$index==model.value.length-1,first:$first}"
|
||||
class="{{row.cssClass}} mainContainer">
|
||||
<div ng-class="{last:$index==model.value.length-1,first:$first}"
|
||||
class="{{row.cssClass}} mainContainer">
|
||||
|
||||
<div class="mainTb">
|
||||
<div class="tb">
|
||||
<div class="tr">
|
||||
|
||||
<!-- cells in row -->
|
||||
<div
|
||||
style="width:{{ area.$percentage }}%"
|
||||
ng-class="{last:$last,first:$first}"
|
||||
class="td mainTd usky-cell"
|
||||
ng-repeat="area in row.areas">
|
||||
<div style="width:{{ area.$percentage }}%"
|
||||
ng-class="{last:$last,first:$first}"
|
||||
class="td mainTd usky-cell"
|
||||
ng-repeat="area in row.areas">
|
||||
|
||||
|
||||
<!-- if area is empty tools -->
|
||||
<div
|
||||
class="usky-control usky-control-placeholder"
|
||||
ng-if="area.controls.length == 0">
|
||||
<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}}">
|
||||
|
||||
<div
|
||||
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, area)">
|
||||
<i class="icon {{singleEditor.icon}}"></i>
|
||||
<div class="help-text">{{singleEditor.name}}</div>
|
||||
</a>
|
||||
|
||||
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
|
||||
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
|
||||
Start writing here...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div ng-if="!area.allowed || area.allowed.length > 1">
|
||||
|
||||
<p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)">
|
||||
<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 area.$allowedEditors track by editor.alias"
|
||||
ng-click="addControl(editor,area)">
|
||||
<i class="icon {{editor.icon}}"></i>
|
||||
<div class="cell-tools-add">
|
||||
<div class="iconBox"
|
||||
ng-repeat="editor in area.$allowedEditors track by editor.alias"
|
||||
ng-click="addControl(editor,area)">
|
||||
<i class="icon {{editor.icon}}"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,50 +127,48 @@
|
||||
|
||||
|
||||
<!-- Controls in cell -->
|
||||
<div
|
||||
ng-repeat="control in area.controls"
|
||||
ng-class="{last:$last,
|
||||
<div 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)"
|
||||
class="usky-control">
|
||||
|
||||
ng-mouseover="setCurrentControl(control)"
|
||||
ng-mouseleave="disableCurrentControl(control)"
|
||||
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="area.max === undefined || area.max < area.controls.length"
|
||||
ng-mouseover="setCurrentToolsControl(control)"
|
||||
ng-mouseleave="disableCurrentToolsControl(control)">
|
||||
ng-animate="'fade'"
|
||||
ng-if="control && ( currentControl == control)">
|
||||
|
||||
<div
|
||||
class="iconBox"
|
||||
ng-repeat="editor in area.$allowedEditors"
|
||||
ng-click="addControl(editor,area, control.$index)"
|
||||
ng-show="(currentToolsControl == control)">
|
||||
<i class="icon {{editor.icon}}"></i>
|
||||
<div class="cell-tools-add"
|
||||
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 area.$allowedEditors"
|
||||
ng-click="addControl(editor,area, control.$index)"
|
||||
ng-show="(currentToolsControl == control)">
|
||||
<i class="icon {{editor.icon}}"></i>
|
||||
</div>
|
||||
|
||||
<div class="iconBox"
|
||||
ng-if="currentToolsControl != control">
|
||||
<div class="iconBox"
|
||||
ng-if="currentToolsControl != control">
|
||||
<i class=" icon icon-add"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- delete cell -->
|
||||
<div class="cell-tools-remove">
|
||||
<div class="cell-tools-remove">
|
||||
<div class="iconBox"
|
||||
ng-click="deletePrompt = true"
|
||||
ng-mouseover="setCurrentRemoveControl(control)"
|
||||
ng-mouseleave="disableCurrentRemoveControl(control)">
|
||||
|
||||
ng-click="deletePrompt = true"
|
||||
ng-mouseover="setCurrentRemoveControl(control)"
|
||||
ng-mouseleave="disableCurrentRemoveControl(control)">
|
||||
|
||||
<span ng-if="deletePrompt">
|
||||
Are you sure?
|
||||
<a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
|
||||
Are you sure?
|
||||
<a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
|
||||
</span>
|
||||
|
||||
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
|
||||
@@ -184,12 +177,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Redering the editor for specific control -->
|
||||
<div
|
||||
ng-if="control && control.$editorPath"
|
||||
ng-include="control.$editorPath"
|
||||
class="usky-cell usky-cell-{{control.editor.view}}">
|
||||
<div ng-if="control && control.$editorPath"
|
||||
ng-include="control.$editorPath"
|
||||
class="usky-cell usky-cell-{{control.editor.view}}">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- Controls repeat end -->
|
||||
|
||||
@@ -214,13 +206,12 @@
|
||||
<div class="tr">
|
||||
<div class="td middle">
|
||||
<ul>
|
||||
<li ng-repeat="layout in section.$allowedLayouts">
|
||||
<li ng-repeat="layout in section.$allowedLayouts" ng-show="layout.areas.length > 0">
|
||||
<div class="tb mainTbpt" ng-click="addRow(section, layout)">
|
||||
<div class="tr">
|
||||
<div
|
||||
style="width:{{ area.$percentage}}%"
|
||||
class="middle mainTdpt td"
|
||||
ng-repeat="area in layout.areas">
|
||||
<div style="width:{{ percentage(area.grid); }}%"
|
||||
class="middle mainTdpt td"
|
||||
ng-repeat="area in layout.areas">
|
||||
<i class="icon {{cellPreview(area)}}"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user