imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve style rules for thread summary (#8868)

Browse source 
* Use mixin ThreadSummaryIcon

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

* Tidy mx_ThreadSummary

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

* Move style blocks from _EventTile.scss to _ThreadSummary.scss

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

* Merge mx_ThreadSummaryIcon::before

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

* From threads amount to replies amount

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

* Remove obsolete declaration and class names

mixin ThreadSummaryIcon has "background-color: $secondary-content !important"

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

* Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile.scss

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

* Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon

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

* Use variables and remove obsolete one

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

* Merge style rules, renaming a variable

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

* Include mx_MessagePanel_narrow in mx_ThreadSummary

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

* Remove a redundant declaration

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

* Use a variable

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

* Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_ThreadSummary

Expected according to tests

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

* Remove a variable used only once

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

* Ensure the same line-height is applied

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

* Remove !important

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-04 19:07:50 +00:00 • committed by GitHub
parent 32eb853bbb
commit 0bf5d54041
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

11
res/css/_common.scss
View file

@ -775,25 +775,22 @@ legend {
} }
} }
@define-mixin ThreadsAmount { @define-mixin ThreadRepliesAmount {
$threadInfoLineHeight: calc(2 * $font-12px);
color: $secondary-content; color: $secondary-content;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
padding: 0 $spacing-12 0 $spacing-8; padding: 0 $spacing-12 0 $spacing-8;
} }
@define-mixin ThreadInfoIcon { @define-mixin ThreadSummaryIcon {
content: ""; content: "";
display: inline-block; display: inline-block;
mask-image: url('$(res)/img/element-icons/thread-summary.svg'); mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center; mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
height: 18px; height: 18px;
min-width: 18px; min-width: 18px;
background-color: $secondary-content !important; background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
} }

8
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -208,15 +208,9 @@ limitations under the License.
border-radius: 50%; border-radius: 50%;
&::after { &::after {
content: ""; @mixin ThreadSummaryIcon;
width: inherit; width: inherit;
height: inherit; height: inherit;
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
display: inline-block;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $secondary-content;
} }
} }

