zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Feature/language UI update (#797)

Browse Source 
* split radio items into two columns for better layout

* Add SplitColumns prop to SettingRadioArray for flexible layout

* Add columnCount prop to SettingRadioArray for flexible layout

* REmove useless change

* fix dytnamic grid columns after compilation

* remove useless span

---------

Co-authored-by: Zagrios <40181755+Zagrios@users.noreply.github.com>
This commit is contained in:
GaetanGrd
2025-06-14 14:01:07 +02:00
committed by GitHub
parent feb6ea3f87
commit e1b55e4019
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/settings/setting-radio-array.component.tsx
+6 -5
View File
@@ -8,10 +8,11 @@ type Props<T> = {
selectedItemId?: number;
selectedItemValue?: T;
direction?: CSSProperties["flexDirection"],
columnCount?: number;
onItemSelected?: (item: RadioItem<T>) => void
};
export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemValue, onItemSelected, direction = "column" }: Props<T>) {
export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemValue, onItemSelected, direction = "column",columnCount = 1, }: Props<T>) {
const t = useTranslation();
const isSelected = (item: RadioItem<T>) => {
@@ -19,17 +20,17 @@ export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemVa
}
return (
<div id={id} className="w-full flex gap-1.5" style={{flexDirection: direction}}>
<div id={id} className="w-full grid gap-1.5" style={{flexDirection: direction, gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`}}>
{items.map(i => (
<div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
<div onClick={() => onItemSelected(i)} key={i.id} className={`h-12 py-3 w-full flex cursor-pointer justify-between rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
<div className="flex items-center">
<div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
<motion.span initial={{ scale: 0 }} animate={{ scale: isSelected(i) ? 1 : 0 }} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full" />
</div>
<h2 className="font-extrabold">{t(i.text)}</h2>
<h2 className="font-extrabold text-nowrap">{t(i.text)}</h2>
</div>
{i.icon && (
<div className="flex items-center">
<div className="flex items-center text-right">
{i.textIcon && <span className="text-sm">{t(i.textIcon)}</span>}
{i.icon}
</div>
src/renderer/pages/settings-page.component.tsx
+1 -1
View File
@@ -498,7 +498,7 @@ export function SettingsPage() {
</SettingContainer>
<SettingContainer title="pages.settings.language.title" description="pages.settings.language.description">
<SettingRadioArray items={languagesItems} selectedItemValue={languageSelected} onItemSelected={handleChangeLanguage} />
<SettingRadioArray items={languagesItems} selectedItemValue={languageSelected} onItemSelected={handleChangeLanguage} columnCount={2} />
</SettingContainer>
<SettingContainer title="pages.settings.patreon.title" description="pages.settings.patreon.description">