From ad34bdca09a7b31aa2f33b3650df1dbaa0053eee Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 29 Aug 2018 10:07:49 +0200
Subject: [PATCH] UI: minor tweaks to new message participants list (#6328)
* Icon for button
* Display name when editing on mobile
* Always display name on mobile when less/or 4 participants involved
---
.../widgets/private-message-map.js.es6 | 15 +++++++++++++--
.../stylesheets/common/base/topic-post.scss | 19 +++++++++++--------
config/locales/client.en.yml | 2 +-
3 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/app/assets/javascripts/discourse/widgets/private-message-map.js.es6 b/app/assets/javascripts/discourse/widgets/private-message-map.js.es6
index 86ca8470787..172093afdee 100644
--- a/app/assets/javascripts/discourse/widgets/private-message-map.js.es6
+++ b/app/assets/javascripts/discourse/widgets/private-message-map.js.es6
@@ -142,13 +142,24 @@ export default createWidget("private-message-map", {
);
}
- const result = [h("div.participants", participants)];
+ let hideNamesClass = "";
+ if (
+ !this.state.isEditing &&
+ this.site.mobileView &&
+ Ember.makeArray(participants[0]).length > 4
+ ) {
+ hideNamesClass = ".hide-names";
+ }
+
+ const result = [h(`div.participants${hideNamesClass}`, participants)];
const controls = [
this.attach("button", {
action: "toggleEditing",
label: "private_message_info.edit",
- className: "btn"
+ icon: "user",
+ iconRight: true,
+ className: "btn add-remove-participant-btn"
})
];
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index ad27e35ef6b..96a460194db 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -346,6 +346,13 @@ aside.quote {
align-items: center;
margin-bottom: 0.5em;
+ &.hide-names .user {
+ .username,
+ .group-name {
+ display: none;
+ }
+ }
+
.user {
border: 1px solid $primary-low;
border-radius: 0.25em;
@@ -373,10 +380,6 @@ aside.quote {
.username,
.group-name {
margin-right: 0.25em;
-
- @include breakpoint(mobile) {
- display: none;
- }
}
&:last-child {
@@ -392,11 +395,11 @@ aside.quote {
border-radius: 0 0.25em 0.25em 0;
}
}
+ }
- .edit-participants-btn {
- margin: 0.125em 0 0.125em 0;
- align-self: flex-start;
- border-radius: 0.25em;
+ .add-remove-participant-btn {
+ .d-icon {
+ margin-left: 0.25em;
}
}
}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index db8a2f65965..4479388b985 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1130,7 +1130,7 @@ en:
private_message_info:
title: "Message"
invite: "Invite Others..."
- edit: "Add or remove participants..."
+ edit: "Add or remove"
leave_message: "Do you really want to leave this message?"
remove_allowed_user: "Do you really want to remove {{name}} from this message?"
remove_allowed_group: "Do you really want to remove {{name}} from this message?"