diff options
Diffstat (limited to 'catalog-ui/src/app/directives/utils/expand-collapse-list-header')
3 files changed, 128 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html new file mode 100644 index 0000000000..b351273c08 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html @@ -0,0 +1,19 @@ +<div class="main-wrap" data-tests-id="list-of-{{title}}"> + <div class="header"> + <div class="title">{{title}}</div> + <div class="buttons"> + <span class="order-by hand sprite-new" + data-ng-show="expandCollapseListData.expandCollapse" + data-ng-class="{'asc':!desc, 'desc':desc }" + data-ng-click="swapOrderBy()"></span> + <span class="search hand sprite-new search-icon" + data-ng-class="{'selected':showSearchBox}" + data-ng-show="expandCollapseListData.expandCollapse" + data-ng-click="showHideSearchBox()"></span> + <span class="hand sprite-new expand-list" + data-ng-class="{'open':expandCollapseListData.expandCollapse}" + data-ng-click="expandCollapseListData.expandCollapse=!expandCollapseListData.expandCollapse"></span> + </div> + </div> + <input type="text" id="list-search-box" class="search-box" data-ng-if="expandCollapseListData.expandCollapse && showSearchBox" data-ng-model="expandCollapseListData.filter" autofocus/> +</div> diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less new file mode 100644 index 0000000000..2a80f28007 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less @@ -0,0 +1,43 @@ +.main-wrap{ + text-align: center; + .header{ + background-color: @tlv_color_w; + height: 42px; + border-bottom: 1px solid rgba(0, 159, 219, 0.6); + border-top: 1px solid rgba(0, 159, 219, 0.6); + .title{ + .f-type._14_m; + color: @main_color_l; + font-weight: 400; + line-height: 42px; + padding-left: 18px; + float: left; + } + .buttons{ + float: right; + padding-right: 11px; + line-height: 42px; + span{ + vertical-align: middle; + } + .search,.order-by{ + margin-right: 5px; + } + //temporary/// + .search{ + display: none; + } + ////////////// + } + } + + .search-box{ + border-radius: 2px; + height: 30px; + width:275px; + border: 1px @tlv_color_x solid; + margin: 8px 0; + padding: 0 5px; + } +} + diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts new file mode 100644 index 0000000000..73cb2def0b --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts @@ -0,0 +1,66 @@ +/** + * Created by rcohen on 12/5/2016. + */ +'use strict'; + +export class ExpandCollapseListData { + filter:string;//variable for filter text + orderByField:string;//order by field name + expandCollapse:boolean;//boolean param for expand collapse the list +} + +export interface IExpandCollapseListHeaderScope extends ng.IScope { + title:string;//the title on the header + expandCollapseListData:ExpandCollapseListData; + showSearchBox:boolean; + desc:boolean;//order by desc or asc + + swapOrderBy():void; + showHideSearchBox():void; +} + +export class ExpandCollapseListHeaderDirective implements ng.IDirective { + + constructor(private $timeout:ng.ITimeoutService) { + } + + scope = { + title: '@', + expandCollapseListData: '=' + }; + + public replace = false; + public restrict = 'AE'; + public transclude = true; + + template = ():string => { + return require('./expand-collapse-list-header.html'); + }; + + link = (scope:IExpandCollapseListHeaderScope, $elem:any) => { + scope.swapOrderBy = ():void => { + if (scope.expandCollapseListData.orderByField.charAt(0) === '-') { + scope.expandCollapseListData.orderByField = scope.expandCollapseListData.orderByField.substr(1); + } else { + scope.expandCollapseListData.orderByField = '-' + scope.expandCollapseListData.orderByField; + } + scope.desc = !scope.desc; + }; + + scope.showHideSearchBox = ():void => { + scope.showSearchBox = !scope.showSearchBox; + if (scope.showSearchBox) { + this.$timeout(function () { + angular.element("#list-search-box").focus(); + }, 0); + } + }; + }; + + public static factory = ($timeout:ng.ITimeoutService)=> { + return new ExpandCollapseListHeaderDirective($timeout); + }; + +} + +ExpandCollapseListHeaderDirective.factory.$inject = ['$timeout']; |