From bb32f3a935eb7dbcc2321aa6ae14845d42ec70d9 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Mon, 29 May 2023 16:34:07 +0200
Subject: [PATCH] Improve bottom action toolbar responsiveness [SCI-8550]

---
 .../stylesheets/shared/action_toolbar.scss    |  2 +-
 app/javascript/packs/vue/action_toolbar.js    |  1 +
 .../vue/components/action_toolbar.vue         | 33 ++++++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/shared/action_toolbar.scss b/app/assets/stylesheets/shared/action_toolbar.scss
index 7d75f18c0..8ce232d7e 100644
--- a/app/assets/stylesheets/shared/action_toolbar.scss
+++ b/app/assets/stylesheets/shared/action_toolbar.scss
@@ -21,7 +21,7 @@
   }
 }
 
-@media (max-width: 1000px) {
+.sn-action-toolbar--button-overflow {
   .sn-action-toolbar__button-text {
     display: none;
   }
diff --git a/app/javascript/packs/vue/action_toolbar.js b/app/javascript/packs/vue/action_toolbar.js
index d8d4ddcbc..f2ba89a82 100644
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@@ -5,6 +5,7 @@ import Vue from 'vue/dist/vue.esm';
 import ActionToolbar from '../../vue/components/action_toolbar.vue';
 
 Vue.use(TurbolinksAdapter);
+Vue.prototype.i18n = window.I18n;
 
 window.initActionToolbar = () => {
   if (window.actionToolbarComponent) return;
diff --git a/app/javascript/vue/components/action_toolbar.vue b/app/javascript/vue/components/action_toolbar.vue
index 4112fa62e..d6f6746ad 100644
--- a/app/javascript/vue/components/action_toolbar.vue
+++ b/app/javascript/vue/components/action_toolbar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="!paramsAreBlank" class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]" :style="`width: ${width}px; bottom: ${bottom}px;`">
+  <div v-if="!paramsAreBlank"
+       class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]"
+       :class="{ 'sn-action-toolbar--button-overflow': buttonOverflow }"
+       :style="`width: ${width}px; bottom: ${bottomOffset}px; transform: translateX(${leftOffset}px)`">
     <div class="sn-action-toolbar__actions flex">
       <div v-if="loading && !actions.length" class="sn-action-toolbar__action mr-1.5">
         <a class="btn btn-light"></a>
@@ -43,7 +46,9 @@
         loaded: false,
         loading: false,
         width: 0,
-        bottom: 0
+        bottomOffset: 0,
+        leftOffset: 0,
+        buttonOverflow: false
       }
     },
     created() {
@@ -56,11 +61,14 @@
         $.get(`${this.actionsUrl}?${new URLSearchParams(this.params).toString()}`, (data) => {
           this.actions = data.actions;
           this.loading = false;
+          this.setButtonOverflow();
         });
       }, 10);
     },
     mounted() {
-      this.setWidth();
+      this.$nextTick(this.setWidth);
+
+      $(window).on('scroll', this.setLeftOffset);
     },
     beforeDestroy() {
       delete window.actionToolbarComponent;
@@ -77,9 +85,26 @@
     methods: {
       setWidth() {
         this.width = $(this.$el).parent().width();
+        this.setButtonOverflow();
+      },
+      setButtonOverflow() {
+        // detects if the last action button is outside the toolbar container
+        this.buttonOverflow = false;
+
+        this.$nextTick(() => {
+          if (!this.$el.getBoundingClientRect) return;
+
+          let containerRect = this.$el.getBoundingClientRect();
+          let lastActionRect = document.querySelector('.sn-action-toolbar__action:last-child').getBoundingClientRect();
+
+          this.buttonOverflow = containerRect.left + containerRect.width < lastActionRect.left + lastActionRect.width;
+        });
+      },
+      setLeftOffset() {
+        this.leftOffset = -(window.pageXOffset || document.documentElement.scrollLeft);
       },
       setBottomOffset(pixels) {
-        this.bottom = pixels;
+        this.bottomOffset = pixels;
       },
       fetchActions(params) {
         this.loading = true;