diff options
Diffstat (limited to 'apps/files/src/components/FileEntry/FileEntryActions.vue')
| -rw-r--r-- | apps/files/src/components/FileEntry/FileEntryActions.vue | 36 |
1 files changed, 21 insertions, 15 deletions
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue index b420ab9bca3..a183d1b0618 100644 --- a/apps/files/src/components/FileEntry/FileEntryActions.vue +++ b/apps/files/src/components/FileEntry/FileEntryActions.vue @@ -25,12 +25,14 @@ :open.sync="openedMenu" @close="openedSubmenu = null"> <!-- Default actions list--> - <NcActionButton v-for="action in enabledMenuActions" + <NcActionButton v-for="action, index in enabledMenuActions" :key="action.id" :ref="`action-${action.id}`" + class="files-list__row-action" :class="{ [`files-list__row-action-${action.id}`]: true, - [`files-list__row-action--menu`]: isValidMenu(action) + 'files-list__row-action--inline': index < enabledInlineActions.length, + 'files-list__row-action--menu': isValidMenu(action) }" :close-after-click="!isValidMenu(action)" :data-cy-files-list-row-action="action.id" @@ -39,10 +41,12 @@ :title="action.title?.([source], currentView)" @click="onActionClick(action)"> <template #icon> - <NcLoadingIcon v-if="isLoadingAction(action)" :size="18" /> - <NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" /> + <NcLoadingIcon v-if="isLoadingAction(action)" /> + <NcIconSvgWrapper v-else + class="files-list__row-action-icon" + :svg="action.iconSvgInline([source], currentView)" /> </template> - {{ mountType === 'shared' && action.id === 'sharing-status' ? '' : actionDisplayName(action) }} + {{ actionDisplayName(action) }} </NcActionButton> <!-- Submenu actions list--> @@ -223,10 +227,6 @@ export default defineComponent({ getBoundariesElement() { return document.querySelector('.app-content > .files-list') }, - - mountType() { - return this.source.attributes['mount-type'] - }, }, watch: { @@ -324,13 +324,19 @@ main.app-content[style*="mouse-pos-x"] .v-popper__popper { } </style> -<style lang="scss" scoped> -:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) { - .button-vue__text { - color: var(--color-primary-element); +<style scoped lang="scss"> +.files-list__row-action { + --max-icon-size: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline)); + + // inline icons can have clickable area size so they still fit into the row + &.files-list__row-action--inline { + --max-icon-size: var(--default-clickable-area); } - .button-vue__icon { - color: var(--color-primary-element); + + // Some icons exceed the default size so we need to enforce a max width and height + .files-list__row-action-icon :deep(svg) { + max-height: var(--max-icon-size) !important; + max-width: var(--max-icon-size) !important; } } </style> |