fix: improve more device card setting

blinko-space · Nov 23, 2024 · 7dae5e8 · 7dae5e8
1 parent 228209c
commit 7dae5e8
Show file tree

Hide file tree

Showing 16 changed files with 241 additions and 79 deletions.
diff --git a/public/locales/ar/translation.json b/public/locales/ar/translation.json
@@ -150,5 +150,11 @@
   "accept": "قبول",
   "reject": "رفض",
   "stop": "توقف",
-  "card-columns": "أعمدة البطاقة"
+  "card-columns": "أعمدة البطاقة",
+  "select-a-columns": "حدد أعمدة",
+  "width-less-than-1024px": "العرض أقل من 1024 بكسل",
+  "width-less-than": "عرض أقل من",
+  "small-device-card-columns": "أعمدة بطاقة الجهاز الصغيرة",
+  "medium-device-card-columns": "أعمدة بطاقة الجهاز المتوسطة",
+  "large-device-card-columns": "أعمدة بطاقة الجهاز الكبيرة"
 }
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -142,5 +142,11 @@
   "accept": "Akzeptieren",
   "reject": "Ablehnen",
   "stop": "Stopp",
-  "card-columns": "Kartenspalten"
+  "card-columns": "Kartenspalten",
+  "select-a-columns": "Wählen Sie eine Spalte",
+  "width-less-than-1024px": "Breite weniger als 1024px",
+  "width-less-than": "Breite weniger als",
+  "small-device-card-columns": "Spalten für kleine Gerätekarten",
+  "medium-device-card-columns": "Medium-Gerätekarten-Spalten",
+  "large-device-card-columns": "Große Gerätekartenspalten"
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -147,5 +147,11 @@
   "accept": "Accept",
   "reject": "Reject",
   "stop": "Stop",
-  "card-columns": "Card Columns"
+  "card-columns": "Card Columns",
+  "select-a-columns": "Select a columns",
+  "width-less-than-1024px": "Width less than 1024px",
+  "width-less-than": "Width less than",
+  "small-device-card-columns": "Small Device Card Columns",
+  "medium-device-card-columns": "Medium Device Card Columns",
+  "large-device-card-columns": "Large Device Card Columns"
 }
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
@@ -141,5 +141,11 @@
   "accept": "Acepte",
   "reject": "Rechazar",
   "stop": "Stop",
-  "card-columns": "Columnas de tarjetas"
+  "card-columns": "Columnas de tarjetas",
+  "select-a-columns": "Seleccione una columna",
+  "width-less-than-1024px": "Anchura inferior a 1024px",
+  "width-less-than": "Anchura inferior a",
+  "small-device-card-columns": "Columnas de la tarjeta de dispositivo pequeño",
+  "medium-device-card-columns": "Columnas de la tarjeta de dispositivo medio",
+  "large-device-card-columns": "Columnas grandes de la tarjeta de dispositivo"
 }
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -142,5 +142,11 @@
   "accept": "Accepter",
   "reject": "Rejeter",
   "stop": "Arrêter",
-  "card-columns": "Colonnes de la carte"
+  "card-columns": "Colonnes de la carte",
+  "select-a-columns": "Sélectionner une colonne",
+  "width-less-than-1024px": "Largeur inférieure à 1024px",
+  "width-less-than": "Largeur inférieure à",
+  "small-device-card-columns": "Colonnes de la carte des petits appareils",
+  "medium-device-card-columns": "Colonnes de la carte de dispositif moyen",
+  "large-device-card-columns": "Grandes colonnes de la carte d'appareil"
 }
diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
@@ -140,5 +140,11 @@
   "accept": "受け入れる",
   "reject": "却下",
   "stop": "ストップ",
-  "card-columns": "カード・コラム"
+  "card-columns": "カード・コラム",
+  "select-a-columns": "列を選択する",
+  "width-less-than-1024px": "横幅が1024px未満",
+  "width-less-than": "幅",
+  "small-device-card-columns": "小型デバイスカードのコラム",
+  "medium-device-card-columns": "ミディアムデバイスカードのコラム",
+  "large-device-card-columns": "大型デバイスカードのコラム"
 }
