Add note collapsing

Kruptein · Dec 17, 2023 · 927c231 · 927c231
1 parent 9605316
commit 927c231
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/client/src/fa.ts b/client/src/fa.ts
@@ -1,6 +1,6 @@
 import { dom, library } from "@fortawesome/fontawesome-svg-core";
 import { faDAndD, faDiscord, faGithub, faPatreon } from "@fortawesome/free-brands-svg-icons";
-import { faCompass, faCopy, faWindowClose } from "@fortawesome/free-regular-svg-icons";
+import { faCompass, faCopy, faSquareMinus, faSquarePlus, faWindowClose } from "@fortawesome/free-regular-svg-icons";
 import {
     faAngleDoubleLeft,
     faArchive,
@@ -122,6 +122,8 @@ export function loadFontAwesome(): void {
         faSortAmountDown,
         faSortAmountDownAlt,
         faSquare,
+        faSquareMinus,
+        faSquarePlus,
         faStopwatch,
         faSyncAlt,
         faTimesCircle,

diff --git a/client/src/game/ui/notes/NoteDialog.vue b/client/src/game/ui/notes/NoteDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, type Ref } from "vue";
+import { onMounted, reactive, ref, type Ref } from "vue";
 import VueMarkdown from "vue-markdown-render";
 
 import Modal from "../../../core/components/modals/Modal.vue";
@@ -10,13 +10,15 @@ import { noteState } from "../../systems/notes/state";
 const props = defineProps<{ modalIndex: ModalIndex; uuid: string }>();
 defineExpose({ close });
 
+const collapsed = reactive({ active: false, width: 0, height: 0, topRight: 0 });
 const modal = ref<{ container: Ref<HTMLDivElement> } | null>(null);
 
 const note = noteState.reactive.notes.get(props.uuid);
 
 onMounted(() => {
     if (modal.value) {
         const container = modal.value.container;
+        // Put an initial size limit, it can be resized manually afterwards
         if ((100 * container.offsetWidth) / window.innerWidth > 30) {
             container.style.width = "30vw";
         }
@@ -26,21 +28,48 @@ onMounted(() => {
     }
 });
 
+function collapse(): void {
+    if (!modal.value) return;
+    const container = modal.value.container;
+    collapsed.height = container.offsetHeight;
+    collapsed.width = container.offsetWidth;
+
+    container.style.height = "auto";
+    container.style.width = "auto";
+    collapsed.active = true;
+}
+
+function expand(): void {
+    if (!modal.value) return;
+    const container = modal.value.container;
+    container.style.height = `${collapsed.height}px`;
+    container.style.width = `${collapsed.width}px`;
+    collapsed.active = false;
+}
+
 function close(): void {
     modalSystem.close(props.modalIndex, true);
 }
 </script>
 
 <template>
-    <Modal v-if="note !== undefined" ref="modal" :visible="true" :mask="false" @close="close">
+    <Modal v-if="note !== undefined" ref="modal" :visible="true" :mask="false" :right-handed="true" @close="close">
         <template #header="m">
             <header draggable="true" @dragstart="m.dragStart" @dragend="m.dragEnd">
                 <div>{{ note.title }}</div>
+
+                <font-awesome-icon
+                    v-if="collapsed.active"
+                    class="close-note"
+                    :icon="['far', 'square-plus']"
+                    @click="expand"
+                />
+                <font-awesome-icon v-else :icon="['far', 'square-minus']" @click="collapse" />
+                <font-awesome-icon :icon="['far', 'window-close']" @click="close" />
             </header>
         </template>
 
-        <font-awesome-icon class="close-note" :icon="['far', 'window-close']" @click="close" />
-        <div class="note-body">
+        <div v-if="!collapsed.active" class="note-body">
             <VueMarkdown :source="note.text" :options="{ html: true }" />
         </div>
     </Modal>
@@ -58,20 +87,12 @@ function close(): void {
     min-height: 5rem;
     // width: min(auto, 30vw);
     overflow: auto;
-
-    .close-note {
-        position: absolute;
-
-        top: 0.75rem;
-        right: 0.75rem;
-
-        font-size: 1.25rem;
-    }
 }
 
 header {
     display: flex;
     padding: 1.5rem 2rem;
+    padding-right: 0.5rem;
 
     &:hover {
         cursor: move;
@@ -84,6 +105,11 @@ header {
         font-weight: bold;
         font-size: 1.75em;
     }
+
+    svg {
+        font-size: 1.25rem;
+        margin-left: 0.25rem;
+    }
 }
 
 .note-body {