inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3874] icon component (#4112)

Browse Source 
* adf-icon component

* demo shell example page

* add docs

* integration with thumbnail service
This commit is contained in:
Denys Vuika
2019-01-08 15:08:06 +00:00
committed by Eugenio Romano
parent 96e16fb046
commit 7dde329d81
16 changed files with 370 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -59,6 +59,7 @@ export class AppLayoutComponent implements OnInit {
/* cspell:disable-next-line */
{ href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
{ href: '/treeview', icon: 'nature', title: 'APP_LAYOUT.TREE_VIEW' },
{ href: '/icons', icon: 'tag_faces', title: 'APP_LAYOUT.ICONS' },
{ href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
];

59
demo-shell/src/app/components/icons/icons.component.html Normal file
View File

@@ -0,0 +1,59 @@
<h1>Icons</h1>
<h2>Ligatures</h2>
<small>
See more details here:
<a href="https://material.angular.io/components/icon/overview#font-icons-with-ligatures">Font icons with ligatures</a>
</small>
<div>
<div><strong>Markup:</strong></div>
<pre>
&lt;adf-icon value="alarm"&gt;&lt;/adf-icon&gt;</pre>
</div>
<div>
<div><strong>Result:</strong></div>
<adf-icon value="alarm"></adf-icon>
</div>
<h2>Named icons</h2>
<small>
See more details here:
<a href="https://material.angular.io/components/icon/overview#named-icons">Named icons</a>
</small>
<div>
<div><strong>Code:</strong></div>
<pre>
matIconRegistry.addSvgIconInNamespace(
'adf',
'move_file',
this.sanitizer.bypassSecurityTrustResourceUrl(
'./assets/images/adf-move-file-24px.svg'
)
);</pre>
</div>
<div>
<div><strong>Markup:</strong></div>
<pre>
&lt;adf-icon value="adf:move_file"&gt;&lt;/adf-icon&gt;</pre>
</div>
<div>
<div><strong>Result:</strong></div>
<adf-icon value="adf:move_file"></adf-icon>
</div>
<h2>ADF Thumbnail Service</h2>
<div>
<div><strong>Markup:</strong></div>
<pre>
&lt;adf-icon value="image/gif"&gt;&lt;/adf-icon&gt;</pre>
</div>
<div>
<div><strong>Result:</strong></div>
<adf-icon value="image/gif"></adf-icon>
</div>

41
demo-shell/src/app/components/icons/icons.component.ts Normal file
View File

@@ -0,0 +1,41 @@
/*!
* @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 { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-icons-demo',
templateUrl: './icons.component.html'
})
export class IconsComponent implements OnInit {
constructor(
private matIconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer
) {}
ngOnInit() {
this.matIconRegistry.addSvgIconInNamespace(
'adf',
'move_file',
this.sanitizer.bypassSecurityTrustResourceUrl(
'./assets/images/adf-move-file-24px.svg'
)
);
}
}

39
demo-shell/src/app/components/icons/icons.module.ts Normal file
View File

@@ -0,0 +1,39 @@
/*!
* @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 { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
import { IconsComponent } from './icons.component';
const routes: Routes = [
{
path: '',
component: IconsComponent
}
];
@NgModule({
imports: [
CommonModule,
CoreModule.forChild(),
RouterModule.forChild(routes)
],
declarations: [IconsComponent]
})
export class AppIconsModule {}