Fix semantics for list views (#6595)

This commit is contained in:
Jan Skovgaard
2019-10-15 18:42:52 +02:00
committed by Sebastiaan Janssen
parent b8425fa662
commit 9c601ab631
3 changed files with 33 additions and 27 deletions

View File

@@ -27,14 +27,13 @@
}
.umb-table__action,
.umb-table a {
background: transparent;
border: 0 none;
text-decoration: none;
cursor: pointer;
&:focus {
outline: none;
text-decoration: none;
}
padding: 0;
margin-left: 1px;
}
input.umb-table__input {
@@ -50,11 +49,16 @@ input.umb-table__input {
font-weight: bold;
}
a.umb-table-head__link {
.umb-table-head__link {
background: transparent;
border: 0 none;
position: relative;
cursor: default;
text-decoration: none;
color: @gray-3;
font-size: inherit;
font-weight: inherit;
padding: 0 1px;
&:hover {
text-decoration: none;
cursor: default;
@@ -62,10 +66,10 @@ a.umb-table-head__link {
}
}
a.umb-table-head__link.sortable {
.umb-table-head__link.sortable {
cursor: pointer;
&:hover {
text-decoration: none;
cursor: pointer;
color: @black;
}
}
@@ -137,15 +141,15 @@ a.umb-table-head__link.sortable {
}
.umb-table-body__link {
color: @ui-option-type;
font-size: 14px;
font-weight: bold;
text-decoration: none;
&:hover, &:focus {
color: @ui-option-type-hover;
text-decoration: underline;
outline: none;
}
}

View File

@@ -6,15 +6,13 @@
ng-class="{'-selected': item.selected}"
ng-click="clickItem(item, $event, $index)">
<!--<i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>-->
<div class="umb-content-grid__content">
<a class="umb-content-grid__item-name"
ng-href="{{'#' + item.editPath}}"
ng-click="clickItemName(item, $event, $index)"
ng-class="{'-light': !item.published && item.updater != null}">
<i class="umb-content-grid__icon {{ item.icon }}"></i>
<i class="umb-content-grid__icon {{ item.icon }}" aria-hidden="true"></i>
<span>{{ item.name }}</span>
</a>

View File

@@ -5,29 +5,33 @@
<div class="umb-table-row">
<div class="umb-table-cell">
<a href="" style="text-decoration: none;" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
<button type="button" class="umb-table__action" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
<umb-checkmark checked="vm.isSelectedAll()" size="xs"></umb-checkmark>
</a>
</button>
</div>
<div class="umb-table-cell umb-table__name">
<a class="umb-table-head__link sortable" href="#"
<button
type="button"
class="umb-table-head__link sortable"
ng-click="vm.sort('Name', true, true)"
prevent-default>
<localize key="general_name">Name</localize>
<i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
</a>
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
</button>
</div>
<div class="umb-table-cell" ng-show="vm.items[0].state">
<localize key="general_status">Status</localize>
</div>
<div class="umb-table-cell" ng-repeat="column in vm.itemProperties track by column.alias">
<a class="umb-table-head__link" href="#"
ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
ng-class="{'sortable':column.allowSorting}" prevent-default>
<button
type="button"
class="umb-table-head__link"
ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
ng-class="{'sortable':column.allowSorting}" prevent-default>
<span ng-bind="column.header"></span>
<i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
</a>
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
</button>
</div>
</div>
</div>
@@ -39,8 +43,8 @@
ng-click="vm.selectItem(item, $index, $event)">
<div class="umb-table-cell">
<i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" ng-class="vm.getIcon(item)"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
<i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" aria-hidden="true" ng-class="vm.getIcon(item)"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
</div>
<div class="umb-table-cell umb-table__name">
<a title="{{ item.name }}" class="umb-table-body__link"