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

Update design and behaviour on widget bottom sheet #5114

Closed
1 of 3 tasks
bmarty opened this issue Feb 1, 2022 · 6 comments · Fixed by #6326
Closed
1 of 3 tasks

Update design and behaviour on widget bottom sheet #5114

bmarty opened this issue Feb 1, 2022 · 6 comments · Fixed by #6326
Assignees
@ahmed-radhouane
Labels
A-Widgets T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements Z-Ready This issue is ready for development Z-WTF WTF moment: High Impact, Low Effort
Milestone
WTF ready list

Comments

@bmarty
Copy link
Member

bmarty commented Feb 1, 2022 •
edited by daniellekirkwood
Loading

  • Create a room
  • Invite User 2, User 2 joins the room
  • Add a widget to the room, ex: Etherpad
  • User 2 open the widget. This bottom sheet is displayed:

image

TODO:

  • At least the textColor of the 2 buttons should be white. The style of the button are maybe not correct.
  • If the bottom sheet is dismissed, the screen should be closed, like when the user click on "DECLINE"
  • @amshakal I do not know if you want to iterate on other things?
@bmarty bmarty added the Z-WTF WTF moment: High Impact, Low Effort label Feb 1, 2022
@bmarty bmarty added this to the WTF ready list milestone Feb 1, 2022
@daniellekirkwood daniellekirkwood added A-Widgets T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements labels Feb 2, 2022
@daniellekirkwood
Copy link
Contributor

Let's go ahead and leave the requirements for this issue to be:

  • Change color of text in darkmode to white
  • Bottom sheet behaviour updates

@daniellekirkwood daniellekirkwood added the Z-Ready This issue is ready for development label Feb 2, 2022
@amshakal
Copy link

amshakal commented Feb 3, 2022

Nothing besides what's been stated above already. Thanks!

@daniellekirkwood daniellekirkwood changed the title Small design issue Update design and behaviour on widget bottom sheet Feb 3, 2022
@ahmed-radhouane ahmed-radhouane self-assigned this Feb 7, 2022
@daniellekirkwood daniellekirkwood added Z-WTF WTF moment: High Impact, Low Effort and removed Z-WTF WTF moment: High Impact, Low Effort labels Feb 7, 2022
@ahmed-radhouane
Copy link
Contributor

Hello @daniellekirkwood , @amshakal

  • About this issue I'd like to discuss the UI requirement.

At least the textColor of the 2 buttons should be white. The style of the button are maybe not correct.

I do not think that making the textColor as white/ black for both dark/ white modes is a UI friendly for two reasons :

  • it could make confusion to the user to distinguish that these two labels are actions needed, specially seeing the screen, it has a text content so it could make user inconfortable with that.
  • I didn't found in the application similar UI for actions (white text actions)

So I would like to suggest this solution with keep both the action aspect of the two labels, and which I found more adapted to the application UI style used in the application :

Dark Mode  Light Mode

Please let me know if the result fits what needed.
Thank you.

ahmed-radhouane added a commit that referenced this issue Feb 8, 2022
@ahmed-radhouane
#5114
9b295e4 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Feb 8, 2022
@ahmed-radhouane
#5114
c83957f 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Feb 8, 2022
@ahmed-radhouane
#5114
aa1a4f0 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
@ahmed-radhouane ahmed-radhouane mentioned this issue Feb 8, 2022
Merged
9 tasks
@amshakal
Copy link

amshakal commented Feb 8, 2022 •
edited
Loading

Hi there, thanks for the feedback! I 100% agree that we need to make sure that buttons can be easily distinguished from text/labels. I think the comment above has been misinterpreted, and I can see how that can happen. :D By changing the text colour, the red/green background would stay as is, so that it looks like a proper button, like in our design system. This style is also consistent throughout our platforms as buttons.

ahmed-radhouane added a commit that referenced this issue Feb 8, 2022
@ahmed-radhouane
#5114
f6fff67 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
@ahmed-radhouane
Copy link
Contributor

@amshakal
Thank you ;)

ahmed-radhouane added a commit that referenced this issue Feb 9, 2022
@ahmed-radhouane
#5114
ad6cd7c 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Feb 9, 2022
@ahmed-radhouane
#5114
d3e6169 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Feb 9, 2022
@ahmed-radhouane
#5114
3125282 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
ahmed-radhouane added a commit that referenced this issue Feb 9, 2022
@ahmed-radhouane
#5114
372e51b 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
a40a1dc 
 - update changelog file.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
fe56cc5 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
ada057b 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
5a68c76 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
ffcd4ad 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 11, 2022
@ahmed-radhouane
#5114
ee81615 
 - update changelog file.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 22, 2022
@ahmed-radhouane
#5114
e9e59a6 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Feb 22, 2022
@ahmed-radhouane
#5114
4db94ca 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Feb 22, 2022
@ahmed-radhouane
#5114
e06c136 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
ahmed-radhouane added a commit that referenced this issue Feb 22, 2022
@ahmed-radhouane
#5114
0789c57 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 22, 2022
@ahmed-radhouane
#5114
c382ae3 
 - update changelog file.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
45993f1 
 - improvment after PR review.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
07c60a7 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
f9a2377 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
04034a8 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
8148b75 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
ef444b9 
 - update changelog file.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Feb 24, 2022
@ahmed-radhouane
#5114
f2db297 
 - improvment after PR review.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
5fd3862 
 - update bottom sheet behaviour on canceling to be the same as the decline bottom click.
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
7143503 
 - Change actions UI.
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
5ceed3e 
 - Add Changelog file.

Signed-off-by: Your Name <your@email.example.org>
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
d4aab6e 
 - update button text color in bottom sheet styles in syles_bottom_sheet.xml from black to white.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
400a7e9 
 - update changelog file.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
ahmed-radhouane added a commit that referenced this issue Mar 3, 2022
@ahmed-radhouane
#5114
2b74884 
 - improvment after PR review.

Signed-off-by: Ahmed Radhouane Belkilani <arbelkilani@gmail.com>
bmarty added a commit that referenced this issue Jun 16, 2022
@bmarty
Merge pull request #5187 from vector-im/arb/issues/5114
e632863 
#5114 : Update design and behaviour on widget bottom sheet
bmarty added a commit that referenced this issue Jun 16, 2022
@bmarty
Cleanup PR #5114
78a7bbe
@bmarty bmarty mentioned this issue Jun 16, 2022
Merged
@bmarty
Copy link
Member Author

bmarty commented Jun 22, 2022

Fixed in 1.4.26

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ahmed-radhouane ahmed-radhouane

Labels
A-Widgets T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements Z-Ready This issue is ready for development Z-WTF WTF moment: High Impact, Low Effort
Projects
None yet
Milestone
WTF ready list
Development

Successfully merging a pull request may close this issue.

Cleanup of #5187 element-hq/element-android
4 participants
@bmarty @ahmed-radhouane @amshakal @daniellekirkwood