Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[23.2] Tool panel views overflow bug #17112

Merged
merged 3 commits into from
Nov 30, 2023
+27 −5
Merged

[23.2] Tool panel views overflow bug #17112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d0c1d5
fix tool panel views overflow bug
ahmedhamidawan Nov 30, 2023
6053373
indicate that the tool panel view is being changed
ahmedhamidawan Nov 30, 2023
fb46224
indicated exactly _which_ panel is currently loading
ahmedhamidawan Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion client/src/components/Panels/Menus/PanelViewMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
right
block
no-caret
title="Show panel options"
:disabled="storeLoading"
:title="!storeLoading ? 'Show panel options' : 'Loading panel view'"
variant="link"
toggle-class="text-decoration-none"
role="menu"
Expand Down Expand Up @@ -58,6 +59,10 @@ export default {
currentPanelView: {
type: String,
},
storeLoading: {
type: Boolean,
default: false,
},
},
computed: {
defaultPanelView() {
Expand Down Expand Up @@ -99,3 +104,11 @@ export default {
},
};
</script>

<style lang="scss">
.dropdown-menu {
overflow: auto;
max-height: 50vh;
min-width: 100%;
}
</style>
17 changes: 13 additions & 4 deletions client/src/components/Panels/ToolPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@ const emit = defineEmits<{

const arePanelsFetched = ref(false);
const toolStore = useToolStore();
const { currentPanelView, defaultPanelView, isPanelPopulated, panelViews } = storeToRefs(toolStore);
const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panelViews } = storeToRefs(toolStore);

const loadingView = ref<string | undefined>(undefined);
const query = ref("");
const showAdvanced = ref(false);

Expand Down Expand Up @@ -70,6 +71,8 @@ watch(
const toolPanelHeader = computed(() => {
if (showAdvanced.value) {
return localize("Advanced Tool Search");
} else if (loading.value && loadingView.value) {
return localize(loadingView.value);
} else if (
currentPanelView.value !== "default" &&
panelViews.value &&
Expand Down Expand Up @@ -106,7 +109,9 @@ async function initializeTools() {
}

async function updatePanelView(panelView: string) {
loadingView.value = panelViews.value[panelView]?.name;
await toolStore.setCurrentPanelView(panelView);
loadingView.value = undefined;
}

function onInsertTool(toolId: string, toolName: string) {
Expand Down Expand Up @@ -134,21 +139,25 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
v-if="panelViews && Object.keys(panelViews).length > 1"
:panel-views="panelViews"
:current-panel-view="currentPanelView"
:store-loading="loading"
@updatePanelView="updatePanelView">
<template v-slot:panel-view-selector>
<div class="d-flex justify-content-between panel-view-selector">
<div>
<span
v-if="viewIcon"
v-if="viewIcon && !loading"
:class="['fas', `fa-${viewIcon}`, 'mr-1']"
data-description="panel view header icon" />
<Heading
id="toolbox-heading"
:class="!showAdvanced && toolPanelHeader !== 'Tools' && 'font-italic'"
h2
inline
size="sm"
>{{ toolPanelHeader }}
size="sm">
<span v-if="loading && loadingView">
<LoadingSpan :message="toolPanelHeader" />
</span>
<span v-else>{{ toolPanelHeader }}</span>
</Heading>
</div>
<div v-if="!showAdvanced" class="panel-header-buttons">
Expand Down
Loading