jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overhauled library UI to work on small screens

Browse Source
This commit is contained in:
Thaum Rystra
2020-05-25 16:43:28 +02:00
parent a55c1382b1
commit 3ec0f9500c
15 changed files with 784 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/imports/ui/dialogStack/DialogBase.vue
View File

@@ -1,64 +1,72 @@
<template>
<v-layout column style="height: 100%;">
<v-toolbar :color="color || 'secondary'" dark class="base-dialog-toolbar" :flat="!offsetTop">
<v-btn icon flat @click="back">
<v-icon>arrow_back</v-icon>
</v-btn>
<slot name="toolbar"/>
<template v-if="$slots.edit">
<v-spacer/>
<v-btn icon flat @click="$emit('remove')" v-if="isEditing">
<v-icon>delete</v-icon>
</v-btn>
<v-btn icon flat @click="isEditing = !isEditing">
<v-icon>{{isEditing ? 'check' : 'create'}}</v-icon>
</v-btn>
</template>
</v-toolbar>
<template v-if="breadcrumbs">
<v-card-text>
example > bread > crumb
</v-card-text>
</template>
<div
v-if="$slots['unwrapped-content']"
class="unwrapped-content"
>
<slot name="unwrapped-content"/>
</div>
<v-card-text
v-if="!$slots['unwrapped-content']"
id="base-dialog-body"
v-scroll:#base-dialog-body="onScroll"
>
<v-tabs-items :value="isEditing ? 1 : 0" touchless>
<v-tab-item>
<slot/>
</v-tab-item>
<v-tab-item lazy>
<slot name="edit"/>
</v-tab-item>
</v-tabs-items>
</v-card-text>
<v-card-actions>
<slot name="actions"/>
</v-card-actions>
</v-layout>
<v-layout
column
style="height: 100%;"
>
<slot
name="replace-toolbar"
:flat="!offsetTop"
>
<v-toolbar
:color="computedColor"
:dark="isDark"
class="base-dialog-toolbar"
:flat="!offsetTop"
>
<v-btn
icon
flat
@click="back"
>
<v-icon>arrow_back</v-icon>
</v-btn>
<slot name="toolbar" />
</v-toolbar>
</slot>
<div
v-if="$slots['unwrapped-content']"
class="unwrapped-content"
>
<slot name="unwrapped-content" />
</div>
<v-card-text
v-if="!$slots['unwrapped-content']"
id="base-dialog-body"
v-scroll:#base-dialog-body="onScroll"
>
<slot />
</v-card-text>
<v-card-actions v-if="$slots.actions">
<slot name="actions" />
</v-card-actions>
</v-layout>
</template>
<script>
import store from "/imports/ui/vuexStore.js";
import isDarkColor from '/imports/ui/utility/isDarkColor.js';
export default {
props: {
color: String,
breadcrumbs: Object,
overrideBackButton: Function,
color: {
type: String,
default: undefined,
},
overrideBackButton: {
type: Function,
default: undefined,
},
},
data(){ return {
offsetTop: 0,
isEditing: false,
}},
computed: {
isDark(){
return isDarkColor(this.computedColor);
},
computedColor(){
return this.color || this.$vuetify.theme.secondary;
}
},
methods: {
onScroll(e){
this.offsetTop = e.target.scrollTop
@@ -71,7 +79,7 @@
}
},
close(){
store.dispatch("popDialogStack");
this.$store.dispatch('popDialogStack');
},
},
}

4
app/imports/ui/dialogStack/DialogComponentIndex.js
View File

@@ -7,7 +7,7 @@ import InviteDialog from '/imports/ui/user/InviteDialog.vue';
import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
import LibraryNodeEditDialog from '/imports/ui/library/LibraryNodeEditDialog.vue';
import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
@@ -23,7 +23,7 @@ export default {
LibraryCreationDialog,
LibraryEditDialog,
LibraryNodeCreationDialog,
LibraryNodeEditDialog,
LibraryNodeDialog,
ShareDialog,
TierTooLowDialog,
UsernameDialog,