From 50f5afbce1f2bc4dbd0ddf6c951c7e519dfc6ce3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 23:19:33 +0300
Subject: add and remove users to/from lists from their profile

---
 src/components/popover/popover.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

(limited to 'src/components/popover')

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d2af59fe..dd332c35 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -4,7 +4,7 @@ const Popover = {
     // Action to trigger popover: either 'hover' or 'click'
     trigger: String,
 
-    // Either 'top' or 'bottom'
+    // 'top', 'bottom', 'left', 'right'
     placement: String,
 
     // Takes object with properties 'x' and 'y', values of these can be
@@ -84,6 +84,8 @@ const Popover = {
       const anchorStyle = getComputedStyle(anchorEl)
       const topPadding = parseFloat(anchorStyle.paddingTop)
       const bottomPadding = parseFloat(anchorStyle.paddingBottom)
+      const rightPadding = parseFloat(anchorStyle.paddingRight)
+      const leftPadding = parseFloat(anchorStyle.paddingLeft)
 
       // Screen position of the origin point for popover = center of the anchor
       const origin = {
@@ -170,7 +172,7 @@ const Popover = {
       if (overlayCenter) {
         translateX = origin.x + horizOffset
         translateY = origin.y + vertOffset
-      } else {
+      } else if (this.placement !== 'right' && this.placement !== 'left') {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
@@ -189,6 +191,25 @@ const Popover = {
 
         const xOffset = (this.offset && this.offset.x) || 0
         translateX = origin.x + horizOffset + xOffset
+      } else {
+        // Default to whatever user wished with placement prop
+        let usingRight = this.placement !== 'left'
+
+        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // regardless of what placement value was. Then check if there's not space on top, and
+        // force to bottom, again regardless of what placement value was.
+        const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0)
+        const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0)
+        if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true
+        if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false
+
+        const xOffset = (this.offset && this.offset.x) || 0
+        translateX = usingRight
+          ? rightBoundary - xOffset - content.offsetWidth
+          : leftBoundary + xOffset
+
+        const yOffset = (this.offset && this.offset.y) || 0
+        translateY = origin.y + vertOffset + yOffset
       }
 
       this.styles = {
-- 
cgit v1.2.3-70-g09d2


From 63f35509a79b8e9bc8bc301852847cf952a6a01f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Aug 2022 13:26:05 +0300
Subject: improve submenu and improve icon buttons hover effects

---
 src/App.scss                                     | 10 ++++++++++
 src/components/popover/popover.vue               |  7 +++++++
 src/components/user_list_menu/user_list_menu.vue |  5 +++--
 src/panel.scss                                   |  9 +++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

(limited to 'src/components/popover')

diff --git a/src/App.scss b/src/App.scss
index 1f7a2b28..665d52ff 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -130,6 +130,16 @@ i[class*=icon-],
   color: var(--icon, $fallback--icon);
 }
 
+.button-unstyled:hover,
+a:hover {
+  i[class*=icon-],
+  .svg-inline--fa,
+  .iconLetter {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
 nav {
   z-index: var(--ZI_navbar);
   color: var(--topBarText);
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index bd59cade..623af8d2 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -126,6 +126,13 @@
       }
     }
 
+    &.-has-submenu {
+      .chevron-icon {
+        margin-right: 0.25rem;
+        margin-left: 2rem;
+      }
+    }
+
     &:active, &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index d8da16ea..06947ab7 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="UserListMenu">
     <Popover
-      trigger="click"
+      trigger="hover"
       placement="left"
       remove-padding
     >
@@ -22,9 +22,10 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item">
+        <button class="btn button-default dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
+            class="chevron-icon"
             size="lg"
             icon="chevron-right"
           />
diff --git a/src/panel.scss b/src/panel.scss
index 1022758a..2e769e27 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -147,6 +147,15 @@
     color: var(--panelLink, $fallback--link);
   }
 
+  .button-unstyled:hover,
+  a:hover {
+    i[class*=icon-],
+    .svg-inline--fa,
+    .iconLetter {
+      color: var(--panelText);
+    }
+  }
+
   .faint {
     background-color: transparent;
     color: $fallback--faint;
-- 
cgit v1.2.3-70-g09d2