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

Merge pull request #7260 from umbraco/v8/feature/0000-listview-styling-adjustments

Browse Source 
Listview styling adjustments
This commit is contained in:
Claus
2020-01-07 11:53:41 +01:00
committed by GitHub
parent 5d7a1bacfe 43f63497d0
commit bc8d02b4ac
13 changed files with 138 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -132,6 +132,7 @@
@import "components/umb-content-grid.less";
@import "components/umb-contextmenu.less";
@import "components/umb-layout-selector.less";
@import "components/umb-mini-search.less";
@import "components/tooltip/umb-tooltip.less";
@import "components/tooltip/umb-tooltip-list.less";
@import "components/overlays/umb-overlay-backdrop.less";

8
src/Umbraco.Web.UI.Client/src/less/buttons.less
View File

@@ -261,10 +261,11 @@ input[type="button"] {
.btn-outline {
border: 1px solid;
border-color: @gray-7;
background: @white;
background: transparent;
color: @blueExtraDark;
padding: 5px 13px;
transition: all .2s linear;
transition: border-color .12s linear, color .12s linear;
font-weight: 600;
}
.btn-outline:hover,
@@ -272,7 +273,8 @@ input[type="button"] {
.btn-outline:active {
border-color: @ui-light-type-hover;
color: @ui-light-type-hover;
background: @white;
background: transparent;
transition: border-color .12s linear, color .12s linear;
}
// Cross-browser Jank

11
src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
View File

@@ -6,7 +6,8 @@
.umb-layout-selector__active-layout {
background: transparent;
box-sizing: border-box;
border: 1px solid @inputBorder;
border: 1px solid @ui-action-discreet-border;
color: @ui-action-discreet-type;
cursor: pointer;
height: 30px;
width: 30px;
@@ -17,7 +18,8 @@
}
.umb-layout-selector__active-layout:hover {
border-color: @inputBorderFocus;
border-color: @ui-action-discreet-border-hover;
color: @ui-action-discreet-type-hover;
}
.umb-layout-selector__dropdown {
@@ -31,6 +33,7 @@
flex-direction: column;
transform: translate(-50%,0);
left: 50%;
border-radius: 3px;
}
.umb-layout-selector__dropdown-item {
@@ -46,11 +49,11 @@
}
.umb-layout-selector__dropdown-item:hover {
border: 1px solid @gray-8;
border: 1px solid @ui-action-discreet-border;
}
.umb-layout-selector__dropdown-item.-active {
border: 1px solid @blue;
border: 1px solid @ui-action-discreet-border-hover;
}
.umb-layout-selector__dropdown-item-icon,

44
src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less Normal file
View File

@@ -0,0 +1,44 @@
.umb-mini-search {
position: relative;
display: block;
.icon {
position: absolute;
padding: 5px 8px;
pointer-events: none;
top: 2px;
color: @ui-action-discreet-type;
transition: color .1s linear;
}
input {
width: 0px;
padding-left:24px;
margin-bottom: 0px;
background-color: transparent;
border-color: @ui-action-discreet-border;
transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
}
&:focus-within, &:hover {
.icon {
color: @ui-action-discreet-type-hover;
}
input {
color: @ui-action-discreet-border-hover;
border-color: @ui-action-discreet-border-hover;
}
}
input:focus, &:focus-within input {
background-color: white;
color: @ui-action-discreet-border-hover;
border-color: @ui-action-discreet-border-hover;
}
input:focus, &:focus-within input, &.--has-value input {
width: 190px;
padding-left:30px;
}
}

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

@@ -1,6 +1,10 @@
// Listview
// -------------------------
.umb-listview {
min-height: 100px;
}
.umb-listview table {
border: 1px solid @gray-8;
}

2
src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
View File

@@ -1,7 +1,7 @@
<div class="umb-content-grid">
<div
class="umb-content-grid__item"
class="umb-content-grid__item umb-outline"
ng-repeat="item in content"
ng-class="{'-selected': item.selected}"
ng-click="clickItem(item, $event, $index)">

2
src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
View File

@@ -1,6 +1,6 @@
<div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
<button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()" prevent-default>
<button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout umb-outline" ng-click="vm.toggleLayoutDropdown()" prevent-default>
<i class="{{ vm.activeLayout.icon }}" aria-hidden="true"></i>
<span class="sr-only">
<localize key="visuallyHiddenTexts_activeListLayout">Active layout:</localize>&nbsp;

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

@@ -1,7 +1,7 @@
<div class="umb-minilistview">
<div class="umb-mini-list-view umb-animated"
ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}"
<div class="umb-mini-list-view umb-animated"
ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}"
ng-repeat="miniListView in miniListViews">
<div class="umb-mini-list-view__title">
@@ -60,7 +60,7 @@
</div>
<!-- Items -->
<div class="umb-table-row cursor-pointer"
<div class="umb-table-row cursor-pointer umb-outline"
ng-repeat="child in miniListView.children"
ng-click="selectNode(child)"
ng-class="{'-selected':child.selected, 'not-allowed':!child.allowed}">

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

