feat: minor advanved settings improvements (#266)

openstream-fm · Jan 27, 2024 · f909163 · f909163
2 parents 56fff00 + 79c06dc
commit f909163
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/front/app/src/lib/components/GooglePlayLangField.svelte b/front/app/src/lib/components/GooglePlayLangField.svelte
@@ -7,9 +7,9 @@
   export let on_change: ((v: string) => void) | null =  null; 
   export let lang_names: Record<GooglePlayLang, string> = google_play_langs;  
 
-  $: lang_options = Object.entries(lang_names).map(([ value, label ]) => {
-    return { value, label: lang_names[value as GooglePlayLang] || label }
-  }).sort((a, b) => a.label.localeCompare(b.label));
+  $: lang_options = Object.entries(lang_names).sort((a, b) => a[1].localeCompare(b[1])).map(([ value, label ]) => {
+    return { value, label: `${lang_names[value as GooglePlayLang] || label}, ${value}` }
+  })
 
   $: empty = value == null || value === "";
   $: options = empty ? [ {label: "", value: ""}, ...lang_options ] : lang_options;

diff --git a/front/app/src/lib/components/StationProfile.svelte b/front/app/src/lib/components/StationProfile.svelte
@@ -182,6 +182,10 @@
 		margin: 0 auto;
 		background: #ccc;
 	}
+
+	.sep-one {
+		margin: 2rem auto;
+	}
 </style>
 
 
@@ -473,6 +477,14 @@
 
 	<div class="fields section-advanced-fields" class:open={advanced_open} use:display_fly_enter={{ show: advanced_open, start: false, duration: 300, y: -25 }}>
 
+		<div class="field">
+			<!-- TODO: locale -->
+			<GooglePlayLangField
+				label={"App language for Google Play"}
+				bind:value={current.user_metadata.mob_app.google_play_lang}
+			/>
+		</div>
+
 		<div class="field">
 			<!-- TODO: locale -->
 			<NullTextField
@@ -495,20 +507,16 @@
 
 		<div class="field">
 			<NullTextField
+				icon={mdiGooglePlay}
 				label={"App description for Google Play"}
-				multiline={true}
+				multiline
 				minrows={5}
 				bind:value={current.user_metadata.mob_app.google_play_description}
 			/>
 			<Validator value={current.user_metadata.mob_app.google_play_description} fn={_string({ maxlen: 4000 })} />
 		</div>
 
-		<div class="field">
-			<GooglePlayLangField
-				label={"App language for Google Play"}
-				bind:value={current.user_metadata.mob_app.google_play_lang}
-			/>
-		</div>
+		<div class="advanced-sep sep-one" />
 
 		<div class="field">
 			<ColorField

diff --git a/front/share/src/Form/FieldContainer.svelte b/front/share/src/Form/FieldContainer.svelte
@@ -3,8 +3,10 @@
   export let readonly: boolean = false;
   export let icon: string | null = null;
   export let icon_viewbox: string | undefined = void 0;
+  export let multiline: boolean = false;
   export let btn: { icon: string, action: () => void, label: string, tabindex?: number | undefined } | null = null;
-	import Icon from "$share/Icon.svelte";
+	
+  import Icon from "$share/Icon.svelte";
 	import { ripple } from "$share/ripple";
 
   // let btn_click_token = false;
@@ -56,10 +58,17 @@
     font-size: 1.25rem;
     margin-inline-start: 0.5rem;
     margin-block-start: 0.45rem;
-    margin-inline-end: 0.15;
     transition: color 250ms ease;
   }
 
+  .multiline .icon {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.75rem;
+  }
+
   .field-container:not(.disabled):not(.readonly):focus-within > .icon {
     color: var(--blue);
   }
@@ -102,7 +111,7 @@
   }
 </style>
 
-<label class="field-container" class:disabled class:readonly class:with-icon={icon != null}>
+<label class="field-container" class:disabled class:readonly class:multiline class:with-icon={icon != null}>
   {#if icon != null}
     <div class="icon">
       <Icon d={icon} viewBox={icon_viewbox} />

diff --git a/front/share/src/Form/TextField.svelte b/front/share/src/Form/TextField.svelte
@@ -24,7 +24,7 @@
   import Label from "./Label.svelte";
 </script>
 
-<FieldContainer {disabled} {readonly} {icon} {icon_viewbox} {btn}>
+<FieldContainer {disabled} {readonly} {multiline} {icon} {icon_viewbox} {btn}>
   <Input
     type={type}
     {autocomplete}