Update user filter buttons (#8587)
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
9130695055
commit
a0d91e76e7
@@ -77,7 +77,6 @@
|
||||
@import "main.less";
|
||||
@import "listview.less";
|
||||
@import "gridview.less";
|
||||
@import "filter-toggle.less";
|
||||
|
||||
@import "forms/umb-validation-label.less";
|
||||
|
||||
@@ -173,6 +172,7 @@
|
||||
@import "components/umb-textstring.less";
|
||||
@import "components/umb-textarea.less";
|
||||
@import "components/umb-dropdown.less";
|
||||
@import "components/umb-filter.less";
|
||||
@import "components/umb-range-slider.less";
|
||||
@import "components/umb-number.less";
|
||||
@import "components/umb-tags-editor.less";
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
.umb-filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-filter .umb-filter__toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.umb-filter .umb-filter__label {
|
||||
margin-left: 5px;
|
||||
margin-right: 3px;
|
||||
max-width: 150px;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.filter-toggle{
|
||||
margin: 0;
|
||||
padding: 0 8px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-toggle__level{
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
margin: 0 5px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.filter-toggle__icon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
@@ -35,10 +35,13 @@
|
||||
7 = 7th step in spacing scale
|
||||
*/
|
||||
|
||||
.m-center {
|
||||
margin-left: auto;
|
||||
.m-center,
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ml-auto { margin-left: auto; }
|
||||
.mr-auto { margin-right: auto; }
|
||||
|
||||
.mt0 { margin-top: @spacing-none; }
|
||||
.mt1 { margin-top: @spacing-extra-small; }
|
||||
|
||||
@@ -21,34 +21,37 @@
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left class="flex-auto flex-wrap">
|
||||
|
||||
<!-- Log Level filter -->
|
||||
<div class="flex log-viewer-filter" style="position: relative;">
|
||||
<button type="button"
|
||||
class="btn-link dropdown-toggle flex mb2 filter-toggle"
|
||||
ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="{{vm.page.showLevelFilter === undefined ? false : vm.page.showLevelFilter}}">
|
||||
<span>
|
||||
<localize key="logViewer_logLevels">Log Levels</localize>:
|
||||
</span>
|
||||
<span class="filter-toggle__level truncate">{{ vm.getFilterName(vm.logLevels) }}</span>
|
||||
<span class="filter-toggle__icon caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
|
||||
<div class="flex items-center">
|
||||
<div class="flex mr-auto mb2">
|
||||
|
||||
<!-- Log Level filter -->
|
||||
<div class="umb-filter">
|
||||
<button type="button"
|
||||
class="btn btn-link dropdown-toggle umb-filter__toggle"
|
||||
ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="{{vm.page.showLevelFilter === undefined ? false : vm.page.showLevelFilter}}">
|
||||
|
||||
<span><localize key="logViewer_logLevels">Log Levels</localize>:</span>
|
||||
<span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.logLevels) }}</span>
|
||||
<span class="caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
|
||||
<div class="flex items-center">
|
||||
<umb-checkbox input-id="loglevel-{{$index}}"
|
||||
name="loglevel"
|
||||
model="level.selected"
|
||||
on-change="vm.setLogLevelFilter(level)">
|
||||
</umb-checkbox>
|
||||
|
||||
<label for="loglevel-{{$index}}">
|
||||
<umb-badge size="s" color="{{level.logTypeColor}}">{{level.name}}</umb-badge>
|
||||
</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
<label for="loglevel-{{$index}}">
|
||||
<umb-badge size="s" color="{{level.logTypeColor}}">{{level.name}}</umb-badge>
|
||||
</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex search-box">
|
||||
|
||||
@@ -103,21 +103,21 @@
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<!-- Filters -->
|
||||
<div style="margin-bottom: 20px;" class="flex items-center">
|
||||
<div class="flex items-center mb3">
|
||||
|
||||
<div style="font-size: 16px;">
|
||||
<span class="bold"><localize key="sections_users">Users</localize></span> <span ng-if="vm.usersOptions.totalItems">({{vm.usersOptions.totalItems}})</span>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin-left: auto;">
|
||||
<div class="flex ml-auto">
|
||||
|
||||
<!-- State filter -->
|
||||
<div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
|
||||
<div class="umb-filter" ng-if="vm.userStatesFilter.length > 0">
|
||||
<button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('state')">
|
||||
<span><localize key="general_status">Status</localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
|
||||
<span class="caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ key: '!All'}" ng-show="userState.count > 0" style="padding: 8px 20px 8px 16px;">
|
||||
<umb-checkbox model="userState.selected"
|
||||
@@ -129,12 +129,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Groups filter -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('group')">
|
||||
<span><localize key="general_groups"></localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<div class="umb-filter">
|
||||
<button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('group')">
|
||||
<span><localize key="general_groups">Groups</localize>:</span>
|
||||
<span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userGroups) }}</span>
|
||||
<span class="caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
|
||||
<umb-checkbox model="userGroup.selected"
|
||||
@@ -146,15 +146,15 @@
|
||||
</div>
|
||||
|
||||
<!-- Order By -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
|
||||
<div class="umb-filter">
|
||||
<button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('orderBy')">
|
||||
<span><localize key="general_orderBy">Order by</localize>:</span>
|
||||
<span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<span class="bold truncate dib umb-filter__label">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
|
||||
<span class="caret" aria-hidden="true"></span>
|
||||
</button>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
|
||||
<umb-dropdown-item ng-repeat="sortData in vm.userSortData">
|
||||
<a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
|
||||
<button type="button" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)">{{sortData.label}}</button>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user