Skip to content

Commit

Permalink
Menu, Settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@sv2
sv2 committed Apr 22, 2020
1 parent 84a38b0 commit 0af409b
Show file tree
Hide file tree
Showing 10 changed files with 493 additions and 128 deletions.
93 changes: 93 additions & 0 deletions src/components/menu/menudrawer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<template>
<q-drawer ref="drawer" show-if-above :mini="miniState" v-model="shown" :side="side" bordered @on-layout="handleLayout" :mini-to-overlay="miniToOverlay" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
<div class="fit ub-box">
<q-scroll-area class="ub-row ub-box-expand">
<slot name="menu"></slot>
</q-scroll-area>
<!-- Mini toggle is not needed if below breakpoint -->
<div v-if="hasMiniToggle" class="ub-row ub-box-fixed">
<q-btn color="down1" :ripple="false" class="full-width" flat :icon="miniState ? 'chevron_right' : 'chevron_left'" size="md" @click="toggleMini" />
</div>
</div>
</q-drawer>
</template>
<script>
export default {
name: 'MenuDrawer',
components: {},
props: {
value: {
type: Boolean,
default: true
},
mini: {
type: Boolean,
default: true
},
autoExpand: {
type: Boolean,
default: false
},
side: {
type: String,
default: 'left'
}
},
data: function() {
return {
miniState: this.mini,
shown: this.value,
drawerBelowBreakpoint: false
};
},
computed: {
miniToOverlay: function() {
return this.autoExpand;
},
hasMiniToggle: function() {
return !this.drawerBelowBreakpoint && !this.autoExpand;
}
},
watch: {
value: function(val) {
this.shown = val;
},
shown: function(val) {
this.$emit('input', val);
},
miniState: function(val) {
this.$emit('update:mini', val);
}
},
methods: {
handleLayout(state) {
console.log(`handleLayout: ${state}`);
this.drawerBelowBreakpoint = this.$refs.drawer.belowBreakpoint;
this.$nextTick(() => {
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 100);
});
},
toggleMini() {
this.miniState = !this.miniState;
// need to wait a bit till it fully expands/collapses
this.$nextTick(() => {
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 200);
});
},
handleMouseOver() {
if (this.autoExpand) {
this.miniState = false;
}
},
handleMouseOut() {
if (this.autoExpand) {
this.miniState = true;
}
}
}
};
</script>
40 changes: 40 additions & 0 deletions src/components/menu/menulist.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<q-list class="db-menu-list">
<menu-list-item v-for="item in menuItems" v-bind:key="item.id" :item="item" :collapsed="collapsed" :active-class="activeClass" />
</q-list>
</template>
<script>
import MenuListItem from './menulistitem.vue';
export default {
name: 'MenuList',
components: { MenuListItem },
props: {
menuItems: {
type: Array,
default: null
},
collapsed: {
type: Boolean,
default: false
},
activeClass: {
type: String,
default: ''
}
},
data: function() {
return {};
},
computed: {},
watch: {},
methods: {}
};
</script>
<style lang="scss">
.db-menu-list {
a,
a:hover {
text-decoration: none;
}
}
</style>
68 changes: 68 additions & 0 deletions src/components/menu/menulistitem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<template>
<q-expansion-item v-if="item.items" :icon="item.icon" :label="item.title" :caption="item.caption" expand-separator :class="`menuitem-ei-${item.id} ` + itemClass" :active-class="itemActiveClass">
<q-tooltip anchor="top right" self="center middle" :target="`.menuitem-ei-${item.id} i`">{{ item.title }}</q-tooltip>
<menu-list-item v-for="childItem in item.items" v-bind:key="childItem.id" :item="childItem" />
</q-expansion-item>
<q-item v-else clickable v-ripple v-bind:key="item.link" :to="item.link" exact :class="itemClass" :active-class="itemActiveClass">
<q-item-section avatar>
<!-- Workaround for badge, if desired to show when menu is collapsed
<div class="relative-position" style="width:25px;margin-left:2px">
<q-icon :name="item.icon" size="24px">
</q-icon>
<q-badge v-if="item.badge && !collapsed" :label="item.badge" floating/>
</div>-->
<q-icon v-if="item.icon" :name="item.icon"></q-icon>
<q-tooltip anchor="top right" self="center middle">
{{ item.title }}
</q-tooltip>
</q-item-section>
<q-item-section>
<q-item-label>{{ item.title }}</q-item-label>
<q-item-label v-if="item.caption" caption>{{ item.caption }}</q-item-label>
</q-item-section>

<q-item-section v-if="hasSide" side :top="isSideTop">
<q-badge v-if="item.badge" :color="item.badgeColor || 'primary'" :label="item.badge" />
<q-item-label v-if="item.sideCaption" caption>{{ item.sideCaption }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
name: 'MenuListItem',
props: {
item: {
type: Object,
default: null
},
collapsed: {
type: Boolean,
default: true
},
activeClass: {
type: String,
default: ''
}
},
data: function() {
return {};
},
computed: {
itemClass: function() {
return this.item.class ? this.item.class : '';
},
itemActiveClass: function() {
return this.item.activeClass ? this.item.activeClass : this.activeClass;
},
hasSide: function() {
return this.item.badge || this.item.sideCaption;
},
isSideTop: function() {
return this.item.caption || this.item.sideCaption;
}
},
watch: {},
methods: {}
};
</script>
157 changes: 157 additions & 0 deletions src/components/settings/settings.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered padding>
<q-item-label header>User Controls</q-item-label>

<q-item clickable v-ripple>
<q-item-section>
<q-item-label>Content filtering</q-item-label>
<q-item-label caption>
Set the content filtering level to restrict apps that can be downloaded
</q-item-label>
</q-item-section>
</q-item>

<q-item clickable v-ripple>
<q-item-section>
<q-item-label>Password</q-item-label>
<q-item-label caption>
Require password for purchase or use password to restrict purchase
</q-item-label>
</q-item-section>
</q-item>

<q-separator spaced />
<q-item-label header>General</q-item-label>

<q-item tag="label" v-ripple>
<q-item-section side top>
<q-checkbox v-model="check1" />
</q-item-section>

<q-item-section>
<q-item-label>Notifications</q-item-label>
<q-item-label caption>
Notify me about updates to apps or games that I downloaded
</q-item-label>
</q-item-section>
</q-item>

<q-item tag="label" v-ripple>
<q-item-section side top>
<q-checkbox v-model="check2" />
</q-item-section>

<q-item-section>
<q-item-label>Sound</q-item-label>
<q-item-label caption>
Auto-update apps at anytime. Data charges may apply
</q-item-label>
</q-item-section>
</q-item>

<q-item tag="label" v-ripple>
<q-item-section side top>
<q-checkbox v-model="check3" />
</q-item-section>

<q-item-section>
<q-item-label>Auto-add widgets</q-item-label>
<q-item-label caption>
Automatically add home screen widgets
</q-item-label>
</q-item-section>
</q-item>

<q-separator spaced />
<q-item-label header>Notifications</q-item-label>

<q-item tag="label" v-ripple>
<q-item-section>
<q-item-label>Battery too low</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle color="blue" v-model="notif1" val="battery" />
</q-item-section>
</q-item>

<q-item tag="label" v-ripple>
<q-item-section>
<q-item-label>Friend request</q-item-label>
<q-item-label caption>Allow notification</q-item-label>
</q-item-section>
<q-item-section side top>
<q-toggle color="green" v-model="notif2" val="friend" />
</q-item-section>
</q-item>

<q-item tag="label" v-ripple>
<q-item-section>
<q-item-label>Picture uploaded</q-item-label>
<q-item-label caption>Allow notification when uploading images</q-item-label>
</q-item-section>
<q-item-section side top>
<q-toggle color="red" v-model="notif3" val="picture" />
</q-item-section>
</q-item>

<q-separator spaced />
<q-item-label header>Other settings</q-item-label>

<q-item>
<q-item-section side>
<q-icon color="teal" name="volume_down" />
</q-item-section>
<q-item-section>
<q-slider v-model="volume" :min="0" :max="10" label color="teal" />
</q-item-section>
<q-item-section side>
<q-icon color="teal" name="volume_up" />
</q-item-section>
</q-item>

<q-item>
<q-item-section side>
<q-icon color="deep-orange" name="brightness_medium" />
</q-item-section>
<q-item-section>
<q-slider v-model="brightness" :min="0" :max="10" label color="deep-orange" />
</q-item-section>
</q-item>

<q-item>
<q-item-section side>
<q-icon color="primary" name="mic" />
</q-item-section>
<q-item-section>
<q-slider v-model="mic" :min="0" :max="50" label />
</q-item-section>
</q-item>
</q-list>
</div>
</template>
<script>
export default {
name: 'Settings',
components: {},
props: {},
data() {
return {
check1: true,
check2: false,
check3: false,
notif1: true,
notif2: true,
notif3: false,
volume: 6,
brightness: 3,
mic: 8
};
},
computed: {},
watch: {},
methods: {}
};
</script>
Loading

0 comments on commit 0af409b

Please sign in to comment.