opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15935 from guerler/flexpanel

Browse Source 
Convert legacy side panels to flex-compatible panels
This commit is contained in:
Dannon
2023-04-24 21:38:53 -04:00
committed by GitHub
parent 40854fdc83 bcb197388b
commit 3c2ee1f50c
33 changed files with 398 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ActivityBar/ActivityBar.vue
+3 -6
View File
@@ -2,6 +2,7 @@
import { useUserStore } from "@/stores/userStore";
import UploadItem from "./Items/UploadItem.vue";
import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
import ActivityItem from "./ActivityItem";
const userStore = useUserStore();
@@ -48,19 +49,15 @@ function onToggleSidebar(toggle) {
to="/user" />
</b-nav>
</div>
<div v-if="sidebarIsActive('search')" key="search" class="left-column">
<FlexPanel v-if="sidebarIsActive('search')" key="search" side="left" :collapsible="false">
<ToolBox />
</div>
</FlexPanel>
</div>
</template>
<style scoped lang="scss">
@import "theme/blue.scss";
.left-column {
width: 15rem;
}
.activity-bar {
background: $panel-bg-color;
width: 4rem;
client/src/components/Form/FormDisplay.vue
+2 -2
View File
@@ -193,9 +193,9 @@ export default {
if (!silent && inputId) {
const element = this.$el.querySelector(`[id='form-element-${inputId}']`);
if (element) {
const centerPanel = document.querySelector(".center-panel");
const centerPanel = document.querySelector("#center");
if (centerPanel) {
centerPanel.scrollTo(0, this.getOffsetTop(element));
centerPanel.scrollTo(0, this.getOffsetTop(element) - 50);
}
}
}
client/src/components/Form/FormGeneric.vue
+1 -1
View File
@@ -132,7 +132,7 @@ export default {
showMessage(message, variant = "success") {
this.messageText = message;
this.messageVariant = variant;
document.querySelector(".center-panel").scrollTop = 0;
document.querySelector("#center").scrollTop = 0;
},
},
};
client/src/components/Login/RegisterForm.vue
+2 -2
View File
@@ -60,8 +60,8 @@
>
</b-card-body>
</b-collapse>
<b-card-footer v-if="showLoginLink" v-localize>
Already have an account?
<b-card-footer v-if="showLoginLink">
<span v-localize>Already have an account?</span>
<a
id="login-toggle"
v-localize
client/src/components/Markdown/MarkdownEditor.vue
+8 -10
View File
@@ -1,11 +1,9 @@
<template>
<div>
<SidePanel id="left" side="left">
<template v-slot:panel>
<MarkdownToolBox :steps="steps" @onInsert="onInsert" />
</template>
</SidePanel>
<div id="center" class="workflow-markdown-editor">
<div id="columns" class="d-flex">
<FlexPanel side="left">
<MarkdownToolBox :steps="steps" @onInsert="onInsert" />
</FlexPanel>
<div id="center" class="overflow-auto w-100">
<div class="markdown-editor h-100">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
@@ -47,7 +45,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faQuestion } from "@fortawesome/free-solid-svg-icons";
import MarkdownToolBox from "./MarkdownToolBox";
import SidePanel from "components/Panels/SidePanel";
import FlexPanel from "components/Panels/FlexPanel";
import MarkdownHelp from "./MarkdownHelp";
Vue.use(BootstrapVue);
@@ -59,7 +57,7 @@ const FENCE = "```";
export default {
components: {
MarkdownToolBox,
SidePanel,
FlexPanel,
FontAwesomeIcon,
MarkdownHelp,
},
@@ -74,7 +72,7 @@ export default {
},
steps: {
type: Object,
required: true,
default: null,
},
title: {
type: String,
client/src/components/PageEditor/PageEditorMarkdown.vue
+22 -28
View File
@@ -1,32 +1,26 @@
<template>
<div id="columns">
<markdown-editor
:title="title"
:markdown-text="markdownText"
:markdown-config="contentData"
@onUpdate="onUpdate">
<template v-slot:buttons>
<b-button
id="save-button"
v-b-tooltip.hover.bottom
title="Save"
variant="link"
role="button"
@click="saveContent(false)">
<font-awesome-icon icon="save" />
</b-button>
<b-button
id="view-button"
v-b-tooltip.hover.bottom
title="Save & View"
variant="link"
role="button"
@click="saveContent(true)">
<font-awesome-icon icon="eye" />
</b-button>
</template>
</markdown-editor>
</div>
<markdown-editor :title="title" :markdown-text="markdownText" :markdown-config="contentData" @onUpdate="onUpdate">
<template v-slot:buttons>
<b-button
id="save-button"
v-b-tooltip.hover.bottom
title="Save"
variant="link"
role="button"
@click="saveContent(false)">
<font-awesome-icon icon="save" />
</b-button>
<b-button
id="view-button"
v-b-tooltip.hover.bottom
title="Save & View"
variant="link"
role="button"
@click="saveContent(true)">
<font-awesome-icon icon="eye" />
</b-button>
</template>
</markdown-editor>
</template>
<script>
client/src/components/Panels/FlexPanel.vue
+94 -21
View File
@@ -4,6 +4,10 @@ import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
import { useDraggable } from "@vueuse/core";
import { LastQueue } from "utils/promise-queue";
import { determineWidth } from "./utilities";
const lastQueue = new LastQueue(10);
library.add({
faChevronLeft,
@@ -11,7 +15,19 @@ library.add({
faGripLinesVertical,
});
const props = defineProps({
collapsible: {
type: Boolean,
default: true,
},
side: {
type: String,
default: "right",
},
});
const draggable = ref();
const root = ref();
const rangeWidth = [200, 300, 600];
const panelWidth = ref(rangeWidth[1]);
const show = ref(true);
@@ -21,11 +37,6 @@ const { position, isDragging } = useDraggable(draggable, {
exact: true,
});
watch(position, () => {
const newWidth = window.innerWidth - position.value.x;
panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
});
const style = computed(() => {
return show.value ? { width: `${panelWidth.value}px` } : null;
});
@@ -33,15 +44,30 @@ const style = computed(() => {
function toggle() {
show.value = !show.value;
}
/** Watch position changes and adjust width accordingly */
watch(position, () => {
lastQueue.enqueue(() => {
const rectRoot = root.value.getBoundingClientRect();
const rectDraggable = draggable.value.getBoundingClientRect();
panelWidth.value = determineWidth(
rectRoot,
rectDraggable,
rangeWidth[0],
rangeWidth[2],
props.side,
position.value.x
);
});
});
</script>
<template>
<div class="d-flex">
<div v-if="show" :id="side" ref="root" class="d-flex">
<div class="d-flex flex-column" :style="style">
<slot v-if="show" />
<div v-else class="flex-fill" />
<div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
<div v-if="show">
<slot />
<div v-if="side === 'right'" class="flex-panel-footer d-flex px-2 py-1">
<div id="right-drag">
<font-awesome-icon icon="grip-lines-vertical" />
<div
ref="draggable"
@@ -52,34 +78,81 @@ function toggle() {
}" />
</div>
<div class="flex-fill" />
<div>
<font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-right" />
<font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-left" />
<div class="interaction-area" @click="toggle" />
<div v-if="collapsible" class="cursor-pointer">
<font-awesome-icon icon="chevron-right" />
<div id="right-collapse" class="interaction-area" @click="toggle" />
</div>
</div>
<div v-else class="flex-panel-footer d-flex px-2 py-1">
<div v-if="collapsible" class="cursor-pointer">
<font-awesome-icon icon="chevron-left" />
<div id="left-collapse" class="interaction-area" @click="toggle" />
</div>
<div class="flex-fill" />
<div id="left-drag">
<font-awesome-icon icon="grip-lines-vertical" />
<div
ref="draggable"
class="interaction-area"
:class="{
'cursor-grab': !isDragging,
'cursor-grabbing': isDragging,
}" />
</div>
</div>
</div>
<div v-if="isDragging" class="interaction-overlay" />
</div>
<div v-else>
<div v-if="side === 'right'" class="flex-panel-right-expand cursor-pointer px-2 py-1">
<font-awesome-icon icon="chevron-left" />
<div id="right-expand" class="interaction-area" @click="toggle" />
</div>
<div v-else class="flex-panel-left-expand cursor-pointer px-2 py-1">
<font-awesome-icon icon="chevron-right" />
<div id="left-expand" class="interaction-area" @click="toggle" />
</div>
</div>
</template>
<style>
@import "theme/blue.scss";
.interaction-area {
margin: -1.5rem;
padding: 1.5rem;
position: absolute;
}
.cursor-grab {
cursor: grab;
}
.cursor-grabbing {
cursor: grabbing;
}
.flex-panel-expand {
background: $panel-footer-bg-color;
border: $border-default;
bottom: 0;
position: absolute;
z-index: 1;
}
.flex-panel-footer {
background: $panel-footer-bg-color;
}
.flex-panel-border {
border: $border-default;
.flex-panel-left-expand {
@extend .flex-panel-expand;
border-top-right-radius: $border-radius-base;
left: 0;
}
.flex-panel-right-expand {
@extend .flex-panel-expand;
border-top-left-radius: $border-radius-base;
right: 0;
}
.interaction-area {
margin: -1.5rem;
padding: 1.5rem;
position: absolute;
z-index: 2;
}
.interaction-overlay {
height: 100%;
position: fixed;
left: 0;
width: 100%;
}
</style>
client/src/components/Panels/SidePanel.vue
-115
View File
@@ -1,115 +0,0 @@
<template>
<div
:id="side"
class="unified-panel-outer-wrap"
:class="{ 'left-style': side === 'left', 'right-style': side === 'right' }"
:style="styles">
<slot name="panel">
<component :is="currentPanel" v-bind="currentPanelProperties" />
</slot>
<div class="unified-panel-footer">
<div
class="panel-collapse"
:class="{
left: side === 'left',
right: side === 'right',
hidden: !show,
}"
@click="toggle" />
<div class="drag" @mousedown="dragHandler" />
</div>
</div>
</template>
<script>
const MIN_PANEL_WIDTH = 160;
const MAX_PANEL_WIDTH = 800;
export default {
name: "SidePanel",
props: ["currentPanel", "currentPanelProperties", "side"],
data() {
return {
show: true,
width: 288,
};
},
computed: {
styles() {
const styles = {};
styles[this.side] = this.show ? "0" : `-${this.width}px`;
styles["width"] = this.width + "px";
return styles;
},
},
methods: {
dragHandler(e) {
const self = this;
const draggingLeft = this.side === "left";
const initialX = e.pageX;
const initialWidth = this.width;
function move(e) {
const delta = e.pageX - initialX;
let newWidth = draggingLeft ? initialWidth + delta : initialWidth - delta;
newWidth = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, newWidth));
self.resize(newWidth);
}
function moved() {
document.getElementById("dd-helper").style.display = "none";
document.getElementById("dd-helper").removeEventListener("mousemove", move);
document.getElementById("dd-helper").removeEventListener("mouseup", moved);
}
document.getElementById("dd-helper").style.display = "block";
document.getElementById("dd-helper").addEventListener("mousemove", move);
document.getElementById("dd-helper").addEventListener("mouseup", moved);
},
resize(newWidth) {
this.width = newWidth;
document.getElementById("center").style[this.side] = newWidth + "px";
},
toggle() {
this.show = !this.show;
if (this.show) {
document.getElementById("center").style.transition = `${this.side} 200ms linear`;
document.getElementById("center").style[this.side] = this.width + "px";
setTimeout(() => {
document.getElementById("center").style.transition = "";
}, 250);
} else {
document.getElementById("center").style.transition = `${this.side} 200ms linear`;
document.getElementById("center").style[this.side] = "0";
setTimeout(() => {
document.getElementById("center").style.transition = "";
}, 250);
}
},
hide(timeout = 250) {
this.show = false;
document.getElementById("center").style.transition = `${this.side} 200ms linear`;
document.getElementById("center").style[this.side] = "0";
setTimeout(() => {
document.getElementById("center").style.transition = "";
}, timeout);
},
},
};
</script>
<style scoped>
.collapsed {
position: absolute;
bottom: 0;
margin: 0;
}
.unified-panel-outer-wrap {
transition-property: left, right;
transition-duration: 200ms;
transition-timing-function: linear;
}
</style>
client/src/components/Panels/ToolBox.vue
-1
View File
@@ -5,7 +5,6 @@
<nav class="d-flex justify-content-between mx-3 my-2">
<h2 v-if="!showAdvanced" id="toolbox-heading" v-localize class="m-1 h-sm">Tools</h2>
<h2 v-else id="toolbox-heading" v-localize class="m-1 h-sm">Advanced Tool Search</h2>
<div class="panel-header-buttons">
<b-button-group>
<favorites-button v-if="!showAdvanced" :query="query" @onFavorites="onQuery" />
client/src/components/Panels/utilities.js
+13
View File
@@ -48,6 +48,19 @@ export function createWhooshQuery(filterSettings, panelView, toolbox) {
return query;
}
// Determines width given the root and draggable element, smallest and largest size and the current position
export function determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, direction, positionX) {
let newWidth = null;
if (direction === "right") {
const offset = rectRoot.left - rectDraggable.left;
newWidth = rectRoot.right - positionX - offset;
} else {
const offset = rectRoot.right - rectDraggable.left;
newWidth = positionX - rectRoot.left + offset;
}
return Math.max(minWidth, Math.min(maxWidth, newWidth));
}
// Given toolbox and search results, returns filtered tool results
export function filterTools(tools, results) {
let toolsResults = [];
client/src/components/Panels/utilities.test.js
+16 -2
View File
@@ -1,7 +1,21 @@
import toolsList from "components/ToolsView/testData/toolsList";
import { createWhooshQuery, filterTools, filterToolSections, normalizeTools, searchToolsByKeys } from "./utilities";
import {
createWhooshQuery,
determineWidth,
filterTools,
filterToolSections,
normalizeTools,
searchToolsByKeys,
} from "./utilities";
describe("test helpers in tool searching utilities and panel handling", () => {
it("panel width determination", () => {
const widthA = determineWidth({ left: 10, right: 200 }, { left: 90 }, 20, 200, "right", 160);
expect(widthA).toBe(120);
const widthB = determineWidth({ left: 30, right: 250 }, { left: 60 }, 30, 500, "left", 180);
expect(widthB).toBe(340);
});
describe("test helpers in tool searching utilities", () => {
it("test parsing helper that converts settings to whoosh query", async () => {
const settings = {
name: "Filter",
client/src/components/Tool/ToolForm.vue
+1 -1
View File
@@ -358,7 +358,7 @@ export default {
if ([true, "true"].includes(config.enable_tool_recommendations)) {
this.showRecommendation = true;
}
document.querySelector(".center-panel").scrollTop = 0;
document.querySelector("#center").scrollTop = 0;
}
},
(e) => {
client/src/components/Tour/TourStep.vue
-1
View File
@@ -53,7 +53,6 @@ export default {
methods: {
createStep() {
if (this.targetElement) {
this.targetElement.scrollIntoView({ behavior: "smooth" });
createPopper(this.targetElement, this.$refs["tour-element"], {
modifiers: [
{
client/src/components/Workflow/Editor/Index.vue
+127 -136
View File
@@ -1,5 +1,5 @@
<template>
<div id="columns" class="workflow-client">
<div v-if="isCanvas" id="columns" class="workflow-client d-flex">
<StateUpgradeModal :state-messages="stateMessages" />
<StateUpgradeModal
:state-messages="insertedStateMessages"
@@ -26,142 +26,136 @@
<b-form-textarea v-model="saveAsAnnotation" />
</b-form-group>
</b-modal>
<MarkdownEditor
v-if="!isCanvas"
:markdown-text="markdownText"
:markdown-config="markdownConfig"
:title="'Workflow Report: ' + name"
:steps="steps"
@onUpdate="onReportUpdate">
<template v-slot:buttons>
<b-button
id="workflow-canvas-button"
v-b-tooltip.hover.bottom
title="Return to Workflow"
variant="link"
role="button"
@click="onEdit">
<span class="fa fa-times" />
</b-button>
</template>
</MarkdownEditor>
<div v-show="isCanvas">
<SidePanel id="left" side="left">
<template v-slot:panel>
<ProviderAwareToolBoxWorkflow
:module-sections="moduleSections"
:data-managers="dataManagers"
:workflows="workflows"
@onInsertTool="onInsertTool"
@onInsertModule="onInsertModule"
@onInsertWorkflow="onInsertWorkflow"
@onInsertWorkflowSteps="onInsertWorkflowSteps" />
</template>
</SidePanel>
<div id="center" class="center-style workflow-center">
<FlexPanel side="left">
<ProviderAwareToolBoxWorkflow
:module-sections="moduleSections"
:data-managers="dataManagers"
:workflows="workflows"
@onInsertTool="onInsertTool"
@onInsertModule="onInsertModule"
@onInsertWorkflow="onInsertWorkflow"
@onInsertWorkflowSteps="onInsertWorkflowSteps" />
</FlexPanel>
<div id="center" class="workflow-center overflow-auto w-100">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<span class="sr-only">Workflow Editor</span>
{{ name }}
</div>
</div>
<workflow-graph
v-if="!datatypesMapperLoading"
:steps="steps"
:datatypes-mapper="datatypesMapper"
:highlight-id="highlightId"
:scroll-to-id="scrollToId"
@scrollTo="scrollToId = null"
@transform="(value) => (transform = value)"
@graph-offset="(value) => (graphOffset = value)"
@onUpdate="onUpdate"
@onClone="onClone"
@onCreate="onInsertTool"
@onChange="onChange"
@onConnect="onConnect"
@onRemove="onRemove"
@onUpdateStep="onUpdateStep"
@onUpdateStepPosition="onUpdateStepPosition">
</workflow-graph>
</div>
<FlexPanel side="right">
<div class="unified-panel workflow-panel">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<span class="sr-only">Workflow Editor</span>
{{ name }}
<WorkflowOptions
:has-changes="hasChanges"
:has-invalid-connections="hasInvalidConnections"
@onSave="onSave"
@onSaveAs="onSaveAs"
@onRun="onRun"
@onDownload="onDownload"
@onReport="onReport"
@onLayout="onLayout"
@onEdit="onEdit"
@onAttributes="onAttributes"
@onLint="onLint"
@onUpgrade="onUpgrade" />
</div>
</div>
<workflow-graph
v-if="!datatypesMapperLoading"
:steps="steps"
:datatypes-mapper="datatypesMapper"
:highlight-id="highlightId"
:scroll-to-id="scrollToId"
@scrollTo="scrollToId = null"
@transform="(value) => (transform = value)"
@graph-offset="(value) => (graphOffset = value)"
@onUpdate="onUpdate"
@onClone="onClone"
@onCreate="onInsertTool"
@onChange="onChange"
@onConnect="onConnect"
@onRemove="onRemove"
@onUpdateStep="onUpdateStep"
@onUpdateStepPosition="onUpdateStepPosition">
</workflow-graph>
</div>
<SidePanel id="right" side="right">
<template v-slot:panel>
<div class="unified-panel workflow-panel">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<WorkflowOptions
:has-changes="hasChanges"
:has-invalid-connections="hasInvalidConnections"
@onSave="onSave"
@onSaveAs="onSaveAs"
@onRun="onRun"
@onDownload="onDownload"
@onReport="onReport"
@onLayout="onLayout"
@onEdit="onEdit"
@onAttributes="onAttributes"
@onLint="onLint"
@onUpgrade="onUpgrade" />
</div>
</div>
<div ref="right-panel" class="unified-panel-body workflow-right p-2">
<div>
<FormTool
v-if="hasActiveNodeTool"
:key="activeStep.id"
:step="activeStep"
:datatypes="datatypes"
@onChangePostJobActions="onChangePostJobActions"
@onAnnotation="onAnnotation"
@onLabel="onLabel"
@onUpdateStep="onUpdateStep"
@onSetData="onSetData" />
<FormDefault
v-else-if="hasActiveNodeDefault"
:step="activeStep"
:datatypes="datatypes"
@onAnnotation="onAnnotation"
@onLabel="onLabel"
@onEditSubworkflow="onEditSubworkflow"
@onAttemptRefactor="onAttemptRefactor"
@onUpdateStep="onUpdateStep"
@onSetData="onSetData" />
<WorkflowAttributes
v-else-if="showAttributes"
:id="id"
:tags="tags"
:parameters="parameters"
:annotation-current.sync="annotation"
:annotation="annotation"
:name-current.sync="name"
:name="name"
:version="version"
:versions="versions"
:license="license"
:creator="creator"
@onVersion="onVersion"
@onLicense="onLicense"
@onCreator="onCreator" />
<WorkflowLint
v-else-if="showLint"
:untyped-parameters="parameters"
:annotation="annotation"
:creator="creator"
:license="license"
:steps="steps"
:datatypes-mapper="datatypesMapper"
@onAttributes="onAttributes"
@onHighlight="onHighlight"
@onUnhighlight="onUnhighlight"
@onRefactor="onAttemptRefactor"
@onScrollTo="onScrollTo" />
</div>
</div>
<div ref="right-panel" class="unified-panel-body workflow-right p-2">
<div>
<FormTool
v-if="hasActiveNodeTool"
:key="activeStep.id"
:step="activeStep"
:datatypes="datatypes"
@onChangePostJobActions="onChangePostJobActions"
@onAnnotation="onAnnotation"
@onLabel="onLabel"
@onUpdateStep="onUpdateStep"
@onSetData="onSetData" />
<FormDefault
v-else-if="hasActiveNodeDefault"
:step="activeStep"
:datatypes="datatypes"
@onAnnotation="onAnnotation"
@onLabel="onLabel"
@onEditSubworkflow="onEditSubworkflow"
@onAttemptRefactor="onAttemptRefactor"
@onUpdateStep="onUpdateStep"
@onSetData="onSetData" />
<WorkflowAttributes
v-else-if="showAttributes"
:id="id"
:tags="tags"
:parameters="parameters"
:annotation-current.sync="annotation"
:annotation="annotation"
:name-current.sync="name"
:name="name"
:version="version"
:versions="versions"
:license="license"
:creator="creator"
@onVersion="onVersion"
@onLicense="onLicense"
@onCreator="onCreator" />
<WorkflowLint
v-else-if="showLint"
:untyped-parameters="parameters"
:annotation="annotation"
:creator="creator"
:license="license"
:steps="steps"
:datatypes-mapper="datatypesMapper"
@onAttributes="onAttributes"
@onHighlight="onHighlight"
@onUnhighlight="onUnhighlight"
@onRefactor="onAttemptRefactor"
@onScrollTo="onScrollTo" />
</div>
</template>
</SidePanel>
</div>
</div>
</div>
</FlexPanel>
</div>
<MarkdownEditor
v-else
:markdown-text="markdownText"
:markdown-config="markdownConfig"
:title="'Workflow Report: ' + name"
:steps="steps"
@onUpdate="onReportUpdate">
<template v-slot:buttons>
<b-button
id="workflow-canvas-button"
v-b-tooltip.hover.bottom
title="Return to Workflow"
variant="link"
role="button"
@click="onEdit">
<span class="fa fa-times" />
</b-button>
</template>
</MarkdownEditor>
</template>
<script>
@@ -176,7 +170,7 @@ import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
import ProviderAwareToolBoxWorkflow from "@/components/Panels/ProviderAwareToolBoxWorkflow.vue";
import SidePanel from "@/components/Panels/SidePanel.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
import { getAppRoot } from "@/onload/loadConfig";
import reportDefault from "./reportDefault";
import WorkflowLint from "./Lint.vue";
@@ -199,7 +193,7 @@ import { useDatatypesMapper } from "@/composables/datatypesMapper";
export default {
components: {
MarkdownEditor,
SidePanel,
FlexPanel,
StateUpgradeModal,
ProviderAwareToolBoxWorkflow,
FormDefault,
@@ -732,9 +726,6 @@ export default {
};
</script>
<style scoped>
.workflow-markdown-editor {
right: 0px !important;
}
.reset-wheel {
position: absolute;
left: 1rem;
client/src/entry/analysis/modules/Admin.vue
+23 -34
View File
@@ -1,38 +1,27 @@
<script setup>
import { computed } from "vue";
import { useConfig } from "@/composables/config";
import AdminPanel from "@/components/admin/AdminPanel.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
const { config, isLoaded } = useConfig();
const panelProperties = computed(() => {
return {
enableQuotas: config.value.enable_quotas,
isToolshedInstalled: config.value.tool_shed_urls && config.value.tool_shed_urls.length > 0,
versionMajor: config.value.version_major,
};
});
</script>
<template>
<div id="columns">
<SidePanel side="left" :current-panel="getAdminPanel()" :current-panel-properties="panelProperties" />
<div id="center" class="center-style">
<div class="center-container">
<div class="center-panel" style="display: block">
<router-view :key="$route.fullPath" />
</div>
</div>
<div v-if="isLoaded" id="columns" class="d-flex">
<FlexPanel side="left">
<AdminPanel v-bind="panelProperties" />
</FlexPanel>
<div id="center" class="overflow-auto p-3 w-100">
<router-view :key="$route.fullPath" />
</div>
</div>
</template>
<script>
import { getGalaxyInstance } from "app";
import AdminPanel from "components/admin/AdminPanel";
import SidePanel from "components/Panels/SidePanel";
export default {
components: {
SidePanel,
},
computed: {
panelProperties() {
const config = getGalaxyInstance().config;
return {
enableQuotas: config.enable_quotas,
isToolshedInstalled: config.tool_shed_urls && config.tool_shed_urls.length > 0,
versionMajor: config.version_major,
};
},
},
methods: {
getAdminPanel() {
return AdminPanel;
},
},
};
</script>
client/src/entry/analysis/modules/Analysis.vue
+10 -21
View File
@@ -1,14 +1,13 @@
<script setup lang="ts">
<script setup>
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router/composables";
import { useUserStore } from "@/stores/userStore";
import HistoryIndex from "@/components/History/Index.vue";
import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
import SidePanel from "@/components/Panels/SidePanel.vue";
import ToolBox from "@/components/Panels/ProviderAwareToolBox";
import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
import FlexPanel from "@/components/Panels/FlexPanel.vue";
import CenterFrame from "./CenterFrame.vue";
import { useRoute, useRouter } from "vue-router/composables";
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useUserStore } from "@/stores/userStore";
const route = useRoute();
const router = useRouter();
@@ -49,8 +48,11 @@ onUnmounted(() => {
});
</script>
<template>
<div v-if="showActivityBar" id="columns" class="d-flex">
<ActivityBar v-if="showPanels" />
<div id="columns" class="d-flex">
<ActivityBar v-if="showPanels && showActivityBar" />
<FlexPanel v-if="showPanels && !showActivityBar" side="left">
<ToolBox />
</FlexPanel>
<div id="center" class="overflow-auto p-3 w-100">
<CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
<router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -60,17 +62,4 @@ onUnmounted(() => {
</FlexPanel>
<DragAndDropModal />
</div>
<div v-else id="columns">
<SidePanel v-if="showPanels" side="left" :current-panel="ToolBox" :current-panel-properties="{}" />
<div id="center" class="center-style">
<div class="center-container">
<CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
<div v-show="!showCenter" class="center-panel" style="display: block">
<router-view :key="$route.fullPath" class="h-100" />
</div>
</div>
</div>
<SidePanel v-if="showPanels" side="right" :current-panel="HistoryIndex" :current-panel-properties="{}" />
<DragAndDropModal />
</div>
</template>
client/src/entry/analysis/modules/Login.vue
+20 -26
View File
@@ -1,30 +1,24 @@
<template>
<div id="columns">
<div id="center" class="center-style">
<div class="center-container">
<div class="center-panel" style="display: block">
<ChangePassword
v-if="hasToken"
:expired-user="$route.query.expired_user"
:message-text="$route.query.message"
:message-variant="$route.query.status"
:token="$route.query.token" />
<LoginIndex
v-else
:allow-user-creation="config.allow_user_creation"
:enable-oidc="config.enable_oidc"
:mailing-join-addr="config.mailing_join_addr"
:prefer-custos-login="config.prefer_custos_login"
:redirect="$route.query.redirect"
:registration-warning-message="config.registration_warning_message"
:server-mail-configured="config.server_mail_configured"
:session-csrf-token="sessionCsrfToken"
:show-welcome-with-login="config.show_welcome_with_login"
:terms-url="config.terms_url"
:welcome-url="config.welcome_url" />
</div>
</div>
</div>
<div class="overflow-auto m-3">
<ChangePassword
v-if="hasToken"
:expired-user="$route.query.expired_user"
:message-text="$route.query.message"
:message-variant="$route.query.status"
:token="$route.query.token" />
<LoginIndex
v-else
:allow-user-creation="config.allow_user_creation"
:enable-oidc="config.enable_oidc"
:mailing-join-addr="config.mailing_join_addr"
:prefer-custos-login="config.prefer_custos_login"
:redirect="$route.query.redirect"
:registration-warning-message="config.registration_warning_message"
:server-mail-configured="config.server_mail_configured"
:session-csrf-token="sessionCsrfToken"
:show-welcome-with-login="config.show_welcome_with_login"
:terms-url="config.terms_url"
:welcome-url="config.welcome_url" />
</div>
</template>
client/src/style/scss/base.scss
-130
View File
@@ -80,7 +80,6 @@ body {
}
// ==== Page layout styles ====
.full-content {
@extend .m-0;
@extend .p-0;
@@ -127,58 +126,6 @@ body {
display: none;
}
// ==== Panel layout styles ====
.left-style,
.right-style {
@extend .position-absolute;
@extend .h-100;
}
.left-style {
@extend .unified-panel;
left: 0px;
width: $panel-width;
overflow: unset !important;
}
.right-style {
@extend .unified-panel;
right: 0px;
width: $panel-width;
overflow: unset !important;
}
.right-style > .unified-panel-footer {
.drag {
left: 0;
}
}
.center-style {
@extend .position-absolute;
@extend .h-100;
left: $panel-width;
right: $panel-width;
.center-container {
@extend .position-absolute;
@extend .w-100;
@extend .h-100;
.center-panel {
@extend .position-absolute;
@extend .w-100;
@extend .h-100;
@extend .overflow-auto;
display: none;
padding: $margin-h $margin-v;
background: $white;
}
}
// Replaces unnecessary if/then logic in base_panels.mako
&:first-child {
left: 0;
}
&:last-child {
right: 0;
}
}
// ==== Unified panel styles ====
.unified-panel {
display: flex;
@@ -245,84 +192,8 @@ body {
@extend .overflow-auto;
flex: 1;
}
.unified-panel-body-background {
background: none repeat scroll 0 0 $panel-bg-color;
}
.unified-panel-footer {
@extend .unselectable;
position: relative;
height: $panel_footer_height;
line-height: $panel_footer_height;
width: 100%;
background: $panel-footer-bg-color;
color: $panel-header-text-color;
a {
color: $panel-header-text-color;
}
.drag {
position: absolute;
top: 0;
right: 0;
padding: 0 5px;
text-align: center;
height: $panel_footer_height;
width: $panel_footer_height - 5;
background-image: url(../../assets/images/visualization/draggable_horizontal.png);
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: col-resize;
}
}
// Needs to be outside panel to show when hidden
.panel-collapse {
@extend .fa;
$border-color: darken($panel-footer-bg-color, 20%);
font-size: 4/3em;
cursor: pointer;
display: block;
position: fixed;
text-align: center;
height: $panel_footer_height;
line-height: $panel_footer_height;
width: $panel_footer_height;
background: $panel-footer-bg-color;
border: solid $panel-footer-bg-color 1px;
z-index: 1;
&.right {
right: 0;
border-top-left-radius: $border-radius-base;
line-height: inherit;
&:before {
content: "\f054";
}
&.hidden:before {
content: "\f053";
}
&.hidden {
border-top-color: $border-color;
border-left-color: $border-color;
}
}
&.left {
left: 0;
border-top-right-radius: $border-radius-base;
line-height: inherit;
&:before {
content: "\f053";
}
&.hidden:before {
content: "\f054";
}
&.hidden {
border-top-color: $border-color;
border-right-color: $border-color;
}
}
}
// State colors
$galaxy-state-border: (
"new": $state-default-border,
"upload": $state-info-border,
@@ -396,7 +267,6 @@ $galaxy-state-bg: (
}
// Button styles
button {
@extend .btn;
@extend .btn-secondary;
client/src/style/scss/toolshed.scss
+1 -1
View File
@@ -20,7 +20,7 @@
}
}
.masthead-toolshed {
.masthead-simple {
background-color: $brand-dark;
height: $masthead-height;
.navbar-brand {
client/src/utils/navigation/navigation.yml
+4 -4
View File
@@ -12,10 +12,10 @@ _: # global stuff
editable_text: '.editable-text'
tooltip_balloon: '.tooltip'
tooltip_inner: .tooltip-inner
left_panel_drag: '#left > .unified-panel-footer > .drag'
left_panel_collapse: '#left > .unified-panel-footer > .panel-collapse'
right_panel_drag: '#right > .unified-panel-footer > .drag'
right_panel_collapse: '#right > .unified-panel-footer > .panel-collapse'
left_panel_drag: '#left-drag'
left_panel_collapse: '#left-collapse'
right_panel_drag: '#right-drag'
right_panel_collapse: '#right-collapse'
by_attribute: '${scope} [${name}="${value}"]'
messages:
config/plugins/tours/core.deferred.yaml
+1 -1
View File
@@ -65,7 +65,7 @@ steps:
- title: State Indicator
component: history_panel.item(hid=1,state=deferred).state_icon
intro: This cloud icon indicates the dataset is deferred. Click to exapnd the dataset.
intro: This cloud icon indicates the dataset is deferred. Click to expand the dataset.
postclick: true
- title: A Note About Datatype/Format
config/plugins/tours/core.galaxy_ui.yaml
+17 -2
View File
@@ -118,8 +118,23 @@ steps:
intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
- title: "Panel collapse"
element: "#left > div.unified-panel-footer > div.panel-collapse.left"
intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
element: "#left-collapse"
intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side."
postclick: true
- title: "Panel expand"
element: "#left-expand"
intro: "Click on the expansion icon to restore the panel."
postclick: true
- title: "Panel collapse"
element: "#right-collapse"
intro: "Clicking the panel arrow on the right hand side, collapses the history."
postclick: true
- title: "Panel expand"
element: "#right-expand"
intro: "Click on the expansion icon to restore the panel."
postclick: true
- title: "Top panel"
lib/tool_shed/webapp/templates/base/base_panels.mako
+5 -19
View File
@@ -3,7 +3,6 @@
<%
self.has_left_panel = hasattr( self, 'left_panel' )
self.has_right_panel = hasattr( self, 'right_panel' )
self.message_box_visible = app.config.message_box_visible
self.show_inactivity_warning = False
self.overlay_visible=False
@@ -171,30 +170,17 @@
${self.overlay(visible=self.overlay_visible)}
<div id="columns">
<div id="columns" class="d-flex">
%if self.has_left_panel:
<div id="left">
${self.left_panel()}
<div class="unified-panel-footer">
<div id="left-panel-collapse" class="panel-collapse left"></div>
<div id="left-panel-drag" class="drag"></div>
</div>
</div><!--end left-->
</div>
%endif
<div id="center" class="inbound">
${self.center_panel()}
</div><!--end center-->
%if self.has_right_panel:
<div id="right">
${self.right_panel()}
<div class="unified-panel-footer">
<div id="right-panel-collapse" class="panel-collapse right"></div>
<div id="right-panel-drag" class="drag"></div>
</div>
</div><!--end right-->
%endif
</div><!--end columns-->
</div><!--end everything-->
</div>
</div>
</div>
<div id='dd-helper' style="display: none;"></div>
## Allow other body level elements
lib/tool_shed/webapp/templates/message.mako
-1
View File
@@ -22,7 +22,6 @@
<%def name="init()">
<%
self.has_left_panel=False
self.has_right_panel=False
self.active_view=active_view
self.message_box_visible=False
%>
lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
+2 -3
View File
@@ -18,7 +18,6 @@
${parent.init()}
<%
self.has_left_panel=True
self.has_right_panel=False
self.active_view="tools"
%>
%if trans.app.config.require_login and not trans.user:
@@ -34,7 +33,7 @@
<div class="unified-panel-header" unselectable="on">
<div class='unified-panel-header-inner'>Administration</div>
</div>
<div class="unified-panel-body">
<div style="padding: 0.5rem;">
<div class="toolMenu">
<div class="toolSectionList">
<div class="toolSectionTitle">
@@ -102,5 +101,5 @@
<%
center_url = h.url_for(controller='admin', action='center' )
%>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
</%def>
lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
+1 -1
View File
@@ -56,7 +56,7 @@
%endif
## start main tag
<nav id="masthead" class="masthead-toolshed navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
<nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
## Logo, layered over tabs to be clickable
<a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
+2 -3
View File
@@ -15,7 +15,6 @@
${parent.init()}
<%
self.has_left_panel=True
self.has_right_panel=False
self.active_view="tools"
%>
%if trans.app.config.require_login and not trans.user:
@@ -31,7 +30,7 @@
<div class="unified-panel-header" unselectable="on">
<div class='unified-panel-header-inner'>${trans.app.shed_counter.unique_valid_tools | h} valid tools on ${util.unicodify( trans.app.shed_counter.generation_time ) | h}</div>
</div>
<div class="unified-panel-body">
<div style="padding: 0.5rem;">
<div class="toolMenu">
<div class="toolSectionList">
%if user_id or repository_id:
@@ -158,5 +157,5 @@
else:
center_url = h.url_for( controller='repository', action='browse_categories', message=message, status=status )
%>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"></iframe>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"></iframe>
</%def>
lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
-1
View File
@@ -12,7 +12,6 @@ def inherit(context):
<%def name="init()">
<%
self.has_left_panel=False
self.has_right_panel=False
self.active_view=active_view
self.message_box_visible=False
%>
lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
-1
View File
@@ -14,7 +14,6 @@ def inherit(context):
<%def name="init()">
<%
self.has_left_panel=False
self.has_right_panel=False
self.message_box_visible=False
self.active_view="user"
self.overlay_visible=False
lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
-1
View File
@@ -4,7 +4,6 @@
<%def name="init()">
<%
self.has_left_panel=False
self.has_right_panel=False
self.active_view="user"
self.message_box_visible=False
%>
templates/base/base_panels.mako
+9 -19
View File
@@ -142,10 +142,8 @@
<div id="background"></div>
## Layer iframes over backgrounds
<div id="masthead" class="navbar navbar-fixed-top navbar-inverse">
${self.masthead()}
</div>
${self.masthead()}
%if self.message_box_visible:
<div id="messagebox" class="alert alert-${app.config.message_box_class} rounded-0 m-0 p-2">
${app.config.message_box_content}
@@ -160,30 +158,22 @@
${self.overlay(visible=self.overlay_visible)}
<div id="columns">
<div id="columns" class="d-flex">
%if self.has_left_panel:
<div id="left">
<div id="left" style="overflow: auto;">
${self.left_panel()}
<div class="unified-panel-footer">
<div id="left-panel-collapse" class="panel-collapse left"></div>
<div id="left-panel-drag" class="drag"></div>
</div>
</div><!--end left-->
</div>
%endif
<div id="center" class="inbound">
${self.center_panel()}
</div><!--end center-->
</div>
%if self.has_right_panel:
<div id="right">
${self.right_panel()}
<div class="unified-panel-footer">
<div id="right-panel-collapse" class="panel-collapse right"></div>
<div id="right-panel-drag" class="drag"></div>
</div>
</div><!--end right-->
</div>
%endif
</div><!--end columns-->
</div><!--end everything-->
</div>
</div>
<div id='dd-helper' style="display: none;"></div>
## Allow other body level elements
templates/webapps/reports/base_panels.mako
+12 -28
View File
@@ -17,32 +17,16 @@
## Masthead
<%def name="masthead()">
## Tab area, fills entire width
<div style="position: absolute; top: 0; left: 0; width: 100%; text-align: center">
<table class="tab-group" border="0" cellspacing="0" style="margin: auto;">
<tr>
<%def name="tab( id, display, href, target='_parent', visible=True, extra_class='' )">
<%
cls = "tab"
if extra_class:
cls += " " + extra_class
if self.active_view == id:
cls += " active"
style = ""
if not visible:
style = "display: none;"
%>
<td class="${cls}" style="${style}"><a target="${target}" href="${href}">${display}</a></td>
</%def>
</tr>
</table>
</div>
## Logo, layered over tabs to be clickable
<a class="navbar-brand" href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
<img class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}" />
<span class="navbar-brand-title">Galaxy Reports</span>
%if app.config.brand:
<span class='brand'>/ ${app.config.brand}</span>
%endif
</a>
<nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
<a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
<img alt="logo" class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}">
<span class="navbar-brand-title">
Reports
%if app.config.brand:
/ ${app.config.brand}
%endif
</span>
</a>
<ul class="navbar-nav"/>
</nav>
</%def>
templates/webapps/reports/index.mako
+2 -2
View File
@@ -35,7 +35,7 @@
</a>
</div>
</div>
<div class="unified-panel-body">
<div style="padding: 0.5rem;">
<div class="toolMenu">
<div class="toolSectionList">
<div class="toolSectionPad"></div>
@@ -121,5 +121,5 @@
<%def name="center_panel()">
<% center_url = h.url_for( controller='home', action='run_stats' ) %>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
<iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
</%def>