Работа над хоткеями, промежуточный коммит

client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue

@@ -9,7 +9,14 @@
                     placeholder="Найти"
                     v-model="search"
                     @click.stop
-                />                
+                />
+                <div class="q-ml-sm column justify-center">
+                    <q-btn class="bg-grey-4 text-grey-6" style="height: 35px; width: 35px" rounded flat icon="la la-broom" @click="defaultHotKeyAll">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Установить все сочетания по умолчанию
+                        </q-tooltip>
+                    </q-btn>
+                </div>
             </div>
         </div>
 
@@ -17,10 +24,32 @@
         <div class="table-row row" v-for="(action, index) in tableData" :key="index">
             <div class="desc q-pa-sm">{{ rstore.readerActions[action] }}</div>
             <div class="hotKeys col q-pa-sm">
-                <q-chip removable color="grey-8" text-color="white" v-for="(code, index) in value[action]" :key="index" @remove="removeCode(action, code)">
+                <q-chip removable color="grey-7" text-color="white" v-for="(code, index) in value[action]" :key="index" @remove="removeCode(action, code)">
                     {{ code }}
                 </q-chip>
             </div>
+            <div class="column q-pa-xs">
+                <q-icon
+                    name="la la-plus-circle"
+                    class="button bg-green-8 text-white"
+                    @click="addHotKey(action)"
+                    v-ripple
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Добавить сочетание клавиш
+                    </q-tooltip>
+                </q-icon>
+                <q-icon
+                    name="la la-broom"
+                    class="button text-grey-5"
+                    @click="defaultHotKey(action)"
+                    v-ripple
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        По умолчанию
+                    </q-tooltip>
+                </q-icon>
+            </div>
         </div>
     </div>
 </template>
@@ -86,6 +115,15 @@ class UserHotKeys extends UserHotKeysProps {
 
     removeCode(action, code) {
     }
+
+    addHotKey(action) {
+    }
+
+    defaultHotKey(action) {
+    }
+
+    defaultHotKeyAll() {
+    }
 }
 //-----------------------------------------------------------------------------
 </script>
@@ -108,4 +146,10 @@ class UserHotKeys extends UserHotKeysProps {
 .hotKeys {
     border-left: 1px solid grey;    
 }
+
+.button {
+    font-size: 25px;
+    border-radius: 25px;
+    cursor: pointer;
+}
 </style>