-
Notifications
You must be signed in to change notification settings - Fork 604
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's not "rename just like that", it just enables you to rename.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder what I could use a selection for.
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 |
49adec6
to
9c2f8b0
Compare
Somehow I have globals in my list of components... they all have |
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.
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.