From 38e48c919ad652208126506dd375f9eb988337dc Mon Sep 17 00:00:00 2001 From: Nick Lockhart Date: Tue, 9 Jan 2024 10:41:11 +1300 Subject: [PATCH] Calculate width of GIF button dynamically; It could be wider depending on font --- src/components/giphy-toolbar-item.js | 2 +- src/main.js | 52 ++++++++++++++++------------ 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/giphy-toolbar-item.js b/src/components/giphy-toolbar-item.js index f91fb0f..63b109f 100644 --- a/src/components/giphy-toolbar-item.js +++ b/src/components/giphy-toolbar-item.js @@ -2,7 +2,7 @@ import React from 'dom-chef' export default ( -
+
{ @@ -152,6 +129,35 @@ function addToolbarButton() { resetGiphyModals() } }) + + // Add a specific class if the form is in the review changes modal, or if it is in the review changes list + // Otherwise the GIF selection popover will not be visible. + if (reviewChangesModal !== null) { + reviewChangesModal.classList.add('ghg-in-review-changes-modal') + + // The Review changes modal sets an inline width of min(640px, 100vw - 2rem); + // our button takes up another 32px so we need to adjust the inline style to account for that, otherwise it's hidden. + const currentWidth = reviewChangesModal.style.width + + const trigger = select('.ghg-trigger', form) + // Calculate the width of the GIF button, so that we can adjust the toolbar min size to accommodate for it. + // Also add 8 px buffer + const triggerWidth = (trigger?.offsetWidth ?? 32) + 8 + + if (currentWidth.includes('px')) { + // Extracts the value from the string (e.g., 640 from "min(640px, 100vw - 2rem)") + const widthValue = Number.parseInt(currentWidth.match(/\d+/)[0], 10) + const modifiedWidth = currentWidth.replace( + widthValue + 'px', + `${widthValue + triggerWidth}px` + ) + reviewChangesModal.style.width = modifiedWidth + } + } + + if (reviewChangesList !== null) { + reviewChangesList.classList.add('ghg-in-review-changes-list') + } } }