40
res/css/views/rooms/_EventTile.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
*/ */
$left-gutter: 64px; $left-gutter: 64px;
$threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile { .mx_EventTile {
--EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable --EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable
@ -24,6 +23,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
--EventTile_group_line-spacing-block-end: 3px; --EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter; --EventTile_group_line-spacing-inline-start: $left-gutter;
--EventTile_group_line-line-height: $font-22px; --EventTile_group_line-line-height: $font-22px;
--EventTile_ThreadSummary-line-height: calc(2 * $font-12px);
flex-shrink: 0; flex-shrink: 0;
@ -204,7 +204,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
.mx_ThreadSummary, .mx_ThreadSummary,
.mx_ThreadSummaryIcon { .mx_ThreadSummary_icon {
margin-left: $left-gutter; margin-left: $left-gutter;
} }
@ -484,7 +484,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile[data-layout=group] { .mx_EventTile[data-layout=group] {
.mx_ThreadSummary, .mx_ThreadSummary,
.mx_ThreadSummaryIcon, .mx_ThreadSummary_icon,
.mx_EventTile_line { .mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 80px; margin-right: 80px;
@ -722,33 +722,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
} }
.mx_ThreadPanel_replies::before,
.mx_ThreadSummaryIcon::before,
.mx_ThreadSummary::before {
@mixin ThreadInfoIcon;
background-color: $secondary-content !important;
}
.mx_ThreadSummaryIcon {
display: inline-block;
font-size: $font-12px;
color: $secondary-content !important;
margin-top: 8px;
margin-bottom: 8px;
&::before {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
}
}
.mx_MessagePanel_narrow .mx_ThreadSummary {
min-width: initial;
max-width: 100%; // prevent overflow
width: initial;
}
.mx_EventTile[data-shape=ThreadsList] { .mx_EventTile[data-shape=ThreadsList] {
--topOffset: $spacing-12; --topOffset: $spacing-12;
--leftOffset: 48px; --leftOffset: 48px;
@ -864,8 +837,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
align-items: center; align-items: center;
position: relative; position: relative;
&::before {
@mixin ThreadSummaryIcon;
}
.mx_ThreadPanel_replies_amount { .mx_ThreadPanel_replies_amount {
@mixin ThreadsAmount; @mixin ThreadRepliesAmount;
line-height: var(--EventTile_ThreadSummary-line-height);
font-size: $font-12px; // Same font size as the counter on the main panel font-size: $font-12px; // Same font size as the counter on the main panel
} }
} }

97
res/css/views/rooms/_ThreadSummary.scss
View file

@ -14,26 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$left-gutter: 64px; // From _EventTile.scss .mx_ThreadSummary,
$threadSummaryLineHeight: calc(2 * $font-12px); .mx_ThreadSummary_content,
.mx_ThreadSummary_icon {
font-size: $font-12px;
}
.mx_ThreadSummary,
.mx_ThreadSummary_content {
color: $secondary-content;
}
.mx_ThreadSummary,
.mx_ThreadSummary_icon {
margin-top: $spacing-8;
}
.mx_ThreadSummary { .mx_ThreadSummary {
min-width: 267px; min-width: 267px;
max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px); // leave space on both left & right gutters
width: fit-content; width: fit-content;
height: 40px; height: 40px;
position: relative; position: relative;
background-color: $system; background-color: $system;
padding-left: $spacing-12; padding-inline: $spacing-12 $spacing-16;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px;
padding-right: $spacing-16;
margin-top: $spacing-8;
font-size: $font-12px;
color: $secondary-content;
box-sizing: border-box;
justify-content: flex-start; justify-content: flex-start;
border-radius: 8px;
box-sizing: border-box;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
@ -70,7 +79,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
&:hover, &:hover,
&:focus { &:focus {
cursor: pointer;
border-color: $quinary-content; border-color: $quinary-content;
.mx_ThreadSummary_chevron { .mx_ThreadSummary_chevron {
@ -80,34 +88,59 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
} }
&::before { &::before {
@mixin ThreadSummaryIcon;
align-self: center; // v-align the threads icon align-self: center; // v-align the threads icon
} }
}
// XXX: these classes are re-used outside of the component .mx_ThreadSummary_sender,
.mx_ThreadSummary_ThreadsAmount { .mx_ThreadSummary_content,
@mixin ThreadsAmount; .mx_ThreadSummary_replies_amount {
} line-height: var(--EventTile_ThreadSummary-line-height);
}
.mx_ThreadSummary_sender { .mx_ThreadSummary_sender,
font-weight: $font-semi-bold; .mx_ThreadSummary_content {
line-height: $threadSummaryLineHeight; text-overflow: ellipsis;
text-overflow: ellipsis; overflow: hidden;
overflow: hidden; white-space: nowrap;
white-space: nowrap; }
}
.mx_ThreadSummary_content { .mx_ThreadSummary_sender {
text-overflow: ellipsis; font-weight: $font-semi-bold;
overflow: hidden; }
white-space: nowrap;
margin-left: $spacing-4; .mx_ThreadSummary_content {
font-size: $font-12px; margin-left: $spacing-4;
line-height: $threadSummaryLineHeight; flex: 1;
color: $secondary-content; }
flex: 1;
.mx_ThreadSummary_replies_amount {
@mixin ThreadRepliesAmount;
}
.mx_MessagePanel_narrow & {
min-width: initial;
max-width: 100%; // prevent overflow
width: initial;
}
} }
.mx_ThreadSummary_avatar { .mx_ThreadSummary_avatar {
margin-inline-end: $spacing-8; margin-inline-end: $spacing-8;
} }
.mx_ThreadSummary_icon {
display: inline-block;
margin-bottom: $spacing-8;
&::before {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
margin-top: -2px;
}
a& {
color: $secondary-content;
}
}

4
src/components/views/rooms/EventTile.tsx
View file

@ -533,14 +533,14 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) { if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
if (this.props.highlightLink) { if (this.props.highlightLink) {
return ( return (
<a className="mx_ThreadSummaryIcon" href={this.props.highlightLink}> <a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
{ _t("From a thread") } { _t("From a thread") }
</a> </a>
); );
} }
return ( return (
<p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p> <p className="mx_ThreadSummary_icon">{ _t("From a thread") }</p>
); );
} }
} }

2
src/components/views/rooms/ThreadSummary.tsx
View file

@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
}} }}
aria-label={_t("Open thread")} aria-label={_t("Open thread")}
> >
<span className="mx_ThreadSummary_ThreadsAmount"> <span className="mx_ThreadSummary_replies_amount">
{ countSection } { countSection }
</span> </span>
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} /> <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />