live-preview: Add component renaming #5432
Conversation
tools/lsp/ui/component-list.slint
Outdated
| } | ||
| } | ||
| clicked => { | ||
| self.edit-component-name = self.data.is-user-defined && !self.edit-component-name; |
There was a problem hiding this comment.
I don't think clicking should change the component name just like that. I think clicking should focus the editor to the element.
To rename, it would be more like right-click and then have a popup menu with rename. Or maybe some keyboard shortcut
There was a problem hiding this comment.
I agree. There are OS-specific patterns for this, which I think we should re-use instead of introducing new patterns. Here's what I see on macOS and Windows to rename for example a file in the file manager:
- Click the name to select it. It's visible that the name is selected.
- Click again to rename it. (see https://devblogs.microsoft.com/oldnewthing/20081110-00/?p=20263 for caveats)
- On Windows, the rename on the selected item can also be initiated with the F2 shortcut.
There was a problem hiding this comment.
It's not "rename just like that", it just enables you to rename.
There was a problem hiding this comment.
I would love to add a small "play" button on top of the component name to allow switching between components to preview from the UI.
I do not want to use so much screen estate on "show document in editor"... that can go into a context menu -- if even needed. I am sure we can find better use for all those pixels than that!
I would love to show a bit of meta information like component name and file name and such above what is visible in the preview. Figma and PenPot also label the things they show and IMHO that makes a lot of sense. That would be one good location to put "show code in editor". I experimented with switching to the new component a while back and found it very confusing to suddenly see it shift between compoennts. "Where did all my work go?!"
There was a problem hiding this comment.
I wonder what I could use a selection for.
hunger
force-pushed
the
push-lxylktovwwkt
branch
from
6641755
to
49adec6
Compare
|
I included a few UI improvements in the last push. You can only have one component in name edit mode and the text no longer squashes. |
|
I did some more playing with renaming in big demos: Looks like the renaming code has some trouble with resolving relative paths to imported files. Not strictly related to this PR, but needs fixing :-) Fixed in #5434 |
hunger
force-pushed
the
push-lxylktovwwkt
branch
from
49adec6
to
9c2f8b0
Compare
|
Somehow I have globals in my list of components... they all have |
hunger
force-pushed
the
push-lxylktovwwkt
branch
from
9c2f8b0
to
53ac520
Compare
|
I would appreciate getting this in... I need the functionality. Yes, the workflow is not ideal, I agree. My Big-Plan(TM) right now is this:
|
... it is conceptually meant to be used by the language server and the live-preview.
hunger
force-pushed
the
push-lxylktovwwkt
branch
from
53ac520
to
05b5c56
Compare
|
No change, just a rebase to make github happy. |
Screencast.from.2024-06-19.12-49-07.mp4
You notice that I somehow broke the minimum size of the elements in the component list: That needs fixing before merge:-) Any idea what I am doing wrong? I do force the height to min-height, I thought that would work.
There is a bit of a hack in here do to the extra element we inject into the code to select which component to preview... we need to have some API in the interpreter to set this, so we do not have to meddle with the sources. I can not rename in that injected element without breaking the code in the editor... so I hide the injected code. That unfortunately means I can not compile-test the change before applying it. The renaming seems to work pretty reliably (even in big projects!), so I hope the missing compile test is not going to be a problem.