Change font and make toggling search types easier

linkie · Oct 1, 2022 · 9653d75 · 9653d75
1 parent 890e3cb
commit 9653d75
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 24 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -109,7 +109,7 @@ export default defineComponent({
 </template>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 body {
     @apply bg-base-200

diff --git a/frontend/src/components/mappings/MappingsFilterBlock.vue b/frontend/src/components/mappings/MappingsFilterBlock.vue
@@ -56,26 +56,6 @@
             </div>
         </div>
 
-        <div class="divider mt-0 mb-0"/>
-        <SubHeader :add-padding="false" class="pb-1">Search Type</SubHeader>
-        <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap pb-2">
-            <div>
-                <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowClasses" aria-label="Allow Classes"
-                       @input="allowClasses = ($event.target as any)?.checked ?? allowClasses"/>
-                <span class="pl-2">Classes</span>
-            </div>
-            <div>
-                <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowMethods" aria-label="Allow Methods"
-                       @input="allowMethods = ($event.target as any)?.checked ?? allowMethods"/>
-                <span class="pl-2">Methods</span>
-            </div>
-            <div>
-                <input type="checkbox" class="checkbox checkbox-primary h-4" :checked="allowFields" aria-label="Allow Fields"
-                       @input="allowFields = ($event.target as any)?.checked ?? allowFields"/>
-                <span class="pl-2">Fields</span>
-            </div>
-        </div>
-
         <div class="divider mt-0 mb-0"/>
         <div class="mt-2">
             <div :class="[
@@ -142,7 +122,7 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapWritableState(useMappingsStore, ["namespace", "version", "allowSnapshots", "allowClasses", "allowFields", "allowMethods", "translateAs"]),
+        ...mapWritableState(useMappingsStore, ["namespace", "version", "allowSnapshots", "translateAs"]),
         namespaces(): Namespace[] {
             return this.data.namespaces
         },

diff --git a/frontend/src/components/mappings/MappingsSearchBlock.vue b/frontend/src/components/mappings/MappingsSearchBlock.vue
@@ -1,6 +1,42 @@
 <template>
     <div class="px-5 pt-6">
         <div class="card bg-base-100 shadow-xl rounded-lg overflow-x-auto">
+            <div class="flex pl-2 pt-2">
+                <span class="flex items-center justify-center ml-2 mr-3 font-bold">Search Type: </span>
+                <a :class="['m-1 p-1 select-none cursor-pointer text-center rounded-full bg-base-200 shadow transition-all', allowClasses ? 'bg-neutral text-white font-medium' : 'filter-chips']"
+                   @click="allowClasses = !allowClasses">
+                    <div class="flex mx-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <line v-if="!allowClasses" x1="3" y1="3" x2="21" y2="21"></line>
+                            <path d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"></path>
+                        </svg>
+                        <span class="w-20">Classes</span>
+                    </div>
+                </a>
+                <a :class="['m-1 p-1 select-none cursor-pointer text-center rounded-full bg-base-200 shadow transition-all', allowMethods ? 'bg-neutral text-white font-medium' : 'filter-chips']"
+                   @click="allowMethods = !allowMethods">
+                    <div class="flex mx-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <line v-if="!allowMethods" x1="3" y1="3" x2="21" y2="21"></line>
+                            <path d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"></path>
+                        </svg>
+                        <span class="w-20">Methods</span>
+                    </div>
+                </a>
+                <a :class="['m-1 p-1 select-none cursor-pointer text-center rounded-full bg-base-200 shadow transition-all', allowFields ? 'bg-neutral text-white font-medium' : 'filter-chips']"
+                   @click="allowFields = !allowFields">
+                    <div class="flex mx-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <line v-if="!allowFields" x1="3" y1="3" x2="21" y2="21"></line>
+                            <path d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"></path>
+                        </svg>
+                        <span class="w-20">Fields</span>
+                    </div>
+                </a>
+            </div>
             <div class="flex flex-wrap items-center">
                 <div class="flex-none px-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24"
@@ -20,7 +56,7 @@
 
 <script lang="ts">
 import {defineComponent} from "vue"
-import {mapState} from "pinia"
+import {mapState, mapWritableState} from "pinia"
 import {useMappingsStore} from "../../app/mappings-store"
 
 export default defineComponent({
@@ -31,6 +67,7 @@ export default defineComponent({
         }
     },
     computed: {
+        ...mapWritableState(useMappingsStore, ["allowClasses", "allowFields", "allowMethods"]),
         ...mapState(useMappingsStore, ["searchText"]),
     },
     methods: {
@@ -50,4 +87,8 @@ export default defineComponent({
     outline: 0 !important;
     border: 0 !important;
 }
+
+.filter-chips:hover {
+    filter: brightness(0.87);
+}
 </style>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
     theme: {
         extend: {},
         fontFamily: {
-            "sans": ["Poppins"],
+            "sans": ["Noto Sans"],
         },
     },
     plugins: [