Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Room Tile context menu, notifications, indicator and placement #4858

Merged
merged 13 commits into from
Jul 1, 2020

Conversation

t3chguy
Copy link
Member

@t3chguy t3chguy commented Jun 29, 2020

Fixes element-hq/element-web#14226
Fixes element-hq/element-web#14255
Fixes element-hq/element-web#13961

TODO:

  • Fix content of Notifications context menu
  • Wire up Notifications context menu
  • Use correct bell SVG
  • Moves context menus to the right places (aligns icons)
  • Adds hover states to their interactive elements
  • Flattens DOM to simplify later A11Y work
  • Simplifies some padding to match Figma (some were changed to make the hover state logical)
  • Adds and wires up Notifications context menu on Room Tile

image
image
image

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
…Tile2

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
@turt2live
Copy link
Member

For element-hq/element-web#13635

…ix-org/matrix-react-sdk into t3chguy/room-list/2
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
… a11y work by flattening the DOM

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

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

initial pass looks overall fine to me.

res/css/views/rooms/_RoomTile2.scss Show resolved Hide resolved
src/components/structures/UserMenu.tsx Show resolved Hide resolved
src/components/views/rooms/RoomTile2.tsx Outdated Show resolved Hide resolved
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
@t3chguy t3chguy marked this pull request as ready for review July 1, 2020 16:01
@t3chguy t3chguy merged commit 28e4300 into develop Jul 1, 2020
@t3chguy t3chguy deleted the t3chguy/room-list/2 branch July 1, 2020 18:20
MadLittleMods added a commit that referenced this pull request Feb 1, 2022
Fix element-hq/element-web#20801

Regressed in #7339

Relevant styles were first added in #4858
(context behind why the original styles were added)
MadLittleMods added a commit that referenced this pull request Feb 1, 2022
Fix element-hq/element-web#20801

Regressed in #7339

Relevant styles were first added in #4858
(context behind why the original styles were added)

---

## Cause

Battling CSS specificity between the default and compact styles, https://specificity.keegan.st/

Known good (On `app.element.io` (expected)):
```css
// 0 3 0
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton {
    padding-top: 12px;
    padding-bottom: 12px;
}

// Compact styles override our default rules because they come
// after the other styles (source order) and have the same specificity
// 0 3 0
.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * {
    padding: 8px 16px 8px 11px;
}
```

Bad (On `develop` (broken)):
```css
// Default rules always override because they have higher specificity.
// The `:not()` selector doesn't add any extra specificity but the selectors inside the `:not(...)` do.
// 0 4 0
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
    padding-top: 12px;
    padding-bottom: 12px;
}

// 0 3 0
.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * {
    padding: 8px 16px 8px 11px;
}
```
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
2 participants