Implement full wheel component menu #9029
Conversation
MichaelMauderer
added
CI: No changelog needed
MichaelMauderer
requested review from
Frizi,
farmaazon,
vitvakatu and
kazcw
as code owners
…Menu.-Replace-Component-Menu-documentation-icon-with-an-edit-icon
| isFullMenuVisible: boolean | ||
| }>() | ||
| const emit = defineEmits<{ | ||
| 'update:isOutputContextOverridden': [isOutputContextOverridden: boolean] | ||
| 'update:isDocsVisible': [isDocsVisible: boolean] | ||
| 'update:isVisualizationVisible': [isVisualizationVisible: boolean] | ||
| startEditing: [] | ||
| openFullMenu: [] |
There was a problem hiding this comment.
I think the "full menu visible" could be v-model also, similarly to isVisualizaitonVisible, isDocsVisible and all others.
So, not openFullMenu but update:isFullMenuVisible
There was a problem hiding this comment.
This was actually no longer used, so is just removed now.
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
Do we have to repeat properties in .CircularMenuPartial and .CircularMenuFull? @Frizi @somebody1234 any thoughts?
There was a problem hiding this comment.
These are not the same thing, they are two different pseudo-elements that contain the graphics for the full and partial background. Only one is used depending on which state the menu is in, and as far as I can tell, they need their respective properties. The only thing shared between them is the fact that they have 100% width and height, and I'm not sure if that's worth factoring out.
There was a problem hiding this comment.
Hmm, I just see more than a width: also height, backdrop-filter, background, content and position. Is there a reason we make it using pseudo-elements instead of normal element under the icons?
There was a problem hiding this comment.
For one, this was how it was implemented in the first place by @somebody1234. And my understanding is, that this allows the structure of the HTML to be simpler and has purely visual things in CSS instead of HTML.
There was a problem hiding this comment.
yeah. for me it's mostly a habit from the dashboard needing backdrop-filter: blur in a lot of places.
that said, it should be possible to use :is(.Foo, .Bar) for the properties that are common between the two.
alternatively you could do .CircularMenu.partial and .CircularMenu.full instead, and use .CircularMenu for the properties in common.
something like this might work:
.CircularMenu {
&:before {
/* shared properties here */
&.partial {
}
&.full {
}
}
}| } | ||
|
|
||
| .output-context-overridden { | ||
| opacity: 100%; | ||
| color: red; | ||
| } | ||
|
|
||
| .docs-button { | ||
| .slot1 { |
There was a problem hiding this comment.
Please, add a comment how the slots are placed in the menu. Is Slot1 the bottom most, or leftmost? Are they numbered clockwise, or counterclockwise?
| &:after { | ||
| content: '...'; | ||
| font-size: 15px; | ||
| display: block; | ||
| text-align: center; | ||
| z-index: 10000; | ||
| margin-top: -10px; | ||
| opacity: 0.3; | ||
| } |
There was a problem hiding this comment.
Cannot these three dots be just a content of .More? And I don't see any usage of this class.
There was a problem hiding this comment.
This is a pseudo-element, so it creates a dummy element that is rendered as a child of the element with the .More class. This allows the text to be styled and placed separately.
MichaelMauderer
added
the
CI: Ready to merge
mergify
bot
deleted the
wip/MichaelMauderer/Full-Wheel-Component-Menu.-Replace-Component-Menu-documentation-icon-with-an-edit-icon
branch
Pull Request Description
Closes #8612.
Peek.2024-02-12.14-11.webm
Important Notes
The
...menu was added at the top of the menu as there is less visual interference with an opened visualisation.Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
Scala,
Java,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
./run ide build.