New design of CB: two modes #10814
New design of CB: two modes #10814
Conversation
farmaazon
requested review from
Frizi,
vitvakatu,
kazcw and
AdRiley
as code owners
There was a problem hiding this comment.
Since we are no longer identifying a suggestion match for the component as it is edited, when editing an existing component we won't have up-to-date information about what icon or visualization type are appropriate. This PR falls back to the generic values in that case, but IMO it would be better to use the node's initial values:
- I would expect edits that change the component type would be less common than smaller edits
- When we have already selected e.g. the table visualization for a node, switching to JSON when editing feels odd
| // Top (and left) margins are more important than bottom (and right) margins because the screen has controls across | ||
| // the top and on the left. | ||
| { x: inputArea.left - margins.left, y: panelsArea.top - margins.top }, | ||
| { x: area.left - margins.left, y: area.top - margins.top }, | ||
| // If the screen is very spacious, even the bottom right gets some breathing room. | ||
| { x: inputArea.right + margins.right, y: inputArea.bottom + vizHeight + margins.bottom }, | ||
| { x: area.right + margins.right, y: area.bottom + margins.bottom }, |
There was a problem hiding this comment.
While we're modifying this: When this logic was written, the big plus button was in the bottom left; it's in the bottom right now.
There was a problem hiding this comment.
There is, indeed, a higher margin on the left, but this is still useful to make space for component name (and circular menu),.
|
|
||
| const previewedSuggestionReturnType = computed(() => { | ||
| const id = previewed.value.suggestionId | ||
| const id = appliedSuggestion.value |
There was a problem hiding this comment.
Because appliedSuggestion is only set in component-browsing mode, when editing an existing component we will lack information to select the correct visualization type
| v-model="input.content.value" | ||
| class="component-editor" | ||
| :navigator="props.navigator" | ||
| :icon="selectedSuggestionIcon" |
There was a problem hiding this comment.
Generic icon when editing existing component?
Co-authored-by: Kaz Wesley <[email protected]>
…o wip/farmaazon/cb-modes
Pull Request Description
Fixes #10603
Screencast.from.2024-08-14.12-10-51.webm
What is not yet implemented: the filtering. That means that spaces keep their special meaning, and we still display modules and types.
The component list itself was refactored to a separate vue component.
The logic of default visualization type in preview changed a bit: as now there is no selected component, we remember with what suggestion have we switched to code edit mode.
Important Notes
Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.