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

Modernize mini listview component to use svg icons and umb-search-filter component (#10740)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2021-07-27 15:49:16 +02:00
committed by GitHub
parent 2eb554f1b4
commit 8209525611
3 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
View File

@@ -4,13 +4,12 @@
.icon {
position: absolute;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 1px;
padding: 0;
font-size: 20px;
margin: 5px;
padding: 1px;
pointer-events: none;
color: @ui-action-discreet-type;
transition: color .1s linear;
@@ -30,6 +29,7 @@
.icon {
color: @ui-action-discreet-type-hover;
}
input {
color: @ui-action-discreet-border-hover;
border-color: @ui-action-discreet-border-hover;
@@ -42,10 +42,9 @@
border-color: @ui-action-discreet-border-hover;
cursor: unset;
}
input:focus, &:focus-within input, &.--has-value input {
width: 190px;
padding-left:30px;
padding-left: 30px;
}
}

28
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 }}" aria-hidden="true"></i>
<umb-icon icon="{{miniListView.node.icon}}" class="{{miniListView.node.icon}} umb-mini-list-view__title-icon"></umb-icon>
<h4 class="umb-mini-list-view__title-text">{{ miniListView.node.name }}</h4>
</div>
<div class="umb-mini-list-view__breadcrumb">
<button type="button" ng-if="showBackButton()" class="btn-reset umb-mini-list-view__back" ng-click="exitMiniListView()">
<i class="icon-arrow-left umb-mini-list-view__back-icon" aria-hidden="true"></i>
<umb-icon icon="icon-arrow-left" class="icon-arrow-left umb-mini-list-view__back-icon"></umb-icon>
<span class="umb-mini-list-view__back-text"><localize key="general_back">Back</localize></span> /
</button>
@@ -32,19 +32,17 @@
<div class="umb-table-row">
<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" aria-hidden="true"></i>
<input
class="form-control search-input"
type="text"
localize="placeholder"
placeholder="@general_typeToSearch"
ng-model="search"
ng-change="searchMiniListView(search, miniListView)"
prevent-enter-submit
umb-auto-focus
no-dirty-check>
<form class="flex w-100 -no-margin-bottom" novalidate>
<div class="flex-auto">
<umb-search-filter
input-id="mini-listview-search"
model="search"
label-key="general_typeToSearch"
text="Type to search..."
on-change="searchMiniListView(search, miniListView)"
css-class="w-100 mb-15"
auto-focus="true">
</umb-search-filter>
</div>
</form>
</div>

2
src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html
View File

@@ -1,5 +1,5 @@
<ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
<i class="icon icon-search" aria-hidden="true"></i>
<umb-icon icon="icon-search" class="icon icon-search"></umb-icon>
<input type="text"
class="form-control search-input"
localize="placeholder,label"