From 821cf00b65019174c68d04c3eefcb52a8fb81dea Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 5 Feb 2020 14:19:01 +1100 Subject: [PATCH] Closed group update message stylgin --- _locales/ar/messages.json | 2 +- _locales/bg/messages.json | 2 +- _locales/en/messages.json | 8 +++++- _locales/es_419/messages.json | 2 +- _locales/hi/messages.json | 2 +- _locales/hr/messages.json | 2 +- _locales/kn/messages.json | 2 +- _locales/ko/messages.json | 2 +- _locales/mk/messages.json | 2 +- _locales/sr/messages.json | 2 +- _locales/uk/messages.json | 2 +- _locales/vi/messages.json | 2 +- js/models/messages.js | 13 +++++++--- js/views/group_update_view.js | 2 +- stylesheets/_conversation.scss | 15 +++++------ stylesheets/_modules.scss | 10 ++++++-- stylesheets/_session.scss | 19 ++++++++++++-- test/models/messages_test.js | 4 +-- .../conversation/GroupNotification.tsx | 8 +----- .../session/SessionChannelSettings.tsx | 1 + .../session/SessionClosableOverlay.tsx | 25 +++++++++++++++---- 21 files changed, 86 insertions(+), 41 deletions(-) diff --git a/_locales/ar/messages.json b/_locales/ar/messages.json index 8dea81532..4d8a837b5 100644 --- a/_locales/ar/messages.json +++ b/_locales/ar/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/bg/messages.json b/_locales/bg/messages.json index b8f2fddaa..9ad74f832 100644 --- a/_locales/bg/messages.json +++ b/_locales/bg/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 2c59f0828..0b9c9db1a 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1994,7 +1994,7 @@ "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'.", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { @@ -2165,6 +2165,9 @@ "description": "Title shown to the user to confirm they want to leave the group" }, + "noContactsForGroup": { + "message": "You don't have any contacts to start a group with." + }, "copiedPublicKey": { "message": "Session ID copied", "description": "A toast message telling the user that the key was copied" @@ -2725,6 +2728,9 @@ "joinOpenGroup": { "message": "Join Open Group" }, + "newClosedGroup": { + "message": "New Closed Group" + }, "createClosedGroup": { "message": "Create Closed Group" }, diff --git a/_locales/es_419/messages.json b/_locales/es_419/messages.json index 72db1df40..fddcf20ea 100644 --- a/_locales/es_419/messages.json +++ b/_locales/es_419/messages.json @@ -1368,7 +1368,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/hi/messages.json b/_locales/hi/messages.json index 2f36156c4..4cdb26f48 100644 --- a/_locales/hi/messages.json +++ b/_locales/hi/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/hr/messages.json b/_locales/hr/messages.json index df961d479..4205980df 100644 --- a/_locales/hr/messages.json +++ b/_locales/hr/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/kn/messages.json b/_locales/kn/messages.json index f4e068d2e..3b3af59cf 100644 --- a/_locales/kn/messages.json +++ b/_locales/kn/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json index 5faf65d0a..968abaec2 100644 --- a/_locales/ko/messages.json +++ b/_locales/ko/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/mk/messages.json b/_locales/mk/messages.json index 2fa0c67b3..3987e9b00 100644 --- a/_locales/mk/messages.json +++ b/_locales/mk/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/sr/messages.json b/_locales/sr/messages.json index 4ad55771a..e58b1496e 100644 --- a/_locales/sr/messages.json +++ b/_locales/sr/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/uk/messages.json b/_locales/uk/messages.json index 03612e3af..5bc5dae14 100644 --- a/_locales/uk/messages.json +++ b/_locales/uk/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/_locales/vi/messages.json b/_locales/vi/messages.json index 75dca695f..496213f33 100644 --- a/_locales/vi/messages.json +++ b/_locales/vi/messages.json @@ -1504,7 +1504,7 @@ "description": "Shown in the conversation history when someone updates the group" }, "titleIsNow": { - "message": "Title is now '$name$'", + "message": "Group name has been set to '$name$'", "description": "Shown in the conversation history when someone changes the title of the group", "placeholders": { "name": { diff --git a/js/models/messages.js b/js/models/messages.js index ac268f332..0fb0a6e61 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -203,6 +203,13 @@ } return conversation.getDisplayName(); }, + getLokiNameForNumber(number) { + const conversation = ConversationController.get(number); + if (!conversation) { + return number; + } + return conversation.getLokiProfile().displayName; + }, getDescription() { if (this.isGroupUpdate()) { const groupUpdate = this.get('group_update'); @@ -224,10 +231,10 @@ messages.push(i18n('titleIsNow', groupUpdate.name)); } if (groupUpdate.joined && groupUpdate.joined.length) { - const names = _.map( - groupUpdate.joined, - this.getNameForNumber.bind(this) + const names = groupUpdate.joined.map(name => + this.getLokiNameForNumber(name) ); + if (names.length > 1) { messages.push(i18n('multipleJoinedTheGroup', names.join(', '))); } else { diff --git a/js/views/group_update_view.js b/js/views/group_update_view.js index 11ff2a57a..b7e150d5e 100644 --- a/js/views/group_update_view.js +++ b/js/views/group_update_view.js @@ -19,7 +19,7 @@ const messages = ['Updated the group.']; if (this.model.name) { - messages.push(`Title is now '${this.model.name}'.`); + messages.push(`Group name has been set to '${this.model.name}'.`); } if (this.model.joined) { messages.push(`${this.model.joined.join(', ')} joined the group`); diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index d2453c1b2..a320d6dbc 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -210,7 +210,7 @@ align-self: flex-start; - box-shadow: 2px 2px lightgrey; + box-shadow: none; .title { margin: 6px; @@ -246,17 +246,18 @@ } .join-btn { - background-color: #e0e0e0; + background-color: #00f782; + color: white; padding: 6px 10px; margin-left: 6px; - border-radius: 6px; - box-shadow: 2px 2px 1px #c0c0c0; - color: #404040; + border-radius: 2px; + box-shadow: none; user-select: none; cursor: pointer; + transition: 0.25s; &:hover { - background-color: #c7c7c7; + background-color: #00d672; } } } @@ -266,7 +267,7 @@ .group-invitation { background-color: #242424; border-color: #303030; - box-shadow: 2px 2px #4f4f4f; + box-shadow: none; .title { color: lightgrey; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 234f424a6..097920c68 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1235,11 +1235,17 @@ } .module-group-notification__change { - margin-top: 10px; + background-color: #212121; + width: 90%; + max-width: 700px; + margin: 10px auto; + padding: 5px 20px; + border-radius: 4px; } .module-group-notification__contact { - font-weight: 300; + font-family: 'SF Pro Text'; + font-weight: bold; } // Module: Reset Session Notification diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ef7d0fafc..5781ced1e 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -150,6 +150,11 @@ div.spacer-lg { width: 100%; } +input, +textarea { + caret-color: $session-color-green !important; +} + @mixin text-highlight($color) { background-color: $color; padding: $session-margin-xs $session-margin-sm; @@ -269,7 +274,7 @@ $session_message-container-border-radius: 5px; &.brand { color: $session-color-white; - &:hover { + &:not(.disabled):hover { filter: brightness(90%); } @@ -357,7 +362,7 @@ $session_message-container-border-radius: 5px; font-family: $session-font-family; border-radius: 500px; - &:hover { + &:not(.disabled):hover { color: $session-color-white; border-color: $session-color-white; } @@ -1698,6 +1703,12 @@ input { display: flex; flex-direction: column; } + + &__no-contacts { + font-family: 'SpaceMono'; + text-align: center; + padding: 20px; + } } .create-group-name-input { .session-id-editable { @@ -1706,6 +1717,10 @@ input { textarea { padding-bottom: 0px !important; } + + &-disabled { + border: 1px solid $session-color-dark-grey !important; + } } } diff --git a/test/models/messages_test.js b/test/models/messages_test.js index 70efb2708..7b0f7ece0 100644 --- a/test/models/messages_test.js +++ b/test/models/messages_test.js @@ -101,7 +101,7 @@ describe('MessageCollection', () => { message = messages.add({ group_update: { name: 'blerg' } }); assert.equal( message.getDescription(), - "Title is now 'blerg'", + "Group name has been set to 'blerg'", 'Returns a single notice if only group_updates.name changes.' ); @@ -126,7 +126,7 @@ describe('MessageCollection', () => { }); assert.equal( message.getDescription(), - "Title is now 'blerg', Bob joined the group", + "Group name has been set to 'blerg', Bob joined the group", 'Notes when there are multiple changes to group_updates properties.' ); diff --git a/ts/components/conversation/GroupNotification.tsx b/ts/components/conversation/GroupNotification.tsx index 8a57a9eed..4e4806e13 100644 --- a/ts/components/conversation/GroupNotification.tsx +++ b/ts/components/conversation/GroupNotification.tsx @@ -2,7 +2,6 @@ import React from 'react'; // import classNames from 'classnames'; import { compact, flatten } from 'lodash'; -import { ContactName } from './ContactName'; import { Intl } from '../Intl'; import { LocalizerType } from '../../types/Util'; @@ -39,12 +38,7 @@ export class GroupNotification extends React.Component { key={`external-${contact.phoneNumber}`} className="module-group-notification__contact" > - + {contact.profileName} ); diff --git a/ts/components/session/SessionChannelSettings.tsx b/ts/components/session/SessionChannelSettings.tsx index 30b4465b0..8a5155b40 100644 --- a/ts/components/session/SessionChannelSettings.tsx +++ b/ts/components/session/SessionChannelSettings.tsx @@ -213,6 +213,7 @@ export class SessionChannelSettings extends React.Component {
{window.i18n('members', memberCount)}
+
)} { return friends; } + // tslint:disable-next-line max-func-body-length */ public render(): JSX.Element { const { overlayMode, @@ -129,7 +130,7 @@ export class SessionClosableOverlay extends React.Component { placeholder = window.i18n('channelUrlPlaceholder'); break; case 'closed-group': - title = window.i18n('createClosedGroup'); + title = window.i18n('newClosedGroup'); buttonText = window.i18n('createClosedGroup'); descriptionLong = window.i18n('createClosedGroupDescription'); subtitle = window.i18n('createClosedGroupNamePrompt'); @@ -142,6 +143,10 @@ export class SessionClosableOverlay extends React.Component { const { groupName, selectedMembers } = this.state; const ourSessionID = window.textsecure.storage.user.getNumber(); + const contacts = this.getContacts(); + const noContactsForClosedGroup = + overlayMode === SessionGroupType.Closed && contacts.length === 0; + return (
@@ -155,6 +160,7 @@ export class SessionClosableOverlay extends React.Component {

{title}

+

{subtitle}
@@ -165,12 +171,14 @@ export class SessionClosableOverlay extends React.Component {
+ + {/* */}
) : ( {
-
- {this.renderMemberList()} -
+ {noContactsForClosedGroup ? ( +
+ {window.i18n('noContactsForGroup')} +
+ ) : ( +
+ {this.renderMemberList()} +
+ )}
@@ -227,6 +241,7 @@ export class SessionClosableOverlay extends React.Component { buttonColor={SessionButtonColor.Green} buttonType={SessionButtonType.BrandOutline} text={buttonText} + disabled={noContactsForClosedGroup} onClick={() => onButtonClick(groupName, selectedMembers)} />