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

fix icon clashes in adf-icon (#4258)

Browse Source
This commit is contained in:
Denys Vuika 2019-02-04 14:41:11 +00:00 committed by Eugenio Romano
parent f00fd1ad01
commit 3a5fe3fb92
5 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/src/app/components/icons/icons.component.html
View File

@ -9,12 +9,12 @@
<div> <div>
<div><strong>Markup:</strong></div> <div><strong>Markup:</strong></div>
<pre> <pre>
&lt;adf-icon value="alarm"&gt;&lt;/adf-icon&gt;</pre> &lt;adf-icon value="folder"&gt;&lt;/adf-icon&gt;</pre>
</div> </div>
<div> <div>
<div><strong>Result:</strong></div> <div><strong>Result:</strong></div>
<adf-icon value="alarm"></adf-icon> <adf-icon value="folder"></adf-icon>
</div> </div>
<h2>Named icons</h2> <h2>Named icons</h2>
@ -50,10 +50,10 @@
<div> <div>
<div><strong>Markup:</strong></div> <div><strong>Markup:</strong></div>
<pre> <pre>
&lt;adf-icon value="image/gif"&gt;&lt;/adf-icon&gt;</pre> &lt;adf-icon value="adf:folder"&gt;&lt;/adf-icon&gt;</pre>
</div> </div>
<div> <div>
<div><strong>Result:</strong></div> <div><strong>Result:</strong></div>
<adf-icon value="image/gif"></adf-icon> <adf-icon value="adf:folder"></adf-icon>
</div> </div>

5
docs/core/icon.component.md
View File

@ -71,10 +71,11 @@ In the HTML, you can now use the icon as shown below:
### Thumbnail Service ### Thumbnail Service
You can also use icons registered with the [Thumbnail Service](thumbnail.service.md): You can also reference the icons registered with the [Thumbnail Service](thumbnail.service.md)
by utilising the `adf:` namespace.
```html ```html
<adf-icon value="image/gif"></adf-icon> <adf-icon value="adf:image/gif"></adf-icon>
``` ```
## See also ## See also

7
lib/core/icon/icon.component.ts
View File

@ -21,7 +21,6 @@ import {
ViewEncapsulation, ViewEncapsulation,
ChangeDetectionStrategy ChangeDetectionStrategy
} from '@angular/core'; } from '@angular/core';
import { ThumbnailService } from '../services/thumbnail.service';
import { ThemePalette } from '@angular/material'; import { ThemePalette } from '@angular/material';
@Component({ @Component({
@ -47,14 +46,10 @@ export class IconComponent {
@Input() @Input()
set value(value: string) { set value(value: string) {
this._value = value || 'settings'; this._value = value || 'settings';
this._isCustom = this._isCustom = this._value.includes(':');
this._value.includes(':') ||
this.thumbnailService.mimeTypeIcons[value];
} }
get isCustom(): boolean { get isCustom(): boolean {
return this._isCustom; return this._isCustom;
} }
constructor(private thumbnailService: ThumbnailService) {}
} }

4
lib/core/icon/icon.module.ts
View File

@ -19,6 +19,7 @@ import { NgModule } from '@angular/core';
import { IconComponent } from './icon.component'; import { IconComponent } from './icon.component';
import { MatIconModule } from '@angular/material'; import { MatIconModule } from '@angular/material';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ThumbnailService } from '../services/thumbnail.service';
@NgModule({ @NgModule({
imports: [ imports: [
@ -30,6 +31,9 @@ import { CommonModule } from '@angular/common';
], ],
exports: [ exports: [
IconComponent IconComponent
],
providers: [
ThumbnailService
] ]
}) })
export class IconModule {} export class IconModule {}

5
lib/core/services/thumbnail.service.ts
View File

@ -157,7 +157,10 @@ export class ThumbnailService {
constructor(public contentService: ContentService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { constructor(public contentService: ContentService, matIconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
Object.keys(this.mimeTypeIcons).forEach((key) => { Object.keys(this.mimeTypeIcons).forEach((key) => {
matIconRegistry.addSvgIcon(key, sanitizer.bypassSecurityTrustResourceUrl(this.mimeTypeIcons[key])); const url = sanitizer.bypassSecurityTrustResourceUrl(this.mimeTypeIcons[key]);
matIconRegistry.addSvgIcon(key, url);
matIconRegistry.addSvgIconInNamespace('adf', key, url);
}); });
} }