Skip to content

Commit

Permalink
Smaller thread replies and system messages (#14099)
Browse files Browse the repository at this point in the history 
* Add preliminar version of smaller thread reply messages

* Add thread reply preview

* Add fix for compact message list view

* Remove edited avatar, use pencil icon and red color for non owner editions

* Remove uncessary information from collapsed messages

* Reduce presence of collapsed messages

* Improve design of collapsed messages

* Add collapsed style to system messages

Co-authored-by: vynmera <39674991+vynmera@users.noreply.github.com>

* RTL fixes

* Auto break title line and always keep thread relply in a new row on mobiles

* Do not show scrollbar ticks for replyes of messages that contains mentions

* Move styles

* Update tests

* Fix message loading from server

* Fix tests

* Save screenshots of all test steps

* Try to fix tests

* Limit thread’s title to 200px in relply’s preview and fix render of multiline replies

* Fix chimp config

* Try to fix tests
  • Loading branch information
@tassoevan @rodrigok
tassoevan authored and rodrigok committed Apr 15, 2019
1 parent f36236a commit 4ea7efc
Show file tree
Hide file tree
Showing 13 changed files with 244 additions and 80 deletions.
77 changes: 67 additions & 10 deletions app/theme/client/imports/general/base_old.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2766,9 +2766,10 @@ rc-old select,
margin-right: 5px;

font-family: inherit;
font-size: inherit;
font-size: 0.875rem;

font-weight: 600;
line-height: inherit;
}

& .thumb {
Expand Down Expand Up @@ -2802,24 +2803,30 @@ rc-old select,
}
}

& .info {
font-size: 12px;
& .title {
display: flex;
flex-direction: row;

font-size: 0.75rem;

line-height: 1.25rem;
align-items: center;

& .edited {
margin-left: 3px;
padding-left: 3px;

border-left: 1px dotted;
}

& .is-bot,
& .role-tag {
margin: 0 3px;
padding: 1px 4px;

border-width: 1px;

border-radius: var(--border-radius);
background: #ffffff;

line-height: initial;
}
}

Expand All @@ -2841,13 +2848,14 @@ rc-old select,
display: none;
}

& .info {
& .title {
position: absolute;
left: 5px;

width: 60px;

text-align: right;
justify-content: flex-end;

& .time,
& .role-tag,
Expand Down Expand Up @@ -3008,6 +3016,51 @@ rc-old select,
display: none;
}
}

&.collapsed {
min-height: 25px;
padding: 2px 50px 2px 70px;

font-size: 12px;

& > .thumb {
top: 3px;

width: 20px;
height: 20px;
margin-left: 16px;

& .avatar {
width: 100%;
height: 100%;
}
}

& .user {
font-size: 0.75rem;
font-weight: initial;
}

& .body,
& .message-oembed,
& .attachment,
& .reactions,
& .edited,
& .role-tag,
&:hover .message-actions {
display: none;
}

&.system {
& .title {
display: inline-flex;
}

& .body {
display: inline-flex;
}
}
}
}

.rc-old .image-labels {
Expand Down Expand Up @@ -3079,7 +3132,7 @@ rc-old select,
}
}

