wip

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>

src/components/DictionaryView.vue

 <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: {