Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Smaller thread replies and system messages #14099

Merged
merged 25 commits into from
Apr 15, 2019
Merged

Smaller thread replies and system messages #14099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
735f8c9
Add preliminar version of smaller thread reply messages
tassoevan Apr 11, 2019
fddbfcb
Add thread reply preview
tassoevan Apr 11, 2019
e4b3aa1
Add fix for compact message list view
tassoevan Apr 11, 2019
79aec38
Merge branch 'develop' into smaller-thread-messages
sampaiodiego Apr 11, 2019
a7a23a2
Remove edited avatar, use pencil icon and red color for non owner edi…
rodrigok Apr 11, 2019
14e007c
Remove uncessary information from collapsed messages
rodrigok Apr 11, 2019
791920c
Reduce presence of collapsed messages
rodrigok Apr 11, 2019
d5664e4
Improve design of collapsed messages
rodrigok Apr 11, 2019
0bd92fa
Merge branch 'develop' into smaller-thread-messages
engelgabriel Apr 12, 2019
0680f07
Add collapsed style to system messages
tassoevan Apr 12, 2019
504a9ba
RTL fixes
rodrigok Apr 12, 2019
360d7f6
Auto break title line and always keep thread relply in a new row on m…
rodrigok Apr 12, 2019
4d53eae
Do not show scrollbar ticks for replyes of messages that contains men…
rodrigok Apr 12, 2019
64524d7
Merge branch 'develop' into smaller-thread-messages
engelgabriel Apr 12, 2019
a49e0f5
Merge branch 'develop' into smaller-thread-messages
engelgabriel Apr 12, 2019
d438a22
Merge branch 'develop' into smaller-thread-messages
engelgabriel Apr 12, 2019
3623718
Move styles
tassoevan Apr 13, 2019
15d0b2a
Update tests
tassoevan Apr 13, 2019
239c1e5
Fix message loading from server
rodrigok Apr 13, 2019
1df79f9
Fix tests
rodrigok Apr 13, 2019
849f8b1
Save screenshots of all test steps
rodrigok Apr 13, 2019
64e49e1
Try to fix tests
rodrigok Apr 13, 2019
c2aa360
Limit thread’s title to 200px in relply’s preview and fix render of m…
rodrigok Apr 15, 2019
ae4766d
Fix chimp config
rodrigok Apr 15, 2019
e92d8eb
Try to fix tests
rodrigok Apr 15, 2019
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
77 changes: 67 additions & 10 deletions app/theme/client/imports/general/base_old.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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