Skip to content

Commit

Permalink
Accessibility: Grid config datatype improvements (#8712)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BatJan
BatJan authored Aug 26, 2020
1 parent 52e40d4 commit 8cf999e
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 27 deletions.
39 changes: 22 additions & 17 deletions src/Umbraco.Web.UI.Client/src/less/gridview.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 *{
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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{
Expand Down Expand Up @@ -408,7 +408,7 @@
.usky-grid ul li {
display: inline-block;
width: 120px;
margin: 8px 8px 0px 8px;
margin: 8px 8px 0 8px;
}


Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;

}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -844,18 +847,20 @@
}

.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;
}

.usky-grid-configuration .uSky-templates-rows .mainTdpt{
height: 10px !important;
}

.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}
.usky-grid-configuration button.uSky-templates-column {
height: 70px !important;
}
14 changes: 10 additions & 4 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 14 additions & 6 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 8cf999e

Please sign in to comment.