From 287e36030528a254829a80f6e77682ac3cf3835c Mon Sep 17 00:00:00 2001 From: MathieuG-P Date: Sun, 10 Jul 2022 21:26:59 +0200 Subject: [PATCH] add country flags --- .../setting-radio-array.component.tsx | 2 +- .../components/svgs/bsm-icon.component.tsx | 10 ++- .../svgs/flags/france-icon.component.tsx | 20 +++++ .../svgs/flags/spain-icon.component.tsx | 41 ++++++++++ .../svgs/flags/uk-icon.component.tsx | 30 ++++++++ .../svgs/flags/usa-icon.component.tsx | 77 +++++++++++++++++++ .../pages/settings-page.component.tsx | 9 ++- 7 files changed, 183 insertions(+), 6 deletions(-) create mode 100644 src/renderer/components/svgs/flags/france-icon.component.tsx create mode 100644 src/renderer/components/svgs/flags/spain-icon.component.tsx create mode 100644 src/renderer/components/svgs/flags/uk-icon.component.tsx create mode 100644 src/renderer/components/svgs/flags/usa-icon.component.tsx diff --git a/src/renderer/components/settings/setting-radio-array.component.tsx b/src/renderer/components/settings/setting-radio-array.component.tsx index e085cb67..5fb76887 100644 --- a/src/renderer/components/settings/setting-radio-array.component.tsx +++ b/src/renderer/components/settings/setting-radio-array.component.tsx @@ -16,7 +16,7 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele {i.icon && (
{i.textIcon && {i.textIcon}} - +
)} diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx index 8401ccfc..bcfaa6bc 100644 --- a/src/renderer/components/svgs/bsm-icon.component.tsx +++ b/src/renderer/components/svgs/bsm-icon.component.tsx @@ -8,8 +8,12 @@ import { DesktopIcon } from "./desktop-icon.component"; import { OculusIcon } from "./oculus-icon.component"; import { AddIcon } from "./add-icon.component"; import CrossIcon from "./cross-icon.component"; +import { FranceIcon } from "./flags/france-icon.component"; +import { SpainIcon } from "./flags/spain-icon.component"; +import { UsaIcon } from "./flags/usa-icon.component"; +import { UkIcon } from "./flags/uk-icon.component"; -export type BsmIconType = "settings"|"trash"|"favorite"|"folder"|"bsNote"|"terminal"|"desktop"|"oculus"|"add"|"cross"; +export type BsmIconType = "settings"|"trash"|"favorite"|"folder"|"bsNote"|"terminal"|"desktop"|"oculus"|"add"|"cross"|"fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"; export function BsmIcon({className, icon}: {className?: string, icon: BsmIconType}) { @@ -24,6 +28,10 @@ export function BsmIcon({className, icon}: {className?: string, icon: BsmIconTyp if(icon === "oculus"){ return } if(icon === "add"){ return } if(icon === "cross"){ return } + if(icon === "fr-FR-flag"){ return } + if(icon === "es-ES-flag"){ return } + if(icon === "en-US-flag"){ return } + if(icon === "en-EN-flag"){ return } } return ( diff --git a/src/renderer/components/svgs/flags/france-icon.component.tsx b/src/renderer/components/svgs/flags/france-icon.component.tsx new file mode 100644 index 00000000..b1bd32bd --- /dev/null +++ b/src/renderer/components/svgs/flags/france-icon.component.tsx @@ -0,0 +1,20 @@ +export function FranceIcon(props: {className: string}) { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/renderer/components/svgs/flags/spain-icon.component.tsx b/src/renderer/components/svgs/flags/spain-icon.component.tsx new file mode 100644 index 00000000..4e87cd64 --- /dev/null +++ b/src/renderer/components/svgs/flags/spain-icon.component.tsx @@ -0,0 +1,41 @@ +export function SpainIcon(props: {className: string}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/renderer/components/svgs/flags/uk-icon.component.tsx b/src/renderer/components/svgs/flags/uk-icon.component.tsx new file mode 100644 index 00000000..01d76b6b --- /dev/null +++ b/src/renderer/components/svgs/flags/uk-icon.component.tsx @@ -0,0 +1,30 @@ +export function UkIcon(props: {className: string}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/renderer/components/svgs/flags/usa-icon.component.tsx b/src/renderer/components/svgs/flags/usa-icon.component.tsx new file mode 100644 index 00000000..1aa70d44 --- /dev/null +++ b/src/renderer/components/svgs/flags/usa-icon.component.tsx @@ -0,0 +1,77 @@ +export function UsaIcon(props: {className: string}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx index b0f99012..32eeaf5a 100644 --- a/src/renderer/pages/settings-page.component.tsx +++ b/src/renderer/pages/settings-page.component.tsx @@ -3,6 +3,7 @@ import SettingColorChooser from "renderer/components/settings/setting-color-choo import { SettingContainer } from "renderer/components/settings/setting-container.component"; import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component"; import { BsmButton } from "renderer/components/shared/bsm-button.component"; +import { BsmIconType } from "renderer/components/svgs/bsm-icon.component"; import { DefaultConfigKey, ThemeConfig } from "renderer/config/default-configuration.config"; import { useObservable } from "renderer/hooks/use-observable.hook"; import { useTranslation } from "renderer/hooks/use-translation.hook"; @@ -39,8 +40,8 @@ export function SettingsPage() { {id: 3, text: "Operating System", value: "os" as ThemeConfig} ]; - const languagesItems: RadioItem[] = i18nService.getSupportedLanguages().map((l, index) => { - return {id: index, text: t(`pages.settings.languages.${l}`), value: l, textIcon:t(`pages.settings.languages.translated.${l}`), icon: "trash"}; + const languagesItems: RadioItem[] = i18nService.getSupportedLanguages().map((l, index) => { + return {id: index, text: t(`pages.settings.languages.${l}`), value: l, textIcon:t(`pages.settings.languages.translated.${l}`), icon: `${l}-flag` as BsmIconType}; }); const[themeIdSelected, setThemeIdSelected]= useState(themeItem.find(e => e.value === themeService.getTheme()).id); @@ -88,8 +89,8 @@ export function SettingsPage() { progressBarService.complete(); setTimeout(() => progressBarService.hide(true), 1000); }, 1000); - if(res.success){ - setInstallationFolder(res.data); + if(res.success){ + setInstallationFolder(res.data); notificationService.notifySuccess({title: "Transfer completed", duration: 3000}); } });