diff options
| author | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-07 13:32:11 +0200 |
|---|---|---|
| committer | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-12 12:10:44 +0200 |
| commit | 34d22f19d3b15bf5a10ba4977288e6c285aba36b (patch) | |
| tree | 48101d90d2788e5d23419f003a84c9e6c9ca82e1 /apps/files/src/components/FilesListHeaderActions.vue | |
| parent | 993a7fc8e638b0c4e8435980809efbc7e8ab056b (diff) | |
| download | nextcloud-server-34d22f19d3b15bf5a10ba4977288e6c285aba36b.tar.gz nextcloud-server-34d22f19d3b15bf5a10ba4977288e6c285aba36b.zip | |
feat(files): responsive design for mobile and narrow screens
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/files/src/components/FilesListHeaderActions.vue')
| -rw-r--r-- | apps/files/src/components/FilesListHeaderActions.vue | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue index f136e281f09..13e24ec77e6 100644 --- a/apps/files/src/components/FilesListHeaderActions.vue +++ b/apps/files/src/components/FilesListHeaderActions.vue @@ -1,7 +1,7 @@ <!-- - - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev> + - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com> - - - @author Gary Kim <gary@garykim.dev> + - @author John Molakvoæ <skjnldsv@protonmail.com> - - @license GNU AGPL version 3 or any later version - @@ -24,7 +24,8 @@ <NcActions ref="actionsMenu" :disabled="!!loading || areSomeNodesLoading" :force-title="true" - :inline="3" + :inline="inlineActions" + :menu-title="inlineActions === 0 ? t('files', 'Actions') : null" :open.sync="openedMenu"> <NcActionButton v-for="action in enabledActions" :key="action.id" @@ -43,8 +44,8 @@ <script lang="ts"> import { showError, showSuccess } from '@nextcloud/dialogs' import { translate } from '@nextcloud/l10n' -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import Vue from 'vue' @@ -52,6 +53,7 @@ import { getFileActions } from '../services/FileAction.ts' import { useActionsMenuStore } from '../store/actionsmenu.ts' import { useFilesStore } from '../store/files.ts' import { useSelectionStore } from '../store/selection.ts' +import clientWidthMixin from '../mixins/clientWidth.ts' import CustomSvgIconRender from './CustomSvgIconRender.vue' import logger from '../logger.js' @@ -68,6 +70,10 @@ export default Vue.extend({ NcLoadingIcon, }, + mixins: [ + clientWidthMixin, + ], + props: { currentView: { type: Object, @@ -122,6 +128,16 @@ export default Vue.extend({ this.actionsMenuStore.opened = opened ? 'global' : null }, }, + + inlineActions() { + if (this.clientWidth < 480) { + return 1 + } + if (this.clientWidth < 768) { + return 2 + } + return 3 + }, }, methods: { |