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

[Enhancement] The side arrows overlap with the Title and the Thumbnail #60

Closed
hsusanoo opened this issue Sep 27, 2020 · 12 comments · Fixed by #728
Closed

[Enhancement] The side arrows overlap with the Title and the Thumbnail #60

hsusanoo opened this issue Sep 27, 2020 · 12 comments · Fixed by #728
Assignees
Labels
Enhancement New feature or request Good First Issue Good for newcomers Known issue Known Bug UI/UX Related to appearance of the app and flyout.
Projects

Comments

@hsusanoo
Copy link

I think there should be extra padding space, or some other solution, to solve this this :

@ShankarBUS
Copy link
Member

Yep! That's a great request.

I should reconsider the design and make it better

@ShankarBUS
Copy link
Member

But they are not disturbing you, right?

I mean they are not that much overlapping with the content.

@ShankarBUS ShankarBUS self-assigned this Sep 28, 2020
@ShankarBUS ShankarBUS added Enhancement New feature or request Good First Issue Good for newcomers Known issue Known Bug UI/UX Related to appearance of the app and flyout. labels Sep 28, 2020
@hsusanoo
Copy link
Author

@ShankarBUS No, you can give this the lowest priority. I like the design overall 👍🏻

@ShankarBUS
Copy link
Member

ShankarBUS commented Sep 28, 2020

I had to make the scroll button as small as possible. I had to squash it to the edge. I copied the exact layout and dimensions from the Windows 10X global system media transport controls panel. There was no space for the scroll button in their layout.

I'm currently confused about what to do 😅

@Samuel12321 Samuel12321 added this to To Do in v0.9.0 Sep 29, 2020
@Samuel12321 Samuel12321 added this to the 0.9 milestone Sep 29, 2020
@prakharb5
Copy link
Member

Expand the flyout size maybe? A few pixels won't hurt. But that's just me. 😂

@ShankarBUS
Copy link
Member

I will reconsider the layout and UI later 😁😉

@Samuel12321
Copy link
Member

i personally don't think there is a problem, as long as both items are visible. The arrow its self doesn't cover the text or picture, just the highlighting.

@zeealeid
Copy link

Maybe this problem could be fixed by making the arrows appear only when the curser is hovering over the flyout? Also adding a bit of padding on both sides can fix this issue as well :)

@ShankarBUS
Copy link
Member

Hmm. Sounds interesting.
Carry on.

Should those buttons be round?

@zeealeid
Copy link

Hmm. Sounds interesting.
Carry on.

Should those buttons be round?

I like the pill shaped rounded buttons as it looks more in-line with the Windows 10X-ish look also it sort of looks like a clickable button with the background so it might be better but removing it wouldn't make a huge difference in terms of looks IMO.

@ShankarBUS
Copy link
Member

ShankarBUS commented Dec 27, 2020

@zeealeid,

In case you need the current design.

I made this Figma project a while ago (haven't been useful since then).

Hope it helps https://www.figma.com/file/Gq5AKs5k8lOl0rmDjQeXT2/ModernFlyouts.

Edit: certain parts of the design have changed. But most of the design is still the same.

P.S. I used some components from your Shell Templates Figma project in this 😜.

@Samuel12321 Samuel12321 modified the milestones: 0.9, 0.10 May 28, 2021
@ShankarBUS ShankarBUS mentioned this issue Aug 4, 2021
@ShankarBUS
Copy link
Member

Done. Resolved in v0.10!

image
image
image
image

@prakharb5 prakharb5 modified the milestones: 0.11.0, 0.10.0 Aug 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request Good First Issue Good for newcomers Known issue Known Bug UI/UX Related to appearance of the app and flyout.
Projects
No open projects
v0.9.0
  
To Do
Development

Successfully merging a pull request may close this issue.

5 participants