From 7ea82ee2fdf25068acf56b1c995c6bb1d859df2f Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 18 Aug 2023 10:32:58 -0700
Subject: [PATCH] fix: adds keyboard short component to settings page (#2353)

---
 assets/components/KeyShortcut.vue              | 18 +++++++++---------
 .../components/LogViewer/LogActionsToolbar.vue |  1 -
 assets/pages/settings.vue                      |  2 +-
 locales/de.yml                                 |  4 +---
 locales/en.yml                                 |  4 +---
 locales/es.yml                                 |  4 +---
 locales/pr.yml                                 |  4 +---
 locales/ru.yml                                 |  4 +---
 locales/zh.yml                                 |  4 +---
 9 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/assets/components/KeyShortcut.vue b/assets/components/KeyShortcut.vue
index 2d8e809a..57e47b25 100644
--- a/assets/components/KeyShortcut.vue
+++ b/assets/components/KeyShortcut.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="tag">
-    <span v-if="modifiers.includes('shift')"><carbon:mac-shift /></span>
-    <span v-if="modifiers.includes('meta')">
+  <span class="icon-text">
+    <span class="icon mx-0" v-if="modifiers.includes('shift')">
+      <carbon:mac-shift />
+    </span>
+    <span class="icon mx-0" v-if="modifiers.includes('meta')">
       <ph:command v-if="isMac" />
       <ph:control-bold v-else />
     </span>
-    <kbd class="is-uppercase is-family-sans-serif">{{ char }}</kbd>
-  </div>
+    <kbd class="is-uppercase is-family-sans-serif ml-1">{{ char }}</kbd>
+  </span>
 </template>
 
 <script lang="ts">
@@ -17,9 +19,7 @@ const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: (
 </script>
 
 <style scoped lang="scss">
-div.tag {
-  gap: 0.1em;
-  line-height: 0.5;
-  background-color: var(--scheme-main-ter);
+.icon {
+  width: unset;
 }
 </style>
diff --git a/assets/components/LogViewer/LogActionsToolbar.vue b/assets/components/LogViewer/LogActionsToolbar.vue
index 1622c97e..11d63d56 100644
--- a/assets/components/LogViewer/LogActionsToolbar.vue
+++ b/assets/components/LogViewer/LogActionsToolbar.vue
@@ -114,7 +114,6 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { Container } from "@/models/Container";
-import KeyShortcut from "../KeyShortcut.vue";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 67248278..440caab7 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -122,7 +122,7 @@
 
       <div class="item">
         <o-switch v-model="search">
-          <span v-html="$t('settings.search')"></span>
+          <span>{{ $t("settings.search") }} <key-shortcut char="f"></key-shortcut></span>
         </o-switch>
       </div>
 
diff --git a/locales/de.yml b/locales/de.yml
index b341e39c..60b87bf3 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -49,9 +49,7 @@ settings:
   options: Optionen
   show-stopped-containers: Zeige gestoppte Container
   about: Über
-  search: >-
-    Aktiviere die Suche mit Dozzle mit <code>command+f</code> oder
-    <code>ctrl+f</code>
+  search: Aktiviere die Suche mit Dozzle mit
   using-version: Du verwendest Dozzle {version}.
   update-available: >-
     Eine neue Version ist verfügbar! Aktualisiere auf <a :href="{href}" class="next-release"
diff --git a/locales/en.yml b/locales/en.yml
index 0f7dfd31..678fd4bd 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -50,9 +50,7 @@ settings:
   options: Options
   show-stopped-containers: Show stopped containers
   about: About
-  search: >-
-    Enable searching with Dozzle using <code>command+f</code> or
-    <code>ctrl+f</code>
+  search: Enable searching with Dozzle using
   using-version: You are using Dozzle {version}.
   update-available: >-
     New version is available! Update to <a :href="{href}" class="next-release"
diff --git a/locales/es.yml b/locales/es.yml
index 50536169..f2dee433 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -49,9 +49,7 @@ settings:
   options: Opciones
   show-stopped-containers: Mostrar contenedores parados
   about: Acerca de
-  search: >-
-    Activar la búsqueda con Dozzle mediante <code>comando+f</code> o
-    <code>ctrl+f</code>
+  search: Activar la búsqueda con Dozzle mediante
   using-version: Estás usando Dozzle {version}.
   update-available: >-
     ¡La nueva versión está disponible! Actualizar a la
diff --git a/locales/pr.yml b/locales/pr.yml
index 40215bc8..b8c81fe6 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -49,9 +49,7 @@ settings:
   options: Opções
   show-stopped-containers: Mostrar contentores parados
   about: Acerca de
-  search: >-
-    Habilitar a pesquisa com Dozzle usando <code>comando+f</code> ou
-    <code>ctrl+f</code>
+  search: Habilitar a pesquisa com Dozzle usando
   using-version: Está a usar o Dozzle {version}.
   update-available: >-
     Está disponível uma nova versão! Actualização para
diff --git a/locales/ru.yml b/locales/ru.yml
index 5f3cff1b..98a0c9c0 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -48,9 +48,7 @@ settings:
   options: Опции
   show-stopped-containers: Показывать остановленные контейнеры
   about: Информация
-  search: >-
-    Включить поиск с помощью Dozzle, используя <code>command+f</code> или
-    <code>ctrl+f</code>
+  search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете версию Dozzle {version}.
   update-available: >-
     Доступна новая версия! Обновить до <a :href="{href}" class="next-release"
diff --git a/locales/zh.yml b/locales/zh.yml
index c7af1f40..286085ec 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -48,9 +48,7 @@ settings:
   options: 选项
   show-stopped-containers: 显示已停止的容器
   about: 关于
-  search: >-
-    使用Dozzle启用搜索 <code>command+f</code> 或
-    <code>ctrl+f</code>
+  search: 使用Dozzle启用搜索
   using-version: 您正在使用Dozzle {version}。
   update-available: >-
     新版本可用！更新到 <a :href="{href}" class="next-release"