diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/layout/top-progress')
3 files changed, 137 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html new file mode 100644 index 0000000000..ab2c8e364e --- /dev/null +++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.html @@ -0,0 +1,22 @@ +<div class="top-progress"> + + <!--======================= Top progress var =======================--> + <div data-ng-if="progressValue>0 && progressValue<100"> + <span class="sdc-progress-title">{{progressMessage}}<span class="progress-percentage">{{progressValue}} %</span></span> + <div class="sdc-progress"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{progressValue}}" aria-valuemin="0" aria-valuemax="100" data-ng-style="{width: progressValue+'%'}"></div> + </div> + </div> + + <div class="sdc-progress-success-wrapper" data-ng-if="progressValue===100"> + <span class="sdc-progress-success"></span> + <span class="sdc-progress-success-title">{{progressMessage}}</span> + </div> + + <div class="sdc-progress-error-wrapper" data-ng-if="progressValue===-1"> + <span class="sdc-progress-error"></span> + <span class="sdc-progress-error-title">{{progressMessage}}</span> + </div> + <!--======================= Top progress var =======================--> + +</div> diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less new file mode 100644 index 0000000000..acce826f80 --- /dev/null +++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.less @@ -0,0 +1,58 @@ +.top-progress { + text-align: left; + + .sdc-progress-title { + .n_12_r; + + .progress-percentage { + float: right; + } + } + + .sdc-progress { + position: relative; + display: block; + height: 6px; + background-color: @main_color_o; + border-radius: 3px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + + .progress-bar { + border-radius: 3px; + background-color: @main_color_a; + } + + } + + .sdc-progress-success-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-success-title { + .d_12_r; + margin-left: 10px; + } + + .sdc-progress-success { + .sprite-new; + .success-circle; + } + } + + .sdc-progress-error-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-error-title { + .q_12_r; + margin-left: 10px; + } + + .sdc-progress-error { + .sprite-new; + .error-icon; + } + + } + +} diff --git a/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts new file mode 100644 index 0000000000..8e8a289281 --- /dev/null +++ b/catalog-ui/app/scripts/directives/layout/top-progress/top-progress.ts @@ -0,0 +1,57 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../../references"/> +module Sdc.Directives { + 'use strict'; + + export interface ITopProgressScope extends ng.IScope { + progressValue:number; + progressMessage:string; + } + + export class TopProgressDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) {} + + public replace = true; + public restrict = 'E'; + public transclude = false; + + scope = { + progressValue: '=', + progressMessage: '=' + }; + + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/layout/top-progress/top-progress.html'); + }; + + public link = (scope:ITopProgressScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + }; + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new TopProgressDirective($templateCache); + }; + + } + + TopProgressDirective.factory.$inject = ['$templateCache']; +} |