Load and display quick actions

To provide a quick way of executing certain actions, we have implemented quick actions. Every extension can define own quick action by creating an object called quickActions and exporting it. Quick actions are then displayed in the actions column inside of the files list.
owncloud · Jun 4, 2020 · 01e8ea5 · 01e8ea5
1 parent f5d0596
commit 01e8ea5
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 186 deletions.
diff --git a/apps/files/package.json b/apps/files/package.json
@@ -25,6 +25,7 @@
  "@babel/preset-env": "^7.6.0",
  "@babel/register": "^7.6.0",
  "babel-loader": "^8.0.6",
+ "copy-to-clipboard": "^3.3.1",
  "core-js": "3.6.4",
  "css-loader": "^3.1.0",
  "intersection-observer": "^0.7.0",

diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
@@ -35,7 +35,7 @@
  </div>
  <div
  :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
- class="uk-text-nowrap uk-text-meta uk-width-small uk-margin-right"
+ class="uk-text-nowrap uk-text-meta uk-width-small"
  >
  <sortable-column-header
  :aria-label="$gettext('Sort files by updated time')"
@@ -45,7 +45,7 @@
  @click="toggleSort('mdateMoment')"
  >
  <translate
- translate-context="Short column label in files able for the time at which a file was modified"
+ translate-context="Short column label in files table for the time at which a file was modified"
  >Updated</translate
  >
  </sortable-column-header>
@@ -91,6 +91,9 @@
  {{ formDateFromNow(rowItem.mdate) }}
  </div>
  </template>
+ <template #rowActions="{ item: rowItem }">
+ <quick-actions :actions="app.quickActions" :item="rowItem" />
+ </template>
  <template #noContentMessage>
  <no-content-message v-if="!$_isFavoritesList" icon="folder">
  <template #message
@@ -155,11 +158,12 @@ import FileList from './FileList.vue'
 import Indicators from './FilesLists/Indicators.vue'
 import FileItem from './FileItem.vue'
 import NoContentMessage from './NoContentMessage.vue'
-import { mapGetters, mapActions, mapState } from 'vuex'
+import QuickActions from './FilesLists/QuickActions.vue'
+import SortableColumnHeader from './FilesLists/SortableColumnHeader.vue'
 
+import { mapGetters, mapActions, mapState } from 'vuex'
 import Mixins from '../mixins'
 import FileActions from '../fileactions'
-import SortableColumnHeader from './FilesLists/SortableColumnHeader.vue'
 import intersection from 'lodash/intersection'
 import { shareTypes, userShareTypes } from '../helpers/shareTypes'
 import { getParentPaths } from '../helpers/path'
