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

Soften border-radius on selected/hovered messages #6525

Merged
merged 4 commits into from
Oct 20, 2021
Merged

Soften border-radius on selected/hovered messages #6525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c1e72f
Use a variable
SimonBrandner Aug 2, 2021
0c054f6
Unify variables
SimonBrandner Aug 2, 2021
72290bc
Soften left border radius when hovering
SimonBrandner Aug 2, 2021
17b0517
Soften left border on selected messages
SimonBrandner Aug 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ limitations under the License.

$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic

$EventTile_e2e_state_indicator_width: 4px;
$selected-message-border-width: 4px;

$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width);

:root {
font-size: 10px;
Expand Down
27 changes: 16 additions & 11 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ limitations under the License.
*/

$left-gutter: 64px;
$hover-select-border: 4px;

.mx_EventTile:not([data-layout=bubble]) {
max-width: 100%;
Expand Down Expand Up @@ -110,15 +109,15 @@ $hover-select-border: 4px;
}

&.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
left: calc(-$selected-message-border-width);
}

/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
&.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid;
padding-left: calc($left-gutter - $hover-select-border);
border-left: $accent-color $selected-message-border-width solid;
padding-left: calc($left-gutter - $selected-message-border-width);
background-color: $event-selected-color;
}

Expand All @@ -132,7 +131,7 @@ $hover-select-border: 4px;
}

&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
padding-left: calc($left-gutter + 18px - $selected-message-border-width);
}

&.mx_EventTile:hover .mx_EventTile_line,
Expand Down Expand Up @@ -208,28 +207,34 @@ $hover-select-border: 4px;
overflow-y: hidden;
}

&.mx_EventTile_selected .mx_EventTile_line,
&:hover .mx_EventTile_line {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

&:hover.mx_EventTile_verified .mx_EventTile_line,
&:hover.mx_EventTile_unverified .mx_EventTile_line,
&:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: calc($left-gutter - $hover-select-border);
padding-left: calc($left-gutter - $selected-message-border-width);
}

&:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
border-left: $e2e-verified-color $selected-message-border-width solid;
}

&:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
border-left: $e2e-unverified-color $selected-message-border-width solid;
}

&:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
border-left: $e2e-unknown-color $selected-message-border-width solid;
}

&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
padding-left: calc($left-gutter + 18px - $selected-message-border-width);
}

/* End to end encryption stuff */
Expand All @@ -241,7 +246,7 @@ $hover-select-border: 4px;
&:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border);
left: calc(-$selected-message-border-width);
}

// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
Expand Down