Closed group update message stylgin

This commit is contained in:
Vincent 2020-02-05 14:19:01 +11:00
parent 78e2491de0
commit 821cf00b65
21 changed files with 86 additions and 41 deletions

View file

@ -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": {

View file

@ -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": {

View file

@ -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"
},

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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 {

View file

@ -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`);

View file

@ -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;

View file

@ -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

View file

@ -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;
}
}
}

View file

@ -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.'
);

View file

@ -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<Props> {
key={`external-${contact.phoneNumber}`}
className="module-group-notification__contact"
>
<ContactName
i18n={i18n}
phoneNumber={contact.phoneNumber}
profileName={contact.profileName}
name={contact.name}
/>
{contact.profileName}
</span>
);

View file

@ -213,6 +213,7 @@ export class SessionChannelSettings extends React.Component<Props, any> {
<div className="text-subtle">
{window.i18n('members', memberCount)}
</div>
<div className="spacer-lg" />
</>
)}
<input

View file

@ -83,6 +83,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
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<Props, State> {
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<Props, State> {
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 (
<div className="module-left-pane-overlay">
<div className="exit">
@ -155,6 +160,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
<div className="spacer-md" />
<h2>{title}</h2>
<h3>
{subtitle}
<hr className="green-border" />
@ -165,12 +171,14 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
<div className="create-group-name-input">
<SessionIdEditable
ref={this.inputRef}
editable={true}
editable={!noContactsForClosedGroup}
placeholder={placeholder}
value={this.state.groupName}
maxLength={window.CONSTANTS.MAX_GROUPNAME_LENGTH}
onChange={this.onGroupNameChanged}
/>
{/* */}
</div>
) : (
<SessionIdEditable
@ -188,9 +196,15 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
<div className="spacer-lg" />
<div className="group-member-list__container">
<div className="group-member-list__selection">
{this.renderMemberList()}
</div>
{noContactsForClosedGroup ? (
<div className="group-member-list__no-contacts">
{window.i18n('noContactsForGroup')}
</div>
) : (
<div className="group-member-list__selection">
{this.renderMemberList()}
</div>
)}
</div>
<div className="spacer-lg" />
@ -227,6 +241,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
text={buttonText}
disabled={noContactsForClosedGroup}
onClick={() => onButtonClick(groupName, selectedMembers)}
/>
</div>