Работа над проектом

client/components/Search/Search.vue

@@ -32,7 +32,7 @@
                         </div>
                     </div>
                     
-                    <q-btn class="q-ml-md" round dense color="secondary" icon="la la-cog" @click="settingsDialogVisible = true" />
+                    <DivBtn class="q-ml-md text-white bg-secondary" :size="32" :icon-size="24" icon="la la-cog" round @click="settingsDialogVisible = true" />
                 </div>
                 <div class="row q-mx-md q-mb-sm items-center">
                     <q-input
@@ -62,7 +62,8 @@
                         @click="selectLang"
                     />
                     <div class="q-mx-xs" />                
-                    <q-btn round dense color="grey-13" icon="la la-question" @click="showSearchHelp" />
+
+                    <DivBtn class="text-white bg-grey-13" :size="32" :icon-size="24" icon="la la-question" round @click="showSearchHelp" />
 
                     <div class="q-mx-xs" />
                     <div class="row items-center q-mt-xs">

client/components/share/DivBtn.vue

@@ -1,7 +1,9 @@
 <template>
-    <div ref="btn" class="clickable row justify-center items-center">
+    <div ref="btn" class="button clickable row justify-center items-center no-wrap" @click="clickEffect">
-        <q-icon :name="icon" :size="`${iconSize}px`" />
+        <div :class="{'button-pressed': pressed}">
-        <slot></slot>
+            <q-icon :name="icon" :size="`${iconSize}px`" />
+            <slot></slot>
+        </div>
     </div>
 </template>
 
@@ -9,7 +11,7 @@
 //-----------------------------------------------------------------------------
 import vueComponent from '../vueComponent.js';
 
-//import * as utils from '../../share/utils';
+import * as utils from '../../share/utils';
 
 const componentOptions = {
     watch: {
@@ -25,8 +27,11 @@ class DivBtn {
         icon: { type: String, default: '' },
         iconSize: { type: Number, default: 14 },
         round: { type: Boolean },
+        pad: { type: Number, default: 0 },
     };
 
+    pressed = false;
+
     created() {
     }
 
@@ -35,10 +40,22 @@ class DivBtn {
     }
 
     updateSizes() {
-        this.$refs.btn.style.width = `${this.size}px`;
+        const style = this.$refs.btn.style;
-        this.$refs.btn.style.height = `${this.size}px`;
+        style.minWidth = `${this.size}px`;
+        style.height = `${this.size}px`;
+        if (this.pad) {
+            style.paddingLeft = `${this.pad}px`;
+            style.paddingRight = `${this.pad + 5}px`;
+        }
+
         if (this.round)
-            this.$refs.btn.style.borderRadius = `${this.size}px`;
+            style.borderRadius = `${this.size}px`;
+    }
+
+    async clickEffect() {
+        this.pressed = true;
+        await utils.sleep(100);
+        this.pressed = false;
     }
 }
 
@@ -47,8 +64,22 @@ export default vueComponent(DivBtn);
 </script>
 
 <style scoped>
-.clickable-icon {
+.button {
-    cursor: pointer;
+    position: relative;
+    box-shadow: 0.5px 1px 3px #333333;
 }
 
+.button:hover {
+    opacity: 0.8;
+    transition: opacity 0.2s linear;
+}
+
+.button-pressed {
+    margin-left: 2px;
+    margin-top: 2px;
+}
+
+.clickable {
+    cursor: pointer;
+}
 </style>