@@ -0,0 +1,14 @@
<ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
<i class="icon icon-search"></i>
<input
class="form-control search-input"
type="text"
localize="placeholder,label"
label="@general_typeToSearch"
placeholder="@general_typeToSearch"
ng-model="vm.model"
ng-change="vm.onChange()"
ng-keydown="vm.onKeyDown($event)"
prevent-enter-submit
no-dirty-check>
</ng-form>

43
src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js Normal file
View File

@@ -0,0 +1,43 @@
(function () {
'use strict';
angular
.module('umbraco')
.component('umbMiniSearch', {
templateUrl: 'views/components/umb-mini-search/umb-mini-search.html',
controller: UmbMiniSearchController,
controllerAs: 'vm',
bindings: {
model: "=",
onStartTyping: "&",
onSearch: "&"
}
});
function UmbMiniSearchController($scope) {
var vm = this;
var searchDelay = _.debounce(function () {
$scope.$apply(function () {
vm.onSearch();
});
}, 500);
vm.onKeyDown = function (ev) {
//13: enter
switch (ev.keyCode) {
case 13:
vm.onSearch();
break;
}
};
vm.onChange = function () {
vm.onStartTyping();
searchDelay();
};
}
})();

4
src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
View File

@@ -2,7 +2,7 @@
<div class="umb-table" ng-if="vm.items">
<!-- Listviews head section -->
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-row umb-outline">
<div class="umb-table-cell">
<button type="button" class="umb-table__action" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
@@ -37,7 +37,7 @@
</div>
<!-- Listview body section -->
<div class="umb-table-body">
<div class="umb-table-row -selectable"
<div class="umb-table-row -selectable umb-outline"
ng-repeat="item in vm.items track by $index"
ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
ng-click="vm.selectItem(item, $index, $event)">

26
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
View File

@@ -324,33 +324,19 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time
});
};
var searchListView = _.debounce(function () {
$scope.$apply(function () {
makeSearch();
});
}, 500);
$scope.forceSearch = function (ev) {
//13: enter
switch (ev.keyCode) {
case 13:
makeSearch();
break;
}
};
$scope.enterSearch = function () {
$scope.viewLoaded = false;
searchListView();
};
function makeSearch() {
$scope.makeSearch = function() {
if ($scope.options.filter !== null && $scope.options.filter !== undefined) {
$scope.options.pageNumber = 1;
$scope.reloadView($scope.contentId);
}
}
$scope.onSearchStartTyping = function() {
$scope.viewLoaded = false;
}
$scope.selectedItemsCount = function () {
return $scope.selection.length;
};

25
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View File

@@ -14,14 +14,14 @@
<!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
<div class="btn-group" ng-show="createAllowedButtonSingle">
<button type="button" class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
<button type="button" class="btn btn-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</button>
</div>
<!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
<div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
<button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
<span>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</span>
@@ -46,7 +46,7 @@
<!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
<div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
<button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
<localize key="actions_create">Create</localize>
<span class="caret" aria-hidden="true"></span>
</button>
@@ -126,21 +126,10 @@
</umb-editor-sub-header-section>
<umb-editor-sub-header-section ng-show="(selection.length == 0)">
<ng-form class="form-search -no-margin-bottom pull-right" novalidate>
<div class="inner-addon left-addon">
<i class="icon icon-search" ng-click="enterSearch($event)"></i>
<input
class="form-control search-input"
type="text"
localize="placeholder"
placeholder="@general_typeToSearch"
ng-model="options.filter"
ng-change="enterSearch()"
ng-keydown="forceSearch($event)"
prevent-enter-submit
no-dirty-check>
</div>
</ng-form>
<umb-mini-search model="options.filter" on-search="makeSearch()" on-start-typing="onSearchStartTyping()">
</umb-mini-search>
</umb-editor-sub-header-section>
<umb-editor-sub-header-section ng-show="(selection.length > 0)">