mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Closed group update message stylgin
This commit is contained in:
parent
78e2491de0
commit
821cf00b65
21 changed files with 86 additions and 41 deletions
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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`);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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.'
|
||||
);
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue