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

Align listview layout icons and make icon boxes same sizes

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-08-02 16:20:52 +02:00
committed by Sebastiaan Janssen
parent b476f91789
commit 824d2fd46d
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -259,20 +259,21 @@
margin-right: 15px;
}
.list-view-layout__icon-wrapper {
margin-right: 10px;
}
.list-view-layout__icon {
font-size: 18px;
margin-right: 10px;
vertical-align: middle;
border: 1px solid @gray-8;
background: @white;
padding: 6px 8px;
display: block;
}
.list-view-layout__icon:hover,
.list-view-layout__icon:focus,
.list-view-layout__icon:active {
text-decoration: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
}
.list-view-layout__remove {

12
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
View File

@@ -8,21 +8,23 @@
<i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
<div>
<div class="list-view-layout__icon-wrapper">
<button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
<i class="{{ layout.icon }}" aria-hidden="true"></i>
<button ng-if="layout.isSystem !== 1" type="button" class="btn-reset" ng-click="vm.openIconPicker(layout)" umb-auto-focus>
<span class="list-view-layout__icon">
<i class="{{layout.icon}}" aria-hidden="true"></i>
</span>
</button>
<div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
<i class="{{ layout.icon }}" aria-hidden="true"></i>
<i class="{{layout.icon}}" aria-hidden="true"></i>
</div>
</div>
<div class="list-view-layout__name">
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{layout.name}}</span>
<span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
</div>