From 6431a736d41abd14805b73688101b0043805e2b4 Mon Sep 17 00:00:00 2001 From: Martin Cech <marten@bx.psu.edu> Date: Thu, 14 Mar 2024 15:24:15 -0700 Subject: [PATCH] fix overflowing and hiding of storage popovers - wrap content in a width-limited element - add window boundary to storage popovers --- .../CurrentHistory/PreferredStorePopover.vue | 40 +++++++++++-------- .../ToolTargetPreferredObjectStorePopover.vue | 37 ++++++++++------- ...kflowTargetPreferredObjectStorePopover.vue | 36 +++++++++++------ 3 files changed, 68 insertions(+), 45 deletions(-) diff --git a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue index 9ea39503c6bc..ff28f962fba7 100644 --- a/client/src/components/History/CurrentHistory/PreferredStorePopover.vue +++ b/client/src/components/History/CurrentHistory/PreferredStorePopover.vue @@ -22,24 +22,30 @@ const preferredObjectStoreId = computed(() => { </script> <template> - <BPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft"> + <BPopover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft" boundary="window"> <template v-slot:title>Preferred Target Object Store</template> - - <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited"> - This target object store has been set at the history level. - </p> - <p v-else class="history-preferred-object-store-not-inherited"> - This target object store has been inherited from your user preferences (set in User -> Preferences -> - Preferred Object Store). If that option is updated, this history will target that new default. - </p> - - <ShowSelectedObjectStore - v-if="preferredObjectStoreId" - :preferred-object-store-id="preferredObjectStoreId" - for-what="Galaxy will default to storing this history's datasets in " /> - - <div v-localize> - Change this preference object store target by clicking on the storage button in the history panel. + <div class="popover-wide"> + <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited"> + This target object store has been set at the history level. + </p> + <p v-else class="history-preferred-object-store-not-inherited"> + This target object store has been inherited from your user preferences (set in User -> Preferences -> + Preferred Object Store). If that option is updated, this history will target that new default. + </p> + + <ShowSelectedObjectStore + v-if="preferredObjectStoreId" + :preferred-object-store-id="preferredObjectStoreId" + for-what="Galaxy will default to storing this history's datasets in " /> + + <div v-localize> + Change this preference object store target by clicking on the storage button in the history panel. + </div> </div> </BPopover> </template> +<style scoped lang="scss"> +.popover-wide { + max-width: 30rem; +} +</style> diff --git a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue index b1d63c44c3c6..bdf4264144e2 100644 --- a/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue +++ b/client/src/components/Tool/ToolTargetPreferredObjectStorePopover.vue @@ -1,20 +1,22 @@ <template> - <b-popover target="tool-storage" triggers="hover" placement="bottomleft"> + <b-popover target="tool-storage" triggers="hover" placement="bottomleft" boundary="window"> <template v-slot:title>{{ title }}</template> - <p v-if="toolPreferredObjectStoreId"> - This target object store has been set at the tool level, by default history or user preferences will be used - and if those are not set Galaxy will pick an adminstrator configured default. - </p> - <ShowSelectedObjectStore - v-if="toolPreferredObjectStoreId" - :preferred-object-store-id="toolPreferredObjectStoreId" - for-what="Galaxy will default to storing this tool run's output in"> - </ShowSelectedObjectStore> - <div v-else> - No selection has been made for this tool execution. Defaults from history, user, or Galaxy will be used. - </div> - <div v-localize> - Change this preference object store target by clicking on the storage button in the tool header. + <div class="popover-wide"> + <p v-if="toolPreferredObjectStoreId"> + This target object store has been set at the tool level, by default history or user preferences will be + used and if those are not set Galaxy will pick an adminstrator configured default. + </p> + <ShowSelectedObjectStore + v-if="toolPreferredObjectStoreId" + :preferred-object-store-id="toolPreferredObjectStoreId" + for-what="Galaxy will default to storing this tool run's output in"> + </ShowSelectedObjectStore> + <div v-else> + No selection has been made for this tool execution. Defaults from history, user, or Galaxy will be used. + </div> + <div v-localize> + Change this preference object store target by clicking on the storage button in the tool header. + </div> </div> </b-popover> </template> @@ -33,3 +35,8 @@ export default { }, }; </script> +<style scoped lang="scss"> +.popover-wide { + max-width: 30rem; +} +</style> diff --git a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue index 197e2968a0ab..b78eb8db9255 100644 --- a/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue +++ b/client/src/components/Workflow/Run/WorkflowTargetPreferredObjectStorePopover.vue @@ -1,18 +1,22 @@ <template> - <b-popover :target="target" triggers="hover" placement="bottomleft"> + <b-popover :target="target" triggers="hover" placement="bottomleft" boundary="window"> <template v-slot:title>{{ title }}</template> - <p v-if="invocationPreferredObjectStoreId">This target object store has been set at the invocation level.</p> - <ShowSelectedObjectStore - v-if="invocationPreferredObjectStoreId" - :preferred-object-store-id="invocationPreferredObjectStoreId" - for-what="Galaxy will default to storing this tool run's output in"> - </ShowSelectedObjectStore> - <div v-else> - No selection has been made for this worklfow invocation. Defaults from history, user, or Galaxy will be - used. - </div> - <div v-localize> - Change this preference object store target by clicking on the storage button in the worklfow run header. + <div class="popover-wide"> + <p v-if="invocationPreferredObjectStoreId"> + This target object store has been set at the invocation level. + </p> + <ShowSelectedObjectStore + v-if="invocationPreferredObjectStoreId" + :preferred-object-store-id="invocationPreferredObjectStoreId" + for-what="Galaxy will default to storing this tool run's output in"> + </ShowSelectedObjectStore> + <div v-else> + No selection has been made for this worklfow invocation. Defaults from history, user, or Galaxy will be + used. + </div> + <div v-localize> + Change this preference object store target by clicking on the storage button in the worklfow run header. + </div> </div> </b-popover> </template> @@ -34,3 +38,9 @@ export default { }, }; </script> + +<style scoped lang="scss"> +.popover-wide { + max-width: 30rem; +} +</style>