@@ -171,7 +175,8 @@ export default {
  Indicators,
  FileItem,
  NoContentMessage,
- SortableColumnHeader
+ SortableColumnHeader,
+ QuickActions
  },
  mixins: [Mixins, FileActions],
  props: {
@@ -199,7 +204,7 @@ export default {
  }
  },
  computed: {
- ...mapState(['route']),
+ ...mapState(['route', 'app']),
  ...mapGetters('Files', [
  'loadingFolder',
  'activeFiles',

diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -42,7 +42,7 @@
  translate-context="Owner table column"
  v-text="$gettext('Owner')"
  />
- <div class="uk-visible@s uk-text-nowrap uk-text-meta uk-width-small uk-margin-right">
+ <div class="uk-visible@s uk-text-nowrap uk-text-meta uk-width-small">
  <sortable-column-header
  :aria-label="$gettext('Sort files by share time')"
  :is-active="fileSortField == 'shareTimeMoment'"
@@ -53,6 +53,7 @@
  <translate translate-context="Share time column in files table">Share time</translate>
  </sortable-column-header>
  </div>
+ <div class="oc-icon" />
  </template>
  <template #rowColumns="{ item }">
  <div class="uk-text-truncate uk-width-expand">

diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
@@ -24,7 +24,14 @@
  />
  </div>
  <slot name="headerColumns" />
- <div class="uk-margin-small-right oc-icon" />
+ <div
+ v-if="$scopedSlots.rowActions"
+ class="uk-text-nowrap uk-text-meta uk-text-right uk-width-small"
+ >
+ <translate translate-context="Short column label in files table for the actions"
+ >Actions</translate
+ >
+ </div>
  </oc-grid>
  <div v-if="!loading" id="files-list-container" class="uk-flex-1 uk-overflow-auto">
  <RecycleScroller
@@ -61,7 +68,11 @@
  />
  </div>
  <slot name="rowColumns" :item="rowItem" :index="index" />
- <div class="uk-text-right uk-margin-left uk-margin-small-right">
+ <div
+ class="uk-flex uk-flex-middle uk-flex-right"
+ :class="{ 'uk-width-small': $scopedSlots.rowActions }"
+ >
+ <slot name="rowActions" :item="rowItem" />
  <oc-button
  :id="actionsDropdownButtonId(rowItem.viewId, active)"
  class="files-list-row-show-actions"
@@ -101,7 +112,7 @@ import { mapGetters, mapActions, mapState } from 'vuex'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-const RowActionsDropdown = () => import('./FilesLists/RowActionsDropdown.vue')
+import RowActionsDropdown from './FilesLists/RowActionsDropdown.vue'
 
 export default {
  name: 'FileList',

diff --git a/apps/files/src/components/FilesLists/QuickActions.vue b/apps/files/src/components/FilesLists/QuickActions.vue
@@ -0,0 +1,42 @@
+<template>
+ <div>
+ <oc-button
+ v-for="action in actions"
+ :key="action.label"
+ :aria-label="$gettext(action.label)"
+ variation="raw"
+ @click.native.stop="
+ action.handler({ item, client: $client, capabilities, alert: showMessage })
+ "
+ >
+ <oc-icon :name="action.icon" aria-hidden="true" size="small" class="uk-flex" />
+ </oc-button>
+ </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+ name: 'QuickActions',
+
+ props: {
+ actions: {
+ type: Object,
+ required: true
+ },
+ item: {
+ type: Object,
+ required: true
+ }
+ },
+
+ computed: {
+ ...mapGetters(['capabilities'])
+ },
+
+ methods: {
+ ...mapActions(['showMessage'])
+ }
+}
+</script>
diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
@@ -25,7 +25,7 @@
  class="uk-text-nowrap uk-text-meta uk-width-small"
  >
  <sortable-column-header
- class="uk-align-right uk-margin-right"
+ class="uk-align-right"
  :aria-label="$gettext('Sort files by deletion time')"
  :is-active="fileSortField === 'deleteTimestampMoment'"
  :is-desc="fileSortDirectionDesc"
@@ -36,6 +36,7 @@
  </translate>
  </sortable-column-header>
  </div>
+ <div class="oc-icon" />
  </template>
  <template #rowColumns="{ item }">
  <div class="uk-text-truncate uk-width-expand">

diff --git a/apps/files/src/default.js b/apps/files/src/default.js
@@ -1,5 +1,7 @@
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
+import moment from 'moment'
+import copyToClipboard from 'copy-to-clipboard'
 
 import FilesApp from './components/FilesApp.vue'
 import FileInfoVersions from './components/FileInfoVersions.vue'
@@ -217,11 +219,50 @@ const routes = [
  }
 ]
 
+const quickActions = {
+ publicLink: {
+ label: $gettext('Create and copy public link'),
+ icon: 'link',
+ handler: ctx => {
+ // FIXME: Translate name
+ const params = { name: 'Quick action link' }
+ const expirationDate = ctx.capabilities.files_sharing.public.expire_date
+
+ if (expirationDate.enabled) {
+ params.expireDate = moment()
+ .add(parseInt(expirationDate.days, 10), 'days')
+ .endOf('day')
+ .toISOString()
+ }
+
+ return new Promise((resolve, reject) => {
+ ctx.client.shares
+ .shareFileWithLink(ctx.item.path, params)
+ .then(res => {
+ copyToClipboard(res.shareInfo.url)
+ ctx.alert({
+ title: $gettext('Public link created'),
+ desc: $gettext(
+ 'Public link has been successfully created and copied into your clipboard.'
+ ),
+ status: 'success'
+ })
+ resolve()
+ })
+ .catch(e => {
+ reject(e)
+ })
+ })
+ }
+ }
+}
+
 const translations = translationsJson
 export default define({
  appInfo,
  store,
  routes,
  navItems,
+ quickActions,
  translations
 })