Added changelog

src/components/index.ts

@@ -10,6 +10,7 @@ import Sortable from "vue-sortable";
 import VueTextareaAutosize from "vue-textarea-autosize";
 import Toast from "vue-toastification";
 import "vue-toastification/dist/index.css";
+import Changelog from "../data/Changelog.vue";
 
 export function registerComponents(vue: App): void {
     /* from files */
@@ -20,6 +21,7 @@ export function registerComponents(vue: App): void {
             vue.component(component.name, component);
         }
     });
+    vue.component("Changelog", Changelog);
 
     /* from packages */
     vue.component("collapse-transition", CollapseTransition);

src/components/system/Info.vue

@@ -17,7 +17,7 @@
                     Aarex
                 </div>
                 <br />
-                <div v-if="false" class="link" @click="$emit('openDialog', 'Changelog')">
+                <div class="link" @click="$emit('openDialog', 'Changelog')">
                     Changelog
                 </div>
                 <br />

src/components/system/Nav.vue

@@ -2,12 +2,8 @@
     <div class="nav" v-if="useHeader" v-bind="$attrs">
         <img v-if="banner" :src="banner" height="100%" :alt="title" />
         <div v-else class="title">{{ title }}</div>
-        <div
-            @click="openDialog('Changelog')"
-            class="version-container"
-            style="pointer-events: none"
-        >
-            <tooltip display="Changelog" bottom class="version"
+        <div @click="openDialog('Changelog')" class="version-container">
+            <tooltip display="<span>Changelog</span>" bottom class="version"
                 ><span>v{{ version }}</span></tooltip
             >
         </div>
@@ -87,6 +83,7 @@
     <Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
     <SavesManager :show="showSaves" @closeDialog="closeDialog" />
     <Options :show="showOptions" @closeDialog="closeDialog" />
+    <Changelog :show="showChangelog" @closeDialog="closeDialog" />
 </template>
 
 <script lang="ts">

src/data/Changelog.vue

@@ -0,0 +1,51 @@
+<template>
+    <Modal :show="show" @close="$emit('closeDialog', 'Changelog')">
+        <template v-slot:header>
+            <h2>Changelog</h2>
+        </template>
+        <template v-slot:body>
+            <details open>
+                <summary>v0.0 Initial Commit - <time>2021-09-04</time></summary>
+                This is the first release :D
+                <ul>
+                    <li>Did everything</li>
+                    <li>Had some fun</li>
+                    <li>Created some bugs to fix later</li>
+                </ul>
+            </details>
+        </template>
+    </Modal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "Changelog",
+    props: {
+        show: Boolean
+    },
+    emits: ["closeDialog"]
+});
+</script>
+
+<style scoped>
+details {
+    margin: 10px 0;
+    padding-left: 18px;
+}
+
+summary {
+    cursor: pointer;
+    margin-bottom: 10px;
+    margin-left: -18px;
+}
+
+ul {
+    margin: var(--feature-margin) 0;
+    background: var(--raised-background);
+    border: 2px solid rgba(0, 0, 0, 0.125);
+    padding: 5px 5px 5px 15px;
+    list-style: inside;
+}
+</style>