Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: Grid config datatype improvements #8712

Merged
merged 3 commits into from
Aug 26, 2020
Merged

Accessibility: Grid config datatype improvements #8712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c885e33
Refactor usage of <a> without any href attribute to <button> with hov…
BatJan Aug 22, 2020
fe48436
Add missing dictionary keys
BatJan Aug 22, 2020
ffc656e
add missing type attribute
BatJan Aug 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/Umbraco.Web.UI.Client/src/less/gridview.less
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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