Skip to content
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

Merged
merged 3 commits into from
Jun 21, 2024
Merged

Conversation

hunger
Copy link
Member

@hunger hunger commented Jun 19, 2024

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.

}
}
clicked => {
self.edit-component-name = self.data.is-user-defined && !self.edit-component-name;
Copy link
Member

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

Copy link
Member

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:

  1. Click the name to select it. It's visible that the name is selected.
  2. Click again to rename it. (see https://devblogs.microsoft.com/oldnewthing/20081110-00/?p=20263 for caveats)
  3. On Windows, the rename on the selected item can also be initiated with the F2 shortcut.

Copy link
Member Author

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.

Copy link
Member Author

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?!"

Copy link
Member Author

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.

@hunger
Copy link
Member Author

hunger commented Jun 19, 2024

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.

@hunger
Copy link
Member Author

hunger commented Jun 19, 2024

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
Copy link
Member Author

hunger commented Jun 19, 2024

Somehow I have globals in my list of components... they all have is_global() == false, so something seems to be going wrong somewhere:-/ But apart from those, I can now rename all user-defined components in a big demo without triggering errors.

@hunger
Copy link
Member Author

hunger commented Jun 20, 2024

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:

  • Add a Label to show what you are actually previewing, showing Component Name + file it is in
  • Make clicking the file trigger the editor to show the component
  • Move renaming into the label, so that the component list in the sidebar is a drag source again and nothing more
  • Make "Add Component" switch to the component it just added -- you can rename it there as needed. Since we show what we are previewing, it is no longer as surprising that the preview suddenly goes empty (or at least I hope so)
  • Add a "play button" to user-defined types in the component list and make that trigger a switch of the component being previewed.
  • Add a checkbox "export" to the Component Label that can export/un-export a component.

@hunger
Copy link
Member Author

hunger commented Jun 21, 2024

No change, just a rebase to make github happy.

@hunger hunger merged commit 37d6922 into slint-ui:master Jun 21, 2024
36 checks passed
@hunger hunger deleted the push-lxylktovwwkt branch June 21, 2024 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants