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.

Sign up for GitHub

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

Jump to bottom

fix(Options): prevents buttons to get cut off #315

Merged
merged 5 commits into from
May 30, 2023
Merged

fix(Options): prevents buttons to get cut off #315

merged 5 commits into from
May 30, 2023

Conversation

Hephi2
Copy link
Contributor

@Hephi2 Hephi2 commented May 23, 2023

Closes #289

When selecting a row in tables, the button can be cut with a specific screen width. This is solved by this fix.

The design should be reviewed. See #289

@Hephi2 Hephi2 requested a review from datenangebot May 23, 2023 14:27
@Hephi2 Hephi2 added the 2. developing Work in progress label May 23, 2023
@Hephi2 Hephi2 added this to the v0.5.1 milestone May 23, 2023
@Hephi2
Copy link
Contributor Author

Hephi2 commented May 24, 2023 •
edited
Loading

New Design:
image
Needs to be reviewed @datenangebot.

  • Buttons are grouped in a menu since there is right now no good way to dynamically show them depending on the window width.
  • Button "Uncheck all" added for testing if this is needed/useful.

@datenangebot
Copy link
Collaborator

@Hephi2
Better.

I would like to change the icon for "unselect option" to an empty checkbox. The checkmark suggested something to select. Agree?
Also lets show this option only if we have a three-dot-menu.

If we have enough space, lets display the option with labels. But it seems that :force-name="true" has no effect?! Same for you?
ref

What do you think about that?

@Hephi2
Copy link
Contributor Author

Hephi2 commented May 25, 2023 •
edited
Loading

@datenangebot

I would like to change the icon for "unselect option" to an empty checkbox. The checkmark suggested something to select. Agree?

Yeah, I agree. Where can I find all available Icons?

If we have enough space, lets display the option with labels. But it seems that :force-name="true" has no effect?! Same for you?

Yes, same problem for me. I also tried the example code and even there it does not work. It might be a problem of the component.

What do you think about that?

The problem is, that, if the button texts would be shown, for specific sizes > 640 the buttons are still be cut off. I tried that as well (with the normal NcButtons which can have texts) but had this problem.
image

@datenangebot
Copy link
Collaborator

Where can I find all available Icons?
@Hephi2

https://pictogrammers.com/library/mdi/

It might be a problem of the component.

I will have a look twice and open an issue on the repo for it

The problem is, that, if the button texts would be shown, for specific sizes > 640 the buttons are still be cut off. I tried that as well (with the normal NcButtons which can have texts) but had this problem.

Mh, maybe we can have another behavior with the actions-menü. I would like to check that before we discard it.

@datenangebot
Copy link
Collaborator

datenangebot commented May 25, 2023 •
edited
Loading

@Hephi2 Fix was quite easy, property is :force-title="true"...

nextcloud-libraries/nextcloud-vue#4157

@datenangebot
Copy link
Collaborator

@Hephi2 please checkout the new version

@Hephi2
Copy link
Contributor Author

Hephi2 commented May 26, 2023

@datenangebot That is not universal solution but rather a hardcoded fix, since it might not work for languages with longer translations. But I can't think of a better solution right now so I think we can do it like that for now.

@Hephi2 Hephi2 marked this pull request as ready for review May 26, 2023 09:13
Philipp Hempel and others added 5 commits May 26, 2023 11:41
@Hephi2
fix(Options): prevents buttons to get cut off
b2638f6 
Signed-off-by: Philipp Hempel <philipp.hempel@nextcloud.com>
@Hephi2
fix(Options): Uses a menu instead of buttons
29c69fb 
Signed-off-by: Philipp Hempel <philipp.hempel@nextcloud.com>
@Hephi2
design: restructure the on selection options menu
e4ff0c9 
- only add the "unselect" option if shown as three-dot-menu
- show inline options with label -> seems not to work!

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
@Hephi2
fix: use correct property to force action titles
a37ba81 
Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
@Hephi2
refactor(options section): show buttons with text
668302c 
- show buttons if we have space (>800px) otherwise show three-dot-menu

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
@Hephi2 Hephi2 force-pushed the fix/#289-optionsArrangement branch from e38e083 to 668302c Compare May 26, 2023 09:42
datenangebot
datenangebot approved these changes May 26, 2023
View reviewed changes
Copy link
Collaborator

@datenangebot datenangebot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@datenangebot datenangebot added 4. to release Ready to be released and/or waiting for tests to finish and removed 2. developing Work in progress labels May 30, 2023
@Hephi2 Hephi2 merged commit 6d31353 into main May 30, 2023
@datenangebot datenangebot deleted the fix/#289-optionsArrangement branch August 11, 2023 11:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@datenangebot datenangebot datenangebot approved these changes

Assignees

@Hephi2 Hephi2

Labels
4. to release Ready to be released and/or waiting for tests to finish
Projects
📝 Office team
Archived in project
Milestone
v0.5.1
Development

Successfully merging this pull request may close these issues.

reduce search field width
2 participants
@Hephi2 @datenangebot