From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 src/components/popover/popover.vue | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2869d736..fd0fd821 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -41,7 +41,7 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .popover-trigger-button {
   display: inline-block;
@@ -52,31 +52,31 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
   box-shadow: var(--popupShadow);
 }
 
 .popover-default {
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
     box-shadow: var(--panelShadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--text;
   color: var(--popoverText, $fallback--text);
+
   --faint: var(--popoverFaintText, $fallback--faint);
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
@@ -87,7 +87,7 @@
 
 .dropdown-menu {
   display: block;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -97,7 +97,7 @@
 
   .dropdown-divider {
     height: 0;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
     overflow: hidden;
     border-top: 1px solid $fallback--border;
     border-top: 1px solid var(--border, $fallback--border);
@@ -113,7 +113,7 @@
     text-align: inherit;
     white-space: nowrap;
     border: none;
-    border-radius: 0px;
+    border-radius: 0;
     background-color: transparent;
     box-shadow: none;
     width: 100%;
@@ -126,7 +126,7 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon)
+        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -137,17 +137,21 @@
       }
     }
 
-    &:active, &:hover {
+    &:active,
+    &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
       box-shadow: none;
+
       --btnText: var(--selectedMenuPopoverText, $fallback--link);
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+
       svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
+
         --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
@@ -161,16 +165,16 @@
       max-height: 22px;
       line-height: 22px;
       text-align: center;
-      border-radius: 0px;
+      border-radius: 0;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
-        content: '✓';
+        content: "✓";
       }
 
       &.-radio {
@@ -178,16 +182,15 @@
 
         &.menu-checkbox-checked::after {
           font-size: 2em;
-          content: '•';
+          content: "•";
         }
       }
     }
-
   }
 
   .button-default.dropdown-item {
     &,
-    i[class*=icon-] {
+    i[class*="icon-"] {
       color: $fallback--text;
       color: var(--btnText, $fallback--text);
     }
-- 
cgit v1.2.3-70-g09d2


From b79f297692eeca5e774a1dd124cec2b3bc41b977 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 22:04:05 +0300
Subject: fix double pushbuttons in the draft buttons

---
 src/components/popover/popover.js                  |  3 ++
 src/components/popover/popover.vue                 |  3 +-
 .../settings_modal/helpers/draft_buttons.vue       | 40 +++++++---------------
 3 files changed, 18 insertions(+), 28 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266b..bc078533 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,6 +45,9 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821..1a4bffd9 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,8 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 80da92e8..fd6d50e3 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -7,18 +7,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
+      @click="$parent.commitDraft"
       :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.commit_value')"
-          @click="$parent.commitDraft"
-        >
-          {{ $t('settings.commit_value') }}
-        </button>
+        {{ $t('settings.commit_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -29,18 +23,12 @@
     <Popover
       v-if="$parent.isDirty"
       trigger="hover"
+      normal-button
       :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+      @click="$parent.reset"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.reset_value')"
-          @click="$parent.reset"
-        >
-          {{ $t('settings.reset_value') }}
-        </button>
+        {{ $t('settings.reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -51,18 +39,12 @@
     <Popover
       v-if="$parent.canHardReset"
       trigger="hover"
+      normal-button
+      @click="$parent.hardReset"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
-        &nbsp;
-        <button
-          class="button button-default btn"
-          type="button"
-          :title="$t('settings.hard_reset_value')"
-          @click="$parent.hardReset"
-        >
-          {{ $t('settings.hard_reset_value') }}
-        </button>
+        {{ $t('settings.hard_reset_value') }}
       </template>
       <template #content>
         <div class="modified-tooltip">
@@ -92,6 +74,10 @@ export default {
 .DraftButtons {
   display: inline-block;
   position: relative;
+
+  .button-default {
+    margin-left: 0.5em;
+  }
 }
 
 .draft-tooltip {
-- 
cgit v1.2.3-70-g09d2