Merge pull request #10658 from opf/implementation/42158-add-direct-action-hover-menu
[#42158] Add direct action hover menupull/10800/head
Eric Schubert
2 years ago
committed by
GitHub
commit
213b025367
@ -0,0 +1,102 @@ |
||||
// -- copyright
|
||||
// OpenProject is an open source project management software.
|
||||
// Copyright (C) 2012-2022 the OpenProject GmbH
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License version 3.
|
||||
//
|
||||
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
// Copyright (C) 2010-2013 the ChiliProject Team
|
||||
//
|
||||
// This program is free software; you can redistribute it and/or
|
||||
// modify it under the terms of the GNU General Public License
|
||||
// as published by the Free Software Foundation; either version 2
|
||||
// of the License, or (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
//
|
||||
// See COPYRIGHT and LICENSE files for more details.
|
||||
//++
|
||||
|
||||
export interface IFileLinkListItemIcon { |
||||
icon:'image1'|'movie'|'file-text'|'export-pdf-descr'|'file-doc'|'file-sheet'|'file-presentation'|'folder'|'ticket' |
||||
clazz:'pdf'|'img'|'txt'|'doc'|'sheet'|'presentation'|'form'|'dir'|'mov'|'default' |
||||
} |
||||
|
||||
export const fileIconMappings:Record<string, IFileLinkListItemIcon> = { |
||||
'application/pdf': { icon: 'export-pdf-descr', clazz: 'pdf' }, |
||||
|
||||
'image/jpeg': { icon: 'image1', clazz: 'img' }, |
||||
'image/png': { icon: 'image1', clazz: 'img' }, |
||||
'image/gif': { icon: 'image1', clazz: 'img' }, |
||||
'image/svg+xml': { icon: 'image1', clazz: 'img' }, |
||||
'image/tiff': { icon: 'image1', clazz: 'img' }, |
||||
'image/bmp': { icon: 'image1', clazz: 'img' }, |
||||
'image/webp': { icon: 'image1', clazz: 'img' }, |
||||
'image/heic': { icon: 'image1', clazz: 'img' }, |
||||
'image/heif': { icon: 'image1', clazz: 'img' }, |
||||
'image/avif': { icon: 'image1', clazz: 'img' }, |
||||
'image/cgm': { icon: 'image1', clazz: 'img' }, |
||||
|
||||
'text/plain': { icon: 'file-text', clazz: 'txt' }, |
||||
'text/html': { icon: 'file-text', clazz: 'txt' }, |
||||
'application/rtf': { icon: 'file-text', clazz: 'txt' }, |
||||
'application/xml': { icon: 'file-text', clazz: 'txt' }, |
||||
'application/xhtml+xml': { icon: 'file-text', clazz: 'txt' }, |
||||
'application/x-tex': { icon: 'file-text', clazz: 'txt' }, |
||||
|
||||
'application/vnd.oasis.opendocument.text': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/vnd.oasis.opendocument.text-template': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/msword': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/vnd.apple.pages': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/vnd.stardivision.writer': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/x-abiword': { icon: 'file-doc', clazz: 'doc' }, |
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { icon: 'file-doc', clazz: 'doc' }, |
||||
'font/otf': { icon: 'file-doc', clazz: 'doc' }, |
||||
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/vnd.oasis.opendocument.spreadsheet': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/vnd.oasis.opendocument.spreadsheet-template': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/vnd.ms-excel': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/vnd.stardivision.calc': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/vnd.apple.numbers': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/x-starcalc': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/x-quattro-pro': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
'application/csv': { icon: 'file-sheet', clazz: 'sheet' }, |
||||
|
||||
'application/vnd.oasis.opendocument.presentation': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
'application/vnd.oasis.opendocument.presentation-template': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
'application/vnd.apple.keynote': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
'application/vnd.ms-powerpoint': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation': { |
||||
icon: 'file-presentation', |
||||
clazz: 'presentation', |
||||
}, |
||||
'application/vnd.stardivision.impress': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
'application/mathematica': { icon: 'file-presentation', clazz: 'presentation' }, |
||||
|
||||
'video/mp4': { icon: 'movie', clazz: 'mov' }, |
||||
'video/x-m4v': { icon: 'movie', clazz: 'mov' }, |
||||
'video/avi': { icon: 'movie', clazz: 'mov' }, |
||||
'video/quicktime': { icon: 'movie', clazz: 'mov' }, |
||||
'video/webm': { icon: 'movie', clazz: 'mov' }, |
||||
'video/mpg': { icon: 'movie', clazz: 'mov' }, |
||||
'video/x-matroska': { icon: 'movie', clazz: 'mov' }, |
||||
'video/mp1s': { icon: 'movie', clazz: 'mov' }, |
||||
'video/mp2p': { icon: 'movie', clazz: 'mov' }, |
||||
'video/3gpp': { icon: 'movie', clazz: 'mov' }, |
||||
'video/3gpp-tt': { icon: 'movie', clazz: 'mov' }, |
||||
'video/3gpp-2': { icon: 'movie', clazz: 'mov' }, |
||||
|
||||
'application/x-op-directory': { icon: 'folder', clazz: 'dir' }, |
||||
|
||||
default: { icon: 'ticket', clazz: 'default' }, |
||||
}; |
||||
@ -1,25 +1,45 @@ |
||||
<div |
||||
class="op-files-tab--file-list-item--content file-name" |
||||
> |
||||
<op-icon |
||||
icon-classes="icon4 icon-{{fileLinkIcon.icon}}" |
||||
class="op-files-tab--color-{{fileLinkIcon.color}}" |
||||
></op-icon> |
||||
|
||||
<div class="spot-list--item-floating-wrapper"> |
||||
<a |
||||
[textContent]="fileLink.originData.name" |
||||
></a> |
||||
</div> |
||||
class="spot-list--item-action op-files-tab--file-list-item-action" |
||||
[href]="fileLink._links.staticOriginOpen.href" |
||||
[title]="fileLink.originData.name" |
||||
target="_blank" |
||||
> |
||||
<span |
||||
class="spot-icon spot-icon_{{fileLinkIcon.icon}} op-files-tab--icon_{{fileLinkIcon.clazz}}" |
||||
></span> |
||||
|
||||
<span |
||||
[textContent]="fileLink.originData.name" |
||||
class="spot-list--item-title op-files-tab--file-list-item-title" |
||||
></span> |
||||
|
||||
<div |
||||
class="op-files-tab--file-list-item--content file-info" |
||||
> |
||||
<span |
||||
class="op-files-tab--file-list-item--file-info-timestamp op-files-tab--color-grey" |
||||
[textContent]="infoTimestampText" |
||||
></span> |
||||
<span |
||||
class="op-files-tab--file-list-item-text" |
||||
[textContent]="infoTimestampText" |
||||
></span> |
||||
|
||||
<span |
||||
[textContent]="fileLink.originData.lastModifiedByName" |
||||
></span> |
||||
<div |
||||
#avatar |
||||
class="op-files-tab--file-list-item-avatar" |
||||
></div> |
||||
</a> |
||||
<div class="spot-list--item-floating-actions op-files-tab--file-list-item-floating-actions"> |
||||
<a |
||||
class="spot-link" |
||||
[title]="text.title.openFileLocation" |
||||
[href]="fileLink._links.staticOriginOpenLocation.href" |
||||
target="_blank" |
||||
> |
||||
<span class="spot-icon spot-icon_folder-open"></span> |
||||
</a> |
||||
<button |
||||
*ngIf="allowEditing" |
||||
class="spot-link" |
||||
[title]="text.title.removeFileLink" |
||||
(click)="removeFileLink.emit()" |
||||
> |
||||
<span class="spot-icon spot-icon_remove-link"></span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,23 +1,44 @@ |
||||
<div class="work-package--attachments--files" *ngIf="resource" data-qa-selector="op-files-tab--file-link-list"> |
||||
<ng-container |
||||
*ngIf="resource" |
||||
> |
||||
<op-storage-information |
||||
*ngIf="showInformationBox" |
||||
[infoIcon]="'info1'" |
||||
*ngIf="showInformationBox$ | async" |
||||
class="op-files-tab--storage-info-box" |
||||
[infoIcon]="informationBoxIcon" |
||||
[infoTextHeader]="informationBoxHeader" |
||||
[infoTextContent]="informationBoxContent" |
||||
[buttonText]="informationBoxButton" |
||||
(buttonClickEventEmitter)="openStorageLocation()" |
||||
></op-storage-information> |
||||
|
||||
<div |
||||
*ngIf="showFileLinks" |
||||
<ul |
||||
*ngIf="showFileLinks$ | async" |
||||
class="spot-list spot-list_compact op-files-tab--file-list" |
||||
data-qa-selector="op-files-tab--file-list" |
||||
> |
||||
<op-file-link-list-item |
||||
<li |
||||
*ngFor="let fileLink of fileLinks$ | async; let i = index;" |
||||
class="op-files-tab--file-list-item" |
||||
[ngClass]="{ 'inactive': showInformationBox || fileLink._links.permission.href === 'urn:openproject-org:api:v3:file-links:permission:NotAllowed' }" |
||||
class="spot-list--item op-files-tab--file-list-item" |
||||
data-qa-selector="op-files-tab--file-list-item" |
||||
op-file-link-list-item |
||||
[fileLink]="fileLink" |
||||
[resource]="resource" |
||||
[index]="i"> |
||||
</op-file-link-list-item> |
||||
</div> |
||||
</div> |
||||
[index]="i" |
||||
[allowEditing]="allowEditing" |
||||
(removeFileLink)="removeFileLink(fileLink)" |
||||
></li> |
||||
</ul> |
||||
|
||||
<p |
||||
*ngIf="(showInformationBox$ | async) === false" |
||||
class="spot-body-small" |
||||
> |
||||
<a |
||||
class="spot-link op-files-tab--file-list-action-button" |
||||
(click)="openStorageLocation()" |
||||
> |
||||
<span class="spot-icon spot-icon_external-link"></span> |
||||
<span [textContent]="text.actions.linkFile"></span> |
||||
</a> |
||||
</p> |
||||
</ng-container> |
||||
|
||||
@ -1,36 +1,27 @@ |
||||
<span class="spot-icon big spot-icon_{{infoIcon}}"></span> |
||||
|
||||
<div |
||||
class="op-files-tab--storage-info-box" |
||||
class="text-box" |
||||
> |
||||
<div |
||||
class="icon-box" |
||||
class="text-box-header" |
||||
> |
||||
<i |
||||
class="icon icon-{{infoIcon}}" |
||||
></i> |
||||
<span [textContent]="infoTextHeader"></span> |
||||
</div> |
||||
|
||||
<div |
||||
class="text-box" |
||||
class="text-box-content" |
||||
> |
||||
<div |
||||
class="text-box-header" |
||||
> |
||||
<span [textContent]="infoTextHeader"></span> |
||||
</div> |
||||
<div |
||||
class="text-box-content" |
||||
> |
||||
<span [textContent]="infoTextContent"></span> |
||||
</div> |
||||
<span [textContent]="infoTextContent"></span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div |
||||
class="button-box" |
||||
> |
||||
<button |
||||
class="action-button" |
||||
[textContent]="buttonText" |
||||
(click)="buttonClickEventEmitter.emit()" |
||||
></button> |
||||
</div> |
||||
<div |
||||
class="button-box" |
||||
> |
||||
<button class="button button_no-margin"> |
||||
<op-icon icon-classes="button--icon spot-icon spot-icon_external-link" class="op-icon--wrapper"> |
||||
<i class="button--icon spot-icon spot-icon_external-link"></i> |
||||
</op-icon> |
||||
<span class="button--text">Open Nextcloud</span> |
||||
</button> |
||||
</div> |
||||
|
||||
|
After Width: | Height: | Size: 523 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 179 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue