Skip to content

Commit

Permalink
User settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@sv2
sv2 committed Apr 24, 2020
1 parent 769920d commit 6e8c5f3
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 129 deletions.
66 changes: 1 addition & 65 deletions src/components/user/messages.vue
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,13 @@
<template>
<div class="q-pa-md" style="max-width: 700px">
<q-bar class="bg-none">
Messages
Notifications
<q-space />
<q-btn dense flat round icon="close" @click="onClose" />
</q-bar>

<q-list style="width: 600px" separator>
<message v-for="message in messagesList" v-bind:key="message.id" :message="message"></message>

<!--
<q-item>
<q-item-section avatar top>
<q-icon name="account_tree" color="black" size="34px" />
</q-item-section>
<q-item-section top class="col-2 gt-sm">
<q-item-label class="q-mt-sm">GitHub</q-item-label>
</q-item-section>
<q-item-section top>
<q-item-label lines="1">
<span class="text-weight-medium">[quasarframework/quasar]</span>
<span class="text-grey-8"> - GitHub repository</span>
</q-item-label>
<q-item-label caption lines="1">
@rstoenescu in #3: > Generic type parameter for props
</q-item-label>
<q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
<span class="cursor-pointer">Open in GitHub</span>
</q-item-label>
</q-item-section>
<q-item-section top side>
<div class="text-grey-8 q-gutter-xs">
<q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
<q-btn class="gt-xs" size="12px" flat dense round icon="done" />
</div>
</q-item-section>
</q-item>
<q-separator spaced />
<q-item>
<q-item-section avatar top>
<q-icon name="account_tree" color="black" size="34px" />
</q-item-section>
<q-item-section top class="col-2 gt-sm">
<q-item-label class="q-mt-sm">GitHub</q-item-label>
</q-item-section>
<q-item-section top>
<q-item-label lines="1">
<span class="text-weight-medium">[quasarframework/quasar]</span>
<span class="text-grey-8"> - GitHub repository</span>
</q-item-label>
<q-item-label caption lines="1">
@rstoenescu in #1: > The build system
</q-item-label>
<q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase">
<span class="cursor-pointer">Open in GitHub</span>
</q-item-label>
</q-item-section>
<q-item-section top side>
<div class="text-grey-8 q-gutter-xs">
<q-btn class="gt-xs" size="12px" flat dense round icon="delete" />
<q-btn class="gt-xs" size="12px" flat dense round icon="done" />
</div>
</q-item-section>
</q-item>
-->
</q-list>
</div>
</template>
Expand Down
89 changes: 73 additions & 16 deletions src/components/user/userinfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,75 @@
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered padding>
<div class="q-pa-md" style="max-width: 280px">
<q-list style="width: 260px">
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="images/avatars/male/1.png" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<div class="text-h5">John Smith</div>
</q-item-label>
</q-item-section>
</q-item>

<q-separator spaced />

<q-item clickable v-ripple v-close-popup>
<q-item-section avatar>
<q-icon name="mdi-account"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label lines="1">
My Account
</q-item-label>
</q-item-section>
</q-item>

<q-item clickable v-ripple v-close-popup>
<q-item-section avatar>
<q-icon name="mdi-bell"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label lines="1">
Notifications
</q-item-label>
</q-item-section>
<q-item-section side>
<q-badge color="red" label="5" />
</q-item-section>
</q-item>

<q-item clickable v-ripple v-close-popup>
<q-item-section avatar>
<q-icon name="mdi-calendar"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label lines="1">
Calendar
</q-item-label>
</q-item-section>
<q-item-section side>
<q-badge color="red" label="1" />
</q-item-section>
</q-item>

<q-separator spaced />

<q-item clickable v-ripple v-close-popup>
<q-item-section avatar>
<q-icon name="mdi-logout"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label lines="1">
Log Out
</q-item-label>
</q-item-section>
</q-item>
</q-list>

