Update themes

This commit is contained in:
Hubert Van De Walle 2020-06-08 18:57:04 +02:00
parent e8db519f28
commit ff829e5922
10 changed files with 90 additions and 47 deletions

View File

@ -31,7 +31,7 @@ class FakeDataTest {
val note = FullNoteCreateDTO(title, tags, chapters)
notesService.createNote(15, note)
notesService.createNote(1, note)
}
}

View File

@ -16,9 +16,9 @@ import org.kodein.di.generic.singleton
val hikariConfig = HikariConfig().apply {
jdbcUrl = "jdbc:mariadb://localhost:3306/Notes"
username = "test"
password = "test"
jdbcUrl = "jdbc:mariadb://localhost:3306/notes"
username = "notes"
password = "notes"
}
val dataSource = HikariDataSource(hikariConfig)

View File

@ -11,7 +11,7 @@
.page-enter-active, .page-leave-active {
transition: opacity .5s;
transition: opacity .2s;
}
.page-enter, .page-leave-to {
opacity: 0;

View File

@ -1,7 +1,6 @@
<template>
<v-app-bar fixed app color="primary" dark>
<v-app-bar fixed app color="primary">
<v-btn to="/" text rounded>Simple Notes</v-btn>
<v-btn to="/" text rounded>{{ $colorMode.value }}</v-btn>
<v-spacer />
<client-only>
<v-btn aria-label="theme switcher" icon @click="toggleTheme">
@ -10,7 +9,7 @@
</v-icon>
</v-btn>
</client-only>
<v-menu bottom left>
<v-menu transition="scroll-y-transition" offset-y bottom left>
<template v-slot:activator="{ on }">
<v-btn aria-label="menu" icon v-on="on">
<v-icon>{{ mdiDotsVertical }}</v-icon>
@ -54,10 +53,12 @@ export default {
},
toggleTheme() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
localStorage.setItem(
'theme',
this.$vuetify.theme.dark ? 'dark' : 'light'
)
const theme = this.$vuetify.theme.dark ? 'dark' : 'light'
localStorage.setItem('theme', theme)
this.$cookies.set('theme', theme, {
path: '/',
maxAge: 60 * 60 * 24 * 7,
})
},
},
}

View File

@ -1,5 +1,5 @@
<template>
<v-app>
<v-app dark>
<Navbar />
<v-content>
<v-container fill-height>

View File

