refactor cells so cells with and without editors are separate divs
This commit is contained in:
Mads Rasmussen
@@ -149,26 +149,42 @@
|
||||
|
||||
// CELL
|
||||
// -------------------------
|
||||
.umb-grid .umb-cell{
|
||||
.umb-grid .umb-cell {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.umb-grid .umb-cell-content {
|
||||
background-color: @grayLighter;
|
||||
min-height: 130px;
|
||||
display: block;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
transition: border 100ms linear;
|
||||
}
|
||||
|
||||
.umb-grid .umb-cell-content:hover {
|
||||
border: 2px solid @blue;
|
||||
.umb-grid .umb-cell-content.-placeholder {
|
||||
background-color: @grayLighter;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
transition: border-color 100ms linear;
|
||||
}
|
||||
|
||||
.umb-grid .umb-cell-content.-placeholder:hover {
|
||||
border-color: @blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.umb-grid .umb-cell-content.-has-editors {
|
||||
background-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: @grayLight;
|
||||
}
|
||||
|
||||
.umb-grid .umb-cell-content.-has-editors:hover {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.umb-grid .cell-tools {
|
||||
transition: all .20s ease-in-out;
|
||||
-moz-transition: all .20s ease-in-out;
|
||||
|
||||
@@ -111,116 +111,103 @@
|
||||
<div class="tr">
|
||||
|
||||
<!-- Areas in row -->
|
||||
<div ng-style="{width: area.$percentage + '%'}"
|
||||
class="td mainTd umb-cell"
|
||||
ng-class="{last:$last,first:$first, infohighlight:currentInfohighlightArea == area,
|
||||
warnhighlight:currentWarnhighlightArea == area}"
|
||||
<div class="umb-cell td mainTd"
|
||||
ng-repeat="area in row.areas"
|
||||
ng-style="{width: area.$percentage + '%'}"
|
||||
ng-class="{
|
||||
'last':$last,
|
||||
'first':$first,
|
||||
'infohighlight':currentInfohighlightArea == area,
|
||||
'warnhighlight':currentWarnhighlightArea == area}"
|
||||
ui-sortable="sortableOptionsCell"
|
||||
ng-model="area.controls"
|
||||
ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
|
||||
ng-model="area.controls">
|
||||
|
||||
<div class="umb-cell-content">
|
||||
<!-- Cell placeholder -->
|
||||
<div class="umb-cell-content -placeholder"
|
||||
ng-if="area.controls.length === 0"
|
||||
ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
|
||||
<a href="" class="cell-tools-add">Add editor</a>
|
||||
</div>
|
||||
|
||||
<!-- Controls in areas -->
|
||||
<div ng-repeat="control in area.controls"
|
||||
ng-mouseover="setCurrentControl(control)"
|
||||
ng-mouseleave="disableCurrentControl(control)"
|
||||
ng-animate="'fade'"
|
||||
class="umb-control">
|
||||
<!-- Cell with editors -->
|
||||
<div class="umb-cell-content -has-editors"
|
||||
ng-if="area.controls.length > 0">
|
||||
|
||||
<!-- Filled cell tools -->
|
||||
<div class="cell-tools"
|
||||
ng-class="{'with-prompt': control.deletePrompt}"
|
||||
ng-animate="'fade'"
|
||||
ng-if="control && (currentControl == control)">
|
||||
<!-- Controls in areas -->
|
||||
<div ng-repeat="control in area.controls"
|
||||
ng-mouseover="setCurrentControl(control)"
|
||||
ng-mouseleave="disableCurrentControl(control)"
|
||||
ng-animate="'fade'"
|
||||
class="umb-control">
|
||||
|
||||
<!-- delete control -->
|
||||
<div class="cell-tools-remove">
|
||||
<div class="iconBox"
|
||||
ng-click="showPrompt(control)"
|
||||
ng-mouseover="setWarnhighlightControl(control)"
|
||||
ng-mouseleave="disableWarnhighlightControl(control)">
|
||||
<!-- Filled cell tools -->
|
||||
<div class="cell-tools"
|
||||
ng-class="{'with-prompt': control.deletePrompt}"
|
||||
ng-animate="'fade'"
|
||||
ng-if="control && (currentControl == control)">
|
||||
|
||||
<span class="prompt" ng-if="control.deletePrompt">
|
||||
<localize key="general_areyousure" />
|
||||
<a href ng-click="removeControl(area, $index)"><localize key="general_yes" /></a>
|
||||
<a href ng-click="clearPrompt(control, $event)"><localize key="general_no" /></a>
|
||||
</span>
|
||||
<!-- delete control -->
|
||||
<div class="cell-tools-remove">
|
||||
<div class="iconBox"
|
||||
ng-click="showPrompt(control)"
|
||||
ng-mouseover="setWarnhighlightControl(control)"
|
||||
ng-mouseleave="disableWarnhighlightControl(control)">
|
||||
|
||||
<i ng-if="!control.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="prompt" ng-if="control.deletePrompt">
|
||||
<localize key="general_areyousure" />
|
||||
<a href ng-click="removeControl(area, $index)"><localize key="general_yes" /></a>
|
||||
<a href ng-click="clearPrompt(control, $event)"><localize key="general_no" /></a>
|
||||
</span>
|
||||
|
||||
<!-- move control -->
|
||||
<div class="cell-tools-move">
|
||||
<a class="iconBox"
|
||||
ng-mouseover="setInfohighlightControl(control)"
|
||||
ng-mouseleave="disableInfohighlightControl(control)"
|
||||
href>
|
||||
<i class="icon icon-navigation" title="@general_move" localize="title"></i>
|
||||
</a>
|
||||
</div>
|
||||
<i ng-if="!control.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- setting area -->
|
||||
<div class="cell-tools-edit" ng-if="hasSettings && $first">
|
||||
<a class="iconBox"
|
||||
ng-mouseover="setInfohighlightArea(area)"
|
||||
ng-mouseleave="disableInfohighlightArea(area)"
|
||||
ng-click="editGridItemSettings(area, 'cell')"
|
||||
href>
|
||||
<i class="icon icon-settings" title="@grid_settings" localize="title"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- move control -->
|
||||
<div class="cell-tools-move">
|
||||
<a class="iconBox"
|
||||
ng-mouseover="setInfohighlightControl(control)"
|
||||
ng-mouseleave="disableInfohighlightControl(control)"
|
||||
href>
|
||||
<i class="icon icon-navigation" title="@general_move" localize="title"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- setting area -->
|
||||
<div class="cell-tools-edit" ng-if="hasSettings && $first">
|
||||
<a class="iconBox"
|
||||
ng-mouseover="setInfohighlightArea(area)"
|
||||
ng-mouseleave="disableInfohighlightArea(area)"
|
||||
ng-click="editGridItemSettings(area, 'cell')"
|
||||
href>
|
||||
<i class="icon icon-settings" title="@grid_settings" localize="title"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="umb-control-inner" ng-class="{last:$last,
|
||||
infohighlight:currentInfohighlightControl == control,
|
||||
warnhighlight:currentWarnhighlightControl == control,
|
||||
selectedControl:currentControl == control}">
|
||||
</div>
|
||||
|
||||
<ins class="item-label">{{control.editor.name}}</ins>
|
||||
<div class="umb-control-inner" ng-class="{last:$last,
|
||||
infohighlight:currentInfohighlightControl == control,
|
||||
warnhighlight:currentWarnhighlightControl == control,
|
||||
selectedControl:currentControl == control}">
|
||||
|
||||
<!-- 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>
|
||||
<!-- Controls repeat end -->
|
||||
<!-- if area is empty tools -->
|
||||
<ins class="item-label">{{control.editor.name}}</ins>
|
||||
|
||||
</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>
|
||||
<!-- Controls repeat end -->
|
||||
<!-- if area is empty tools -->
|
||||
|
||||
<!--
|
||||
<div class="umb-control umb-control-placeholder"
|
||||
ng-if="area.controls.length == 0">
|
||||
<div class="help-text" style="margin-bottom: 15px">
|
||||
<localize key="grid_addElement"/>
|
||||
</div><br />
|
||||
</div>
|
||||
--->
|
||||
|
||||
<a href="" class="cell-tools-add">Add editor</a>
|
||||
|
||||
<!--
|
||||
<div class="cell-tools-add"
|
||||
ng-class="{emptyArea:area.controls.length == 0}"
|
||||
ng-if="!currentToolsControl"
|
||||
ng-animate="'fade'">
|
||||
|
||||
<a class="iconBox" href ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
|
||||
<i class=" icon icon-add" title="@general_add" localize="title"></i>
|
||||
</a>
|
||||
|
||||
<div ng-if="overlayMenu.show && overlayMenu.key == area.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
|
||||
</div>
|
||||
--->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- cells repeat end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user