<!--<q-list bordered padding>
<q-item-label header>User Controls</q-item-label>
<q-item clickable v-ripple>
Expand Down Expand Up @@ -127,7 +196,7 @@
<q-slider v-model="mic" :min="0" :max="50" label />
</q-item-section>
</q-item>
</q-list>
</q-list>-->
</div>
</template>
<script>
Expand All @@ -136,19 +205,7 @@ export default {
components: {},
props: {},
data() {
return {
check1: true,
check2: false,
check3: false,
notif1: true,
notif2: true,
notif3: false,
volume: 6,
brightness: 3,
mic: 8
};
return {};
},
computed: {},
watch: {},
Expand Down
54 changes: 12 additions & 42 deletions src/layouts/Default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</q-input>

<q-btn dense unelevated icon="mdi-bell" class="q-ma-sm">
<q-badge color="red" floating>4</q-badge>
<q-badge color="red" floating>5</q-badge>
<q-menu v-model="messagesOpen">
<messages @close="messagesOpen = false"></messages>
</q-menu>
Expand All @@ -27,7 +27,7 @@
<settings @close="settingsOpen = false"></settings>
</q-btn-dropdown>

<q-btn-dropdown unelevated dense v-model="userInfoOpen" no-caps>
<q-btn-dropdown unelevated v-model="userInfoOpen" no-caps>
<template v-slot:label>
<div class="row items-center no-wrap">
<q-avatar size="sm">
Expand All @@ -40,19 +40,6 @@
</template>
<user-info></user-info>
</q-btn-dropdown>

<!--
<q-btn dense flat size="md" round icon="refresh" @click="performRefresh" />
<q-btn-toggle
v-model="refreshTimeout"
text-color="blue-grey-8"
toggle-text-color="grey-4"
size="md"
dense
flat
:options="refreshOptions"
/>
-->
</q-toolbar>
</q-header>

Expand Down Expand Up @@ -100,9 +87,18 @@ export default {
testColors: null,
menuItems: [
{ id: '1', title: 'Dashboard', link: '/', icon: 'dashboard' },
{ id: 'observability', title: 'Observability Dashboards', icon: 'mdi-eye-check', caption: 'Monitor your Microservices' },
{ id: '3', title: 'Forms', link: '/forms', icon: 'mdi-playlist-edit' },
{ id: '4', title: 'Tables', link: '/tables', icon: 'mdi-table' },
{ id: '5', title: 'Charts', icon: 'pie_chart', items: [{ id: 'chartjs', title: 'Chart.js', link: '/chartjs', icon: 'mdi-chart-bar' }] },
{
id: '5',
title: 'Charts',
icon: 'pie_chart',
items: [
{ id: 'chartjs', title: 'Chart.js', link: '/chartjs', icon: 'mdi-chart-bar' },
{ id: 'dygraphs', title: 'Dygraphs', link: '/dygraphs', icon: 'mdi-chart-line' }
]
},
{
id: '6',
title: 'Style',
Expand Down Expand Up @@ -163,32 +159,6 @@ export default {
handler: function(val) {
this.$q.dark.set(val);
}
},
rotateEnabled: {
handler: function(val) {
if (val) {
this.rotateCurrent = -1;
}
}
},
rotateTrigger: {
handler: function() {
if (!this.rotateEnabled) {
return;
}
console.log(`Rotating screen: ${Date.now()}`);
this.rotateCurrent++;
if (this.rotateCurrent >= this.rotateOptions.length) {
this.rotateCurrent = 0;
}
this.transitionName = 'fade';
this.$router.push(this.rotateOptions[this.rotateCurrent]);
this.$nextTick(() => {
setTimeout(() => {
this.transitionName = '';
}, 550);
});
}
}
},
mounted() {
Expand Down
6 changes: 6 additions & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import DashblocksShowcase from './views/DashblocksShowcase.vue';
import Typography from './views/typography.vue';
import MaterialIcons from './views/materialicons.vue';
import ChartJsShowcase from './views/ChartJsShowcase.vue';
import Dygraphs from './views/Dygraphs.vue';
import Mdi from './views/mdi.vue';

Vue.use(Router);
Expand All @@ -27,6 +28,11 @@ export default new Router({
name: 'chartjs',
component: ChartJsShowcase
},
{
path: '/dygraphs',
name: 'dygraphs',
component: Dygraphs
},
{
path: '/typography',
name: 'typography',
Expand Down
1 change: 0 additions & 1 deletion src/views/ChartJsShowcase.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,6 @@ export default {
this.dbdata.setWData('wTrend', { data: dataTrend });
//let bw = 1;
// Dynamic updates
this.refreshIntervalId = setInterval(() => {
this.performRefresh();
Expand Down
4 changes: 2 additions & 2 deletions src/views/mdi.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<q-page class="ub-page">
<div class="row items-center">
<div class="col-md-12 q-ma-lg">
<div class="col-md-10 offset-md-1 q-ma-lg">
<div class="text-h3">Material Design Icons</div>
</div>
</div>
Expand All @@ -13,7 +13,7 @@
</q-input>
</div>
<div class="row items-center">
<div class="col-md-12 q-ma-lg ub-icons-set" v-on:click="onIconClick">
<div class="col-md-10 offset-md-1 ub-icons-set" v-on:click="onIconClick">
<!--<q-icon v-for="icon in icons" v-bind:key="icon" :name="`mdi-${icon}`" :title="`mdi-${icon}`" size="xl" class="q-pa-md q-ma-lg"></q-icon>-->
<i v-for="icon in icons" v-bind:key="icon" :class="`mdi mdi-${icon}`" :title="`mdi-${icon}`"></i>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/views/typography.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<template>
<q-page class="ub-page">
<div class="row items-center">
<div class="col-md-8 offset-md-2 q-ma-lg">
<div class="col-md-10 offset-md-1 q-ma-lg">
<div class="text-h3">Typography</div>
</div>
</div>
<div class="row items-center">
<div class="col-md-8 offset-md-2 q-ma-md">
<div class="col-md-10 offset-md-1 q-ma-md">
<div class="text-body1">
Typography by <a href="https://quasar.dev/">Quasar</a>. See detailed documentation at
<a href="https://quasar.dev/style/typography">https://quasar.dev/style/typography</a>
</div>
</div>
</div>
<div class="row items-center">
<div class="col-md-8 offset-md-2 q-ma-md">
<div class="col-md-10 offset-md-1 q-ma-md">
<div class="row items-center q-mb-lg">
<div class="col-sm-3 col-12">
<div role="alert" class="q-badge flex inline items-center no-wrap q-badge--single-line bg-primary">text-h1</div>
Expand Down

0 comments on commit 6e8c5f3

Please sign in to comment.