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

Accessibility improvements and clean up of mini list view (#7398)

Browse Source
This commit is contained in:
Poornima Nayar
2020-01-02 18:21:06 +00:00
committed by Kenn Jacobsen
parent 4045642821
commit a45a8c5b13
2 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/less/listview.less
View File

@@ -136,7 +136,36 @@
/* TEMP */
.umb-minilistview {
.umb-table-row.not-allowed { opacity: 0.6; cursor: not-allowed; }
.umb-table-row.not-allowed {
opacity: 0.6;
cursor: not-allowed;
}
div.umb-mini-list-view__breadcrumb {
margin-bottom: 10px;
}
div.no-display {
display: none
}
div.umb-table-cell-padding {
padding-top: 8px;
padding-bottom: 8px;
}
div.umb-table-cell .form-search {
width: 100%;
margin-right: 0;
input {
width: 100%;
}
.icon-search {
font-size: 14px;
}
}
}
.umb-listview .table-striped tbody td {

21
src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
View File

@@ -5,14 +5,14 @@
ng-repeat="miniListView in miniListViews">
<div class="umb-mini-list-view__title">
<i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}"></i>
<i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}" aria-hidden="true"></i>
<h4 class="umb-mini-list-view__title-text">{{ miniListView.node.name }}</h4>
</div>
<div class="umb-mini-list-view__breadcrumb">
<a ng-if="showBackButton()" href="" class="umb-mini-list-view__back" ng-click="exitMiniListView()">
<i class="icon-arrow-left umb-mini-list-view__back-icon"></i>
<i class="icon-arrow-left umb-mini-list-view__back-icon" aria-hidden="true"></i>
<span class="umb-mini-list-view__back-text"><localize key="general_back">Back</localize></span> /
</a>
@@ -30,13 +30,12 @@
<!-- Head -->
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-cell" style="display: none;"></div>
<div class="umb-table-cell" style="padding-top: 8px; padding-bottom: 8px;">
<form class="form-search -no-margin-bottom" style="width: 100%; margin-right: 0;" novalidate>
<div class="umb-table-cell no-display"></div>
<div class="umb-table-cell umb-table-cell-padding">
<form class="form-search -no-margin-bottom" novalidate>
<div class="inner-addon left-addon">
<i class="icon icon-search" style="font-size: 14px;"></i>
<i class="icon icon-search" aria-hidden="true"></i>
<input
style="width: 100%;"
class="form-control search-input"
type="text"
localize="placeholder"
@@ -67,8 +66,8 @@
<div class="umb-table-cell umb-table-cell--auto-width" ng-class="{'umb-table-cell--faded':child.published === false}">
<div class="flex items-center">
<ins class="icon-navigation-right umb-table__row-expand" ng-click="openNode($event, child)" ng-class="{'umb-table__row-expand--hidden': child.metaData.hasChildren !== true}">&nbsp;</ins>
<i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
<i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}" aria-hidden="true"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
</div>
</div>
<div class="umb-table-cell black" ng-class="{'umb-table-cell--faded':child.published === false}">{{ child.name }}</div>
@@ -76,8 +75,8 @@
<!-- Load indicator when the list doesn't have items -->
<div ng-if="!miniListView.loading && !miniListView.children" class="umb-table-row umb-table-row--empty">
<span ng-if="search === ''"><localize key="general_noItemsInList"></localize></span>
<span ng-if="search !== ''"><localize key="general_searchNoResult"></localize></span>
<span ng-if="search === ''"><localize key="general_noItemsInList">No items have been added</localize></span>
<span ng-if="search !== ''"><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></span>
</div>
<!-- Load indicator when the list doesn't have items -->