From cd39510cd5ed90c3085a34a1341246fb693c925a Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 29 Nov 2021 11:15:46 +0100
Subject: [PATCH] modular settings
---
src/App.vue | 36 +++---------------
src/components/Autocomplete.vue | 13 +++++--
src/components/Menu.vue | 65 ++++++---------------------------
src/components/Settings.vue | 44 ++++++++++++++++++++++
src/components/TopBar.vue | 51 ++++++++++++++++++++++++++
5 files changed, 122 insertions(+), 87 deletions(-)
create mode 100644 src/components/Settings.vue
create mode 100644 src/components/TopBar.vue
diff --git a/src/App.vue b/src/App.vue
index 8a4e3863..584e1b94 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,7 @@
<template>
<v-app id="app">
<header>
- <v-toolbar class = "top-bar" dense dark color="primary">
- <div class="beta" :title="release">{{version_label}}</div>
- <v-spacer/>
- <v-toolbar-items class="hidden-sm-and-down">
- <v-divider vertical/>
- <v-btn text width="210" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
- <v-divider vertical/>
- <v-btn text width="210"><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
- <v-divider vertical/>
- <v-btn text width="210" @click="toggleAbout"><v-icon left>{{$route.name=='about'? "chevron_left":"info"}}</v-icon>{{$route.name=='about'? "Tilbake":"Om ordbøkene"}}</v-btn>
- <v-divider vertical/>
- </v-toolbar-items>
- <v-toolbar-items class="hidden-md-and-up">
- <v-divider vertical/>
- <v-btn text><span>{{$t("menu.title")}}</span><v-icon right>menu</v-icon></v-btn>
- </v-toolbar-items>
- </v-toolbar>
+ <TopBar/>
</header>
<div class = "banner">
<h1><a aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" :class="$vuetify.breakpoint.name" href="/" tabindex="1">Ordbøkene</a></h1>
@@ -39,21 +23,15 @@
</v-app>
</template>
<script>
+import TopBar from './components/TopBar.vue'
+
export default {
- data: function() {
- return {
- version_label: process.env.VUE_APP_VERSION_LABEL,
- release: process.env.VUE_APP_RELEASE
- }
- },
- methods: {
- toggleAbout: function() {
- this.$route.name=='about'? this.$router.back(): this.$router.push('/om')
- }
- },
mounted: function(){
this._i18n.locale = this.$store.state.currentLocale
document.title = 'Ordbøkene - ' + this.version_label
+ },
+ components: {
+ TopBar
}
}
</script>
@@ -201,6 +179,4 @@ footer > div.sm > div {
height: 60px;
}
-
-
</style>
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index a85bf4f0..b2c7dfe7 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -53,7 +53,13 @@
</v-list-item>
</v-list>
</v-menu><v-divider vertical/>
- <Menu activatorClass="search-field-button"/>
+ <v-dialog max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
+ :close-on-content-click="false" transition="dialog-top-transition">
+ <template v-slot:activator="{ on, attrs }">
+ <v-btn v-bind="attrs" v-on="on" min-width="0px" class = "search-field-button" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp"></span><v-icon>more_vert</v-icon></v-btn>
+ </template>
+ <Menu @close="menuDialog=false"/>
+ </v-dialog>
</template>
<template v-slot:item="data">
@@ -86,6 +92,7 @@ import Menu from './Menu.vue'
search: null,
select: null,
suggesting: null,
+ menuDialog: false
}
},
watch: {
@@ -179,7 +186,7 @@ import Menu from './Menu.vue'
padding-right: 10px;
}
- .search-field-button {
- padding: 0px !important;
+ .search-field-button {
+ padding-right: 0px !important;
}
</style>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index c22571ca..73ba5f8b 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,16 +1,11 @@
<template>
- <v-dialog max-width="1200" width="1200" v-model="settings_dialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
- :close-on-content-click="false" transition="dialog-top-transition">
- <template v-slot:activator="{ on, attrs }">
- <v-btn v-bind="attrs" v-on="on" min-width="0px" :class = "activatorClass" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp"></span><v-icon>more_vert</v-icon></v-btn>
- </template>
- <v-card>
+ <v-card>
<v-toolbar dense dark color="primary">
<v-toolbar-title>Meny</v-toolbar-title><v-spacer></v-spacer>
<v-toolbar-items><v-divider vertical/>
<v-btn
- @click="settings_dialog=false"
+ @click="$emit('close')"
dark
text
>{{$t("close")}}
@@ -34,38 +29,20 @@
dense>
</v-select>
</v-list>
- <v-divider></v-divider>
- <v-list three-line subheader>
- <v-subheader>{{$t("settings.title")}}</v-subheader>
- <v-checkbox
- v-model="toggleSearchToolbar"
- label="Vis verktøylinje for søkealternativer"
- hide-details
- ></v-checkbox>
- <v-checkbox
- v-model="toggleHGNO"
- label="Vis homografnumre"
- hide-details
- ></v-checkbox>
- <v-checkbox
- v-model="toggleInflectionNo"
- label="Vis bøyningsnumre"
- hide-details
- ></v-checkbox>
- </v-list>
+ <Settings/>
+
</v-card-text>
<v-card-actions><v-spacer/>
-
- <v-btn rounded depressed @click='resetStore'>Tilbakestill</v-btn>
- <v-btn rounded depressed @click="settings_dialog = false">{{$t("close")}}</v-btn>
+ <v-btn rounded depressed @click='$store.commit("resetStore")'>Tilbakestill</v-btn>
+ <v-btn rounded depressed @click="$emit('close')">{{$t("close")}}</v-btn>
</v-card-actions>
</v-card>
- </v-dialog>
</template>
<script>
+import Settings from './Settings.vue'
export default {
name: "Menu",
@@ -77,38 +54,18 @@ export default {
return {
locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}],
localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"},
- settings_dialog: false
}
},
computed: {
- toggleSearchToolbar: {
- get () { return this.$store.state.showSearchToolbar},
- set () { this.$store.commit("toggle", "showSearchToolbar")
- }
- },
- toggleHGNO: {
- get () { return this.$store.state.showHGNO},
- set () { this.$store.commit("toggle", "showHGNO")
- }
- },
- toggleInflectionNo: {
- get () { return this.$store.state.showInflectionNo},
- set () { this.$store.commit("toggle", "showInflectionNo")
- }
- },
updateLocale: {
get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}},
set(value) {
- this.$store.commit("setLocale", {value: value, i18n: this._i18n})
- }
+ this.$store.commit("setLocale", {value: value, i18n: this._i18n})
+ }
}
-
},
- methods: {
- resetStore: function() {
- this.$store.commit("resetStore")
-
- }
+ components: {
+ Settings
}
}
</script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
new file mode 100644
index 00000000..a8ebcefc
--- /dev/null
+++ b/src/components/Settings.vue
@@ -0,0 +1,44 @@
+<template>
+<v-list three-line subheader>
+ <v-subheader>{{$t("settings.title")}}</v-subheader>
+ <v-checkbox
+ v-model="toggleSearchToolbar"
+ label="Vis verktøylinje for søkealternativer"
+ hide-details
+ ></v-checkbox>
+ <v-checkbox
+ v-model="toggleHGNO"
+ label="Vis homografnumre"
+ hide-details
+ ></v-checkbox>
+ <v-checkbox
+ v-model="toggleInflectionNo"
+ label="Vis bøyningsnumre"
+ hide-details
+ ></v-checkbox>
+ </v-list>
+</template>
+
+<script>
+
+export default {
+ name: "Settings",
+ computed: {
+ toggleSearchToolbar: {
+ get () { return this.$store.state.showSearchToolbar},
+ set () { this.$store.commit("toggle", "showSearchToolbar")
+ }
+ },
+ toggleHGNO: {
+ get () { return this.$store.state.showHGNO},
+ set () { this.$store.commit("toggle", "showHGNO")
+ }
+ },
+ toggleInflectionNo: {
+ get () { return this.$store.state.showInflectionNo},
+ set () { this.$store.commit("toggle", "showInflectionNo")
+ }
+ }
+ },
+}
+</script>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 00000000..f49f447d
--- /dev/null
+++ b/src/components/TopBar.vue
@@ -0,0 +1,51 @@
+<template>
+ <v-toolbar class = "top-bar" dense dark color="primary">
+ <div class="beta" :title="release">{{version_label}}</div>
+ <v-spacer/>
+ <v-toolbar-items class="hidden-sm-and-down">
+ <v-divider vertical/>
+ <v-btn text width="210" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
+ <v-divider vertical/>
+ <v-btn text width="210"><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
+ <v-divider vertical/>
+ <v-btn text width="210" @click="toggleAbout"><v-icon left>{{$route.name=='about'? "chevron_left":"info"}}</v-icon>{{$route.name=='about'? "Tilbake":"Om ordbøkene"}}</v-btn>
+ <v-divider vertical/>
+ </v-toolbar-items>
+ <v-toolbar-items>
+ <v-divider vertical/>
+ <v-dialog max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
+ :close-on-content-click="false" transition="dialog-top-transition">
+ <template v-slot:activator="{ on, attrs }">
+ <v-btn text v-bind="attrs" v-on="on">
+ <span v-if="$vuetify.breakpoint.mdAndUp">{{$t('menu.title')}}</span><v-icon :right="!$vuetify.breakpoint.mobile">menu</v-icon></v-btn>
+ </template>
+ <Menu @close="menuDialog=false"/>
+ </v-dialog>
+
+ </v-toolbar-items>
+ <v-divider vertical/>
+ </v-toolbar>
+</template>
+
+<script>
+import Menu from './Menu.vue'
+
+export default {
+ name: "TopBar",
+ data: function() {
+ return {
+ version_label: process.env.VUE_APP_VERSION_LABEL,
+ release: process.env.VUE_APP_RELEASE,
+ menuDialog: false
+ }
+ },
+ methods: {
+ toggleAbout: function() {
+ this.$route.name=='about'? this.$router.back(): this.$router.push('/om')
+ }
+ },
+ components: {
+ Menu
+ }
+}
+</script>
--
GitLab