yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix cell padding, add rows

Browse Source
This commit is contained in:
Mads Rasmussen
2015-11-12 09:53:21 +01:00
parent 3f3cc507a8
commit a4bf118f6d
2 changed files with 162 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Umbraco.Web.UI.Client/src/less/gridview.less
View File

@@ -95,22 +95,27 @@
}
*/
/*
.umb-grid .tr {
}
*/
.umb-grid .middle {
text-align: center;
}
/*
.umb-grid .mainTb {
border-collapse: separate;
}
*/
.umb-grid .mainTd {
position:relative;
}
// COLUMN
// -------------------------
.umb-grid .umb-column {
@@ -146,15 +151,20 @@
// -------------------------
.umb-grid .umb-cell{
position: relative;
border: 2px solid transparent;
//border: 1px dashed rgba(0,0,0,0);
min-height:127px;
background-color: @grayLighter;
box-sizing: border-box;
transition: border 100ms linear;
background-color: #ffffff;
padding: 10px;
}
.umb-grid .umb-cell:hover {
.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;
cursor: pointer;
}
@@ -218,11 +228,11 @@
.umb-grid .cell-tools-remove {
display:inline-block;
position: absolute;
top: 0px;
right: 5px;
text-align: right;
z-index: 500;
//position: absolute;
//top: 0px;
//right: 5px;
//text-align: right;
//z-index: 500;
}
.umb-grid .cell-tools-remove .iconBox:hover, .umb-grid .cell-tools-remove .iconBox:hover *{
@@ -232,11 +242,11 @@
.umb-grid .cell-tools-move {
display:inline-block;
position: absolute;
top: 33px;
right: 5px;
z-index: 500;
cursor: move
//position: absolute;
//top: 33px;
//right: 5px;
//z-index: 500;
//cursor: move
}
.umb-grid .cell-tools-edit{
@@ -286,14 +296,28 @@
}
*/
.umb-grid .umb-row-title {
margin-bottom: 20px;
display: block;
padding-left: 10px;
padding-right: 10px;
}
.umb-grid ins.item-label {
text-transform: uppercase;
font-size: 13px;
color: @gray;
margin-bottom: 20px;
font-weight: bold;
text-decoration: none;
display: block;
display: inline-block;
}
.umb-grid .row-tools {
display: inline-block;
}
.umb-grid .umb-add-row {
text-align: center;
}
/*

219
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -51,63 +51,62 @@
<div ui-sortable="sortableOptions" ng-model="section.rows">
<!-- for each row in template section -->
<div ng-repeat="row in section.rows"
class="umb-row"
ng-mouseenter="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()">
<!-- ng-mouseenter="setCurrentRow(row)" -->
<!-- ng-mouseleave="disableCurrentRow()" -->
<div ng-repeat="row in section.rows" class="umb-row">
<!-- Row tool -->
<div class="row-tools" ng-animate="'fade'"
ng-if="currentRow === row && currentControl === null">
<div class="umb-row-title">
<!-- delete row -->
<div class="cell-tools-remove">
<div class="iconBox"
ng-click="showPrompt(row)"
ng-mouseover="setWarnighlightRow(row)"
ng-mouseleave="disableWarnhighlightRow(row)">
<ins class="item-label">{{row.name}}</ins>
<span class="prompt" ng-if="row.deletePrompt">
<localize key="general_areyousure" />
<a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
<a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
</span>
<!-- Row tool -->
<div class="row-tools">
<i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
</div>
</div>
<!-- delete row -->
<div class="cell-tools-remove">
<div ng-click="showPrompt(row)"
ng-mouseover="setWarnighlightRow(row)"
ng-mouseleave="disableWarnhighlightRow(row)">
<div class="cell-tools-move">
<a class="iconBox"
ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
href>
<i class="icon icon-navigation" title="@general_move" localize="title"></i>
</a>
</div>
<span class="prompt" ng-if="row.deletePrompt">
<localize key="general_areyousure" />
<a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
<a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
</span>
<div class="cell-tools-edit" ng-if="hasSettings">
<a class="iconBox"
ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
ng-click="editGridItemSettings(row, 'row')"
href>
<i class="icon icon-settings" title="@grid_settings" localize="title"></i>
</a>
</div>
<i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
</div>
</div>
<div class="cell-tools-move">
<a ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
href>
<i class="icon icon-navigation" title="@general_move" localize="title"></i>
</a>
</div>
<div class="cell-tools-edit" ng-if="hasSettings">
<a ng-mouseover="setInfohighlightRow(row)"
ng-mouseleave="disableInfohighlightRow(row)"
ng-click="editGridItemSettings(row, 'row')"
href>
<i class="icon icon-settings" title="@grid_settings" localize="title"></i>
</a>
</div>
</div>
</div>
<!-- row container -->
<div class="{{row.cssClass}} mainContainer umb-row-inner"
<div class="{{row.cssClass}} umb-row-inner"
ng-class="{last:$last,
first:$first,
warnhighlight:currentWarnhighlightRow == row,
infohighlight:currentInfohighlightRow == row,
selectedRow:currentRow == row && currentControl === null}">
<ins class="item-label">{{row.name}}</ins>
<div class="mainTb">
<div class="tb">
<div class="tr">
@@ -117,78 +116,85 @@
class="td mainTd umb-cell"
ng-class="{last:$last,first:$first, infohighlight:currentInfohighlightArea == area,
warnhighlight:currentWarnhighlightArea == area}"
ng-repeat="area in row.areas" ui-sortable="sortableOptionsCell" ng-model="area.controls">
ng-repeat="area in row.areas"
ui-sortable="sortableOptionsCell"
ng-model="area.controls"
ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
<!-- Controls in areas -->
<div ng-repeat="control in area.controls"
ng-mouseover="setCurrentControl(control)"
ng-mouseleave="disableCurrentControl(control)"
ng-animate="'fade'"
class="umb-control">
<div class="umb-cell-content">
<!-- 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>
<ins class="item-label">{{control.editor.name}}</ins>
<!-- 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>
<!--
<div class="umb-control umb-control-placeholder"
ng-if="area.controls.length == 0">
@@ -229,7 +235,20 @@
<!-- row sortable end -->
<!-- column tools -->
<div class="templates-preview">
<div class="umb-add-row">
<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">
<div class="preview-rows columns"
ng-repeat="layout in section.$allowedLayouts"