fix: Improves Day View styling

javalent · Feb 21, 2024 · d760dab · d760dab
1 parent 3bad86a
commit d760dab
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 92 deletions.
diff --git a/src/calendar/ui/Calendar.svelte b/src/calendar/ui/Calendar.svelte
@@ -112,7 +112,6 @@
             {/if}
         </div>
         {#if $viewing}
-            <hr />
             <DayView />
         {/if}
     </div>
@@ -121,8 +120,10 @@
 <style scoped>
     .calendar-container {
         overflow: hidden;
-        display: flex;
-        flex-flow: column nowrap;
+        /* display: flex;
+        flex-flow: column nowrap; */
+        display: grid;
+        grid-template-rows: auto auto 1fr;
     }
     .calendar {
         overflow: auto;

diff --git a/src/calendar/ui/Day/Day.svelte b/src/calendar/ui/Day/Day.svelte
@@ -140,14 +140,7 @@
                     </div>
                 {/if}
                 {#key $events}
-                    <Flags
-                        events={$events}
-                        date={{
-                            day: day.number,
-                            month: $index,
-                            year: year.year,
-                        }}
-                    />
+                    <Flags events={$events} />
                 {/key}
             {:else}
                 <Dots events={$events} />

diff --git a/src/calendar/ui/Day/DayView.svelte b/src/calendar/ui/Day/DayView.svelte
@@ -10,6 +10,8 @@
         CLOSE,
         LEFT,
         RIGHT,
+        setClickableIcon,
+        setNodeIcon,
     } from "src/utils/icons";
     import { addEventWithModal } from "src/settings/modals/event/event";
     import { derived } from "svelte/store";
@@ -42,77 +44,75 @@
     const event = (node: HTMLElement) => {
         new ExtraButtonComponent(node)
             .setIcon(ADD_EVENT)
-            .setTooltip("New Event")
-            .onClick(() => {});
-    };
-    const left = (node: HTMLElement) => {
-        new ExtraButtonComponent(node).setIcon(LEFT);
-    };
-    const right = (node: HTMLElement) => {
-        new ExtraButtonComponent(node).setIcon(RIGHT);
+            .setTooltip("New Event");
     };
 </script>
 
 <div class="day-view">
+    <hr />
     <div class="nav">
-        <div class="left-nav">
+        <div
+            use:setClickableIcon={CALENDAR_SEARCH}
+            aria-label="Reveal"
+            on:click={() => {
+                $ephemeral.displayDate($viewing);
+            }}
+        />
+        <div class="date">
             <div
-                use:reveal
+                class="arrow"
+                use:setClickableIcon={LEFT}
+                aria-label="Previous"
                 on:click={() => {
+                    $ephemeral.goToPreviousDay();
+
                     $ephemeral.displayDate($viewing);
                 }}
-            />
+            ></div>
+
+            <div class="title-container">
+                <h5 class="calendarium-title title">
+                    <span class="current">{date}</span>
+                </h5>
+                {#if displayDayNumber}
+                    <div class="day-number">
+                        <em> Day {daysBeforeDay} </em>
+                    </div>
+                {/if}
+            </div>
+            <div
+                class="arrow"
+                use:setClickableIcon={RIGHT}
+                aria-label="Next"
+                on:click={() => {
+                    $ephemeral.goToNextDay();
+                    $ephemeral.displayDate($viewing);
+                }}
+            ></div>
+        </div>
+        <!-- <div class="actions">
             <div
                 use:event
                 on:click={() => addEventWithModal(plugin, $store, $viewing)}
             />
-        </div>
+        </div> -->
         <div use:close on:click={() => $ephemeral.viewing.set(null)} />
     </div>
-    <div class="date">
-        <div
-            class="arrow calendar-clickable"
-            use:left
-            aria-label="Previous"
-            on:click={() => {
-                $ephemeral.goToPreviousDay();
 
-                $ephemeral.displayDate($viewing);
-            }}
-        />
-        <div class="title-container">
-            <h3 class="calendarium-title title">
-                <span class="current">{date}</span>
-            </h3>
-            {#if displayDayNumber}
-                <div class="day-number">
-                    <em> Day {daysBeforeDay} </em>
-                </div>
-            {/if}
-        </div>
-        <div
-            class="arrow right calendar-clickable"
-            use:right
-            aria-label="Next"
-            on:click={() => {
-                $ephemeral.goToNextDay();
-                $ephemeral.displayDate($viewing);
-            }}
-        />
+    <div class="context">
+        {#if $displayMoons}
+            <div class="moon-container">
+                {#each $moons as moon}
+                    <MoonUI {moon} />
+                {/each}
+            </div>
+        {/if}
     </div>
-    {#if $displayMoons}
-        <div class="moon-container">
-            {#each $moons as moon}
-                <MoonUI {moon} />
-            {/each}
-        </div>
-    {/if}
     {#key $events}
         {#if $viewing}
             <Flags
                 events={$events}
                 dayView={true}
-                date={$viewing}
                 on:event-click
                 on:event-mouseover
                 on:event-context
@@ -127,43 +127,40 @@
         display: flex;
         flex-flow: column nowrap;
         gap: 0.5rem;
+        min-height: 300px;
     }
-
-    .nav,
-    .date {
+    hr {
+        margin: 0.5em 0;
+    }
+    .nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }
-    .left-nav {
-        display: flex;
-    }
-    .left-nav :global(.clickable-icon) {
-        margin-right: 0;
-    }
 
-    .calendar-clickable {
-        align-items: center;
-        cursor: pointer;
+    .date {
+        --icon-size: var(--icon-s);
         display: flex;
-        justify-content: center;
-    }
-    h3 {
-        margin: 0;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.25rem;
     }
 
-    .day-view :global(.flag-container > .flag) {
+    /*     .day-view :global(.flag-container > .flag) {
         padding-left: 0.5rem;
-    }
+    } */
 
     .title-container {
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
     }
+    .title {
+        margin: 0;
+    }
     .day-number {
-        font-size: small;
+        font-size: x-small;
     }
     .moon-container {
         display: flex;

diff --git a/src/calendar/ui/Events/Flags.svelte b/src/calendar/ui/Events/Flags.svelte
@@ -7,9 +7,6 @@
 
     export let events: CalEvent[] = [];
     export let dayView: boolean = false;
-    export let date: CalDate;
-
-    const store = getTypedContext("store");
 
     let height: number;
     let target: Element;
@@ -76,23 +73,21 @@
     });
 </script>
 
-<div class="flags-container">
-    <div class="flag-container" bind:this={container} />
-    <div class="overflow">
-        {#if overflow > 0}
-            <span>+{overflow}</span>
-        {/if}
-    </div>
+<div class="flag-container" bind:this={container} />
+<div class="overflow">
+    {#if overflow > 0}
+        <span>+{overflow}</span>
+    {/if}
 </div>
 
 <style>
-    .flags-container,
     .flag-container {
         height: 100%;
         display: flex;
         flex-flow: column nowrap;
         gap: 0.25rem;
-        overflow: hidden;
+        overflow: auto;
+        white-space: nowrap;
     }
 
     .overflow {

diff --git a/src/utils/icons.ts b/src/utils/icons.ts
@@ -1,9 +1,12 @@
-import { setIcon } from "obsidian";
+import { ExtraButtonComponent, setIcon } from "obsidian";
 
 export function setNodeIcon(node: HTMLElement, icon: string) {
     node.addClass("has-node-icon");
     setIcon(node, icon);
 }
+export function setClickableIcon(node: HTMLElement, icon: string) {
+    new ExtraButtonComponent(node).setIcon(icon);
+}
 
 export const EVENT_LINKED_TO_NOTE = "sticky-note";
 export const EVENT_FROM_FRONTMATTER = "file-symlink";