UI improvements part 2

This commit is contained in:
Čarodej
2022-01-27 13:14:57 +01:00
parent a2726ae2c5
commit d855739bf2
30 changed files with 268 additions and 93 deletions

View File

@@ -76,7 +76,8 @@
<div v-if="actions.length !== 0" class="mb-2">
<div v-for="(result, i) in actions" :key="result.action.value" class="relative">
<div
class="flex items-center px-3.5 py-2.5"
@mousedown="openAction(result)"
class="flex items-center px-3.5 py-2.5 cursor-pointer"
:class="{'dark:bg-4x-dark-foreground bg-light-background rounded-xl': i === index}"
>
<settings-icon v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>

View File

@@ -36,7 +36,7 @@ const itemHelpers = {
})
}
Vue.prototype.$downloadSelection = function (item) {
Vue.prototype.$downloadSelection = function (item = undefined) {
// Show alert message when download is disabled
if (! store.getters.user.data.meta.restrictions.canDownload) {
Vue.prototype.$temporarilyDisabledDownload()
@@ -44,12 +44,25 @@ const itemHelpers = {
return
}
// Download folder zip
if (item && item.data.type === 'folder') {
store.dispatch('downloadZip', item)
return
}
// Download single item
if (item && item.data.type !== 'folder') {
Vue.prototype.$downloadFile(item.data.attributes.file_url, item.data.attributes.name + '.' + item.data.attributes.mimetype)
return
}
// Download selection
let clipboard = store.getters.clipboard
if (clipboard.length > 1 || (clipboard.length === 1 && clipboard[0].data.type === 'folder'))
if (clipboard.length > 1 || (clipboard.length === 1 && clipboard[0].data.type === 'folder')) {
store.dispatch('downloadZip')
else {
Vue.prototype.$downloadFile(item.data.attributes.file_url, item.data.attributes.name + '.' + item.data.attributes.mimetype)
}
}

View File

@@ -14,25 +14,31 @@ const defaultState = {
}
const actions = {
downloadZip: ({getters}) => {
downloadZip: ({getters}, item = undefined) => {
let files = []
// get ids of selected files
getters.clipboard.forEach(file => {
let type = file.data.type === 'folder'
? 'folder'
: 'file'
// Get if from retrieved item
if (item) {
files.push(item.data.id + '|folder')
}
files.push(file.data.id + '|' + type)
})
// Get ids of selected files
if (! item) {
getters.clipboard.forEach(file => {
let type = file.data.type === 'folder'
? 'folder'
: 'file'
let items = files.join(',')
files.push(file.data.id + '|' + type)
})
}
// Get route
let route = getters.sharedDetail
? `/api/zip/${router.currentRoute.params.token}?items=${items}`
: `/api/zip?items=${items}`
? `/api/zip/${router.currentRoute.params.token}?items=${files.join(',')}`
: `/api/zip?items=${files.join(',')}`
// Download zip
Vue.prototype.$downloadFile(route, 'files.zip')
},
moveItem: ({commit, getters, dispatch}, {to_item, noSelectedItem}) => {

View File

@@ -38,7 +38,7 @@
</ContentGroup>
</ContentSidebar>
<router-view class="md:px-6 px-2.5 w-full overflow-x-hidden relative lg:pt-6" />
<router-view class="lg:pt-6 md:px-6 px-2.5 lg:pb-0 pb-12 w-full overflow-x-hidden relative" />
</div>
</template>

View File

@@ -76,7 +76,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -27,7 +27,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -68,7 +68,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -22,7 +22,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -62,7 +62,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -84,7 +84,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -26,7 +26,7 @@
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>

View File

@@ -26,7 +26,7 @@
<MobileNavigationToolbar />
<div v-if="user" class="md:px-6 px-2.5 w-full overflow-x-hidden relative lg:pt-6 xl:max-w-screen-lg md:max-w-4xl mx-auto">
<div v-if="user" class="lg:pt-6 md:px-6 px-2.5 lg:pb-0 pb-12 w-full overflow-x-hidden relative xl:max-w-screen-lg md:max-w-4xl mx-auto">
<div v-if="! isLoading" id="page-content">
<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">