@ -56,7 +56,6 @@ export default {
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/vuetify',
'@nuxtjs/eslint-module',
'@nuxtjs/color-mode',
],
/*
** Nuxt.js modules
@ -67,6 +66,7 @@ export default {
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv',
'@nuxtjs/auth',
'cookie-universal-nuxt',
],
/*
** Axios module configuration
@ -97,8 +97,15 @@ export default {
home: '/',
},
watchLoggedIn: true,
cookie: false,
cookie: {
prefix: 'auth.',
options: {
path: '/',
},
},
strategies: {
_scheme: 'local',
_name: 'local',
local: {
endpoints: {
login: {
@ -132,18 +139,22 @@ export default {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
primary: '#21CFF3',
secondary: '#FF4081',
accent: '#ffe18d',
success: '#4CAF50',
info: '#2196F3',
warning: '#FB8C00',
error: '#FF5252',
},
light: {
primary: colors.blue.darken3,
secondary: colors.teal.lighten1,
accent: colors.deepOrange.accent2,
primary: '#1976D2',
secondary: '#e91e63',
accent: '#30b1dc',
success: '#4CAF50',
info: '#2196F3',
warning: '#FB8C00',
error: '#FF5252',
},
},
},

View File

@ -16,6 +16,7 @@
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/dotenv": "^1.4.0",
"cookie-universal-nuxt": "^2.1.4",
"nuxt": "^2.0.0",
"timeago.js": "^4.0.2"
},

View File

@ -1,19 +1,16 @@
<template>
<v-col cols="12" sm="8" md="6">
<v-card color="primary" class="white--text">
<v-card color="secondary">
<v-btn icon to="/" aria-label="Go back">
<v-icon color="white">{{ mdiArrowLeft }}</v-icon>
</v-btn>
<v-card-title class="text-center justify-center py-6">
<h1
:class="{ 'white--text': !$vuetify.theme.dark }"
class="font-weight-bold display-2"
>
<h1 class="font-weight-bold display-2 white--text">
Account
</h1>
</v-card-title>
<v-tabs v-model="tab" grow>
<v-tabs v-model="tab" grow color="accent">
<v-tab v-for="tab in tabs" :key="tab">
{{ tab }}
</v-tab>

View File

@ -7,6 +7,11 @@
loading-text="Loading notes..."
class="elevation-1"
disable-sort
:footer-props="{
showFirstLastPage: false,
prevIcon: mdiChevronLeft,
nextIcon: mdiChevronRight,
}"
>
<template v-slot:top>
<v-toolbar flat color="secondary">
@ -53,7 +58,7 @@
class="mr-2"
@click="editItem(item)"
>
{{ mdiPencil }}}
{{ mdiPencil }}
</v-icon>
<v-icon
aria-label="Delete Note"
@ -66,7 +71,7 @@
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
<span>No notes yet</span>
</template>
</v-data-table>
</v-col>
@ -74,17 +79,27 @@
<script>
import { format } from 'timeago.js'
import { mdiEye, mdiPencil, mdiDelete } from '@mdi/js'
import {
mdiEye,
mdiPencil,
mdiDelete,
mdiChevronLeft,
mdiChevronRight,
} from '@mdi/js'
export default {
name: 'Notes',
title: 'Notes',
async asyncData(context) {
const notes = await context.$axios.$get('/notes')
return { notes, loading: false }
},
data: () => ({
mdiEye,
mdiPencil,
mdiDelete,
mdiChevronLeft,
mdiChevronRight,
loading: true,
notes: [],
headers: [
{ text: 'Title', align: 'start', value: 'title' },
{ text: 'Last updated', value: 'updatedAt', align: 'end' },
@ -92,18 +107,12 @@ export default {
{ text: 'Actions', value: 'actions' },
],
}),
mounted() {
this.loadNotes()
},
methods: {
async loadNotes() {
await this.$axios
.get('/notes')
.then((e) => {
this.notes = e.data
this.loading = false
})
.catch((_) => {})
await this.$axios.$get('/notes').then((notes) => {
this.notes = notes
this.loading = false
})
},
editItem(item) {},
async deleteItem(item) {
@ -116,6 +125,9 @@ export default {
},
format,
},
head: () => ({
title: 'My notes',
}),
}
</script>

View File

@ -1153,6 +1153,11 @@
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
"@types/cookie@^0.3.3":
version "0.3.3"
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
"@types/json-schema@^7.0.3":
version "7.0.4"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@ -2470,6 +2475,22 @@ cookie-signature@1.0.6:
resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
cookie-universal-nuxt@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.1.4.tgz#323f8645501f88cb2422127ad8ba2ee40187b716"
integrity sha512-xbn4Ozs9S0u2+0mQTZRwGlBL9MGNq8N4H6iGfprR5ufZFCS2hGef++3DBHSmHXZi30Wu3Q7RI/GkNMhz3cecmg==
dependencies:
"@types/cookie" "^0.3.3"
cookie-universal "^2.1.4"
cookie-universal@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.1.4.tgz#826a273da7eb9b08bfb0139bae12ea70770d564b"
integrity sha512-dwWXs7NGBzaBYDypu3jWH5M3NJW+zu5QdyJkFMHJvhLuyL4/eXG4105fwtTDwfIqyTunwVvQX4PHdtfPDS7URQ==
dependencies:
"@types/cookie" "^0.3.3"
cookie "^0.4.0"
cookie@0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"