forked from galaxyproject/galaxy
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request galaxyproject#18722 from jmchilton/markdown_help_2
Improvements to help terms & tool help.
- Loading branch information
Showing
27 changed files
with
658 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <script setup lang="ts"> | ||
| import { BPopover } from "bootstrap-vue"; | ||
| import HelpTerm from "./HelpTerm.vue"; | ||
| interface Props { | ||
| target: any; | ||
| term: string; | ||
| } | ||
| defineProps<Props>(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <BPopover :target="target" triggers="hover" placement="bottom"> | ||
| <HelpTerm :term="term" /> | ||
| </BPopover> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <script setup lang="ts"> | ||
| import { BAlert } from "bootstrap-vue"; | ||
| import { toRef } from "vue"; | ||
| import { useHelpForTerm } from "@/stores/helpTermsStore"; | ||
| import LoadingSpan from "@/components/LoadingSpan.vue"; | ||
| import ConfigurationMarkdown from "@/components/ObjectStore/ConfigurationMarkdown.vue"; | ||
| interface Props { | ||
| term: string; | ||
| } | ||
| const props = defineProps<Props>(); | ||
| const { loading, hasHelp, help } = useHelpForTerm(toRef(props, "term")); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div v-if="loading"> | ||
| <LoadingSpan message="Loading Galaxy help terms" /> | ||
| </div> | ||
| <div v-else-if="hasHelp"> | ||
| <ConfigurationMarkdown :markdown="help" :admin="true" /> | ||
| </div> | ||
| <div v-else> | ||
| <BAlert variant="error"> Something went wrong, no Galaxy help found for term or URI {{ term }}. </BAlert> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,18 @@ | ||
| <script setup> | ||
| import { useFormattedToolHelp } from "composables/formattedToolHelp"; | ||
| const props = defineProps({ | ||
| content: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }); | ||
| const { formattedContent } = useFormattedToolHelp(props.content); | ||
| <script setup lang="ts"> | ||
| import ToolHelpMarkdown from "./ToolHelpMarkdown.vue"; | ||
| import ToolHelpRst from "./ToolHelpRst.vue"; | ||
| defineProps<{ | ||
| format: string; | ||
| content: string; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="form-help form-text" v-html="formattedContent" /> | ||
| <span> | ||
| <ToolHelpMarkdown v-if="format == 'markdown'" :content="content" /> | ||
| <ToolHelpRst v-else-if="format == 'restructuredtext'" :content="content" /> | ||
| <div v-else class="form-help form-text"> | ||
| {{ content }} | ||
| </div> | ||
| </span> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "scss/theme/blue.scss"; | ||
| .form-help { | ||
| &:deep(h3) { | ||
| font-size: $h4-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h4) { | ||
| font-size: $h5-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h5) { | ||
| font-size: $h6-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h6) { | ||
| font-size: $h6-font-size; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <script setup lang="ts"> | ||
| import { computed, onMounted, ref } from "vue"; | ||
| import { markup } from "@/components/ObjectStore/configurationMarkdown"; | ||
| import { useFormattedToolHelp } from "@/composables/formattedToolHelp"; | ||
| import { getAppRoot } from "@/onload/loadConfig"; | ||
| import HelpPopover from "@/components/Help/HelpPopover.vue"; | ||
| const props = defineProps<{ | ||
| content: string; | ||
| }>(); | ||
| const markdownHtml = computed(() => markup(props.content ?? "", false)); | ||
| // correct links and header information... this should work the same between rst and | ||
| // markdown entirely I think. | ||
| const { formattedContent } = useFormattedToolHelp(markdownHtml); | ||
| const helpHtml = ref<HTMLDivElement>(); | ||
| interface InternalTypeReference { | ||
| element: HTMLElement; | ||
| term: string; | ||
| } | ||
| const internalHelpReferences = ref<InternalTypeReference[]>([]); | ||
| function setupPopovers() { | ||
| internalHelpReferences.value.length = 0; | ||
| if (helpHtml.value) { | ||
| const links = helpHtml.value.getElementsByTagName("a"); | ||
| Array.from(links).forEach((link) => { | ||
| if (link.href.startsWith("gxhelp://")) { | ||
| const uri = link.href.substr("gxhelp://".length); | ||
| internalHelpReferences.value.push({ element: link, term: uri }); | ||
| link.href = `${getAppRoot()}help/terms/${uri}`; | ||
| link.style.color = "inherit"; | ||
| link.style.textDecorationLine = "underline"; | ||
| link.style.textDecorationStyle = "dashed"; | ||
| } | ||
| }); | ||
| const imgs = helpHtml.value.getElementsByTagName("img"); | ||
| Array.from(imgs).forEach((img) => { | ||
| if (img.src.startsWith("gxstatic://")) { | ||
| const rest = img.src.substr("gxstatic://".length); | ||
| img.src = `${getAppRoot()}static/${rest}`; | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| onMounted(setupPopovers); | ||
| </script> | ||
|
|
||
| <template> | ||
| <span> | ||
| <!-- Disable v-html warning because we allow markdown generated HTML | ||
| in various places in the Galaxy interface. Raw HTML is not allowed | ||
| here because admin = false in the call to markup. | ||
| --> | ||
| <!-- eslint-disable-next-line vue/no-v-html --> | ||
| <div ref="helpHtml" v-html="formattedContent" /> | ||
| <span v-for="(value, i) in internalHelpReferences" v-bind:key="i"> | ||
| <HelpPopover :target="value.element" :term="value.term" /> | ||
| </span> | ||
| </span> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <script setup> | ||
| import { useFormattedToolHelp } from "composables/formattedToolHelp"; | ||
| const props = defineProps({ | ||
| content: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }); | ||
| const { formattedContent } = useFormattedToolHelp(props.content); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="form-help form-text" v-html="formattedContent" /> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "scss/theme/blue.scss"; | ||
| .form-help { | ||
| &:deep(h3) { | ||
| font-size: $h4-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h4) { | ||
| font-size: $h5-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h5) { | ||
| font-size: $h6-font-size; | ||
| font-weight: bold; | ||
| } | ||
| &:deep(h6) { | ||
| font-size: $h6-font-size; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.