mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-04-27 11:53:23 +01:00
Move left pane entirely to React
This commit is contained in:
Scott Nonnenberg
@@ -3,6 +3,7 @@
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
name="Someone 🔥 Somewhere"
|
||||
conversationType={'direct'}
|
||||
phoneNumber="(202) 555-0011"
|
||||
@@ -12,7 +13,7 @@
|
||||
text: "What's going on?",
|
||||
status: 'sent',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
@@ -23,6 +24,7 @@
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -32,7 +34,7 @@
|
||||
text: 'Just a second',
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
@@ -43,6 +45,7 @@
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isMe={true}
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
@@ -53,7 +56,7 @@
|
||||
text: 'Just a second',
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
@@ -65,6 +68,7 @@
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -74,10 +78,11 @@
|
||||
text: 'Sending',
|
||||
status: 'sending',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -87,10 +92,11 @@
|
||||
text: 'Sent',
|
||||
status: 'sent',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -100,10 +106,11 @@
|
||||
text: 'Delivered',
|
||||
status: 'delivered',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -113,10 +120,11 @@
|
||||
text: 'Read',
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
@@ -126,7 +134,7 @@
|
||||
text: 'Error',
|
||||
status: 'error',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -139,17 +147,19 @@
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
isTyping={true}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
unreadCount={4}
|
||||
@@ -158,7 +168,7 @@
|
||||
lastMessage={{
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -173,6 +183,7 @@
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
unreadCount={4}
|
||||
@@ -180,10 +191,11 @@
|
||||
lastMessage={{
|
||||
text: 'Hey there!',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
unreadCount={10}
|
||||
@@ -191,10 +203,11 @@
|
||||
lastMessage={{
|
||||
text: 'Hey there!',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
unreadCount={250}
|
||||
@@ -202,7 +215,7 @@
|
||||
lastMessage={{
|
||||
text: 'Hey there!',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -214,6 +227,7 @@
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
isSelected={true}
|
||||
@@ -221,7 +235,7 @@
|
||||
lastMessage={{
|
||||
text: 'Hey there!',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.LeftPaneContext>
|
||||
@@ -235,23 +249,25 @@ We don't want Jumbomoji or links.
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'Download at http://signal.org',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: '🔥',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -266,6 +282,7 @@ We only show one line.
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
@@ -273,10 +290,11 @@ We only show one line.
|
||||
lastMessage={{
|
||||
text: 'Normal message',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -284,10 +302,11 @@ We only show one line.
|
||||
text:
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -296,11 +315,12 @@ We only show one line.
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -309,10 +329,11 @@ We only show one line.
|
||||
text:
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -320,10 +341,11 @@ We only show one line.
|
||||
text:
|
||||
"Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId6"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -332,7 +354,7 @@ We only show one line.
|
||||
"Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
|
||||
status: 'delivered',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -347,6 +369,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div style={{ width: '280px' }}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
@@ -354,10 +377,11 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
lastMessage={{
|
||||
text: 'Normal message',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -365,7 +389,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
text:
|
||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -378,43 +402,47 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'Five hours ago',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One day ago',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One week ago',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 365 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One year ago',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
@@ -427,26 +455,29 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
name="John"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={null}
|
||||
lastMessage={{
|
||||
text: 'Missing last updated',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
name="Missing message"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: null,
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
@@ -454,7 +485,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
||||
text: null,
|
||||
status: 'sent',
|
||||
}}
|
||||
onClick={() => console.log('onClick')}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user