components/views: move buttons to the right places

AOSC-Archive · Jul 24, 2022 · 6bd1c54 · 6bd1c54
1 parent 13e6734
commit 6bd1c54
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 23 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -60,8 +60,8 @@ export default {
         <nav :class="nav_menu_bold(3)">Final Steps</nav>
       </div>
     </div>
-    <main style="padding-top: 1rem; margin-left: 4rem; max-width: 35vw">
-      <div style="max-height: 65vh; overflow-y: auto; margin-right: 5rem">
+    <main>
+      <div style="height: 100%; overflow-y: auto; margin-right: 3rem">
         <RouterView />
         <!-- <div style="display: flex; float: right; margin-right: 1em">
           <DKArrowButton :left="true">Previous</DKArrowButton>
@@ -90,7 +90,14 @@ export default {
   display: grid;
   grid-template-columns: 1fr 3fr;
   padding: 0 2rem;
-  max-height: 100vh;
+  height: 75vh;
+}
+
+.main-container main {
+  padding-top: 1rem;
+  margin-left: 4rem;
+  max-width: 35vw;
+  height: 100%;
 }
 
 .status-bar {

diff --git a/src/components/DKBottomActions.vue b/src/components/DKBottomActions.vue
@@ -0,0 +1,16 @@
+<script setup></script>
+
+<template>
+  <div class="bottom-bar"><slot /></div>
+</template>
+
+<style scoped>
+.bottom-bar {
+  display: flex;
+  column-gap: 0.5rem;
+  position: absolute;
+  bottom: 0;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+</style>
diff --git a/src/components/DKBottomRightButtons.vue b/src/components/DKBottomRightButtons.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.button-group {
+  float: right;
+  display: flex;
+  align-items: flex-end;
+  column-gap: 0.5rem;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+</style>
diff --git a/src/components/DKIconButton.vue b/src/components/DKIconButton.vue
@@ -22,6 +22,7 @@ export default {
 <style>
 .icon-container img {
   margin: 0 0.5rem 0 0;
+  height: 2.25rem;
 }
 </style>
 
@@ -35,7 +36,7 @@ export default {
   display: flex;
   line-height: 1.5;
   place-items: flex-start;
-  flex-wrap: wrap;
+  /* flex-wrap: wrap; */
   text-align: left;
 }
 </style>
diff --git a/src/components/DKStepButtons.vue b/src/components/DKStepButtons.vue
@@ -0,0 +1,10 @@
+<script setup>
+import DKBottomRightButtons from "./DKBottomRightButtons.vue";
+</script>
+
+<template>
+  <DKBottomRightButtons>
+    <button class="button">Previous</button>
+    <button class="button">Next</button>
+  </DKBottomRightButtons>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
@@ -9,6 +9,7 @@ import ConfirmView from "@/views/ConfirmView.vue";
 import SwapFileView from "@/views/SwapFileView.vue";
 import LocaleView from "@/views/LocaleView.vue";
 import MirrorView from "@/views/MirrorView.vue";
+import MirrorSelectView from "@/views/MirrorSelectView.vue";
 import RescueKitView from "@/views/RescueKitView.vue";
 import PartitionView from "@/views/PartitionView.vue";
 import VariantView from "@/views/VariantView.vue";
@@ -63,6 +64,12 @@ const router = createRouter({
       component: MirrorView,
       meta: { steps: 0 },
     },
+    {
+      path: "/mirrors-sel",
+      name: "mirrors-sel",
+      component: MirrorSelectView,
+      meta: { steps: 0 },
+    },
     {
       path: "/locales",
       name: "locales",

diff --git a/src/views/AbortView.vue b/src/views/AbortView.vue
@@ -1,17 +1,24 @@
-<script setup></script>
+<script setup>
+import DKBottomActions from "@/components/DKBottomActions.vue";
+</script>
 
 <template>
   <div>
     <h1>Abort?</h1>
     <p>
       Do you really want to abort installation? Doing so will result in an
-      <strong>incomplete or corrupted</strong> AOSC OS installationin the target
-      partition you specified.
+      <strong>incomplete or corrupted</strong> AOSC OS installation in the
+      target partition you specified.
     </p>
     <p>
       Would you like to save your current installation configuration? When you
       return, by selecting the original installation partition, installer will
       restart based on your previous configuration.
     </p>
   </div>
+  <DKBottomActions>
+    <button class="button" @click="$router.back()">Resume</button>
+    <button class="button">Quit & Save Configuration</button>
+    <button class="button">Quit</button>
+  </DKBottomActions>
 </template>
diff --git a/src/views/CompleteView.vue b/src/views/CompleteView.vue
@@ -1,4 +1,7 @@
-<script setup></script>
+<script setup>
+import DKBottomActions from "@/components/DKBottomActions.vue";
+import DKBottomRightButtons from "@/components/DKBottomRightButtons.vue";
+</script>
 
 <template>
   <div>
@@ -11,4 +14,9 @@
     </p>
     <p>Thank you for your time and for choosing AOSC OS!</p>
   </div>
+  <DKBottomActions>
+    <DKBottomRightButtons>
+      <button class="button">Finish</button>
+    </DKBottomRightButtons>
+  </DKBottomActions>
 </template>
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
@@ -1,6 +1,7 @@
 <script>
 import slides_data from "@/slides";
 import DKIconButton from "@/components/DKIconButton.vue";
+import DKBottomActions from "@/components/DKBottomActions.vue";
 
 export default {
   data: function () {
@@ -32,7 +33,7 @@ export default {
   beforeUnmount: function () {
     clearInterval(this.timer);
   },
-  components: { DKIconButton },
+  components: { DKIconButton, DKBottomActions },
 };
 </script>
 
@@ -45,14 +46,14 @@ export default {
       </p>
     </article>
   </div>
-  <p style="display: flex; column-gap: 0.5rem">
+  <DKBottomActions>
     <DKIconButton title="Firefox" explain="Web Browser">
       <img src="@/assets/web-browser-symbolic.svg" height="36" />
     </DKIconButton>
     <DKIconButton title="BGM" explain="Mute">
       <img src="@/assets/audio-volume-muted.svg" height="36" />
     </DKIconButton>
-  </p>
+  </DKBottomActions>
 </template>
 
 <style>

diff --git a/src/views/MirrorSelectView.vue b/src/views/MirrorSelectView.vue
@@ -0,0 +1,26 @@
+<script setup>
+import DKBottomActions from "@/components/DKBottomActions.vue";
+</script>
+
+<template>
+  <div>
+    <h1>Download Source</h1>
+    <section>
+      <p>
+        Below are a list of available mirrors to download AOSC OS from. You may
+        make selection based on the mirror's locationor by benchmarking them
+        using the "Benchmark..." button.
+      </p>
+      <div></div>
+    </section>
+  </div>
+  <DKBottomActions>
+    <button class="button">Benchmark...</button>
+  </DKBottomActions>
+</template>
+
+<style scoped>
+.error-msg {
+  color: var(--dk-accent);
+}
+</style>
diff --git a/src/views/MirrorView.vue b/src/views/MirrorView.vue
@@ -8,7 +8,9 @@
         Installer will now detect the fastest mirror to download AOSC OS from.
         If you would like to manual select a mirror, press "Customize..." below.
       </p>
-      <button class="button">Customize...</button>
+      <button class="button" @click="$router.push('/mirrors-sel')">
+        Customize...
+      </button>
     </section>
   </div>
 </template>

diff --git a/src/views/PartitionView.vue b/src/views/PartitionView.vue
@@ -1,5 +1,7 @@
 <script setup>
 import DKIconButton from "@/components/DKIconButton.vue";
+import DKBottomActions from "@/components/DKBottomActions.vue";
+import DKStepButtons from "@/components/DKStepButtons.vue";
 </script>
 
 <script>
@@ -21,7 +23,8 @@ export default {
     <section v-if="!new_disk">
       <p>
         Please select a partition as AOSC OS system partition. If you would like
-        to make changes to your partitions, please select "Open GParted..."
+        to make changes to your partitions, please select the "GParted" button
+        below.
       </p>
       <section></section>
     </section>
@@ -42,16 +45,14 @@ export default {
       </ul>
       <p>
         If you would like to partition the storage device yourself, please press
-        "Open GParted..." below.
-      </p>
-    </section>
-
-    <section>
-      <p style="display: flex">
-        <DKIconButton title="GParted" explain="Manange Partitions">
-          <img src="@/assets/drive-harddisk-root-symbolic.svg" height="36" />
-        </DKIconButton>
+        the "GParted" button below.
       </p>
     </section>
   </div>
+  <DKBottomActions>
+    <DKIconButton title="GParted" explain="Manange Partitions">
+      <img src="@/assets/drive-harddisk-root-symbolic.svg" height="36" />
+    </DKIconButton>
+    <DKStepButtons />
+  </DKBottomActions>
 </template>
diff --git a/src/views/SwapFileView.vue b/src/views/SwapFileView.vue
@@ -35,6 +35,14 @@ export default {
           </select>
         </p>
         <div></div>
+        <p v-if="type === 0" style="font-size: 0.9rem">
+          <i>Your system has 48GiB of RAM.</i>
+          <br />
+          <i
+            >Installer will create a swapfile of {{ rec_size }}GiB on your AOSC
+            OS system partition.</i
+          >
+        </p>
         <p class="error-msg" v-if="type === 2">
           <i>
             Running AOSC OS without a swapfile may cause instability at high
@@ -73,8 +81,8 @@ export default {
           GiB
         </span>
       </div>
-      <br />
       <p v-if="type === 1" style="font-size: 0.9rem; margin-left: 30%">
+        <br />
         <i>Your system has 48GiB of RAM.</i>
         <br />
         <i