feat(editor): Make highlighted data pane floating #10638
Merged
Conversation
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
n8n-assistant
bot
added
core
OlegIvaniv
requested changes
Sep 3, 2024
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
| position: absolute; | ||
| bottom: 0; | ||
| right: var(--spacing-xl); | ||
| transform: translate(0, 100%); |
There was a problem hiding this comment.
Why are we positioning it using transform? 🤔 Wouldn't this be easier?
.container {
z-index: 1;
position: absolute;
right: var(--spacing-xl);
top: var(--spacing-3xl);
max-height: calc(100vh - 250px);
width: 250px;There was a problem hiding this comment.
The parent container's height is not fixed, and may grow because of text wrapping e.g. when viewport is extremely narrow or enlarged font sizes. It seems it's safer to rely on parent's bottom coordinates.
| } | ||
| </style> | ||
|
|
||
| <style lang="scss" scoped> |
There was a problem hiding this comment.
Do we need to mix scoped and module styles? Why couldn't we just use module?
There was a problem hiding this comment.
I moved all styles to module, but had to add tags-container class onto the element, because it is defined globally in other files. Would be nice to refactor, but out of the scope of this PR.
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
|
@burivuhster Also just noticed: is it expected that I would see both floating and regular panel? |
…ExecutionAnnotationPanel.vue Co-authored-by: oleg <me@olegivaniv.com>
…ExecutionAnnotationPanel.vue Co-authored-by: oleg <me@olegivaniv.com>
…ExecutionAnnotationPanel.vue Co-authored-by: oleg <me@olegivaniv.com>
burivuhster
force-pushed
the
ai-301-make-highlighted-data-pane-floating
branch
from
bfd9a3e
to
b17bab3
Compare
burivuhster
changed the title
OlegIvaniv
reviewed
Sep 3, 2024
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
packages/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.vue
Outdated
Show resolved
Hide resolved
|
I've fixed onClickOutside when user clicks on canvas and also some vue prop warning as well |
|
Thanks, Oleg! |
n8n
|
||||||||||||||||||||||||||||
| Project |
n8n
|
| Branch Review |
ai-301-make-highlighted-data-pane-floating
|
| Run status |
|
| Run duration | 04m 52s |
| Commit |
|
| Committer | Eugene Molodkin |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
1
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
422
|
| View all changes introduced in this branch ↗︎ | |
|
✅ All Cypress E2E specs passed |
MiloradFilipovic
added a commit
that referenced
this pull request
Sep 5, 2024
* master: refactor(RabbitMQ Trigger Node): Improve type-safety, add tests, and fix issues with manual triggers (#10663) feat(editor): Add support for nodes with multiple main inputs in new canvas (no-changelog) (#10659) fix(editor): Set minimum zoom to 0 to allow fitting very large workflows in new canvas (no-changelog) (#10666) feat(editor): Change selection to be default canvas behaviour (no-changelog) (#10668) feat: More hints to nodes (#10565) fix(editor): Fix opening executions tab from a new, unsaved workflow (#10652) fix(AI Agent Node): Fix tools agent when using memory and Anthropic models (#10513) feat(editor): Make highlighted data pane floating (#10638) fix(editor): Fix workflow loading after switching to executions view in new canvas (no-changelog) (#10655) refactor(benchmark): Separate cloud env provisioning from running benchmarks (#10657) feat(core): Implement wrapping of regular nodes as AI Tools (#10641) refactor(editor): Remove Trial logic in personalization modal and port to script setup (#10649) fix(core): Declutter webhook insertion errors (#10650) feat: Reintroduce collaboration feature (#10602) feat(benchmark): Add scenario for expressions with Set node (#10647) feat(benchmark): Add benchmark scenario for binary files (#10648) build: Add `reset` script (#10627) feat(editor): Overhaul node insert position computation in new canvas (no-changelog) (#10637)
Merged
|
Got released with |
riascho
pushed a commit
that referenced
this pull request
Sep 23, 2024
Co-authored-by: oleg <me@olegivaniv.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Make annotation panel floating to save more canvas space
Related Linear tickets, Github issues, and Community forum posts
https://linear.app/n8n/issue/AI-301/make-highlighted-data-pane-floating
Review / Merge checklist
release/backport(if the PR is an urgent fix that needs to be backported)