Merge pull request #291 from xrolfex/feature/sidebar_date_layout

Update date sidebar to support vertical and horizontal layouts
matt8707 · Jan 28, 2024 · 0606206 · 0606206
2 parents 51e3ddc + 774143f
commit 0606206
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/src/lib/Modal/DateConfig.svelte b/src/lib/Modal/DateConfig.svelte
@@ -26,7 +26,12 @@
 		<h2>{$lang('preview')}</h2>
 
 		<div class="preview">
-			<Date short_day={sel?.short_day} short_month={sel?.short_month} hide={sel?.hide} />
+			<Date
+				short_day={sel?.short_day}
+				short_month={sel?.short_month}
+				hide={sel?.hide}
+				layout={sel?.layout}
+			/>
 		</div>
 
 		<!-- DAY -->
@@ -79,19 +84,45 @@
 			</button>
 			<button
 				class:selected={sel?.hide === 'day'}
-				on:click={() => set('hide', 'day')}
+				on:click={() => {
+					set('hide', 'day');
+					set('layout', 'vertical');
+				}}
 				use:Ripple={$ripple}
 			>
 				{$lang('day')}
 			</button>
 			<button
 				class:selected={sel?.hide === 'month'}
-				on:click={() => set('hide', 'month')}
+				on:click={() => {
+					set('hide', 'month');
+					set('layout', 'vertical');
+				}}
 				use:Ripple={$ripple}
 			>
 				{$lang('month')}
 			</button>
 		</div>
+		{#if !sel?.hide || sel?.hide === 'none'}
+			<!-- Layout -->
+			<h2>{$lang('Layout')}</h2>
+			<div class="button-container">
+				<button
+					class:selected={!sel?.layout || sel?.layout === 'vertical'}
+					on:click={() => set('layout', 'vertical')}
+					use:Ripple={$ripple}
+				>
+					{$lang('vertical')}
+				</button>
+				<button
+					class:selected={sel?.layout === 'horizontal'}
+					on:click={() => set('layout', 'horizontal')}
+					use:Ripple={$ripple}
+				>
+					{$lang('horizontal')}
+				</button>
+			</div>
+		{/if}
 
 		<ConfigButtons {sel} />
 	</Modal>

diff --git a/src/lib/Sidebar/Date.svelte b/src/lib/Sidebar/Date.svelte
@@ -4,6 +4,7 @@
 	export let short_day: boolean | undefined = undefined;
 	export let short_month: boolean | undefined = undefined;
 	export let hide: string | undefined = undefined;
+	export let layout: string | undefined = undefined;
 
 	$: weekDay = $timer.toLocaleDateString($selectedLanguage, {
 		weekday: short_day ? 'short' : 'long'
@@ -13,15 +14,22 @@
 		day: 'numeric',
 		month: short_month ? 'short' : 'long'
 	});
+
+	$: orientation = layout || 'vertical';
 </script>
 
 <div>
-	{#if hide !== 'day'}
-		{weekDay}<br />
-	{/if}
+	{#if orientation === 'vertical'}
+		{#if hide !== 'day'}
+			{weekDay}<br />
+		{/if}
 
-	{#if hide !== 'month'}
-		{shortDate}<br />
+		{#if hide !== 'month'}
+			{shortDate}<br />
+		{/if}
+	{/if}
+	{#if orientation === 'horizontal'}
+		{weekDay},&nbsp;{shortDate}
 	{/if}
 </div>
 

diff --git a/src/lib/Sidebar/Index.svelte b/src/lib/Sidebar/Index.svelte
@@ -218,6 +218,7 @@
 								short_day={item?.short_day}
 								short_month={item?.short_month}
 								hide={item?.hide}
+								layout={item?.layout}
 							/>
 						</button>
 

diff --git a/src/lib/Types.ts b/src/lib/Types.ts
@@ -108,6 +108,7 @@ export interface DateItem {
 	short_day?: boolean;
 	short_month?: boolean;
 	hide?: string;
+	layout?: string;
 }
 
 export interface GraphItem {