diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index c53b5b56705c253a8cc3e2513aa25bcc4731510f..e403a8a5a49b786b2082a13cd3e51032f4302971 100644 --- a/src/components/Autocomplete.vue +++ b/src/components/Autocomplete.vue @@ -8,8 +8,6 @@ item-text="label" :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 190 : 500, transition: 'fade-transition', allowOverflow: true}" prepend-inner-icon="search" - append-icon="settings" - :append-icon-cb="()=> alert('hello')" return-object rounded clearable @@ -29,35 +27,86 @@ :dense="$vuetify.breakpoint.smAndDown" > <template v-slot:append> - <v-divider vertical/> - <v-dialog transition="dialog-button-transition" max-width="600"> + + <v-menu allowOverflow: true v-if="!$parent.settings.show_radio_buttons"> <template v-slot:activator="{ on, attrs }"> - <v-btn plain depressed active-class="none" v-bind="attrs" v-on="on" color = "primary" text>Alle ordklasser<v-icon right>more_vert</v-icon></v-btn> - </template> - <template v-slot:default="dialog"> - <v-card> Test - <div class="pos_select_container"> - <v-select @change="update_pos" - dense - rounded - disable-lookup - flat - return-object - item-text="label" - outlined - color="var(--v-primary-base)" - filled - hide-details="" - :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 190 : 500, transition: 'fade-transition', allowOverflow: true}" - v-model="pos_selected" - :items="pos" - label="Avgrens etter ordklasse" - ></v-select> - </div> - - <v-btn @click="dialog.value = false">Lukk</v-btn></v-card> + <v-btn min-width="0px" v-bind="attrs" v-on="on" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{{"bm,nn":"begge ordbøkene", "bm": "bokmålsordboka (bm)", "nn":"nynorskordboka (nn)"}[$parent.lang]}}</span><v-icon>expand_more</v-icon></v-btn> + </template> + <v-list> + <v-list-item v-for="item in [{label:'begge ordbøkene', tag:'bm,nn'},{label:'bokmålsordboka (bm)', tag:'bm'},{label:'nynorskordboka (nn)', tag:'nn'}]" :key="item.tag" + active-class="v-list-item--active" :class="$parent.lang == item.tag ? 'v-list-item--active' : ''" @click="$parent.update_lang_form(item.tag)"> + <v-list-item-title >{{ item.label }}</v-list-item-title> + </v-list-item> + + </v-list> + </v-menu> + + <v-divider vertical/> + <v-menu allowOverflow: true v-if="$parent.settings.show_pos_select"> + <template v-slot:activator="{ on, attrs }"> + <v-btn min-width="0px" plain depressed v-bind="attrs" v-on="on" color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{$parent.pos_selected.label}}</span><v-icon>expand_more</v-icon></v-btn> </template> - </v-dialog> + <v-list> + <v-list-item active-class="v-list-item--active" :class="$parent.pos_selected.tag == item.tag ? 'v-list-item--active' : ''" v-for="item in $parent.pos" :key="item.tag" @click="$parent.update_pos(item)"> + <v-list-item-title >{{ item.label }}</v-list-item-title> + </v-list-item> + </v-list> + </v-menu> + + <v-dialog max-width="600px" + :close-on-content-click="false" origin="bottom"> + <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> + <v-card> + <v-toolbar dark color="primary" title="Instillinger"> + <v-toolbar-title>Instillinger</v-toolbar-title><v-spacer></v-spacer> + <v-toolbar-items> + <v-btn + dark + text + @click="dialog = false" + > + Tilbakestill + </v-btn> + <v-btn + dark + text + @click="dialog = false" + > + Lukk + </v-btn> + </v-toolbar-items> + <v-spacer></v-spacer> + + </v-toolbar> + <v-row> + <v-col> + <v-checkbox + v-model="$parent.settings.show_dict_select" + label="Vis valg av ordbok" + hide-details + ></v-checkbox> + <v-checkbox + v-model="$parent.settings.show_pos_select" + label="Vis valg av ordklasse" + hide-details + ></v-checkbox> + <v-checkbox + v-model="$parent.settings.fulltext_search" + label="Fritekstsøk" + hide-details + ></v-checkbox> + <v-checkbox + v-model="$parent.settings.show_radio_buttons" + label="Vis radioknapper" + hide-details + ></v-checkbox> + </v-col> + </v-row> + </v-card> + + </v-dialog> </template> <template v-slot:item="data"> @@ -178,4 +227,9 @@ padding-left: 10px; padding-right: 10px; } + + .search-field-button { + padding: 0px !important; + + } </style> diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue index a379bb0a3f5115b8eaac2b0c891ccfe522974860..a494ab0705ed67e265ac09d1ba18654947b7a884 100644 --- a/src/components/DictionaryView.vue +++ b/src/components/DictionaryView.vue @@ -1,9 +1,9 @@ <template> <main> <div class="search_container"> - <div class="top_bar" fluid> + <div class="top_bar" fluid > <div class="lang_select_container"> - <v-radio-group row v-model="lang" @change="update_lang_form"> + <v-radio-group row v-model="lang" @change="update_lang_form" v-if="settings.show_radio_buttons"> <template v-slot:label tabindex="1"> <span aria-label="Vis resultat i begge ordbøkene eller bruk radioknapp for bokmålsordboka eller radioknapp for nynorskordboka">VIS</span> </template> @@ -272,6 +272,11 @@ export default { monthly_nn: null, event: null, previous: this.$route.fullPath, + settings: { + show_radio_buttons: true, + show_pos_select: true, + fulltext_search: false + } } }, computed: {