running-tools

commit b48a52751015bc47bba3a392267eaa4dd9cca9ea
parent 5f11f8372a930fce7c7072d953b22d0ead7a9817
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Wed, 27 Dec 2023 19:01:04 -0800

Replace FullscreenModal with native dialog element

Diffstat:
M
src/assets/global.css
 | 
16
++++++++++++++--
M
src/assets/target-calculator.css
 | 
12
++++++++++++
D
src/components/FullscreenModal.vue
 | 
45
---------------------------------------------
M
src/components/TargetEditor.vue
 | 
8
+++++++-
M
src/components/TargetSetSelector.vue
 | 
16
+++++++++-------

5 files changed, 42 insertions(+), 55 deletions(-)
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -67,6 +67,15 @@ table .empty-message svg {
   padding: 0.3em;
 }
 
+/* styles for modals */
+dialog {
+  margin: auto;
+  border-radius: 5px;
+}
+dialog::backdrop {
+  background: #00000080;
+}
+
 /* styles for mobile devices */
 @media only screen and (max-width: 800px) {
   input, select, button {
@@ -75,10 +84,10 @@ table .empty-message svg {
 }
 
 /* element colors */
-body, input, select, button, option, .icon svg {
+body, input, select, button, option, .icon svg, dialog {
   color: var(--foreground);
 }
-body {
+body, dialog {
   background-color: var(--background1);
 }
 button, input, select, option, tr:nth-child(2n) {
@@ -95,6 +104,9 @@ button:active {
 button, input, select, tr {
   border: 1px solid var(--background5);
 }
+dialog {
+  border: 2px solid var(--background5);
+}
 a, .link {
   color: var(--link);
 }
diff --git a/src/assets/target-calculator.css b/src/assets/target-calculator.css
@@ -30,6 +30,18 @@ h2 {
   margin-left: 3px;
 }
 
+/* target set editor dialog */
+.target-set-editor-dialog {
+  width: min(100% - 2em, 400px);
+  max-height: min(100% - 2em, 815px);
+  margin-top: 100px;
+}
+@media only screen and (max-height: 800px) {
+  .target-set-editor-dialog {
+    margin-top: 1em;
+  }
+}
+
 /* calculator output */
 .output {
   min-width: 300px;
diff --git a/src/components/FullscreenModal.vue b/src/components/FullscreenModal.vue
@@ -1,45 +0,0 @@
-<template>
-  <div class="fullscreen-modal">
-    <div class="backdrop"></div>
-    <div class="content-container">
-      <div class="content">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FullscreenModal',
-};
-</script>
-
-<style scoped>
-.fullscreen-modal .backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background-color: #00000080;
-}
-.fullscreen-modal .content-container {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1010;
-  overflow: scroll;
-}
-
-.fullscreen-modal .content {
-  max-width: 500px;
-  margin: 75px auto 1em;
-  padding: 1em;
-  background-color: var(--background1);
-  border-radius: 10px;
-}
-</style>
diff --git a/src/components/TargetEditor.vue b/src/components/TargetEditor.vue
@@ -4,7 +4,7 @@
       <tr>
         <th>
           Edit
-          <input v-model="internalValue.name" placeholder="Target set name"/>
+          <input v-model="internalValue.name" placeholder="Target set label"/>
           <button class="icon" :title="isCustomSet ? 'Delete Target Set' : 'Revert Target Set'"
             @click="revert">
             <vue-feather :type="isCustomSet ? 'trash-2' : 'rotate-ccw'"/>
@@ -219,4 +219,10 @@ export default {
 .target-editor tfoot p {
   margin-top: 0.5em;
 }
+@media only screen and (max-width: 800px) {
+  /* leave space for revert button on mobile devices */
+  .target-editor th input {
+    width: 12em;
+  }
+}
 </style>
diff --git a/src/components/TargetSetSelector.vue b/src/components/TargetSetSelector.vue
@@ -7,15 +7,15 @@
       <option value="_new">[ Create New Target Set ]</option>
     </select>
 
-    <button class="icon" title="Edit Target Set" @click="editingTargetSets = true">
+    <button class="icon" title="Edit Target Set" @click="$refs.dialog.showModal()">
       <vue-feather type="edit"/>
     </button>
 
-    <fullscreen-modal v-show="editingTargetSets">
-      <target-editor @close="editingTargetSets = false" v-model="targetSets[internalValue]"
-        @revert="revertTargetSet(); editingTargetSets = false"
+    <dialog ref="dialog" class="target-set-editor-dialog">
+      <target-editor @close="$refs.dialog.close()" v-model="targetSets[internalValue]"
+        @revert="revertTargetSet(); $refs.dialog.close()"
         :isCustomSet="!internalValue.startsWith('_')"/>
-    </fullscreen-modal>
+    </dialog>
   </span>
 </template>
 
@@ -25,14 +25,12 @@ import VueFeather from 'vue-feather';
 import storage from '@/utils/localStorage';
 import targetUtils from '@/utils/targets';
 
-import FullscreenModal from '@/components/FullscreenModal.vue';
 import TargetEditor from '@/components/TargetEditor.vue';
 
 export default {
   name: 'TargetSetSelector',
 
   components: {
-    FullscreenModal,
     TargetEditor,
     VueFeather,
   },
@@ -133,6 +131,10 @@ export default {
       }
     },
   },
+
+  activated() {
+    this.targetSets = storage.get('target-sets', targetUtils.defaultTargetSets);
+  },
 };
 </script>