Improve accessibility of grid prevalues screen (#6949)
* WIP Improve accessibility of grid prevalues screen * Clean up of the view, improve accessibility and add localization fallbacks * forgot to commit the stylesheet * formatting fixes
This commit is contained in:
Poornima Nayar
@@ -101,6 +101,9 @@
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.usky-grid .grid-layout {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
// ROW
|
||||
// -------------------------
|
||||
@@ -517,6 +520,25 @@
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.usky-grid .uSky-templates .layout {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.usky-grid .uSky-templates .columns {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.usky-grid .uSky-templates .columns .preview-cell p {
|
||||
font-size: 6px;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/**************************************************************************************************/
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
|
||||
<div style="max-width: 600px">
|
||||
<div class="grid-layout">
|
||||
<div class="control-group uSky-templates">
|
||||
|
||||
<h4><localize key="grid_gridLayouts" /></h4>
|
||||
<p><localize key="grid_gridLayoutsDetail" /></p>
|
||||
<h4>
|
||||
<localize key="grid_gridLayouts">
|
||||
Grid Layouts
|
||||
</localize>
|
||||
</h4>
|
||||
<p>
|
||||
<localize key="grid_gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</localize>
|
||||
</p>
|
||||
|
||||
<ul class="unstyled"
|
||||
ui-sortable
|
||||
@@ -12,7 +18,7 @@
|
||||
<li ng-repeat="template in model.value.templates" class="clearfix">
|
||||
|
||||
<div ng-click="configureTemplate(template)"
|
||||
class="preview-rows layout" style="margin-top: 5px; margin-bottom: 20px; float:left">
|
||||
class="preview-rows layout">
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-col"
|
||||
@@ -26,28 +32,33 @@
|
||||
|
||||
<div>
|
||||
{{template.name}} <br />
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link"
|
||||
href
|
||||
ng-click="deleteTemplate($index)"><localize key="general_delete" /></a>
|
||||
<button class="btn btn-small btn-link" ng-click="deleteTemplate($index)">
|
||||
<i class="icon-delete red" aria-hidden="true"></i>
|
||||
<localize key="general_delete">Delete</localize>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-small"
|
||||
<button class="btn btn-small btn-info"
|
||||
prevent-default
|
||||
ng-click="configureTemplate()">
|
||||
<i class="icon-add"></i> <localize key="grid_addGridLayout" />
|
||||
<i class="icon-add" aria-hidden="true"></i>
|
||||
<localize key="grid_addGridLayout" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 600px">
|
||||
<div class="grid-layout">
|
||||
|
||||
<div class="control-group uSky-templates">
|
||||
|
||||
<h4><localize key="grid_rowConfigurations" /></h4>
|
||||
<p><localize key="grid_rowConfigurationsDetail" /></p>
|
||||
<h4>
|
||||
<localize key="grid_rowConfigurations">Row Configurations</localize>
|
||||
</h4>
|
||||
<p>
|
||||
<localize key="grid_rowConfigurationsDetail">Rows are predefined cells arranged horizontally</localize>
|
||||
</p>
|
||||
|
||||
<div class="control-group uSky-templates-rows">
|
||||
<ul class="unstyled"
|
||||
@@ -57,7 +68,7 @@
|
||||
<li ng-repeat="layout in model.value.layouts" class="clearfix">
|
||||
|
||||
<div ng-click="configureLayout(layout)"
|
||||
class="preview-rows columns" style="margin-top: 5px; margin-bottom: 25px; float:left">
|
||||
class="preview-rows columns">
|
||||
|
||||
<div class="preview-row">
|
||||
<div class="preview-col"
|
||||
@@ -66,7 +77,7 @@
|
||||
ng-style="{width: percentage(area.grid) + '%', 'max-width': '100%'}">
|
||||
|
||||
<div class="preview-cell">
|
||||
<p style="font-size: 6px; line-height: 8px; text-align: center" ng-show="area.maxItems > 0">{{area.maxItems}}</p>
|
||||
<p ng-show="area.maxItems > 0">{{area.maxItems}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,17 +85,18 @@
|
||||
|
||||
<div>
|
||||
{{layout.label || layout.name}}<br />
|
||||
<i class="icon-delete red"></i>
|
||||
<a class="btn btn-small btn-link" href ng-click="deleteLayout($index)">
|
||||
<localize key="general_delete" />
|
||||
</a>
|
||||
<button class="btn btn-small btn-link" ng-click="deleteLayout($index)">
|
||||
<i class="icon-delete red" aria-hidden="true"></i>
|
||||
<localize key="general_delete">Delete</localize>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-small" prevent-default ng-click="configureLayout()">
|
||||
<i class="icon-add"></i> <localize key="grid_addRowConfiguration" />
|
||||
<i class="icon-add" aria-hidden="true"></i>
|
||||
<localize key="grid_addRowConfiguration">Add row configuration</localize>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@@ -93,7 +105,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div style="max-width: 600px">
|
||||
<div class="grid-layout">
|
||||
|
||||
<umb-control-group label="@grid_columns"
|
||||
description="@grid_columnsDetails">
|
||||
@@ -108,22 +120,21 @@
|
||||
ng-model="model.value.config">
|
||||
|
||||
<li ng-repeat="configValue in model.value.config">
|
||||
<i class="icon icon-navigation handle"></i>
|
||||
<i class="icon icon-navigation handle" aria-hidden="true"></i>
|
||||
|
||||
<a href="#" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
|
||||
<i class="icon icon-delete red"></i>
|
||||
<button class="btn-link" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
|
||||
<i class="icon icon-delete red" aria-hidden="true"></i>
|
||||
{{configValue.label}}
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="unstyled list-icons">
|
||||
<li>
|
||||
<i class="icon icon-settings-alt-2 turquoise"></i>
|
||||
|
||||
<a href="#" ng-click="editConfig()" prevent-default>
|
||||
<localize key="general_edit" />
|
||||
</a>
|
||||
<li>
|
||||
<button ng-click="editConfig()" class="btn-link" prevent-default>
|
||||
<i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
|
||||
<localize key="general_edit">Edit</localize>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</umb-control-group>
|
||||
@@ -137,22 +148,22 @@
|
||||
ng-model="model.value.styles">
|
||||
|
||||
<li ng-repeat="style in model.value.styles">
|
||||
<i class="icon icon-navigation handle"></i>
|
||||
<i class="icon icon-navigation handle" aria-hidden="true"></i>
|
||||
|
||||
<a href="#" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
|
||||
<i class="icon icon-delete red"></i>
|
||||
<button class="btn-link" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
|
||||
<i class="icon icon-delete red" aria-hidden="true"></i>
|
||||
{{style.label}}
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="unstyled list-icons">
|
||||
<li>
|
||||
<i class="icon icon-settings-alt-2 turquoise"></i>
|
||||
<a href="#" ng-click="editStyles()" prevent-default>
|
||||
<localize key="general_edit" />
|
||||
</a>
|
||||
<li>
|
||||
<button ng-click="editStyles()" class="btn-link" prevent-default>
|
||||
<i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
|
||||
<localize key="general_edit">Edit</localize>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</umb-control-group>
|
||||
|
||||
Reference in New Issue
Block a user