mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
ACS-8227: remove internal mime type icon pipe (#10142)
This commit is contained in:
Denys Vuika
GitHub
parent
b1260e06ea
commit
b1abe2c8a6
@ -181,7 +181,6 @@ A collection of Angular components for generic use.
|
||||
| [Format Space pipe](core/pipes/format-space.pipe.md) | Replaces all the white space in a string with a supplied character. | [Source](../lib/core/src/lib/pipes/format-space.pipe.ts) |
|
||||
| [Full name pipe](core/pipes/full-name.pipe.md) | Joins the first and last name properties from a `UserLike` object into a single string. | [Source](../lib/core/src/lib/pipes/full-name.pipe.ts) |
|
||||
| [Localized Date pipe](core/pipes/localized-date.pipe.md) | Converts a date to a given format and locale. | [Source](../lib/core/src/lib/pipes/localized-date.pipe.ts) |
|
||||
| [Mime Type Icon pipe](core/pipes/mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/src/lib/pipes/mime-type-icon.pipe.ts) |
|
||||
| [Multi Value Pipe](core/pipes/multi-value.pipe.md) | Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is the comma , however, you can set your own separator in the params of the pipe. | [Source](../lib/core/src/lib/pipes/multi-value.pipe.ts) |
|
||||
| [Node Name Tooltip pipe](core/pipes/node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/content-services/src/lib/pipes/node-name-tooltip.pipe.ts) |
|
||||
| [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) |
|
||||
|
||||
@ -74,7 +74,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
|
||||
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
|
||||
| fileName | `string` | | Override Content filename. |
|
||||
| mimeType | `string` | | Overload mimeType |
|
||||
| originalMimeType | `string` | | Overload originalMimeType |
|
||||
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
|
||||
| readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
|
||||
| allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. |
|
||||
@ -121,7 +120,6 @@ You can provide custom file parameters, for example a value for the `mimeType` o
|
||||
[fileName]="fileName"
|
||||
[allowGoBack]="false"
|
||||
[mimeType]="mimeType"
|
||||
[originalMimeType]="originalMimeType"
|
||||
[urlFile]="fileUrl">
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
---
|
||||
Title: Mime Type Icon pipe
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [Mime Type Icon pipe](../../../lib/core/src/lib/pipes/mime-type-icon.pipe.ts "Defined in mime-type-icon.pipe.ts")
|
||||
|
||||
Retrieves an icon to represent a MIME type.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```HTML
|
||||
<div>
|
||||
<img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
## Details
|
||||
|
||||
The pipe takes a MIME type as input and returns the URL of an SVG file that
|
||||
symbolizes that type (see the [Thumbnail service](../services/thumbnail.service.md) for the mapping between types and icons). The pipe will return a "miscellaneous" icon when no specific mapping is defined.
|
||||
|
||||
## See also
|
||||
|
||||
- [Thumbnail service](../services/thumbnail.service.md)
|
||||
@ -49,11 +49,14 @@ and icons is shown in the table below:
|
||||
All the ADF icons for MIME types are now registered into the [`MatIconRegistry`](https://material.angular.io/components/icon/api), so you can use all
|
||||
the icons via the <mat-icon> tag:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import { ThumbnailService } from '@alfresco/adf-core';
|
||||
|
||||
constructor(public thumbnailService: ThumbnailService) {
|
||||
}
|
||||
class MyComponent {
|
||||
constructor(public thumbnailService: ThumbnailService) {
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
@ -62,7 +65,3 @@ PDF <mat-icon svgIcon="application/pdf"></mat-icon>
|
||||
GIF <mat-icon svgIcon="image/gif"></mat-icon>
|
||||
.....
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Mime type icon pipe](../pipes/mime-type-icon.pipe.md)
|
||||
|
||||
@ -576,7 +576,6 @@ backend services have been tested with each released version of ADF.
|
||||
- [Log service](core/services/log.service.md)
|
||||
- [Login component](core/components/login.component.md)
|
||||
- [Logout directive](core/directives/logout.directive.md)
|
||||
- [Mime type icon pipe](core/pipes/mime-type-icon.pipe.md)
|
||||
- [Node delete directive](content-services/directives/node-delete.directive.md)
|
||||
- [Node favorite directive](content-services/directives/node-favorite.directive.md)
|
||||
- [Node name tooltip pipe](core/pipes/node-name-tooltip.pipe.md)
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
[hideInfoButton]="hideInfoButton"
|
||||
[fileName]="fileName"
|
||||
[mimeType]="mimeType"
|
||||
[originalMimeType]="originalMimeType"
|
||||
[urlFile]="urlFileContent"
|
||||
[tracks]="tracks"
|
||||
[readOnly]="readOnly"
|
||||
|
||||
@ -455,8 +455,8 @@ describe('AlfrescoViewerComponent', () => {
|
||||
//
|
||||
});
|
||||
|
||||
describe('originalMimeType', () => {
|
||||
it('should set originalMimeType based on nodeData content', async () => {
|
||||
describe('mimeType', () => {
|
||||
it('should set mime type based on nodeData content', async () => {
|
||||
const defaultNode: Node = {
|
||||
id: 'mock-id',
|
||||
name: 'Mock Node',
|
||||
@ -488,7 +488,7 @@ describe('AlfrescoViewerComponent', () => {
|
||||
} as Node);
|
||||
|
||||
await fixture.whenStable();
|
||||
expect(component.originalMimeType).toEqual('application/msWord');
|
||||
expect(component.mimeType).toEqual('application/msWord');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -211,7 +211,6 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
urlFileContent: string;
|
||||
fileName: string;
|
||||
mimeType: string;
|
||||
originalMimeType: string;
|
||||
nodeEntry: NodeEntry;
|
||||
tracks: Track[] = [];
|
||||
readOnly: boolean = true;
|
||||
@ -344,8 +343,10 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
|
||||
}
|
||||
if (nodeRendition) {
|
||||
urlFileContent = nodeRendition.url;
|
||||
mimeType = nodeRendition.mimeType;
|
||||
this.originalMimeType = nodeData?.content?.mimeType;
|
||||
|
||||
const nodeMimeType = nodeData?.content?.mimeType;
|
||||
const renditionMimeType = nodeRendition.mimeType;
|
||||
mimeType = nodeMimeType || renditionMimeType;
|
||||
}
|
||||
} else if (viewerType === 'media') {
|
||||
this.tracks = await this.renditionService.generateMediaTracksRendition(this.nodeId);
|
||||
|
||||
@ -436,6 +436,7 @@
|
||||
"WAIT": "Wait"
|
||||
},
|
||||
"ARIA": {
|
||||
"MIME_TYPE_ICON": "File type icon",
|
||||
"PREVIOUS_PAGE": "Previous page",
|
||||
"NEXT_PAGE": "Next page",
|
||||
"ZOOM_IN": "Zoom in",
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* 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 { Pipe, PipeTransform } from '@angular/core';
|
||||
import { ThumbnailService } from '../common/services/thumbnail.service';
|
||||
|
||||
@Pipe({
|
||||
name: 'adfMimeTypeIcon',
|
||||
standalone: true
|
||||
})
|
||||
export class MimeTypeIconPipe implements PipeTransform {
|
||||
constructor(private thumbnailService: ThumbnailService) {}
|
||||
|
||||
transform(text: string): string {
|
||||
return this.thumbnailService.getMimeTypeIcon(text);
|
||||
}
|
||||
}
|
||||
@ -18,7 +18,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FileSizePipe } from './file-size.pipe';
|
||||
import { MimeTypeIconPipe } from './mime-type-icon.pipe';
|
||||
import { HighlightPipe } from './text-highlight.pipe';
|
||||
import { TimeAgoPipe } from './time-ago.pipe';
|
||||
import { InitialUsernamePipe } from './user-initial.pipe';
|
||||
@ -38,7 +37,6 @@ export const CORE_PIPES = [
|
||||
TimeAgoPipe,
|
||||
FileSizePipe,
|
||||
HighlightPipe,
|
||||
MimeTypeIconPipe,
|
||||
FullNamePipe,
|
||||
FormatSpacePipe,
|
||||
FileTypePipe,
|
||||
|
||||
@ -21,7 +21,6 @@ export * from './file-type.pipe';
|
||||
export * from './format-space.pipe';
|
||||
export * from './full-name.pipe';
|
||||
export * from './localized-date.pipe';
|
||||
export * from './mime-type-icon.pipe';
|
||||
export * from './multi-value.pipe';
|
||||
export * from './text-highlight.pipe';
|
||||
export * from './time-ago.pipe';
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
<mat-icon>navigate_before</mat-icon>
|
||||
</button>
|
||||
<img class="adf-viewer__mimeicon"
|
||||
[alt]="originalMimeType || mimeType"
|
||||
[src]="(originalMimeType || mimeType) | adfMimeTypeIcon"
|
||||
[alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
|
||||
[src]="mimeTypeIconUrl"
|
||||
data-automation-id="adf-file-thumbnail">
|
||||
<span class="adf-viewer__display-name"
|
||||
id="adf-viewer-display-name">{{ fileName }}</span>
|
||||
|
||||
@ -28,6 +28,8 @@
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&-toolbar {
|
||||
|
||||
@ -99,38 +99,6 @@ describe('ViewerComponent', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('originalMimeType', () => {
|
||||
const getMimeTypeIconElement = () => fixture.nativeElement.querySelector('.adf-viewer__mimeicon');
|
||||
|
||||
it('should set alt attribute to originalMimeType when originalMimeType is provided', () => {
|
||||
component.originalMimeType = 'image/png';
|
||||
fixture.detectChanges();
|
||||
const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
|
||||
expect(altAttribute).toBe('image/png');
|
||||
});
|
||||
|
||||
it('should set src attribute based on originalMimeType when originalMimeType is provided', () => {
|
||||
component.originalMimeType = 'image';
|
||||
fixture.detectChanges();
|
||||
const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
|
||||
expect(srcAttribute).toContain('image');
|
||||
});
|
||||
|
||||
it('should set alt attribute to mimeType when originalMimeType is not provided', () => {
|
||||
component.mimeType = 'application/pdf';
|
||||
fixture.detectChanges();
|
||||
const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
|
||||
expect(altAttribute).toBe('application/pdf');
|
||||
});
|
||||
|
||||
it('should set src attribute based on mimeType when originalMimeType is not provided', () => {
|
||||
component.mimeType = 'image';
|
||||
fixture.detectChanges();
|
||||
const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
|
||||
expect(srcAttribute).toContain('image');
|
||||
});
|
||||
});
|
||||
|
||||
describe('File Name Test', () => {
|
||||
it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
|
||||
component.fileName = '';
|
||||
|
||||
@ -23,6 +23,7 @@ import {
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
inject,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
@ -52,7 +53,8 @@ import { ViewerSidebarComponent } from './viewer-sidebar.component';
|
||||
import { ViewerToolbarComponent } from './viewer-toolbar.component';
|
||||
import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component';
|
||||
import { ViewerToolbarCustomActionsComponent } from './viewer-toolbar-custom-actions.component';
|
||||
import { MimeTypeIconPipe } from '../../pipes';
|
||||
import { IconComponent } from '../../icon';
|
||||
import { ThumbnailService } from '../../common';
|
||||
|
||||
const DEFAULT_NON_PREVIEW_CONFIG = {
|
||||
enableDownloadPrompt: false,
|
||||
@ -84,11 +86,13 @@ const DEFAULT_NON_PREVIEW_CONFIG = {
|
||||
ViewerSidebarComponent,
|
||||
ViewerToolbarActionsComponent,
|
||||
ViewerToolbarCustomActionsComponent,
|
||||
MimeTypeIconPipe
|
||||
IconComponent
|
||||
],
|
||||
providers: [ViewUtilService]
|
||||
})
|
||||
export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
|
||||
private thumbnailService = inject(ThumbnailService);
|
||||
|
||||
@ContentChild(ViewerToolbarComponent)
|
||||
toolbar: ViewerToolbarComponent;
|
||||
|
||||
@ -208,10 +212,6 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
|
||||
@Input()
|
||||
mimeType: string;
|
||||
|
||||
/** Overload originalMimeType*/
|
||||
@Input()
|
||||
originalMimeType: string;
|
||||
|
||||
/**
|
||||
* Context object available for binding by the local sidebarRightTemplate with let declarations.
|
||||
*/
|
||||
@ -291,6 +291,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
|
||||
private isDialogVisible: boolean = false;
|
||||
public downloadPromptTimer: number;
|
||||
public downloadPromptReminderTimer: number;
|
||||
public mimeTypeIconUrl: string;
|
||||
|
||||
constructor(
|
||||
private el: ElementRef,
|
||||
@ -300,15 +301,20 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
|
||||
) {}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const { blobFile, urlFile } = changes;
|
||||
const { blobFile, urlFile, mimeType } = changes;
|
||||
|
||||
if (blobFile?.currentValue) {
|
||||
this.mimeType = blobFile.currentValue.type;
|
||||
this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(blobFile.currentValue.type);
|
||||
}
|
||||
|
||||
if (urlFile?.currentValue) {
|
||||
this.fileName ||= this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
|
||||
}
|
||||
|
||||
if (mimeType?.currentValue) {
|
||||
this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(mimeType.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user