UI improvements

This commit is contained in:
Čarodej
2022-02-03 11:58:52 +01:00
parent bb9280d050
commit 78f69ca816
11 changed files with 27 additions and 28 deletions

View File

@@ -25,7 +25,7 @@ import CookieDisclaimer from './components/Others/CookieDisclaimer'
import Spinner from './components/FilesView/Spinner'
import Vignette from './components/Others/Vignette'
import Alert from './components/FilesView/Alert'
import RestrictionWarningBar from './RestrictionWarningBar'
import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
import { mapGetters } from 'vuex'
import { events } from './bus'

View File

@@ -34,17 +34,9 @@
<!--Location-->
<ListInfoItem v-if="$checkPermission(['master'])" :title="$t('file_detail.where')">
<div @click="$moveFileOrFolder(singleFile)" class="flex cursor-pointer items-center">
<span class="inline-block text-sm font-bold">
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }}
</span>
<Edit2Icon size="10" class="ml-2" />
</div>
</ListInfoItem>
<!--Team-->
<ListInfoItem v-if="singleFile.data.attributes.isTeamFolder" :title="$t('Shared with the Team')">
<div class="flex cursor-pointer items-center z-0 relative" @click="$updateTeamFolder(singleFile)">
<TeamMembersPreview :folder="singleFile" :avatar-size="32" />
<b class="inline-block text-sm font-bold">
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $getCurrentLocationName() }}
</b>
<Edit2Icon size="10" class="ml-2" />
</div>
</ListInfoItem>

View File

@@ -179,12 +179,14 @@ export default {
this.itemName = this.entry.data.attributes.name
// Change item name
events.$on('change:name', (item) => {
if (this.entry.data.id === item.id) this.itemName = item.name
events.$on('change:name', item => {
if (this.entry.data.id === item.id) {
this.itemName = item.name
}
})
// Autofocus after newly created folder
events.$on('newFolder:focus', (id) => {
events.$on('newFolder:focus', id => {
if (!this.$isMobile() && this.entry.data.id === id) {
this.$refs.name.focus()
document.execCommand('selectAll')

View File

@@ -1,6 +1,6 @@
<template>
<li
class="flex items-center justify-between py-4 px-5 lg:py-2.5 xl:py-3 2xl:py-4"
class="flex items-center justify-between py-4 px-5 lg:py-3 2xl:py-4"
:class="{
'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,
}"

View File

@@ -8,7 +8,7 @@
<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
</div>
<div>
<b class="inline-block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold leading-3 2xl:w-72">
<b class="inline-block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold 2xl:w-72">
{{ title }}
</b>
<small class="block text-xs font-bold text-gray-400">

View File

@@ -32,7 +32,7 @@
<!--Item label-->
<b
@click="getFolder"
class="ml-3 inline-block overflow-x-hidden text-ellipsis whitespace-nowrap text-sm font-bold transition-all duration-150"
class="ml-3 inline-block overflow-x-hidden text-ellipsis whitespace-nowrap text-xs font-bold transition-all duration-150"
:class="{ 'text-theme': isSelectedItem }"
>
{{ nodes.name }}
@@ -59,7 +59,7 @@ export default {
UserPlusIcon,
FolderIcon,
UsersIcon,
'tree-node': () => import('./TreeMenuNavigator'),
'tree-node': () => import('./TreeMenu'),
},
computed: {
...mapGetters(['clipboard']),

View File

@@ -143,12 +143,12 @@ const mutations = {
if (item.data.id === id) item.data.relationships.shared = undefined
})
},
CHANGE_ITEM_NAME(state, updatedFile) {
state.entries.find((item) => {
if (item.data.id === updatedFile.data.id) {
item.data.attributes.name = updatedFile.data.attributes.name
item.data.attributes.color = updatedFile.data.attributes.color ? updatedFile.data.attributes.color : null
item.data.attributes.emoji = updatedFile.data.attributes.emoji ? updatedFile.data.attributes.emoji : null
CHANGE_ITEM_NAME(state, file) {
state.entries.find(item => {
if (item.data.id === file.data.id) {
item.data.attributes.name = file.data.attributes.name
item.data.attributes.color = file.data.attributes.color ? file.data.attributes.color : null
item.data.attributes.emoji = file.data.attributes.emoji ? file.data.attributes.emoji : null
}
})
},

View File

@@ -57,7 +57,7 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />

View File

@@ -36,7 +36,7 @@
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />