diff --git a/demo-shell-ng2/app/components/tag/tag.component.css b/demo-shell-ng2/app/components/tag/tag.component.css new file mode 100644 index 0000000000..292e1264f4 --- /dev/null +++ b/demo-shell-ng2/app/components/tag/tag.component.css @@ -0,0 +1,9 @@ +.adf-tag-example-area { + width: calc(33.3333333333% - 16px); + margin: 8px; + float: left; +} + +.adf-tag-example-title { + padding-bottom: 12px; +} diff --git a/demo-shell-ng2/app/components/tag/tag.component.html b/demo-shell-ng2/app/components/tag/tag.component.html new file mode 100644 index 0000000000..ce25c1a179 --- /dev/null +++ b/demo-shell-ng2/app/components/tag/tag.component.html @@ -0,0 +1,13 @@ +
+
+
+ +
+
+
List Tags Content Services
+ +
+
+
Tag list By Node ID
+ +
diff --git a/demo-shell-ng2/app/components/tag/tag.component.ts b/demo-shell-ng2/app/components/tag/tag.component.ts index 161c00dfb6..5c8d8db133 100644 --- a/demo-shell-ng2/app/components/tag/tag.component.ts +++ b/demo-shell-ng2/app/components/tag/tag.component.ts @@ -19,18 +19,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'alfresco-tag-demo', - template: ` -
-
-
-
-
List Tags Content Services
-
- Tag list By Node ID - -
-
- ` + templateUrl: 'tag.component.html', + styleUrls: ['tag.component.css'] }) export class TagComponent { diff --git a/ng2-components/ng2-alfresco-tag/index.ts b/ng2-components/ng2-alfresco-tag/index.ts index e23cd637e1..d2341ac1ba 100644 --- a/ng2-components/ng2-alfresco-tag/index.ts +++ b/ng2-components/ng2-alfresco-tag/index.ts @@ -16,7 +16,7 @@ */ import { ModuleWithProviders, NgModule } from '@angular/core'; -import { MdButtonModule, MdInputModule } from '@angular/material'; +import { MaterialModule } from './src/components/material.module'; import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core'; import { TagActionsComponent } from './src/components/tag-actions.component'; @@ -48,8 +48,7 @@ export const TAG_PROVIDERS: any[] = [ @NgModule({ imports: [ CoreModule, - MdInputModule, - MdButtonModule + MaterialModule ], declarations: [ ...TAG_DIRECTIVES @@ -67,8 +66,7 @@ export const TAG_PROVIDERS: any[] = [ ], exports: [ ...TAG_DIRECTIVES, - MdInputModule, - MdButtonModule + MaterialModule ] }) export class TagModule { diff --git a/ng2-components/ng2-alfresco-tag/src/components/material.module.ts b/ng2-components/ng2-alfresco-tag/src/components/material.module.ts new file mode 100644 index 0000000000..4aae9d7cef --- /dev/null +++ b/ng2-components/ng2-alfresco-tag/src/components/material.module.ts @@ -0,0 +1,33 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * 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. + */ + +import { NgModule } from '@angular/core'; +import { + MdButtonModule, MdChipsModule, MdIconModule, MdInputModule +} from '@angular/material'; + +export function modules() { + return [ + MdButtonModule, MdInputModule, MdChipsModule, MdIconModule + ]; +} + +@NgModule({ + imports: modules(), + exports: modules() +}) +export class MaterialModule {} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css deleted file mode 100644 index 4ac32a3b42..0000000000 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css +++ /dev/null @@ -1,7 +0,0 @@ -.tag-element { - padding: 0px 0px 0px 9px!important; -} - -.adf-full-width { - width: 100%; -} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html index 6a26134823..0bdf051cf7 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html @@ -1,67 +1,30 @@ - -
-
  • - + + +
    +
    {{currentEntry.entry.tag}} - -
    - delete +
    + delete
    -
    • -
  • -
    - - - - - -
    - - - {{errorMsg}} - - - -
    -
    -
    • -
    - - - + + + + + + + +
    + + + {{errorMsg}} + + + +
    diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.scss b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.scss new file mode 100644 index 0000000000..cd9fc1ad28 --- /dev/null +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.scss @@ -0,0 +1,18 @@ +.adf-full-width { + width: 100%; +} + +.adf-tag-actions-delete-icon { + float: right; + cursor: pointer; +} + +.adf-tag-actions-delete-text { + font-size: 16px; + float: left; +} + +.adf-tag-actions-container { + padding: 8px 0 8px 0; + height: 20px; +} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts index 89dc249a09..4cd090c0f0 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts @@ -17,10 +17,10 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MdInputModule } from '@angular/material'; import { AppConfigModule, CoreModule } from 'ng2-alfresco-core'; import { TagActionsComponent } from '../components/tag-actions.component'; import { TagService } from '../services/tag.service'; +import { MaterialModule } from './material.module'; declare let jasmine: any; @@ -34,7 +34,7 @@ describe('TagActionsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdInputModule, + MaterialModule, CoreModule.forRoot(), AppConfigModule.forRoot('app.config.json', { ecmHost: 'http://localhost:9876/ecm' @@ -91,9 +91,9 @@ describe('TagActionsComponent', () => { component.result.subscribe(() => { fixture.detectChanges(); - expect(element.querySelector('#tag_name_0').innerHTML).toBe('test1'); - expect(element.querySelector('#tag_name_1').innerHTML).toBe('test2'); - expect(element.querySelector('#tag_name_2').innerHTML).toBe('test3'); + expect(element.querySelector('#tag_name_0').innerHTML.trim()).toBe('test1'); + expect(element.querySelector('#tag_name_1').innerHTML.trim()).toBe('test2'); + expect(element.querySelector('#tag_name_2').innerHTML.trim()).toBe('test3'); expect(element.querySelector('#tag_delete_0')).not.toBe(null); expect(element.querySelector('#tag_delete_1')).not.toBe(null); diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts index 66281b58ce..02dcc5df52 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { TagService } from './../services/tag.service'; @@ -29,16 +29,14 @@ import { TagService } from './../services/tag.service'; @Component({ selector: 'adf-tag-node-actions-list, alfresco-tag-node-actions-list', templateUrl: './tag-actions.component.html', - styleUrls: ['./tag-actions.component.css'] + styleUrls: ['./tag-actions.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TagActionsComponent implements OnChanges { @Input() nodeId: string; - @Input() - isContextMenu: boolean = false; - @Output() successAdd: EventEmitter = new EventEmitter(); diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.html b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.html index 8184e5ce25..e4c8572aa3 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.html +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.html @@ -1,9 +1,6 @@ -
    -
    -
      -
    • - {{currentEntry.entry.tag}} -
      • -
    -
    -
    + + +
    {{currentEntry.entry.tag}}
    +     +     + diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.scss b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.scss new file mode 100644 index 0000000000..2a7350d7c3 --- /dev/null +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.scss @@ -0,0 +1,4 @@ +.adf-list-tag{ + padding: 16px; + font-size: 16px; +} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts index 7be55e1173..da45fa29ea 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts @@ -17,10 +17,10 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MdInputModule } from '@angular/material'; import { AppConfigModule, CoreModule } from 'ng2-alfresco-core'; import { TagService } from '../services/tag.service'; import { TagListComponent } from './../components/tag-list.component'; +import { MaterialModule } from './material.module'; declare let jasmine: any; @@ -51,7 +51,7 @@ describe('TagList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdInputModule, + MaterialModule, CoreModule.forRoot(), AppConfigModule.forRoot('app.config.json', { ecmHost: 'http://localhost:9876/ecm' diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts index 662c9785ed..feb92ce53d 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { TagService } from '../services/tag.service'; /** @@ -27,7 +27,9 @@ import { TagService } from '../services/tag.service'; @Component({ selector: 'adf-tag-list, alfresco-tag-list', - templateUrl: './tag-list.component.html' + templateUrl: './tag-list.component.html', + styleUrls: ['./tag-list.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TagListComponent implements OnInit { diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.css b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.css deleted file mode 100644 index b19a3cb29f..0000000000 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.css +++ /dev/null @@ -1,8 +0,0 @@ -.tags { - padding-left: 7px; - padding-right: 7px; -} - -.tags li { - display: inline; -} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html index 2633f7c20a..519417b67b 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html @@ -1,13 +1,8 @@ -
    - -
    + + + {{currentEntry.entry.tag}} + + + diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.scss b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.scss new file mode 100644 index 0000000000..301042d077 --- /dev/null +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.scss @@ -0,0 +1,19 @@ +.adf-tag-chips-delete { + cursor: pointer; + height: 17px; + width: 20px; + float: right; + border: 0; + background: none; + padding: 0; + margin: -1px 0px 0px 10px; +} + +.adf-tag-chips-delete-icon{ + font-size: 20px; + background-repeat: no-repeat; + display: inline-block; + fill: currentColor; + height: 20px; + width: 20px; +} diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts index d491f26b09..36b5a24b08 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts @@ -17,10 +17,10 @@ import { DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MdInputModule } from '@angular/material'; import { AppConfigModule, CoreModule } from 'ng2-alfresco-core'; import { TagNodeListComponent } from '../components/tag-node-list.component'; import { TagService } from '../services/tag.service'; +import { MaterialModule } from './material.module'; declare let jasmine: any; @@ -51,7 +51,7 @@ describe('TagNodeList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdInputModule, + MaterialModule, CoreModule.forRoot(), AppConfigModule.forRoot('app.config.json', { ecmHost: 'http://localhost:9876/ecm' diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts index 655a88be51..3ec6f80f5e 100644 --- a/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts +++ b/ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core'; import { TagService } from '../services/tag.service'; /** @@ -28,7 +28,8 @@ import { TagService } from '../services/tag.service'; @Component({ selector: 'adf-tag-node-list, alfresco-tag-node-list', templateUrl: './tag-node-list.component.html', - styleUrls: ['./tag-node-list.component.css'] + styleUrls: ['./tag-node-list.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TagNodeListComponent implements OnChanges {