Increase touch area of close button in settings dialog #10145

BalanaguYashwanth · 2023-02-12T09:04:40Z

Resolved bug by increasing touch area of close button in settings dialog

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

Notes: Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window.

Fixes element-hq/element-web#22915
Closes #9202

Type: [enhancement/defect/task]

Before -

After -

Fixes
Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window. It fixes https Contributed by @BalanaguYashwanth

Here's what your changelog entry will look like:

🐛 Bug Fixes

Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window. (#10145). Fixes Touch area to close the settings dialog is too small. element-hq/element-web#22915. Contributed by @BalanaguYashwanth.

Resolved bug by increasing touch area of close button in settings dialog

germain-gg

We're adding a wrapper HTML element for purely stylistic reasons, and that is CSS roles.

I believe we should remove the wrapper and virtually increase the touch zone using a pseudo element

button::after {
  position: absolute;
  inset: -10px;
  content: "";
}

Something of the sort will probably do the trick, but I have not tested that locally.

BalanaguYashwanth · 2023-02-13T08:47:26Z

Hello @gsouquet,

Thanks for suggestion, I will check on it.

BalanaguYashwanth · 2023-02-13T16:23:08Z

Hey @gsouquet,

I added to css what code you suggested but touch area is not working as expected, can you check from your side once.

Mainly i see CSS and HTML code for that close button is not structured well then i changed it. You can check demo in local of my PR you will definitely see increased touch area and aligned CSS along with HTML in UI

BalanaguYashwanth · 2023-02-17T01:52:52Z

Hello,

Anyone can help me out because @gsouquet, suggested some changes but when i tried, those are not working on UI, If anyone can guide me in some direction, so that i can improve my PR but existing PR you won't see any problems with it.

But still if you need to improve let me know...

BalanaguYashwanth · 2023-02-25T02:55:21Z

Hey @gsouquet ,

Hope you are doing well, Can i expect any feedback.

germain-gg

I've put a very basic example showing how to increase the touch area around a button https://jsbin.com/xeqetazuqu/edit?html,css,output

I believe we should apply the same technic, rather than applying an extra HTML element as it carries zero semantic value

BalanaguYashwanth · 2023-03-01T15:12:41Z

hey thanks for your reply, i am working on to match your solution because unlike other elements to add touch area, this element behaviour in different manner when applying css, i didn't stoped yet.

Working on it, soon will raise with PR with updated code, Anything you want to update me, You can update...

…mall

BalanaguYashwanth · 2023-03-25T13:02:48Z

Hello @gsouquet,

Updated the css code please look once for increase touch area for cancel button

BalanaguYashwanth · 2023-05-06T06:32:20Z

Hello @gsouquet,

I updated based on your inputs, If you review then it will be great

germain-gg · 2023-05-09T15:04:50Z

res/css/_common.pcss

-    background-color: $dialog-close-fg-color;
+    background-image: url("$(res)/img/cancel.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
    cursor: pointer;
    position: unset;


I don't understand this change. Why is it needed, and I don't think the SVG will be tinted when changing the theme to dark or light.

Could you please revert this?

Background color also won't tined with dark or light theme because It looks same for two themes, Manipulating the background color and using as cancel icon which is not recommend

Instead using Cancel button svg which is easily maintainable.

This does not need to be changed, so i would request to either revert this as part of this pull request or doing it as described in https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/icons.md

germain-gg · 2023-05-09T15:05:41Z

res/css/_common.pcss

    width: 18px;
    height: 18px;
    position: absolute;
    top: 10px;
    right: 0;
 }

+.mx_Dialog_cancelButton::before{


Suggested change

.mx_Dialog_cancelButton::before{

.mx_Dialog_cancelButton::before {

germain-gg · 2023-05-09T15:06:34Z

res/css/_common.pcss

+.mx_Dialog_cancelButton::before{
+    content: "";
+    position: absolute;
+    height: 50px;


Ideally we should avoid hardcoding the height but use inset or a combination of top and bottom so that the height is inferred from the parent element.

More future proof.

As per your suggestion, Using top and bottom added the size for the tocuh area.

so you can check below which i added area of touch for this cancel button

germain-gg · 2023-08-08T06:32:45Z

res/css/_common.pcss

-    background-color: $dialog-close-fg-color;
+    background-image: url("$(res)/img/cancel.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
    cursor: pointer;
    position: unset;


This does not need to be changed, so i would request to either revert this as part of this pull request or doing it as described in https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/icons.md

dbkr · 2024-05-16T09:09:48Z

I'm going to close this as it hasn't had any activity. Feel free to re-open if you (or anyone) wants to keep it moving forward.

Signed-off-by: BalanaguYashwanth <[email protected]>

d32a8e2

Resolved bug by increasing touch area of close button in settings dialog

BalanaguYashwanth requested a review from a team as a code owner February 12, 2023 09:04

BalanaguYashwanth requested review from t3chguy and florianduros February 12, 2023 09:04

github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Feb 12, 2023

germain-gg added the T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems label Feb 13, 2023

germain-gg changed the title ~~Signed-off-by: BalanaguYashwanth <[email protected]>~~ Increase touch area of close button in settings dialog Feb 13, 2023

germain-gg suggested changes Feb 13, 2023

View reviewed changes

BalanaguYashwanth requested review from germain-gg and removed request for t3chguy and florianduros February 16, 2023 04:59

germain-gg suggested changes Feb 28, 2023

View reviewed changes

germain-gg mentioned this pull request Mar 16, 2023

Increase touch area of some controls element-hq/element-web#24848

Open

BalanaguYashwanth added 2 commits March 25, 2023 18:23

updated by increasing touch area for cancel button

1cdb6a1

Merge remote-tracking branch 'origin/develop' into feature/TouchAreaS…

fcabebe

…mall

BalanaguYashwanth requested a review from germain-gg May 6, 2023 06:31

germain-gg suggested changes May 9, 2023

View reviewed changes

added top and bottom replacing of height

b62fc1e

t3chguy requested a review from germain-gg August 3, 2023 12:44

germain-gg suggested changes Aug 8, 2023

View reviewed changes

dbkr closed this May 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Increase touch area of close button in settings dialog #10145

Increase touch area of close button in settings dialog #10145

BalanaguYashwanth commented Feb 12, 2023 •

edited by github-actions bot

Loading

germain-gg left a comment

BalanaguYashwanth commented Feb 13, 2023

BalanaguYashwanth commented Feb 13, 2023

BalanaguYashwanth commented Feb 17, 2023 •

edited

Loading

BalanaguYashwanth commented Feb 25, 2023

germain-gg left a comment

BalanaguYashwanth commented Mar 1, 2023 •

edited

Loading

BalanaguYashwanth commented Mar 25, 2023

BalanaguYashwanth commented May 6, 2023

germain-gg May 9, 2023

BalanaguYashwanth May 10, 2023

germain-gg Aug 8, 2023

germain-gg May 9, 2023

germain-gg May 9, 2023

BalanaguYashwanth May 10, 2023 •

edited

Loading

germain-gg Aug 8, 2023

dbkr commented May 16, 2024

	.mx_Dialog_cancelButton::before{
	.mx_Dialog_cancelButton::before {

Increase touch area of close button in settings dialog #10145

Increase touch area of close button in settings dialog #10145

Conversation

BalanaguYashwanth commented Feb 12, 2023 • edited by github-actions bot Loading

Checklist

🐛 Bug Fixes

germain-gg left a comment

Choose a reason for hiding this comment

BalanaguYashwanth commented Feb 13, 2023

BalanaguYashwanth commented Feb 13, 2023

BalanaguYashwanth commented Feb 17, 2023 • edited Loading

BalanaguYashwanth commented Feb 25, 2023

germain-gg left a comment

Choose a reason for hiding this comment

BalanaguYashwanth commented Mar 1, 2023 • edited Loading

BalanaguYashwanth commented Mar 25, 2023

BalanaguYashwanth commented May 6, 2023

germain-gg May 9, 2023

Choose a reason for hiding this comment

BalanaguYashwanth May 10, 2023

Choose a reason for hiding this comment

germain-gg Aug 8, 2023

Choose a reason for hiding this comment

germain-gg May 9, 2023

Choose a reason for hiding this comment

germain-gg May 9, 2023

Choose a reason for hiding this comment

BalanaguYashwanth May 10, 2023 • edited Loading

Choose a reason for hiding this comment

germain-gg Aug 8, 2023

Choose a reason for hiding this comment

dbkr commented May 16, 2024

BalanaguYashwanth commented Feb 12, 2023 •

edited by github-actions bot

Loading

BalanaguYashwanth commented Feb 17, 2023 •

edited

Loading

BalanaguYashwanth commented Mar 1, 2023 •

edited

Loading

BalanaguYashwanth May 10, 2023 •

edited

Loading