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

Accessibility: Grid config datatype improvements (#8712)

Browse Source
This commit is contained in:
Jan Skovgaard
2020-08-26 20:25:30 +02:00
committed by GitHub
parent 52e40d41d2
commit 8cf999e4a1
5 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@
overflow: hidden;
padding: 5px;
border-radius:5px;
box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
box-shadow: 3px 3px 12px 0 rgba(50, 50, 50, 0.45);
}
.usky-grid .ui-sortable-helper *{
@@ -150,7 +150,7 @@
.usky-grid .cell-tools-add {
position: absolute;
text-align: center;
bottom: 0px;
bottom: 0;
left: 0;
right: 0;
margin: 0 45px 1px 0;
@@ -160,14 +160,14 @@
}
}
.usky-grid .usky-control:hover .cell-tools-add{
.usky-grid .usky-control:hover .cell-tools-add{
opacity: 1;
}
.usky-grid .cell-tools-remove {
.usky-grid .cell-tools-remove {
display:inline-block;
position: absolute;
top: 0px;
top: 0;
right: 5px;
text-align: right;
z-index: 500;
@@ -221,7 +221,7 @@
top: -22px;
left: -1px;
text-decoration: none;
padding: 0px 7px;
padding: 0 7px;
display:none;
font-size:0.8em;
background-color: @white;
@@ -234,7 +234,7 @@
.usky-grid .usky-row-inner > ins.item-label{
top: -20px;
left: 0px;
left: 0;
}
.usky-grid .usky-control-inner.selectedControl , .usky-grid .usky-row-inner.selectedRow{
@@ -408,7 +408,7 @@
.usky-grid ul li {
display: inline-block;
width: 120px;
margin: 8px 8px 0px 8px;
margin: 8px 8px 0 8px;
}
@@ -435,7 +435,7 @@
padding: -1px;
position: absolute;
margin: -1px -1px 0 -1px;
box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
box-shadow: 2px 2px 10px 0 rgba(50, 50, 50, 0.14);
z-index: 9999999;
}
@@ -558,7 +558,8 @@
margin: 20px;
}
.usky-grid .uSky-templates-template a.tb:hover {
.usky-grid .uSky-templates-template button.tb:hover,
.usky-grid .uSky-templates-template button.tb:focus {
border:5px solid @blueMid;
}
@@ -587,7 +588,9 @@
border-right: 1px dashed @gray-8 !important;
}
.usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
.usky-grid button.uSky-templates-column:hover,
.usky-grid button.uSky-templates-column:focus,
.usky-grid button.uSky-templates-column.selected{
background-color: @blueMid;
}
@@ -628,13 +631,13 @@
transition: border 200ms linear;
&.prevalues-rows {
margin: 0px 20px 20px 0px;
margin: 0 20px 20px 0;
width: 80px;
float:left;
}
&.prevalues-templates {
margin: 0px 20px 20px 0px;
margin: 0 20px 20px 0;
float:left;
}
@@ -803,7 +806,7 @@
.usky-grid-configuration .uSky-templates .uSky-templates-template .tb{
max-height: 50px;
border-width: 2px !important;
padding: 0px;
padding: 0;
border-spacing:2px;
overflow: hidden;
}
@@ -844,13 +847,13 @@
}
.usky-grid-configuration .uSky-templates-rows .uSky-templates-row{
margin: 0px 50px 20px 0px;
margin: 0 50px 20px 0;
width: 60px;
}
.usky-grid-configuration .uSky-templates-rows .uSky-templates-row .tb{
border-width: 2px !important;
padding: 0px;
padding: 0;
border-spacing:2px;
}
@@ -858,4 +861,6 @@
height: 10px !important;
}
.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}
.usky-grid-configuration button.uSky-templates-column {
height: 70px !important;
}

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
View File

@@ -33,17 +33,23 @@
<div class="tb" style="height: 70px; border-width: 2px; padding: 2px">
<div class="tr">
<a class="td uSky-templates-column"
<button type="button" class="btn-reset td uSky-templates-column"
ng-class="{last:$last, selected:section==currentSection}"
ng-repeat="section in currentLayout.sections"
ng-click="configureSection(section, currentLayout)"
ng-style="{width: percentage(section.grid) +'%'}">
</a>
<span class="sr-only">
<localize key="grid_editGridLayout">Edit grid layout</localize>
</span>
</button>
<a class="td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
<button type="button" class="btn-reset td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
ng-click="configureSection(undefined, currentLayout)"
ng-style="{width: percentage(availableLayoutSpace) + '%'}">
<i class="icon icon-add"></i>
<i class="icon icon-add" aria-hidden="true"></i>
<span class="sr-only">
<localize key="grid_addGridLayout">Add grid layout</localize>
</span>
</a>
</div>

20
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
View File

@@ -40,18 +40,26 @@
<div class="tb" style="height: auto; border: none !important; background: none">
<div class="tr">
<a class="td uSky-templates-column"
<button type="button" class="btn-reset td uSky-templates-column"
ng-class="{last:$last, selected:cell==currentCell}"
ng-repeat="cell in currentRow.areas"
ng-click="configureCell(cell, currentRow)"
ng-style="{width: percentage(cell.grid) + '%'}">
</a>
<span class="sr-only">
<span class="sr-only">
<localize key="grid_editRowConfiguration">Edit row configuration</localize>
</span>
</span>
</button>
<a class="td uSky-templates-column add"
<button type="button" class="btn-reset td uSky-templates-column add"
ng-click="configureCell(null, currentRow)"
ng-style="{width: percentage(availableRowSpace) + '%'}">
<i class="icon icon-add"></i>
</a>
<i class="icon icon-add" aria-hidden="true"></i>
<span class="sr-only">
<localize key="grid_addRowConfiguration">Add row configuration</localize>
</span>
</button>
</div>
</div>
</div>
@@ -104,7 +112,7 @@
<i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
<small class="input-label--small">({{editor.alias}})</small>
</umb-checkbox>
</li>
</ul>
</div>

2
src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View File

@@ -1599,10 +1599,12 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="gridLayouts">Grid Layouts</key>
<key alias="gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</key>
<key alias="addGridLayout">Add Grid Layout</key>
<key alias="editGridLayout">Edit Grid Layout</key>
<key alias="addGridLayoutDetail">Adjust the layout by setting column widths and adding additional sections</key>
<key alias="rowConfigurations">Row configurations</key>
<key alias="rowConfigurationsDetail">Rows are predefined cells arranged horizontally</key>
<key alias="addRowConfiguration">Add row configuration</key>
<key alias="editRowConfiguration">Edit row configuration</key>
<key alias="addRowConfigurationDetail">Adjust the row by setting cell widths and adding additional cells</key>
<key alias="columns">Columns</key>
<key alias="columnsDetails">Total combined number of columns in the grid layout</key>

2
src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View File

@@ -1616,10 +1616,12 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="gridLayouts">Grid Layouts</key>
<key alias="gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</key>
<key alias="addGridLayout">Add Grid Layout</key>
<key alias="editGridLayout">Edit Grid Layout</key>
<key alias="addGridLayoutDetail">Adjust the layout by setting column widths and adding additional sections</key>
<key alias="rowConfigurations">Row configurations</key>
<key alias="rowConfigurationsDetail">Rows are predefined cells arranged horizontally</key>
<key alias="addRowConfiguration">Add row configuration</key>
<key alias="editRowConfiguration">Edit row configuration</key>
<key alias="addRowConfigurationDetail">Adjust the row by setting cell widths and adding additional cells</key>
<key alias="columns">Columns</key>
<key alias="columnsDetails">Total combined number of columns in the grid layout</key>