Individual Workflow Template Page / Part I #2595
Conversation
…mplates, Responses, Interfaces, TemplateView, MarkdownViewer Component, Small Components in Design System, TemplateDetails Component
ivov
added
ui
ivov
changed the title
| <template> | ||
| <div :class="$style.wrapper" @click="$router.go(-1)"> | ||
| <font-awesome-icon :class="$style.icon" icon="arrow-left" /> | ||
| <n8n-text size="medium" color="text-base">Go back</n8n-text> |
There was a problem hiding this comment.
locale.baseText('goBack')
| width: fit-content; | ||
| margin-right: 4px; | ||
| padding: 3px 4px; | ||
| background-color: #dbdfe7; | ||
| border-radius: var(--border-radius-base); | ||
| font-size: 11px; |
There was a problem hiding this comment.
please use css variables wherever you can
There was a problem hiding this comment.
Done & updated :) Only for this background-color and font-size: 11px; we do not have css variables.
| margin-right: 8px; | ||
| color: #C6C8D0; |
There was a problem hiding this comment.
Done for the margin-right. Color is not present in the design system. :/
| <div ref="editor" :class="$style.markdown" v-html="getContent" /> | ||
| </template> | ||
|
|
||
| <script lang="ts"> |
There was a problem hiding this comment.
why is this not a component in the design system?
| }, | ||
| methods: { | ||
| numberFormater(num: number) { | ||
| return Math.abs(num) > 999 |
There was a problem hiding this comment.
can we move this to a helper file since we will be reusing this? also i think it needs to support m
| const module: Module<ITemplateState, IRootState> = { | ||
| namespaced: true, | ||
| state: { | ||
| template: {}, |
There was a problem hiding this comment.
in state we should support having multiple templates so that we can easily extend this to support search page...
so this should be mapping template ids to template objects
templates: {[id: string]: ITemplate}
| "buttons": { | ||
| "goBackButton": "Go back", | ||
| "useThisWorkflowButton": "Use this workflow" | ||
| }, | ||
| "details": { |
There was a problem hiding this comment.
not sure if we need this nesting here. @ivov can you give feedback here? this is the expected view
| setTimeout(() => { | ||
| this.$router.go(-1); | ||
| }, 2000); |
There was a problem hiding this comment.
might not be necessary here to go back
…eDetails component, Update CSS for GoBackButton
…ponse, Updated Mock Response
| @@ -37,7 +37,7 @@ export const BREAKPOINT_XL = 1920; | |||
|
|
|||
|
|
|||
| // templates | |||
| export const TEMPLATES_BASE_URL = `https://api.n8n.io/`; | |||
| export const TEMPLATES_BASE_URL = `https://api-staging.n8n.io/`; | |||
There was a problem hiding this comment.
Reminder to change this. Added api-staging for testing purpose
…sign-System, Implement Loading component into TemaplteView
…r body text, image, Changed Page background color, Updated Padding between blocks, Change Template Details width, Updated Padding in the whole page
…d paragraphs, Updated Templates Mock-up Data
…ags, Code, Label
…lace loading state for image
|
closed in favor of merging all template branches together |
N8N-2677 - Created Vuex Templates, Responses, Interfaces, TemplateView, MarkdownViewer Component, Small Components in Design System, TemplateDetails Component