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 342d36251d5..86ca8470787 100644
--- a/app/assets/javascripts/discourse/widgets/private-message-map.js.es6
+++ b/app/assets/javascripts/discourse/widgets/private-message-map.js.es6
@@ -1,11 +1,10 @@
-import { iconNode } from "discourse-common/lib/icon-library";
import { createWidget } from "discourse/widgets/widget";
import { h } from "virtual-dom";
-import { avatarFor } from "discourse/widgets/post";
+import { avatarFor, avatarImg } from "discourse/widgets/post";
import hbs from "discourse/widgets/hbs-compiler";
createWidget("pm-remove-group-link", {
- tagName: "a.remove-invited",
+ tagName: "a.remove-invited.no-text.btn-icon.btn",
template: hbs`{{d-icon "times"}}`,
click() {
@@ -30,16 +29,20 @@ createWidget("pm-map-user-group", {
},
template: hbs`
- {{fa-icon 'users'}}
- {{attrs.group.name}}
+
+ {{d-icon "users"}}
+ {{attrs.group.name}}
+
+ {{#if attrs.isEditing}}
{{#if attrs.canRemoveAllowedUsers}}
{{attach widget="pm-remove-group-link" attrs=attrs.group}}
{{/if}}
+ {{/if}}
`
});
createWidget("pm-remove-link", {
- tagName: "a.remove-invited",
+ tagName: "a.remove-invited.no-text.btn-icon.btn",
template: hbs`{{d-icon "times"}}`,
click() {
@@ -65,20 +68,36 @@ createWidget("pm-map-user", {
html(attrs) {
const user = attrs.user;
- const avatar = avatarFor("tiny", {
- template: user.avatar_template,
- username: user.username
- });
- const link = h("a", { attributes: { href: user.get("path") } }, [
- avatar,
- " ",
- h("span", user.username)
- ]);
+ const username = h("span.username", user.username);
+
+ let link;
+
+ if (this.site && this.site.mobileView) {
+ const avatar = avatarImg("tiny", {
+ template: user.avatar_template,
+ username: user.username
+ });
+ link = h("a", { attributes: { href: user.get("path") } }, [
+ avatar,
+ username
+ ]);
+ } else {
+ const avatar = avatarFor("tiny", {
+ template: user.avatar_template,
+ username: user.username
+ });
+
+ link = h(
+ "a",
+ { attributes: { class: "user-link", href: user.get("path") } },
+ [avatar, username]
+ );
+ }
+
const result = [link];
const isCurrentUser = attrs.canRemoveSelfId === user.get("id");
- if (attrs.canRemoveAllowedUsers || isCurrentUser) {
- result.push(" ");
+ if (attrs.isEditing && (attrs.canRemoveAllowedUsers || isCurrentUser)) {
result.push(this.attach("pm-remove-link", { user, isCurrentUser }));
}
@@ -89,6 +108,12 @@ createWidget("pm-map-user", {
export default createWidget("private-message-map", {
tagName: "section.information.private-message-map",
+ buildKey: attrs => `private-message-map-${attrs.id}`,
+
+ defaultState() {
+ return { isEditing: false };
+ },
+
html(attrs) {
const participants = [];
@@ -97,48 +122,52 @@ export default createWidget("private-message-map", {
attrs.allowedGroups.map(group => {
return this.attach("pm-map-user-group", {
group,
- canRemoveAllowedUsers: attrs.canRemoveAllowedUsers
+ canRemoveAllowedUsers: attrs.canRemoveAllowedUsers,
+ isEditing: this.state.isEditing
});
})
);
}
- const allowedUsersLength = attrs.allowedUsers.length;
-
- if (allowedUsersLength) {
+ if (attrs.allowedUsers.length) {
participants.push(
attrs.allowedUsers.map(au => {
return this.attach("pm-map-user", {
user: au,
canRemoveAllowedUsers: attrs.canRemoveAllowedUsers,
- canRemoveSelfId: attrs.canRemoveSelfId
+ canRemoveSelfId: attrs.canRemoveSelfId,
+ isEditing: this.state.isEditing
});
})
);
}
- const result = [
- h("h3", [
- iconNode("envelope"),
- " ",
- I18n.t("private_message_info.title")
- ]),
- h("div.participants", participants)
+ const result = [h("div.participants", participants)];
+
+ const controls = [
+ this.attach("button", {
+ action: "toggleEditing",
+ label: "private_message_info.edit",
+ className: "btn"
+ })
];
- if (attrs.canInvite) {
- result.push(
- h(
- "div.controls",
- this.attach("button", {
- action: "showInvite",
- label: "private_message_info.invite",
- className: "btn"
- })
- )
+ if (attrs.canInvite && this.state.isEditing) {
+ controls.push(
+ this.attach("button", {
+ action: "showInvite",
+ icon: "plus",
+ className: "btn.no-text.btn-icon"
+ })
);
}
+ result.push(h("div.controls", controls));
+
return result;
+ },
+
+ toggleEditing() {
+ this.state.isEditing = !this.state.isEditing;
}
});
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index e1626ab2a6b..88e1a66af29 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -327,62 +327,77 @@ aside.quote {
}
}
+ .controls {
+ display: flex;
+ align-items: center;
+
+ .btn {
+ margin-right: 0.5em;
+
+ &:last-child {
+ margin: 0;
+ }
+ }
+ }
+
.participants {
- // PMs
- box-sizing: border-box;
- margin: 0 -10px;
- margin-bottom: 0.5em;
- display: flex; // IE11
+ display: flex;
flex-wrap: wrap;
- justify-content: flex-start;
- @supports (display: grid) {
- // Overrides flex fallback above
- display: grid;
- grid-template-columns: repeat(4, auto);
- @include breakpoint(tablet, min-width) {
- grid-template-columns: repeat(5, auto);
+ align-items: center;
+ margin-bottom: 0.5em;
+
+ .user {
+ border: 1px solid $primary-low;
+ border-radius: 0.25em;
+ padding: 0;
+ margin: 0.125em 0.25em 0.125em 0;
+ display: flex;
+ align-items: center;
+ height: 26px;
+
+ .user-link,
+ .group-link {
+ color: $primary-high;
+
+ &:hover {
+ color: $primary;
+ }
}
- @include breakpoint(mobile) {
- grid-template-columns: repeat(2, auto);
- font-size: $font-down-1;
+
+ .avatar,
+ .d-icon-users {
+ margin-left: 0.25em;
+ margin-right: 0.25em;
}
- @include breakpoint(mobile-small) {
- grid-template-columns: repeat(1, auto);
+
+ .username,
+ .group-name {
+ margin-right: 0.25em;
+
+ @include breakpoint(mobile) {
+ display: none;
+ }
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .remove-invited {
+ display: flex;
+ height: 100%;
+ padding: 0 0.5em;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border-radius: 0 0.25em 0.25em 0;
}
}
- .user {
- display: flex;
- align-items: center;
- padding: 4px 8px;
- overflow: hidden;
- flex: 0 0 auto; // IE11
- a {
- color: $primary-high;
- &[href] {
- display: flex;
- align-items: center;
- white-space: nowrap;
- min-width: 0;
- }
- span {
- flex: 1 1 auto;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- &.group {
- margin: 0;
- .d-icon {
- margin-right: 4px;
- width: 20px;
- text-align: center;
- }
- }
- }
- .d-icon-times {
- margin-left: 0.25em;
- color: dark-light-choose($primary-medium, $secondary-high);
+ .edit-participants-btn {
+ margin: 0.125em 0 0.125em 0;
+ align-self: flex-start;
+ border-radius: 0.25em;
}
}
}
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index e364beaa214..1e173a419c9 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -379,7 +379,7 @@ nav.post-controls {
.avatars,
.links,
.information {
- padding: 7px 10px 15px 10px;
+ padding: 7px 10px 7px 10px;
color: $primary;
}
.buttons {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 32bb849b995..5b9d2c84774 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1129,6 +1129,7 @@ en:
private_message_info:
title: "Message"
invite: "Invite Others..."
+ edit: "Add or remove participants..."
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?"