& .info {
& .title {
& .avatar-image {
border-radius: 2px;
}
Expand All @@ -3094,6 +3147,7 @@ rc-old select,

width: 20px;
height: 20px;
margin-left: 0;

& .avatar {
width: 20px;
Expand All @@ -3107,11 +3161,14 @@ rc-old select,
display: inline-block;
}

& .info {
& .title {
position: relative;
left: 0;

text-align: right;
width: auto;

text-align: left;
justify-content: initial;

& .time,
& .edited {
Expand Down
25 changes: 18 additions & 7 deletions app/theme/client/imports/general/rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,16 @@
right: 50%;
left: auto;
}

&.compact {
& .message {
padding: 5px 45px 0 15px;

&.collapsed .thumb {
margin: 0;
}
}
}
}

& .terminal {
Expand Down Expand Up @@ -390,14 +400,9 @@
left: auto;
}

& .info .edited {
& .title .edited {
margin-right: 3px;
margin-left: auto;
padding-right: 3px;
padding-left: auto;

border-right: 1px dotted #bab8d8;
border-left: unset;
}

& .private {
Expand All @@ -408,7 +413,7 @@
&.sequential {
padding-top: 4px;

& .info {
& .title {
right: 5px;
left: auto;

Expand All @@ -431,6 +436,12 @@
}
}
}

&.collapsed {
& > .thumb {
margin: 0 16px 0 0;
}
}
}

& blockquote {
Expand Down
78 changes: 63 additions & 15 deletions app/threads/client/threads.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,32 +25,80 @@
flex-shrink: 1;
}

.thread-replied {
overflow: hidden;
.message {
& .thread-replied {

white-space: nowrap;
text-overflow: ellipsis;
display: inline-flex;
overflow: hidden;

color: var(--color-gray);
margin-left: 3px;

font-size: 14px;
cursor: pointer;

white-space: nowrap;
text-overflow: ellipsis;

color: var(--rc-color-link-active);

align-items: baseline;
flex-flow: row nowrap;

& .rc-icon {
position: relative;
bottom: -0.15rem;

min-width: 18px;
}

& .thread-quote {
overflow: hidden;

max-width: 200px;

white-space: nowrap;
text-overflow: ellipsis;
}

& .thread-reply-preview {
display: none;
overflow: hidden;

white-space: nowrap;
text-overflow: ellipsis;
}
}

&.collapsed .thread-reply-preview {
display: initial;
}
}

.message.sequential > .body > .thread-replied {
display: none;
.compact .message.collapsed {
& .thread-replied {
& .thread-reply-switch,
& .thread-reply-preview {
display: none;
}
}
}

.thread-quote {
cursor: pointer;
@media (width < 500px) {
.message {
& .title {
flex-wrap: wrap;
}

color: var(--rc-color-link-active);
& .thread-replied {
flex-basis: 100%;
}
}
}

.message.sequential > .body > .thread-replied {
display: none;
}

.contextual-bar__content.thread,
.contextual-bar__content.threads {
padding: 0;
}

.js-open-thread {
cursor: pointer;
}
53 changes: 26 additions & 27 deletions app/ui-message/client/message.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template name="message">
<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message background-transparent-dark-hover {{ignoredClass}} {{sequentialClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
<li id="{{templatePrefix}}{{msg._id}}" data-id="{{msg._id}}" data-context={{actionContext}} class="message background-transparent-dark-hover {{ignoredClass}} {{sequentialClass}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{collapsed}} {{customClass}}" data-username="{{msg.u.username}}" data-tmid="{{msg.tmid}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
{{#if avatar}}
{{#if avatarFromUsername}}
<button class="thumb user-card-message" data-username="{{msg.u.username}}" tabindex="1">{{> avatar username=avatarFromUsername}}</button>
Expand All @@ -21,8 +21,8 @@
<button class="thumb user-card-message" data-username="{{msg.u.username}}" tabindex="1">{{> avatar username=msg.u.username}}</button>
{{/if}}
{{/if}}
<button type="button" class="user user-card-message color-primary-font-color" data-username="{{msg.u.username}}" tabindex="1">{{getName}}{{#if showUsername}} <span class="message-alias border-component-color color-info-font-color">@{{msg.u.username}}</span>{{/if}}</button>
<span class="info border-component-color color-info-font-color">
<div class="title border-component-color color-info-font-color">
<button type="button" class="user user-card-message color-primary-font-color" data-username="{{msg.u.username}}" tabindex="1">{{getName}}{{#if showUsername}} <span class="message-alias border-component-color color-info-font-color">@{{msg.u.username}}</span>{{/if}}</button>
{{#each role in roleTags}}
<span class="role-tag color-secondary-color border-component-color" data-role="{{role.description}}">{{role.description}}</span>
{{/each}}
Expand All @@ -42,43 +42,42 @@
{{/if}}
{{#if edited}}
<span class="edited" title='{{_ "edited"}} {{_ "at"}} {{editTime}} {{_ "by"}} {{editedBy}}'>
<i class="icon-edit" aria-label="{{_ "Edited"}}"></i>
<button class="thumb thumb-small user-card-message" data-username="{{editedBy}}" tabindex="1">{{> avatar username=editedBy}}</button>
<i class="icon-pencil{{#if $neq editedBy msg.u.username}} error-color{{/if}}" aria-label="{{_ "Edited"}}"></i>
</span>
{{/if}}
{{#if msg.alert}}<div aria-label="{{_ msg.alert }}" class="rc-tooltip message-unread"></div> {{/if}}
{{#if private}}
<span class="private">{{_ "Only_you_can_see_this_message"}}</span>
{{/if}}
</span>
{{#if fromSearch}}
<span class="user color-info-font-color">
{{>icon icon=roomIcon}}{{channelName}}
</span>
{{/if}}
{{#if isIgnored}}
<span class="toggle-hidden icon-right-dir" data-message="{{msg._id}}"> {{_ "Message_Ignored"}} </span>
{{/if}}
{{#if isThreadReply}}
<span class="thread-replied">
{{> icon icon="thread" classes="js-open-thread"}}
<q role="button" aria-label="{{_ "Open_thread"}}" class="js-open-thread thread-quote">
<span class="message-body--unstyled">{{{parentMessage}}}</span>
</q>
<span class="js-toggle-thread-reply thread-reply-switch {{collapseSwitchClass}}"></span>
<span role="button" class="js-toggle-thread-reply thread-reply-preview color-primary-font-color">
<span class="message-body--unstyled">{{{normalizedBody}}}</span>
</span>
</span>
{{/if}}
{{#if fromSearch}}
<span class="user color-info-font-color">
{{>icon icon=roomIcon}}{{channelName}}
</span>
{{/if}}
{{#if isIgnored}}
<span class="toggle-hidden icon-right-dir" data-message="{{msg._id}}"> {{_ "Message_Ignored"}} </span>
{{/if}}
</div>
<div class="body {{bodyClass}}" dir="auto" data-unread-text="{{_ "Unread_Messages"}}">
{{#if isSnippet}}
<div class="snippet-name">{{_ "Snippet_name"}}: {{snippetName}}</div>
{{/if}}
{{#if isDecrypting}}
<span>******</span>
{{else}}
{{#if and settings.showreply msg.tmid}}
<p class="thread-replied">
{{_ "Replied_on"}}:
<q role="button" aria-label="{{_ "Open_thread"}}" class="thread-quote js-open-thread">
<span class="message-body--unstyled">{{{parentMessage}}}</span>
</q>
</p>
<blockquote>
{{{body}}}
</blockquote>
{{else}}
{{{body}}}
{{/if}}
{{{body}}}
{{/if}}
{{#if hasOembed}}
{{#each msg.urls}}
Expand Down
Loading

0 comments on commit 4ea7efc

Please sign in to comment.