[ADF-3874] icon component (#4112)

* 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

View File

@@ -0,0 +1,7 @@
<ng-container *ngIf="isCustom; else: default">
<mat-icon [svgIcon]="value"></mat-icon>
</ng-container>
<ng-template #default>
<mat-icon>{{ value }}</mat-icon>
</ng-template>

View File

@@ -0,0 +1,4 @@
.adf-icon {
display: inline-flex;
vertical-align: middle;
}

View File

@@ -0,0 +1,55 @@
/*!
* @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,
Input,
ViewEncapsulation,
ChangeDetectionStrategy
} from '@angular/core';
import { ThumbnailService } from '../services/thumbnail.service';
@Component({
selector: 'adf-icon',
templateUrl: './icon.component.html',
styleUrls: ['./icon.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'adf-icon' }
})
export class IconComponent {
private _value = '';
private _isCustom = false;
get value(): string {
return this._value;
}
@Input()
set value(value: string) {
this._value = value || 'settings';
this._isCustom =
this._value.includes(':') ||
this.thumbnailService.mimeTypeIcons[value];
}
get isCustom(): boolean {
return this._isCustom;
}
constructor(private thumbnailService: ThumbnailService) {}
}

View File

@@ -0,0 +1,35 @@
/*!
* @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 { IconComponent } from './icon.component';
import { MatIconModule } from '@angular/material';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule,
MatIconModule
],
declarations: [
IconComponent
],
exports: [
IconComponent
]
})
export class IconModule {}

18
lib/core/icon/index.ts Normal file
View File

@@ -0,0 +1,18 @@
/*!
* @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.
*/
export * from './public-api';

View File

@@ -0,0 +1,19 @@
/*!
* @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.
*/
export * from './icon.component';
export * from './icon.module';