ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-06 06:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable background color on hover for chat panel and thread panel (#8644)

Browse Source 
* Enable background color on hover for chat panel and thread panel

- Display reactions row on hover
- Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline

- horizontal: inline
- vertical: block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
2022-06-10 08:21:22 +00:00
committed by GitHub
parent 8e9f7407e9
commit 0d3fe300aa
4 changed files with 83 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/rooms/_EventBubbleTile.scss
+17 -17
View File
@@ -53,9 +53,12 @@ limitations under the License.
}
.mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
position: relative;
margin-top: var(--gutterSize);
margin-left: 49px;
margin-left: var(--EventTile_bubble-margin-inline-start);
font-size: $font-14px;
.mx_ThreadSummary {
@@ -89,8 +92,8 @@ limitations under the License.
position: absolute;
top: -1px;
bottom: -1px;
left: -60px;
right: -60px;
left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
z-index: -1;
border-radius: 4px;
}
@@ -665,6 +668,17 @@ limitations under the License.
}
}
/* events that do not require bubble layout */
.mx_EventTile_line {
background: transparent;
}
&:hover {
&::before {
background: transparent;
}
}
&::after {
content: "";
clear: both;
@@ -708,20 +722,6 @@ limitations under the License.
}
}
/* events that do not require bubble layout */
.mx_GenericEventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
.mx_EventTile_line {
background: transparent;
}
&:hover {
&::before {
background: transparent;
}
}
}
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering
}
res/css/views/rooms/_EventTile.scss
+11 -2
View File
@@ -955,8 +955,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
&[data-layout=bubble] {
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; // enable background color on hover
}
.mx_ReactionsRow {
position: relative; // display on hover
}
.mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;