inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +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><strong>Markup:</strong></div>
<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><strong>Result:</strong></div>
<adf-icon value="alarm"></adf-icon>
<adf-icon value="folder"></adf-icon>
</div>
<h2>Named icons</h2>
@ -50,10 +50,10 @@
<div>
<div><strong>Markup:</strong></div>
<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><strong>Result:</strong></div>
<adf-icon value="image/gif"></adf-icon>
<adf-icon value="adf:folder"></adf-icon>
</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
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
<adf-icon value="image/gif"></adf-icon>
<adf-icon value="adf:image/gif"></adf-icon>
```
## See also

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

@ -21,7 +21,6 @@ import {
ViewEncapsulation,
ChangeDetectionStrategy
} from '@angular/core';
import { ThumbnailService } from '../services/thumbnail.service';
import { ThemePalette } from '@angular/material';
@Component({
@ -47,14 +46,10 @@ export class IconComponent {
@Input()
set value(value: string) {
this._value = value || 'settings';
this._isCustom =
this._value.includes(':') ||
this.thumbnailService.mimeTypeIcons[value];
this._isCustom = this._value.includes(':');
}
get isCustom(): boolean {
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 { MatIconModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { ThumbnailService } from '../services/thumbnail.service';
@NgModule({
imports: [
@ -30,6 +31,9 @@ import { CommonModule } from '@angular/common';
],
exports: [
IconComponent
],
providers: [
ThumbnailService
]
})
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) {
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);
});
}