Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-09-22 22:29:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move the remove cross to the tile's corner

Browse Source 
- On the top-right corner, where Zoom and Teams both put it
- Centred, it sat inside the target for choosing the tile: the one
  destructive action lived exactly where the ordinary one does, which is
  what was confusing people
- Red under the pointer. That alone would not have fixed it: colour says
  what a control does, it does not stop the press landing on the wrong one
- The one in force still offers no removal (FR-025). The corner would
  allow it, since cross and tick no longer compete for the middle, but
  that stays product's call

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
fkwp
2026-09-17 23:01:54 +02:00
co-authored by Claude Opus 5
parent c7c44eea4e
commit 8a2ad2226d
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MediaMuteAndSwitchButton.module.css
+19 -5
View File
@@ -338,20 +338,34 @@ Please see LICENSE in the repository root for full details.
*/
.effectRemove {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
/* On the tile's top-right corner, where Zoom and Teams both put it, and
clear of the middle: centred, it sat inside the target for choosing the
tile, so the one destructive action lived where the ordinary one does. */
inset-block-start: 0;
inset-inline-end: 0;
translate: 30% -30%;
display: none;
align-items: center;
justify-content: center;
inline-size: 24px;
block-size: 24px;
inline-size: 22px;
block-size: 22px;
border-radius: 50%;
background: var(--cpd-color-bg-canvas-default);
color: var(--cpd-color-icon-primary);
box-shadow: 0 0 0 var(--cpd-border-width-1)
var(--cpd-color-border-interactive-secondary);
cursor: pointer;
}
/* Red under the pointer: the corner separates it from choosing the tile, and
this says what it will do once you are there. */
.effectRemove:hover {
background: var(--cpd-color-bg-critical-subtle);
color: var(--cpd-color-icon-critical-primary);
box-shadow: 0 0 0 var(--cpd-border-width-1)
var(--cpd-color-border-critical-primary);
}
.effectGrid .effectTileWrap:hover .effectRemove,
.effectGrid .effectTileWrap:focus-within .effectRemove {
display: flex;