Skip to content
Snippets Groups Projects
Commit cd39510c authored by Henrik Askjer's avatar Henrik Askjer
Browse files

modular settings

parent 439b6e7b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 6
− 30
View file @ cd39510c
<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>
src/components/Autocomplete.vue
+ 10
− 3
View file @ cd39510c
......@@ -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>
src/components/Menu.vue
+ 11
− 54
View file @ cd39510c
<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>
src/components/Settings.vue 0 → 100644
+ 44
− 0
View file @ cd39510c
<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>
src/components/TopBar.vue 0 → 100644
+ 51
− 0
View file @ cd39510c
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment