diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/shared')
24 files changed, 320 insertions, 784 deletions
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html deleted file mode 100644 index 872bf90329..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html +++ /dev/null @@ -1,8 +0,0 @@ -<div class="checkbox-container {{checkboxStyle}}"> - <div class="checkbox-animation"></div><!--[@checkEffect]="checked"--> - <label class="checkbox-label" > - <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" /> - <div class="checkbox-icon"></div> - <span *ngIf="label" class="checkbox-label-content">{{label}}</span> - </label> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less deleted file mode 100644 index 3a28c5fb42..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less +++ /dev/null @@ -1,67 +0,0 @@ - @import '../../../../assets/styles/tlv-sprite'; -@import '../../../../assets/styles/sprite'; - - -.checkbox-container { - display:inline-block; - position:relative; - text-align: left; - height: 20px; - - - .checkbox-icon { - display: inline-block; - } - - .checkbox-label { - font-weight: inherit; - font-size: inherit; - } - - .checkbox-label-content { - margin-left:2px; - } - - .checkbox-icon::before { - .tlv-sprite; - background-position: -10px -60px; - width: 14px; - height: 14px; - content: ''; - display: inline-block; - margin-right: 0px; - margin-top: -2px; - vertical-align: middle; - } - - input[type=checkbox].checkbox-hidden { - width:0; - height:0; - display:none; - &:checked ~ .checkbox-icon::before{ - .sprite-new; - .filled-checkbox-icon - } - &[disabled] ~ .checkbox-icon::before { - /* TODO: add disabled styles here */ - background-image: none; - background-color: #EFEFEF; - border-radius: 2px; - border: solid #CCC 1px; - } - } - - .checkbox-animation { - background-color: #009fdb; - position: absolute; - left: 2px; - top: 4px; - width:10px; - height:10px; - border-radius: 50%; - z-index: 1; - pointer-events: none; - opacity:0; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts deleted file mode 100644 index c8da016174..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'checkbox', - templateUrl: './checkbox.component.html', - styleUrls: ['./checkbox.component.less'], - encapsulation: ViewEncapsulation.None - // animations: [ - // trigger('checkEffect', [ - // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), - // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), - // transition('1 => 0', animate('150ms ease-out')), - // transition('0 => 1', animate('150ms ease-in')) - // ]) - // ] -}) -export class CheckboxComponent { - - @Input() checkboxStyle: string; - @Input() label: string; - @Input() checked: boolean; - @Input() disabled: boolean; - @Output() checkedChange: EventEmitter<any> = new EventEmitter<any>(); - - toggleState(newValue:boolean) { - this.checkedChange.emit(newValue); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts deleted file mode 100644 index 4ac7f2d7cd..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { CheckboxComponent } from './checkbox.component'; - - -@NgModule({ - imports: [CommonModule, BrowserModule, FormsModule], - declarations: [CheckboxComponent], - bootstrap: [], - exports: [CheckboxComponent] -}) -export class CheckboxModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import CheckboxModule - *In HTML: - *<checkbox checkboxStyle="class-goes-here" [label]="'Text goes here'" [disabled]="variable-goes-here" [(checked)]="default-or-variable-goes-here" (checkedChange)="change-event-goes-here()"></checkbox> - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * - * To create or override styles: - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html deleted file mode 100644 index d783be4c27..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html +++ /dev/null @@ -1,23 +0,0 @@ -<nav class="navbar navbar-dark"> - <div class="clearfix"> - <button (click)="isCollapsed = !isCollapsed" - class="navbar-toggler pull-xs-right hidden-sm-up" type="button" - aria-controls="bd-main-nav" - aria-label="Toggle navigation"> - {{menuIcon}} - </button> - <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]"> - {{brandMenu.title}} - </a> - </div> - <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}"> - <ul class="nav navbar-nav"> - <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active"> - <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a> - </li> - <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)"> - <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a> - </li> - </ul> - </div> -</nav> diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less deleted file mode 100644 index 3e5165b798..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.active { - color: #ffffff; -} -.navbar-toggler { - border: solid 1px #cccccc; - color: #ff0000; -} -.navbar { - background-color: #0000ff; - border-radius: 0; -}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts deleted file mode 100644 index 68a26c4780..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============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========================================================= - */ - -import {Component, OnInit, ViewEncapsulation} from '@angular/core'; -import { ROUTES } from './navbar-routes.config'; -import { MenuType, RouteInfo } from './navbar.metadata'; - -@Component({ - selector: 'app-navbar', - templateUrl: './navbar.component.html', - styleUrls: [ './navbar.component.less' ], - encapsulation: ViewEncapsulation.None -}) -export class NavbarComponent implements OnInit { - public menuItems: Array<RouteInfo>; - public brandMenu: RouteInfo; - isCollapsed = true; - - constructor() {} - - ngOnInit() { - this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); - this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; - } - - public get menuIcon(): string { - return this.isCollapsed ? '☰' : '✖'; - } - - public getMenuItemClasses(menuItem: any) { - return { - 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT - }; - } -} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts deleted file mode 100644 index 4a754dfe99..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarComponent } from "./navbar.component"; - -@NgModule({ - imports: [ - RouterModule, - CommonModule - ], - declarations: [ NavbarComponent ], - exports: [ - NavbarComponent - ] -}) -export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html deleted file mode 100644 index 36629594b0..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html +++ /dev/null @@ -1,5 +0,0 @@ -<div class="search-bar-container {{class}}"> - <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/> - <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span> - <button class="search-bar-button" (click)="searchButtonClick()"></button> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less deleted file mode 100644 index cfeb8d3b01..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less +++ /dev/null @@ -1,58 +0,0 @@ -.search-bar-container { - display:flex; - border-radius: 4px; - box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); - - .search-bar-input { - border: 1px solid #cdcdcd; - border-radius: 4px; - border-right:none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - outline:none; - padding:2px 50px 2px 10px; - color: #5a5a5a; - font-size: 1em; - font-style: italic; - } - - .clear-search-x { - position:absolute; - right:40px; - top:5px; - padding: 0 5px; - - &:hover { - border-radius:2px; - background-color: #ebebeb; - cursor:pointer; - } - } - - .search-bar-button { - //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%; - background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; - background-color: rgba(234, 234, 234, 0.88); - width: 30px; - height: 30px; - padding: 0; - cursor:pointer; - border:solid 1px #cdcdcd; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - - &:hover { - background-position:-126px -1275px; - } - - &:active { - background-color: rgba(31, 171, 223, 0.88); - background-position:-45px -1275px; - border-left:none; - } - &:focus { - outline:none; - } - - } -} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts deleted file mode 100644 index 08bdf2030f..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'search-bar', - templateUrl: './search-bar.component.html', - styleUrls: ['./search-bar.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchBarComponent { - - @Input() placeholder: string; - @Input() class: string; - @Input() searchQuery: string; - @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>(); - @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>(); - - searchButtonClick = (): void => { - if (this.searchQuery) { //do not allow empty search - this.searchButtonClicked.emit(this.searchQuery); - } - } - - searchQueryChange = ($event): void => { - this.searchChanged.emit($event); - } - - private clearSearchQuery = (): void => { - this.searchQuery = ""; - this.searchButtonClicked.emit(this.searchQuery); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html deleted file mode 100644 index c9769ba5ae..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html +++ /dev/null @@ -1,6 +0,0 @@ -<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length"> - <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar> - <div class="autocomplete-results"> - <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div> - </div> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less deleted file mode 100644 index 92b054cd85..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less +++ /dev/null @@ -1,35 +0,0 @@ - -.search-with-autocomplete-container{ - &.autocomplete-visible { - - .search-bar-input { - border-bottom-left-radius: 0; - } - .search-bar-button { - border-bottom-right-radius: 0; - } - .autocomplete-results { - border: solid 1px #d2d2d2; - border-top:none; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - background-color: #fff; - padding: 10px 20px; - width:100%; - position:absolute; - max-height: 200px; - overflow-y: scroll; - } - - .autocomplete-result-item { - color:#5a5a5a; - padding: 5px 0; - cursor:pointer; - - &:hover { - color: #999; - } - } - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts deleted file mode 100644 index ced056d1fc..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import { SearchBarComponent } from '../search-bar/search-bar.component'; - -@Component({ - selector: 'search-with-autocomplete', - templateUrl: './search-with-autocomplete.component.html', - styleUrls: ['./search-with-autocomplete.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchWithAutoCompleteComponent { - - @Input() searchPlaceholder: string; - @Input() searchBarClass: string; - @Input() searchQuery: string; - @Input() autoCompleteValues: Array<string>; - @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>(); - @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>(); - - searchChange = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchChanged.emit(searchTerm); - } - - updateSearch = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchButtonClicked.emit(searchTerm); - this.autoCompleteValues = []; - } -} - diff --git a/catalog-ui/src/app/ng2/shared/shared.module.ts b/catalog-ui/src/app/ng2/shared/shared.module.ts deleted file mode 100644 index 2bc7d52ab8..0000000000 --- a/catalog-ui/src/app/ng2/shared/shared.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { NgModule } from '@angular/core'; - -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarModule } from "./navbar/navbar.module"; - -@NgModule({ - declarations: [ - - ], - imports: [ - CommonModule, - RouterModule, - NavbarModule - ], - exports: [ - ] -}) - -export class SharedModule {} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts deleted file mode 100644 index bad7b80a51..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { Component, Input } from '@angular/core'; -import { ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'tab', - template: ` - <div *ngIf="active" class="tab-content"> - <ng-content></ng-content> - </div> - `, - encapsulation: ViewEncapsulation.None -}) -export class Tab { - @Input('tabTitle') title: string; - @Input() active:boolean = false; - @Input() indication?: number; - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html deleted file mode 100644 index 3e263a3862..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html +++ /dev/null @@ -1,9 +0,0 @@ -<div class="tabs {{tabStyle}}"> - <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"> - {{tab.title}} - <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div> - </div> -</div> -<div class="tab-content-container"> - <ng-content></ng-content> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less deleted file mode 100644 index 6f9e57aaf2..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less +++ /dev/null @@ -1,84 +0,0 @@ -@import '../../../../assets/styles/variables'; - -tab { - height: 100%; -} - -.tabs { - display:flex; - flex: 0 0 auto; - flex-direction:row; -} - -.tab { - flex: 1 0 auto; - cursor: pointer; - padding: .5em; -} - -.tab-content-container { - flex: 1; - width:100%; - overflow-y:hidden; -} - -.tab-content { - height:100%; -} - -/*Tab styles*/ -.tabs{ - &.round-tabs .tab{ - background-color: #f8f8f8; - color: #959595; - border: solid 1px #d2d2d2; - border-bottom:none; - border-left:none; - position:relative; - - &:first-child { - border-left:solid 1px #d2d2d2; - } - - &.active { - background-color:#009fdb; - color:#e9e9e9; - border-color:#009fdb; - } - - .tab-indication { - position: absolute; - top: -10px; - background-color: #009fdb; - right: 10px; - padding: 2px 0; - border-radius: 15px; - border: solid 1px #d2d2d2; - color:white; - width: 25px; - height: 25px; - text-align: center; - - } - } - - &.simple-tabs .tab { - font-size: 12px; - color: @main_color_n; - - &:after { - display:block; - content: ''; - border-bottom: 2px solid @main_color_a; - transform: scaleX(0); - transition: transform 200ms ease-in-out; - } - - &.active { - color: @main_color_a; - &:after { - transform: scaleX(1.2); - } - } - } -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts deleted file mode 100644 index 21d2bbad43..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; -import { Tab } from './tab/tab.component'; -import { ViewEncapsulation } from '@angular/core'; -import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'tabs', - templateUrl: './tabs.component.html', - styleUrls: ['./tabs.component.less'], - encapsulation: ViewEncapsulation.None, - animations: [ - trigger('indicatorAnimation', [ - transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), - transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) - ]) - ] -}) -export class Tabs implements AfterContentInit { - - @Input() tabStyle: string; - @Input() hideIndicationOnTabChange?: boolean = false; - @ContentChildren(Tab) tabs: QueryList<Tab>; - @Output() tabChanged: EventEmitter<Tab> = new EventEmitter<Tab>(); - - - ngAfterContentInit() { - //after contentChildren are set, determine active tab. If no active tab set, activate the first one - let activeTabs = this.tabs.filter((tab) => tab.active); - - if (activeTabs.length === 0) { - this.selectTab(this.tabs.first); - } - } - - selectTab(tab: Tab) { - //activate the tab the user clicked. - this.tabs.toArray().forEach(tab => { - tab.active = false; - if (this.hideIndicationOnTabChange && tab.indication) { - tab.indication = null; - } - }); - tab.active = true; - this.tabChanged.emit(tab); - } - - triggerTabChange(tabTitle) { - this.tabs.toArray().forEach(tab => { - tab.active = (tab.title == tabTitle) ? true : false; - }); - } - - setTabIndication(tabTitle:string, indication?:number) { - let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); - selectedTab.indication = indication || null; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts deleted file mode 100644 index 6bf19d4099..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============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========================================================= - */ - -import { Component, NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - -import { Tabs } from './tabs.component'; -import { Tab } from './tab/tab.component'; - - -@NgModule({ - imports: [BrowserModule], - declarations: [Tabs, Tab], - bootstrap: [], - exports: [Tabs, Tab] -}) -export class TabModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import TabModule - *In HTML: - *<tabs tabStyle="class-goes-here" (tabChanged)="tabChangedEvent($event) [hideIndicationOnTabChange]="optional-boolean"> - * <tab [tabTitle]="'Tab 1'">Content of tab 1</tab> - * <tab tabTitle="Tab 2" >Content of tab 2</tab> - * ... - *</tabs> - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * Existing options: - * tabStyle="round-tabs" will provide generic rounded tab look - * - * To create or override styles: - * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts index ac58cbd063..feaec03bbd 100644 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts +++ b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts @@ -7,9 +7,9 @@ * 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. @@ -18,10 +18,15 @@ * ============LICENSE_END========================================================= */ -import { MenuType, RouteInfo } from './navbar.metadata'; +import { NgModule } from '@angular/core' -export const ROUTES: RouteInfo[] = [ - { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, - { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, - { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } -]; +import { TranslateService } from "./translate.service"; +import { TranslatePipe } from "./translate.pipe"; + + +@NgModule({ + providers: [TranslateService], + declarations: [TranslatePipe], + exports: [TranslatePipe] +}) +export class TranslateModule { } diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts new file mode 100644 index 0000000000..42e019829f --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts @@ -0,0 +1,62 @@ +/*- + * ============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========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { TranslateService, ITranslateArgs } from "./translate.service"; + + +@Pipe({ + name: 'translate', + pure: false +}) +export class TranslatePipe implements PipeTransform { + private translated:string; + private lastParams: { + phrase: string; + args: {[index: string]: any}; + language: string; + } = { + phrase: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + } + + private shouldUpdate(curParams:{[index:string]: any}) : boolean { + return ( + curParams.language !== this.lastParams.language || + curParams.args !== this.lastParams.args || + curParams.phrase !== this.lastParams.phrase + ); + } + + public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string { + const curParams = { phrase, args, language }; + if (this.shouldUpdate(curParams)) { + this.lastParams = curParams; + this.translated = this.translateService.translate(phrase, args, language); + console.log('*updated:', this.translated); + } + + return this.translated; + } +} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts index 71cc3cb59f..a1d7833062 100644 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts @@ -7,9 +7,9 @@ * 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. @@ -18,14 +18,13 @@ * ============LICENSE_END========================================================= */ -export enum MenuType { - BRAND, - LEFT, - RIGHT -} +import { OpaqueToken } from "@angular/core"; + +export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken'); -export interface RouteInfo { - path: string; - title: string; - menuType: MenuType; +export interface ITranslateServiceConfig { + filePrefix:string; + fileSuffix:string; + allowedLanguages:string[]; + defaultLanguage:string; } diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts new file mode 100644 index 0000000000..ff7c643b46 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts @@ -0,0 +1,235 @@ +/*- + * ============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========================================================= + */ + +import { Injectable, Inject } from "@angular/core"; +import { Response, Http } from "@angular/http"; +import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs"; +import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config"; + +export { ITranslateServiceConfig, TranslateServiceConfigToken }; + +export interface ITranslateLanguageJson { + [index:string]: string; +} + +export interface ITranslateArgs { + [index:string]: any; +} + +export class PhraseTranslator { + private _observable:ConnectableObservable<string>; + private _observer:Observer<string>; + private _languageChangeSubscription:Subscription; + + private _phraseKey:string; + private _args:ITranslateArgs; + private _language:string; + + private _markForCheck:boolean = false; + private _lastParams: { + phraseKey: string; + args: {[index: string]: any}; + language: string; + } = { + phraseKey: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + this._observable = Observable.create(observer => { + this._observer = observer; + this._languageChangeSubscription = this.translateService.languageChangedObservable.subscribe(language => { + // using the active language, then force update + if (!this._language) { + this.update(true); + } + }); + }).publishReplay(1).refCount(); + } + + public get observable() { + return this._observable; + } + + public destroy() { + this._observer.complete(); + this._languageChangeSubscription.unsubscribe(); + + delete this._observable; + delete this._observer; + delete this._languageChangeSubscription; + } + + public shouldUpdate() : boolean { + if (!this._markForCheck) { + return false; + } + this._markForCheck = false; + return ( + this._language !== this._lastParams.language || + this._args !== this._lastParams.args || + this._phraseKey !== this._lastParams.phraseKey + ); + } + + public update(forceUpdate:boolean=false) : void { + // only update translation when having subscriptions connected. + if (this._observer && !this._observer.closed) { + if (forceUpdate || this.shouldUpdate()) { + this._lastParams = { + phraseKey: this._phraseKey, + args: this._args, + language: this._language + }; + this._markForCheck = false; + + const translated = this.translateService.translate(this._phraseKey, this._args, this._language); + this._observer.next(translated); + } + } + } + + private _changeParam(paramKey:string, value:any, update:boolean) : void { + this[`_${paramKey}`] = value; + this._markForCheck = true; + if (update) { + this.update(); + } + } + + public changePhraseKey(phraseKey:string, update:boolean=true) : void { + this._changeParam('phraseKey', phraseKey, update); + } + + public changeArgs(args:ITranslateArgs, update:boolean=true) :void { + this._changeParam('args', args, update); + } + + public changeLangauge(language:string, update:boolean=true) :void { + this._changeParam('language', language, update); + } + + public changeParams(phraseKey:string, args:ITranslateArgs={}, language?:string, forceUpdate:boolean=false) { + this._phraseKey = phraseKey; + this._args = args; + this._language = language; + this._markForCheck = true; + this.update(forceUpdate); + } +} + + +@Injectable() +export class TranslateService { + private _activeLanguage:string; + private _languageChangedObservable:ConnectableObservable<string>; + private _languageChangedObserver:Observer<string>; + private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {}; + private _cacheLanguagesLoaders:{[index:string]:Observable<ITranslateLanguageJson>} = {}; + + constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) { + this.initLanguageObservable(); + this.loadAndActivateLanguage(this.config.defaultLanguage); + } + + public get languageChangedObservable() : Observable<string> { + return this._languageChangedObservable; + } + + public get activeLanguage() { + return this._activeLanguage; + } + + private initLanguageObservable() { + this._languageChangedObservable = ConnectableObservable.create(observer => { + this._languageChangedObserver = observer; + }).publishReplay(1); // replay last emitted change on subscribe + this._languageChangedObservable.connect(); + } + + private loadLanguageJsonFile(language:string, emitOnLoad:boolean=true) : Observable<ITranslateLanguageJson> { + if (this.config.allowedLanguages.indexOf(language) === -1) { + return Observable.throw(`Language "${language}" is not available.`); + } + + if (this._cacheLanguagesJsons[language]) { + return Observable.of(this._cacheLanguagesJsons[language]); + } + + if (!(language in this._cacheLanguagesLoaders)) { + const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`; + this._cacheLanguagesLoaders[language] = this.http.get(filePath) + .map<Response, ITranslateLanguageJson>(resp => resp.json()) + .catch(() => Observable.throw(`Failed to load language file for "${language}"`)) + .publish(); + (<ConnectableObservable<ITranslateLanguageJson>>this._cacheLanguagesLoaders[language]).connect(); + this._cacheLanguagesLoaders[language].subscribe(languageJson => { + this._cacheLanguagesJsons[language] = languageJson; + delete this._cacheLanguagesLoaders[language]; + if (emitOnLoad) { + this._languageChangedObserver.next(language); + } + return languageJson; + }); + } + return this._cacheLanguagesLoaders[language]; + } + + public activateLanguage(language:string) : boolean { + if (this._cacheLanguagesJsons[language]) { + if (language !== this._activeLanguage) { + this._activeLanguage = language; + this._languageChangedObserver.next(this._activeLanguage); + } + return true; + } + return false; + } + + public loadAndActivateLanguage(language:string) : Observable<ITranslateLanguageJson> { + const loadLanguageObservable = this.loadLanguageJsonFile(language, false); + loadLanguageObservable.subscribe(() => { + this.activateLanguage(language); + }, () => {}); + return loadLanguageObservable; + } + + public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string { + const phrase:string = (this._cacheLanguagesJsons[language] || {})[phraseKey] || ''; + let translated:string; + if (typeof(phrase) === 'string') { + translated = phrase + .replace( + /(^|[^\\]|\\\\)\{\{(\w+)\}\}/g, + (m, p1, p2) => `${p1}${args[p2]||''}` + ) + .replace('\\{{', '{{') + .replace('\\\\', '\\'); + } + return translated; + } + + public createPhraseTranslator(phraseKey?:string, args?:ITranslateArgs, language?:string) : PhraseTranslator { + const phraseTranslator = new PhraseTranslator(this); + phraseTranslator.changeParams(phraseKey, args, language); + return phraseTranslator; + } +} |