mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Note to Self

Browse source
This commit is contained in:
Scott Nonnenberg 2019-01-30 17:45:58 -08:00
parent 681ca363fe
commit a43a78731a
15 changed files with 411 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

39
ts/components/Avatar.md
View file

@ -63,6 +63,45 @@
</util.ConversationContext>
```
### Note to self
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={80}
color="pink"
noteToSelf={true}
phoneNumber="(555) 353-3433"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={48}
color="pink"
noteToSelf={true}
phoneNumber="(555) 353-3433"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={36}
color="pink"
noteToSelf={true}
phoneNumber="(555) 353-3433"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={28}
color="pink"
noteToSelf={true}
phoneNumber="(555) 353-3433"
conversationType="direct"
i18n={util.i18n}
/>
</util.ConversationContext>
```
### All colors
```jsx

19
ts/components/Avatar.tsx
View file

@ -9,6 +9,7 @@ interface Props {
color?: string;
conversationType: 'group' | 'direct';
i18n: Localizer;
noteToSelf?: boolean;
name?: string;
phoneNumber?: string;
profileName?: string;
@ -63,11 +64,23 @@ export class Avatar extends React.Component<Props, State> {
}
public renderNoImage() {
const { conversationType, name, size } = this.props;
const { conversationType, name, noteToSelf, size } = this.props;
const initials = getInitials(name);
const isGroup = conversationType === 'group';
if (noteToSelf) {
return (
<div
className={classNames(
'module-avatar__icon',
'module-avatar__icon--note-to-self',
`module-avatar__icon--${size}`
)}
/>
);
}
if (!isGroup && initials) {
return (
<div
@ -93,10 +106,10 @@ export class Avatar extends React.Component<Props, State> {
}
public render() {
const { avatarPath, color, size } = this.props;
const { avatarPath, color, size, noteToSelf } = this.props;
const { imageBroken } = this.state;
const hasImage = avatarPath && !imageBroken;
const hasImage = !noteToSelf && avatarPath && !imageBroken;
if (size !== 28 && size !== 36 && size !== 48 && size !== 80) {
throw new Error(`Size ${size} is not supported!`);

21
ts/components/ConversationListItem.md
View file

@ -38,6 +38,27 @@
</util.LeftPaneContext>
```
#### Conversation with yourself
```jsx
<util.LeftPaneContext theme={util.theme}>
<ConversationListItem
isMe={true}
phoneNumber="(202) 555-0011"
conversationType={'direct'}
name="Mr. Fire🔥"
color="green"
lastUpdated={Date.now() - 5 * 60 * 1000}
lastMessage={{
text: 'Just a second',
status: 'read',
}}
onClick={() => console.log('onClick')}
i18n={util.i18n}
/>
</util.LeftPaneContext>
```
#### All types of status
```jsx

20
ts/components/ConversationListItem.tsx
View file

@ -16,6 +16,7 @@ interface Props {
color?: string;
conversationType: 'group' | 'direct';
avatarPath?: string;
isMe: boolean;
lastUpdated: number;
unreadCount: number;
@ -38,6 +39,7 @@ export class ConversationListItem extends React.Component<Props> {
color,
conversationType,
i18n,
isMe,
name,
phoneNumber,
profileName,
@ -48,6 +50,7 @@ export class ConversationListItem extends React.Component<Props> {
<Avatar
avatarPath={avatarPath}
color={color}
noteToSelf={isMe}
conversationType={conversationType}
i18n={i18n}
name={name}
@ -78,6 +81,7 @@ export class ConversationListItem extends React.Component<Props> {
const {
unreadCount,
i18n,
isMe,
lastUpdated,
name,
phoneNumber,
@ -94,12 +98,16 @@ export class ConversationListItem extends React.Component<Props> {
: null
)}
>
<ContactName
phoneNumber={phoneNumber}
name={name}
profileName={profileName}
i18n={i18n}
/>
{isMe ? (
i18n('noteToSelf')
) : (
<ContactName
phoneNumber={phoneNumber}
name={name}
profileName={profileName}
i18n={i18n}
/>
)}
</div>
<div
className={classNames(

202
ts/components/conversation/ConversationHeader.md
View file

@ -5,100 +5,112 @@ Note the five items in gear menu, and the second-level menu with disappearing me
#### With name and profile, verified
```jsx
<ConversationHeader
i18n={util.i18n}
color="red"
isVerified={true}
avatarPath={util.gifObjectUrl}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0001"
id="1"
profileName="🔥Flames🔥"
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
i18n={util.i18n}
color="red"
isVerified={true}
avatarPath={util.gifObjectUrl}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0001"
id="1"
profileName="🔥Flames🔥"
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
</util.ConversationContext>
```
#### With name, not verified, no avatar
```jsx
<ConversationHeader
i18n={util.i18n}
color="blue"
isVerified={false}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0002"
id="2"
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
i18n={util.i18n}
color="blue"
isVerified={false}
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0002"
id="2"
/>
</util.ConversationContext>
```
#### Profile, no name
```jsx
<ConversationHeader
i18n={util.i18n}
color="teal"
isVerified={false}
phoneNumber="(202) 555-0003"
id="3"
profileName="🔥Flames🔥"
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
i18n={util.i18n}
color="teal"
isVerified={false}
phoneNumber="(202) 555-0003"
id="3"
profileName="🔥Flames🔥"
/>
</util.ConversationContext>
```
#### No name, no profile, no color
```jsx
<ConversationHeader i18n={util.i18n} phoneNumber="(202) 555-0011" id="11" />
<util.ConversationContext theme={util.theme}>
<ConversationHeader i18n={util.i18n} phoneNumber="(202) 555-0011" id="11" />
</util.ConversationContext>
```
### With back button
```jsx
<ConversationHeader
showBackButton={true}
color="deep_orange"
i18n={util.i18n}
phoneNumber="(202) 555-0004"
id="4"
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
showBackButton={true}
color="deep_orange"
i18n={util.i18n}
phoneNumber="(202) 555-0004"
id="4"
/>
</util.ConversationContext>
```
### Disappearing messages set
```jsx
<ConversationHeader
color="indigo"
i18n={util.i18n}
phoneNumber="(202) 555-0005"
id="5"
expirationSettingName="10 seconds"
timerOptions={[
{
name: 'off',
value: 0,
},
{
name: '10 seconds',
value: 10,
},
]}
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
color="indigo"
i18n={util.i18n}
phoneNumber="(202) 555-0005"
id="5"
expirationSettingName="10 seconds"
timerOptions={[
{
name: 'off',
value: 0,
},
{
name: '10 seconds',
value: 10,
},
]}
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
</util.ConversationContext>
```
### In a group
@ -106,34 +118,38 @@ Note the five items in gear menu, and the second-level menu with disappearing me
Note that the menu should includes 'Show Members' instead of 'Show Safety Number'
```jsx
<ConversationHeader
i18n={util.i18n}
color="green"
phoneNumber="(202) 555-0006"
id="6"
isGroup={true}
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
i18n={util.i18n}
color="green"
phoneNumber="(202) 555-0006"
id="6"
isGroup={true}
onSetDisappearingMessages={seconds =>
console.log('onSetDisappearingMessages', seconds)
}
onDeleteMessages={() => console.log('onDeleteMessages')}
onResetSession={() => console.log('onResetSession')}
onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
onShowAllMedia={() => console.log('onShowAllMedia')}
onShowGroupMembers={() => console.log('onShowGroupMembers')}
onGoBack={() => console.log('onGoBack')}
/>
</util.ConversationContext>
```
### In chat with yourself
Note that the menu should not have a 'Show Safety Number' entry.
This is the 'Note to self' conversation. Note that the menu should not have a 'Show Safety Number' entry.
```jsx
<ConversationHeader
color="cyan"
i18n={util.i18n}
phoneNumber="(202) 555-0007"
id="7"
isMe={true}
/>
<util.ConversationContext theme={util.theme}>
<ConversationHeader
color="cyan"
i18n={util.i18n}
phoneNumber="(202) 555-0007"
id="7"
isMe={true}
/>
</util.ConversationContext>
```

19
ts/components/conversation/ConversationHeader.tsx
View file

@ -84,7 +84,22 @@ export class ConversationHeader extends React.Component<Props> {
}
public renderTitle() {
const { name, phoneNumber, i18n, profileName, isVerified } = this.props;
const {
name,
phoneNumber,
i18n,
isMe,
profileName,
isVerified,
} = this.props;
if (isMe) {
return (
<div className="module-conversation-header__title">
{i18n('noteToSelf')}
</div>
);
}
return (
<div className="module-conversation-header__title">
@ -113,6 +128,7 @@ export class ConversationHeader extends React.Component<Props> {
color,
i18n,
isGroup,
isMe,
name,
phoneNumber,
profileName,
@ -125,6 +141,7 @@ export class ConversationHeader extends React.Component<Props> {
color={color}
conversationType={isGroup ? 'group' : 'direct'}
i18n={i18n}
noteToSelf={isMe}
name={name}
phoneNumber={phoneNumber}
profileName={profileName}

16
ts/util/lint/exceptions.json
View file

@ -206,8 +206,8 @@
{
"rule": "jQuery-wrap(",
"path": "js/models/messages.js",
"line": " this.send(wrap(promise));",
"lineNumber": 820,
"line": " return this.send(wrap(promise));",
"lineNumber": 854,
"reasonCategory": "falseMatch",
"updated": "2018-10-05T23:12:28.961Z"
},
@ -215,7 +215,7 @@
"rule": "jQuery-wrap(",
"path": "js/models/messages.js",
"line": " return wrap(",
"lineNumber": 1029,
"lineNumber": 1091,
"reasonCategory": "falseMatch",
"updated": "2018-10-05T23:12:28.961Z"
},
@ -527,7 +527,7 @@
"rule": "jQuery-$(",
"path": "js/views/conversation_search_view.js",
"line": " this.$new_contact = this.$('.new-contact');",
"lineNumber": 42,
"lineNumber": 40,
"reasonCategory": "usageTrusted",
"updated": "2018-09-19T21:59:32.770Z",
"reasonDetail": "Protected from arbitrary input"
@ -536,7 +536,7 @@
"rule": "jQuery-append(",
"path": "js/views/conversation_search_view.js",
"line": " this.$el.append(this.typeahead_view.el);",
"lineNumber": 59,
"lineNumber": 57,
"reasonCategory": "usageTrusted",
"updated": "2018-09-19T18:13:29.628Z",
"reasonDetail": "Interacting with already-existing DOM nodes"
@ -545,7 +545,7 @@
"rule": "jQuery-$(",
"path": "js/views/conversation_search_view.js",
"line": " this.new_contact_view.$('.number').text(i18n('invalidNumberError'));",
"lineNumber": 111,
"lineNumber": 119,
"reasonCategory": "usageTrusted",
"updated": "2018-09-19T21:59:32.770Z",
"reasonDetail": "Protected from arbitrary input"
@ -554,7 +554,7 @@
"rule": "jQuery-insertAfter(",
"path": "js/views/conversation_search_view.js",
"line": " this.hintView.$el.insertAfter(this.$input);",
"lineNumber": 147,
"lineNumber": 155,
"reasonCategory": "usageTrusted",
"updated": "2018-09-19T18:13:29.628Z",
"reasonDetail": "Interacting with already-existing DOM nodes"
@ -6215,4 +6215,4 @@
"updated": "2018-09-17T20:50:40.689Z",
"reasonDetail": "Hard-coded value"
}
]
]