diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index 72b52c27b269e26582e495eadb6c9ba076982bc6..a85bf4f09f108b2b65a9e1957af43a5d67172068 100644 --- a/src/components/Autocomplete.vue +++ b/src/components/Autocomplete.vue @@ -53,15 +53,7 @@ </v-list-item> </v-list> </v-menu><v-divider vertical/> - <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 = "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="closeMenu"/> - - - </v-dialog> + <Menu activatorClass="search-field-button"/> </template> <template v-slot:item="data"> @@ -94,7 +86,6 @@ import Menu from './Menu.vue' search: null, select: null, suggesting: null, - settings_dialog: false } }, watch: { @@ -121,9 +112,6 @@ import Menu from './Menu.vue' Menu }, methods: { - closeMenu() { - this.settings_dialog = false - }, get_lang() { return this.$parent.lang }, @@ -193,6 +181,5 @@ import Menu from './Menu.vue' .search-field-button { padding: 0px !important; - } </style> diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 2d231d71ab0c5eb9c25a52649f51ba35ef1405aa..c22571ca0e00915195a92c276d059545378eaa96 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -1,11 +1,16 @@ <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-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="$emit('close')" + @click="settings_dialog=false" dark text >{{$t("close")}} @@ -52,21 +57,27 @@ <v-card-actions><v-spacer/> <v-btn rounded depressed @click='resetStore'>Tilbakestill</v-btn> - <v-btn rounded depressed @click="$emit('close')">{{$t("close")}}</v-btn> + <v-btn rounded depressed @click="settings_dialog = false">{{$t("close")}}</v-btn> </v-card-actions> </v-card> + </v-dialog> </template> <script> export default { name: "Menu", + props: { + activatorClass: null + + }, data () { 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"} + localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"}, + settings_dialog: false } }, computed: {