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

start on code clean up - make ump-mini-list-view directive + move inline styles to classes

Browse Source
This commit is contained in:
Mads Rasmussen
2017-02-01 23:12:49 +01:00
parent 26acecb720
commit d5a687cf3d
8 changed files with 247 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Umbraco.Web.UI.Client/src/common/directives/components/umbminilistview.directive.js Normal file
View File

@@ -0,0 +1,62 @@
(function() {
'use strict';
function MiniListViewDirective() {
function link(scope, el, attr, ctrl) {
scope.search = "";
scope.openChild = function(event, child) {
if(scope.onOpenChild) {
scope.onOpenChild({"child": child});
event.stopPropagation();
}
};
scope.selectChild = function(child) {
if(scope.onSelectChild) {
scope.onSelectChild({"child": child});
}
};
scope.searchMiniListView = function() {
searchMiniListView();
};
var searchMiniListView = _.debounce(function () {
scope.$apply(function () {
if (scope.search !== null && scope.search !== undefined) {
if(scope.onSearch) {
scope.onSearch({"search": scope.search});
}
}
});
}, 500);
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-mini-list-view.html',
scope: {
node: "=",
children: "=",
onSelectChild: "&",
onOpenChild: "&",
onSearch: "&",
loadingChildren: "="
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbMiniListView', MiniListViewDirective);
})();

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

@@ -119,6 +119,7 @@
@import "components/umb-progress-bar.less";
@import "components/umb-querybuilder.less";
@import "components/umb-pagination.less";
@import "components/umb-mini-list-view.less";
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";

23
src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less Normal file
View File

@@ -0,0 +1,23 @@
.umb-mini-list-view {
}
.umb-mini-list-view__title {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.umb-mini-list-view__title-text {
font-size: 16px;
font-weight: bold;
}
.umb-mini-list-view__title-icon {
font-size: 20px;
margin-right: 5px;
}
.umb-mini-list-view__back {
}

28
src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
View File

@@ -10,7 +10,7 @@
flex-wrap: nowrap;
justify-content: space-between;
min-width: 640px;
min-width: auto;
}
.umb-table.umb-table-inactive {
@@ -103,11 +103,17 @@ input.umb-table__input {
// Table Body Styles
.umb-table-body {
position: relative;
}
.umb-table-body .umb-table-row {
color: fade(@gray, 75%);
border-top: 1px solid @grayLight;
cursor: pointer;
font-size: 13px;
position: relative;
min-height: 32px;
&:hover {
background-color: fade(@grayLighter, 90%);
@@ -250,6 +256,10 @@ input.umb-table__input {
padding: 15px 0;
}
.umb-table-cell--auto-width {
flex: 0 0 auto !important;
}
// Increases the space for the name cell
.umb-table__name {
@@ -257,8 +267,22 @@ input.umb-table__input {
max-width: 25%;
}
.umb-table--condensed {
.umb-table__loading-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 1;
}
.umb-table__row-expand {
font-size: 12px;
text-decoration: none;
color: @black;
}
.umb-table--condensed {
.umb-table-cell:first-of-type:not(.not-fixed) {
padding-top: 10px;
padding-bottom: 10px;

58
src/Umbraco.Web.UI.Client/src/views/common/overlays/contentpicker/contentpicker.html
View File

@@ -1,34 +1,34 @@
<div ng-controller="Umbraco.Overlays.TreePickerController" ng-init="init('content')">
<div class="umb-control-group">
<umb-tree-search-box
hide-search-callback="hideSearch"
search-callback="onSearchResults"
search-from-id="{{searchInfo.searchFromId}}"
search-from-name="{{searchInfo.searchFromName}}"
show-search="{{searchInfo.showSearch}}"
section="content">
</umb-tree-search-box>
</div>
<div class="umb-control-group">
<umb-tree-search-box
hide-search-callback="hideSearch"
search-callback="onSearchResults"
search-from-id="{{searchInfo.searchFromId}}"
search-from-name="{{searchInfo.searchFromName}}"
show-search="{{searchInfo.showSearch}}"
section="content">
</umb-tree-search-box>
</div>
<umb-tree-search-results
ng-if="searchInfo.showSearch"
results="searchInfo.results"
select-result-callback="selectResult">
</umb-tree-search-results>
<umb-tree-search-results
ng-if="searchInfo.showSearch"
results="searchInfo.results"
select-result-callback="selectResult">
</umb-tree-search-results>
<div ng-hide="searchInfo.showSearch" ng-animate="'tree-fade-out'">
<umb-tree
section="content"
treealias="content"
hideheader="{{hideHeader}}"
hideoptions="true"
isdialog="true"
customtreeparams="{{customTreeParams}}"
eventhandler="dialogTreeEventHandler"
enablelistviewsearch="true"
enablecheckboxes="{{multiPicker}}">
</umb-tree>
</div>
<div ng-hide="searchInfo.showSearch" ng-animate="'tree-fade-out'">
<umb-tree
section="content"
treealias="content"
hideheader="{{hideHeader}}"
hideoptions="true"
isdialog="true"
customtreeparams="{{customTreeParams}}"
eventhandler="dialogTreeEventHandler"
enablelistviewsearch="true"
enablecheckboxes="{{multiPicker}}">
</umb-tree>
</div>
</div>
</div>

34
src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js
View File

@@ -590,8 +590,25 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
};
$scope.searchMiniListView = function() {
searchMiniListView();
$scope.searchMiniListView = function(search, miniListView) {
miniListView.pagination.filter = search;
miniListView.loading = true;
resource(miniListView.node.id, miniListView.pagination)
.then(function (data) {
// update children
miniListView.children = data.items;
// update pagination
miniListView.pagination.totalItems = data.totalItems;
miniListView.pagination.totalPages = data.totalPages;
// stop load indicator
miniListView.loading = false;
});
};
$scope.test = function(node) {
@@ -661,24 +678,11 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
}
$scope.animationTest = function() {
if(goingForward) {
return 'animate';
} else {
return 'animate-reverse';
}
}
var searchMiniListView = _.debounce(function () {
$scope.$apply(function () {
if ($scope.pagination.filter !== null && $scope.pagination.filter !== undefined) {
$scope.pagination.pageNumber = 1;
getPagedChildren($scope.miniListView.node, $scope.pagination);
}
});
}, 500);
});

100
src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html
View File

@@ -38,88 +38,26 @@
<div ng-repeat="miniListView in miniListViews" ng-animate="animationTest()">
<div>
<div>
<div ng-if="!model.startNodeId" href="" ng-click="exitMiniListView(miniListView.node)" style="font-size: 12px;/* font-weight: bold; */margin-right: 5px; opacity: 0.5;">
<i class="icon-arrow-left" style="margin-right: 5px;"></i>Back
</div>
<div class="flex items-center" style="margin-bottom: 10px;">
<i class="{{ miniListView.node.icon }}" style="font-size: 20px; margin-right: 5px;"></i>
<h4 style="font-weight: bold; font-size: 16px;">{{ miniListView.node.name }}</h4>
</div>
</div>
<div class="umb-table umb-table--condensed" style="min-width: auto;">
<!-- Head -->
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-cell" style="display: none;"></div>
<div class="umb-table-cell" style="padding-top: 8px; padding-bottom: 8px;">
<form class="form-search -no-margin-bottom" style="width: 100%; margin-right: 0;" novalidate>
<div class="inner-addon left-addon">
<i class="icon icon-search" style="font-size: 14px;"></i>
<input
style="width: 100%;"
class="form-control search-input"
type="text"
localize="placeholder"
placeholder="@general_typeToSearch"
ng-model="pagination.filter"
ng-change="searchMiniListView()"
prevent-enter-submit
no-dirty-check>
</div>
</form>
</div>
</div>
</div>
<!-- Body -->
<div class="umb-table-body" style="position: relative;">
<!-- Load indicator when the list has items -->
<div ng-if="miniListView.loading && miniListView.children.length > 0" style="position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 1;">
<umb-load-indicator></umb-load-indicator>
</div>
<!-- Items -->
<div class="umb-table-row"
ng-repeat="child in miniListView.children"
ng-click="selectListViewItem(child)"
ng-class="{
'-selected':child.selected
}">
<div class="umb-table-cell">
<i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
</div>
<div class="umb-table-cell">{{ child.name }}</div>
<div class="umb-table-cell"><a href="" ng-click="test(child)">LIST VIEW</a></div>
</div>
<!-- Load indicator when the list doesn't have items' -->
<div ng-if="miniListView.loading && !miniListView.children" class="umb-table-row" style="height: 40px; position: relative;">
<umb-load-indicator></umb-load-indicator>
</div>
</div>
</div>
<div class="flex justify-center">
<umb-pagination
ng-if="miniListView.pagination.totalPages > 0"
page-number="miniListView.pagination.pageNumber"
total-pages="miniListView.pagination.totalPages"
on-change="goToPage(pageNumber, miniListView)">
</umb-pagination>
</div>
<div ng-if="!model.startNodeId" href="" ng-click="exitMiniListView(miniListView.node)" style="font-size: 12px;/* font-weight: bold; */margin-right: 5px; opacity: 0.5;">
<i class="icon-arrow-left" style="margin-right: 5px;"></i>Back
</div>
<umb-mini-list-view
node="miniListView.node"
children="miniListView.children"
on-select-child="selectListViewItem(child)"
on-open-child="test(child)"
on-search="searchMiniListView(search, miniListView)"
loading-children="miniListView.loading">
</umb-mini-list-view>
<div class="flex justify-center">
<umb-pagination
ng-if="miniListView.pagination.totalPages > 0 && !miniListView.loading"
page-number="miniListView.pagination.pageNumber"
total-pages="miniListView.pagination.totalPages"
on-change="goToPage(pageNumber, miniListView)">
</umb-pagination>
</div>
</div>

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

@@ -0,0 +1,68 @@
<div>
<div class="umb-mini-list-view__title">
<i class="umb-mini-list-view__title-icon {{ node.icon }}"></i>
<h4 class="umb-mini-list-view__title-text">{{ node.name }}</h4>
</div>
<div class="umb-table umb-table--condensed">
<!-- Head -->
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-cell" style="display: none;"></div>
<div class="umb-table-cell" style="padding-top: 8px; padding-bottom: 8px;">
<form class="form-search -no-margin-bottom" style="width: 100%; margin-right: 0;" novalidate>
<div class="inner-addon left-addon">
<i class="icon icon-search" style="font-size: 14px;"></i>
<input
style="width: 100%;"
class="form-control search-input"
type="text"
localize="placeholder"
placeholder="@general_typeToSearch"
ng-model="search"
ng-change="searchMiniListView(search)"
prevent-enter-submit
no-dirty-check>
</div>
</form>
</div>
</div>
</div>
<!-- Body -->
<div class="umb-table-body">
<!-- Load indicator when the list has items -->
<div class="umb-table__loading-overlay" ng-if="loadingChildren && children.length > 0">
<umb-load-indicator></umb-load-indicator>
</div>
<!-- Items -->
<div class="umb-table-row"
ng-repeat="child in children"
ng-click="selectChild(child)"
ng-class="{
'-selected':child.selected
}">
<div class="umb-table-cell umb-table-cell--auto-width">
<div class="flex items-center">
<ins class="icon-navigation-right umb-table__row-expand" ng-click="openChild($event, child)">&nbsp;</ins>
<i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
</div>
</div>
<div class="umb-table-cell">{{ child.name }}</div>
</div>
<!-- Load indicator when the list doesn't have items -->
<div ng-if="loadingChildren && !children" class="umb-table-row">
<umb-load-indicator></umb-load-indicator>
</div>
</div>
</div>
</div>