diff --git a/public/locales/ko/translation.json b/public/locales/ko/translation.json
@@ -142,5 +142,11 @@
   "accept": "수락",
   "reject": "거부",
   "stop": "중지",
-  "card-columns": "카드 열"
+  "card-columns": "카드 열",
+  "select-a-columns": "열 선택",
+  "width-less-than-1024px": "너비 1024px 미만",
+  "width-less-than": "너비 미만",
+  "small-device-card-columns": "소형 장치 카드 열",
+  "medium-device-card-columns": "중간 장치 카드 열",
+  "large-device-card-columns": "대형 장치 카드 열"
 }
diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -141,5 +141,11 @@
   "accept": "Aceitar",
   "reject": "Rejeitar",
   "stop": "Parar",
-  "card-columns": "Colunas de cartões"
+  "card-columns": "Colunas de cartões",
+  "select-a-columns": "Selecionar uma coluna",
+  "width-less-than-1024px": "Largura inferior a 1024px",
+  "width-less-than": "Largura inferior a",
+  "small-device-card-columns": "Colunas do cartão de dispositivo pequeno",
+  "medium-device-card-columns": "Colunas do cartão de dispositivo médio",
+  "large-device-card-columns": "Colunas grandes do cartão de dispositivo"
 }
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -143,5 +143,11 @@
   "accept": "Принять",
   "reject": "Отклонить",
   "stop": "Остановите",
-  "card-columns": "Колонки карты"
+  "card-columns": "Колонки карты",
+  "select-a-columns": "Выберите столбцы",
+  "width-less-than-1024px": "Ширина менее 1024px",
+  "width-less-than": "Ширина менее",
+  "small-device-card-columns": "Колонки карты малого устройства",
+  "medium-device-card-columns": "Колонки карты среднего устройства",
+  "large-device-card-columns": "Большие колонки карты устройства"
 }
diff --git a/public/locales/zh-TW/translation.json b/public/locales/zh-TW/translation.json
@@ -142,5 +142,11 @@
   "accept": "接受",
   "reject": "拒绝",
   "stop": "停止",
-  "card-columns": "卡片列"
+  "card-columns": "卡片列",
+  "select-a-columns": "选择列",
+  "width-less-than-1024px": "宽度小于 1024px",
+  "width-less-than": "宽度小于",
+  "small-device-card-columns": "小型设备卡列",
+  "medium-device-card-columns": "介质设备卡列",
+  "large-device-card-columns": "大型设备卡列"
 }
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -143,5 +143,11 @@
   "accept": "接受",
   "reject": "拒绝",
   "stop": "停止",
-  "card-columns": "卡片列"
+  "card-columns": "卡片列",
+  "select-a-columns": "选择列",
+  "width-less-than-1024px": "宽度小于 1024px",
+  "width-less-than": "宽度小于",
+  "small-device-card-columns": "小型设备卡列",
+  "medium-device-card-columns": "介质设备卡列",
+  "large-device-card-columns": "大型设备卡列"
 }
