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

Improve style rules for thread summary #8868

Merged
merged 20 commits into from
Jul 4, 2022
Merged

Improve style rules for thread summary #8868

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
feba803
Use mixin ThreadSummaryIcon
luixxiul Apr 28, 2022
2a1bd18
Tidy mx_ThreadSummary
luixxiul Jun 18, 2022
d9d8c9f
Move style blocks from _EventTile.scss to _ThreadSummary.scss
luixxiul Jun 18, 2022
7b93164
Merge mx_ThreadSummaryIcon::before
luixxiul Jun 18, 2022
7426736
From threads amount to replies amount
luixxiul Jun 18, 2022
9b7a40a
Remove obsolete declaration and class names
luixxiul Jun 18, 2022
2a12087
Move mx_ThreadPanel_replies::before from _ThreadSummary to _EventTile…
luixxiul Jun 18, 2022
d065cd3
Rename mx_ThreadSummaryIcon to mx_ThreadSummary_icon
luixxiul Jun 18, 2022
7ccc3c9
Use variables and remove obsolete one
luixxiul Jun 18, 2022
91bd4cd
Merge style rules, renaming a variable
luixxiul Jun 18, 2022
55fdbe9
Include mx_MessagePanel_narrow in mx_ThreadSummary
luixxiul Jun 19, 2022
c33b72f
Remove a redundant declaration
luixxiul Jun 19, 2022
fc43d9c
Use a variable
luixxiul Jun 19, 2022
2e06664
Include mx_ThreadSummary_sender and mx_ThreadSummary_content in mx_Th…
luixxiul Jun 19, 2022
0cf35db
Remove a variable used only once
luixxiul Jun 19, 2022
8455c50
Ensure the same line-height is applied
luixxiul Jun 19, 2022
3256d48
Remove !important
luixxiul Jun 25, 2022
36827ba
Merge remote-tracking branch 'upstream/develop' into ThreadSummary
luixxiul Jul 1, 2022
8decfa7
Merge branch 'develop' into ThreadSummary
luixxiul Jul 1, 2022
d7267a5
Merge branch 'develop' into ThreadSummary
luixxiul Jul 4, 2022
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
11 changes: 4 additions & 7 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -775,25 +775,22 @@ legend {
}
}

@define-mixin ThreadsAmount {
$threadInfoLineHeight: calc(2 * $font-12px);

@define-mixin ThreadRepliesAmount {
color: $secondary-content;
font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
}

@define-mixin ThreadInfoIcon {
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
mask-image: url('$(res)/img/element-icons/thread-summary.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
height: 18px;
min-width: 18px;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}
8 changes: 1 addition & 7 deletions res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,15 +208,9 @@ limitations under the License.
border-radius: 50%;

&::after {
content: "";
@mixin ThreadSummaryIcon;
width: 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;
}
}

Expand Down
40 changes: 9 additions & 31 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,14 +16,14 @@ limitations under the License.
*/

$left-gutter: 64px;
$threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss

.mx_EventTile {
--EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable
--EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter;
--EventTile_group_line-line-height: $font-22px;
--EventTile_ThreadSummary-line-height: calc(2 * $font-12px);

flex-shrink: 0;

Expand Down Expand Up @@ -205,7 +205,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

.mx_ThreadSummary,
.mx_ThreadSummaryIcon {
.mx_ThreadSummary_icon {
margin-left: $left-gutter;
}

Expand Down Expand Up @@ -482,7 +482,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile[data-layout=group] {

.mx_ThreadSummary,
.mx_ThreadSummaryIcon,
.mx_ThreadSummary_icon,
.mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 80px;
Expand Down Expand Up @@ -720,33 +720,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] {
--topOffset: $spacing-12;
--leftOffset: 48px;
Expand Down Expand Up @@ -862,8 +835,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
align-items: center;
position: relative;

&::before {
@mixin ThreadSummaryIcon;
}

.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
}
}
Expand Down
95 changes: 64 additions & 31 deletions res/css/views/rooms/_ThreadSummary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,35 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

$left-gutter: 64px; // From _EventTile.scss
$threadSummaryLineHeight: calc(2 * $font-12px);
.mx_ThreadSummary,
.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 {
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;
height: 40px;
position: relative;
background-color: $system;
padding-left: $spacing-12;
padding-inline: $spacing-12 $spacing-16;
display: flex;
align-items: center;
justify-content: flex-start;
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;
clear: both;
overflow: hidden;
border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
Expand Down Expand Up @@ -70,7 +79,6 @@ $threadSummaryLineHeight: calc(2 * $font-12px);

&:hover,
&:focus {
cursor: pointer;
border-color: $quinary-content;

.mx_ThreadSummary_chevron {
Expand All @@ -80,34 +88,59 @@ $threadSummaryLineHeight: calc(2 * $font-12px);
}

&::before {
@mixin ThreadSummaryIcon;
align-self: center; // v-align the threads icon
}
}

// XXX: these classes are re-used outside of the component
.mx_ThreadSummary_ThreadsAmount {
@mixin ThreadsAmount;
}
.mx_ThreadSummary_sender,
.mx_ThreadSummary_content,
.mx_ThreadSummary_replies_amount {
line-height: var(--EventTile_ThreadSummary-line-height);
}

.mx_ThreadSummary_sender {
font-weight: $font-semi-bold;
line-height: $threadSummaryLineHeight;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_ThreadSummary_sender,
.mx_ThreadSummary_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.mx_ThreadSummary_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: $spacing-4;
font-size: $font-12px;
line-height: $threadSummaryLineHeight;
color: $secondary-content;
flex: 1;
.mx_ThreadSummary_sender {
font-weight: $font-semi-bold;
}

.mx_ThreadSummary_content {
margin-left: $spacing-4;
flex: 1;
}

.mx_ThreadSummary_replies_amount {
@mixin ThreadRepliesAmount;
}

.mx_MessagePanel_narrow & {
min-width: initial;
max-width: 100%; // prevent overflow
width: initial;
}
}

.mx_ThreadSummary_avatar {
margin-inline-end: $spacing-8;
}

.mx_ThreadSummary_icon {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ThreadSummary and ThreadSummary_icon is used differently, therefore the latter cannot be wrapped with the former.

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 changes: 2 additions & 2 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,14 +533,14 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
if (this.props.highlightLink) {
return (
<a className="mx_ThreadSummaryIcon" href={this.props.highlightLink}>
<a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
{ _t("From a thread") }
</a>
);
}

return (
<p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
<p className="mx_ThreadSummary_icon">{ _t("From a thread") }</p>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/ThreadSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
}}
aria-label={_t("Open thread")}
>
<span className="mx_ThreadSummary_ThreadsAmount">
<span className="mx_ThreadSummary_replies_amount">
{ countSection }
</span>
<ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
Expand Down