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

Speed dial fixed

Browse Source
This commit is contained in:
Stefan Zermatten
2018-10-02 08:50:45 +02:00
parent f41ff1c52f
commit c46f8c5171
7 changed files with 109 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/main.js
View File

@@ -1 +1,2 @@
import "/imports/ui/vueSetup.js";
import "/imports/styles/stylesIndex.js";

48
app/imports/ui/components/LabeledFab.vue
View File

@@ -1,21 +1,47 @@
<template>
<v-layout row align-center justify-end>
<v-btn fab small>
<v-icon>
{{icon}}
</v-icon>
</v-btn>
<div class="label pa-2">
<v-btn fab small>
<v-icon>
{{icon}}
</v-icon>
<span id="label">
{{label}}
</div>
</v-layout>
</span>
</v-btn>
</template>
<script>
/*
* Because speed dials only work well with v-btn's as children, this hacky
* component creates a v-btn with a label.
*/
export default {
props: ["icon", "label"],
}
</script>
<style scoped>
.label {
background-color: #424242;
/*
* Remove all button formatting and replace it with label formatting
*/
#label {
left: initial;
top: initial;
bottom: initial;
transform: initial;
position: absolute;
font-weight: initial;
text-transform: initial;
cursor: initial;
opacity: initial;
pointer-events: none;
right: 56px;
background-color: #616161;
border-radius: 2px;
padding: 5px 8px;
color: white;
overflow: hidden;
white-space: nowrap;
font-size: 12px;
content: "meep";
}
</style>

10
app/imports/ui/components/Sidebar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="sidebar">
<v-toolbar color="primary" dark>
<v-layout row v-if="signedIn">
<v-layout row align-center v-if="signedIn">
{{userName}}
<v-spacer></v-spacer>
<v-tooltip bottom>
@@ -17,7 +17,7 @@
<v-list-tile
v-for="(link, i) in links"
v-if="link.vif || link.vif === undefined"
:href="link.href"
:to="link.to"
:key="i"
>
<v-list-tile-action>
@@ -77,9 +77,9 @@
},
links(){
return [
{title: "Home", icon: "home", href: "/"},
{title: "Characters", icon: "group", href: "/characterList", vif: Meteor.userId()},
{title: "Send Feedback", icon: "bug_report", href: "/feedback"},
{title: "Home", icon: "home", to: "/"},
{title: "Characters", icon: "group", to: "characterList", vif: Meteor.userId()},
{title: "Send Feedback", icon: "bug_report", to: "feedback"},
{title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
{title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},
];

124
app/imports/ui/pages/CharacterList.vue
View File

@@ -1,81 +1,75 @@
<template>
<ToolbarLayout>
<v-expansion-panel popout class="ma-2">
<!--No party-->
<v-expansion-panel-content
v-if="charactersWithNoParty.length"
>
<div slot="header">Characters</div>
<v-card>
<v-list>
<v-list-tile
v-for="character in charactersWithNoParty"
:key="character._id"
:href="character.url"
>
<v-list-tile-avatar :color="character.color">
<img
v-if="character.picture"
:src="character.picture"
alt="character.name"
>
<template v-else>
{{character.initial}}
</template>
</v-list-tile-avatar>
<v-list-tile-title>
{{character.name}}
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
<!--Parties-->
<v-expansion-panel-content
v-for="party in parties"
:key="party._id"
>
<div slot="header">{{party.name}}</div>
<v-card>
<v-list>
<v-list-tile
v-for="character in party.characterDocs"
:key="character._id"
>
<v-list-tile-avatar>
<img :src="character.picture" alt="character.name">
</v-list-tile-avatar>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<v-speed-dial fixed bottom right>
<span slot="toolbar">Characters</span>
<v-card class="ma-4">
<v-list v-if="charactersWithNoParty.length">
<v-list-tile
v-for="character in charactersWithNoParty"
:key="character._id"
:href="character.url"
>
<v-list-tile-avatar :color="character.color">
<img
v-if="character.picture"
:src="character.picture"
alt="character.name"
>
<template v-else>
{{character.initial}}
</template>
</v-list-tile-avatar>
<v-list-tile-title>
{{character.name}}
</v-list-tile-title>
</v-list-tile>
</v-list>
<v-expansion-panel popout>
<v-expansion-panel-content
v-for="party in parties"
:key="party._id"
>
<div slot="header">{{party.name}}</div>
<v-card>
<v-list>
<v-list-tile
v-for="character in party.characterDocs"
:key="character._id"
>
<v-list-tile-avatar>
<img :src="character.picture" alt="character.name">
</v-list-tile-avatar>
</v-list-tile>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
<v-speed-dial
fixed
bottom
right
transition="slide-y-reverse-transition"
v-model="fab"
>
<v-btn
slot="activator"
color="accent"
fab
v-model="fab"
>
<v-icon>add</v-icon>
<v-icon>close</v-icon>
</v-btn>
<div>
<span class="v-tooltip__content">New Character</span>
<v-btn fab small slot="activator">
<v-icon>group</v-icon>
</v-btn>
</div>
<div>
<span>New Party</span>
<v-btn fab small slot="activator">
<v-icon>group</v-icon>
</v-btn>
</div>
<labeled-fab icon="face" label="New Character"></labeled-fab>
<labeled-fab icon="group" label="New Party"></labeled-fab>
</v-speed-dial>
</ToolbarLayout>
</template>
<script>
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
import LabeledFab from "/imports/ui/components/LabeledFab.vue";
const characterTransform = function(char){
char.url = `\/character\/${char._id}\/${char.urlName || "-"}`;
char.color = getColorClass(char.color);
@@ -83,6 +77,9 @@
return char;
};
export default {
data(){ return{
fab: false,
}},
meteor: {
$subscribe: {
"characterList": [],
@@ -118,6 +115,7 @@
},
components: {
ToolbarLayout,
LabeledFab,
}
};
</script>

3
app/imports/ui/styles/speedDial.css Normal file
View File

@@ -0,0 +1,3 @@
.v-speed-dial__list{
margin-bottom: 12px;
}

1
app/imports/ui/styles/stylesIndex.js Normal file
View File

@@ -0,0 +1 @@
import "./speedDial.css";

2
app/imports/ui/vueSetup.js
View File

@@ -25,7 +25,7 @@ Vue.use(VueMeteorTracker);
// App start
Meteor.startup(() => {
// Create the router instance
const router = routerFactory.create()
const router = routerFactory.create();
// Start the Vue app
new Vue({