diff --git a/src/components/BlinkoSettings/Item.tsx b/src/components/BlinkoSettings/Item.tsx
@@ -1,3 +1,7 @@
+import { Icon } from "@iconify/react"
+import { Button, DropdownTrigger, DropdownItem, DropdownMenu, Dropdown, Tooltip } from "@nextui-org/react"
+import { Code } from "@nextui-org/react"
+import { useTranslation } from "react-i18next"
 import { observer } from "mobx-react-lite"
 
 type IProps = {
@@ -6,6 +10,8 @@ type IProps = {
   type?: 'row' | 'col'
   hidden?: boolean
 }
+
+
 export const Item = observer(({ leftContent, rightContent, type = 'row', hidden = false }: IProps) => {
   if (hidden) return null
   if (type == 'col') {
@@ -20,3 +26,57 @@ export const Item = observer(({ leftContent, rightContent, type = 'row', hidden
     </div>
   }
 })
+
+
+export const ItemWithTooltip = observer(({ content, toolTipContent }: { content: any, toolTipContent: any }) => {
+  return <div className="flex items-center gap-2">
+    {content}
+    <Tooltip content={<div className="w-[300px] flex flex-col gap-2">
+      {toolTipContent}
+    </div>}>
+      <Icon icon="proicons:info" width="18" height="18" />
+    </Tooltip>
+  </div>
+})
+
+
+interface SelectDropdownProps {
+  value?: string
+  placeholder?: string
+  icon?: string
+  options: Array<{
+    key: string
+    label: string
+  }>
+  onChange: (value: string) => void | Promise<void>
+}
+export const SelectDropdown = ({
+  value,
+  placeholder,
+  icon,
+  options,
+  onChange
+}: SelectDropdownProps) => {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button
+          startContent={icon && <Icon icon={icon} width="20" height="20" />}
+        >
+          {value ?? placeholder}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        aria-label="Selection"
+        onAction={async (key) => {
+          await onChange(key.toString())
+        }}
+        selectedKeys={[value || '']}
+      >
+        {options.map(option => (
+          <DropdownItem key={option.key}>{option.label}</DropdownItem>
+        ))}
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
diff --git a/src/components/BlinkoSettings/PerferSetting.tsx b/src/components/BlinkoSettings/PerferSetting.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Card, DropdownItem, DropdownMenu, DropdownTrigger, Dropdown, Select, SelectItem, Switch, Button } from "@nextui-org/react";
 import { useTranslation } from "react-i18next";
-import { Item } from "./Item";
+import { Item, ItemWithTooltip, SelectDropdown } from "./Item";
 import ThemeSwitcher from "../Common/ThemeSwitcher";
 import LanguageSwitcher from "../Common/LanguageSwitcher";
 import { RootStore } from "@/store";
@@ -45,71 +45,102 @@ export const PerferSetting = observer(() => {
         }}
       />} />
     <Item
-      leftContent={<>{t('card-columns')}</>}
+      leftContent={<ItemWithTooltip content={t('small-device-card-columns')} toolTipContent={<div className="w-[300px] flex flex-col gap-2">
+        <div>{t('width-less-than')} 768px</div>
+      </div>} />
+      }
       rightContent={
-        <div>
-          <Dropdown>
-            <DropdownTrigger>
-              <Button
-                startContent={<Icon icon="fluent:layout-column-one-third-right-16-regular" width="20" height="20" />}
-              >
-                {blinko.config.value?.cardColumns ?? 'Select a card columns'}
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu
-              aria-label="Time format selection"
-              onAction={async (key) => {
-                console.log(key)
-                await PromiseCall(api.config.update.mutate({
-                  key: 'cardColumns',
-                  value: key.toString()
-                }))
-              }}
-              selectedKeys={[blinko.config.value?.cardColumns || '']}
-            >
-              <DropdownItem key="1">1</DropdownItem>
-              <DropdownItem key="2">2</DropdownItem>
-              <DropdownItem key="3">3</DropdownItem>
-              <DropdownItem key="4">4</DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
-        </div>
+        <SelectDropdown
+          value={blinko.config.value?.smallDeviceCardColumns}
+          placeholder={t('select-a-columns')}
+          icon="proicons:phone"
+          options={[
+            { key: "1", label: "1" },
+            { key: "2", label: "2" }
+          ]}
+          onChange={async (value) => {
+            await PromiseCall(api.config.update.mutate({
+              key: 'smallDeviceCardColumns',
+              value: value
+            }))
+          }}
+        />
       } />
+
+    <Item
+      leftContent={<ItemWithTooltip content={t('medium-device-card-columns')} toolTipContent={<div className="w-[300px] flex flex-col gap-2">
+        <div>{t('width-less-than-1024px')}</div>
+      </div>} />
+      }
+      rightContent={
+        <SelectDropdown
+          value={blinko.config.value?.mediumDeviceCardColumns}
+          placeholder={t('select-a-columns')}
+          icon="tabler:device-ipad"
+          options={[
+            { key: "1", label: "1" },
+            { key: "2", label: "2" },
+            { key: "3", label: "3" },
+            { key: "4", label: "4" },
+          ]}
+          onChange={async (value) => {
+            await PromiseCall(api.config.update.mutate({
+              key: 'mediumDeviceCardColumns',
+              value: value
+            }))
+          }}
+        />
+      } />
+
+    <Item
+      leftContent={<ItemWithTooltip content={t('large-device-card-columns')} toolTipContent={<div className="w-[300px] flex flex-col gap-2">
+        <div>{t('width-less-than')}1280px</div>
+      </div>} />
+      }
+      rightContent={
+        <SelectDropdown
+          value={blinko.config.value?.largeDeviceCardColumns}
+          placeholder={t('select-a-columns')}
+          icon="ic:outline-tv"
+          options={[
+            { key: "1", label: "1" },
+            { key: "2", label: "2" },
+            { key: "3", label: "3" },
+            { key: "4", label: "4" },
+          ]}
+          onChange={async (value) => {
+            await PromiseCall(api.config.update.mutate({
+              key: 'largeDeviceCardColumns',
+              value: value
+            }))
+          }}
+        />
+      } />
+
     <Item
       leftContent={<>{t('time-format')}</>}
       rightContent={
-        <div>
-          <Dropdown>
-            <DropdownTrigger>
-              <Button
-                startContent={<Icon icon="mingcute:time-line" width="20" height="20" />}
-              >
-                {blinko.config.value?.timeFormat ?? 'Select a time format'}
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu
-              aria-label="Time format selection"
-              onAction={async (key) => {
-                console.log(key)
-                await PromiseCall(api.config.update.mutate({
-                  key: 'timeFormat',
-                  value: key.toString()
-                }))
-              }}
-              selectedKeys={[blinko.config.value?.timeFormat || '']}
-            >
-              <DropdownItem key="relative">1 seconds ago</DropdownItem>
-              <DropdownItem key="YYYY-MM-DD">2024-01-01</DropdownItem>
-              <DropdownItem key="YYYY-MM-DD HH:mm">2024-01-01 15:30</DropdownItem>
-              <DropdownItem key="HH:mm">15:30</DropdownItem>
-              <DropdownItem key="YYYY-MM-DD HH:mm:ss">2024-01-01 15:30:45</DropdownItem>
-              <DropdownItem key="MM-DD HH:mm">03-20 15:30</DropdownItem>
-              <DropdownItem key="MMM DD, YYYY">Mar 20, 2024</DropdownItem>
-              <DropdownItem key="MMM DD, YYYY HH:mm">Mar 20, 2024 15:30</DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
-        </div>
+        <SelectDropdown
+          value={blinko.config.value?.timeFormat}
+          placeholder="Select a time format"
+          icon="mingcute:time-line"
+          options={[
+            { key: "relative", label: "1 seconds ago" },
+            { key: "YYYY-MM-DD", label: "2024-01-01" },
+            { key: "YYYY-MM-DD HH:mm", label: "2024-01-01 15:30" },
+            { key: "HH:mm", label: "15:30" },
+            { key: "YYYY-MM-DD HH:mm:ss", label: "2024-01-01 15:30:45" },
+            { key: "MM-DD HH:mm", label: "03-20 15:30" },
+            { key: "MMM DD, YYYY", label: "Mar 20, 2024" },
+            { key: "MMM DD, YYYY HH:mm", label: "Mar 20, 2024 15:30" },
+          ]}
+          onChange={async (value) => {
+            await PromiseCall(api.config.update.mutate({
+              key: 'timeFormat',
+              value: value
+            }))
+          }}
+        />
       } />
   </Card>
-
 })