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

Properly style countdown icon in iOS light/dark themes

Browse source
This commit is contained in:
Scott Nonnenberg 2018-08-16 15:45:01 -07:00
parent ffd40d41fe
commit 006700f9a2
2 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
stylesheets/_ios.scss
View file

@ -125,6 +125,14 @@
color: $color-light-90;
}
.module-expire-timer {
background-color: $color-white-07;
}
.module-expire-timer--incoming {
background-color: $color-light-45;
}
.module-quote--incoming {
background-color: $color-signal-blue-025;
border-left-color: $color-signal-blue;
@ -286,6 +294,10 @@
color: $color-white;
}
.module-expire-timer--incoming {
background-color: $color-white-07;
}
.module-quote__primary__author {
color: $color-light-90;
}

22
ts/components/conversation/ExpireTimer.md
View file

@ -1,13 +1,14 @@
### Countdown at different rates
```jsx
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
authorColor="cyan"
direction="incoming"
text="10 second timer"
i18n={util.i18n}
timestamp={Date.now() + 10 * 1000}
expirationLength={10 * 1000}
expirationTimestamp={Date.now() + 10 * 1000}
/>
@ -18,6 +19,7 @@
authorColor="cyan"
text="30 second timer"
i18n={util.i18n}
timestamp={Date.now() + 30 * 1000}
expirationLength={30 * 1000}
expirationTimestamp={Date.now() + 30 * 1000}
/>
@ -28,6 +30,7 @@
direction="incoming"
text="1 minute timer"
i18n={util.i18n}
timestamp={Date.now() + 55 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 55 * 1000}
/>
@ -38,6 +41,7 @@
direction="incoming"
text="5 minute timer"
i18n={util.i18n}
timestamp={Date.now() + 5 * 60 * 1000}
expirationLength={5 * 60 * 1000}
expirationTimestamp={Date.now() + 5 * 60 * 1000}
/>
@ -48,13 +52,14 @@
### Timer calculations
```jsx
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
authorColor="cyan"
direction="incoming"
text="Full timer"
i18n={util.i18n}
timestamp={Date.now() + 60 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 60 * 1000}
/>
@ -65,6 +70,7 @@
status="delivered"
text="Full timer"
i18n={util.i18n}
timestamp={Date.now() + 60 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 60 * 1000}
/>
@ -75,6 +81,7 @@
direction="incoming"
text="55 timer"
i18n={util.i18n}
timestamp={Date.now() + 55 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 55 * 1000}
/>
@ -85,6 +92,7 @@
status="delivered"
text="55 timer"
i18n={util.i18n}
timestamp={Date.now() + 55 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 55 * 1000}
/>
@ -95,6 +103,7 @@
direction="incoming"
text="30 timer"
i18n={util.i18n}
timestamp={Date.now() + 30 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 30 * 1000}
/>
@ -105,6 +114,7 @@
status="delivered"
text="30 timer"
i18n={util.i18n}
timestamp={Date.now() + 30 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 30 * 1000}
/>
@ -115,6 +125,7 @@
direction="incoming"
text="5 timer"
i18n={util.i18n}
timestamp={Date.now() + 5 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 5 * 1000}
/>
@ -125,6 +136,7 @@
status="delivered"
text="5 timer"
i18n={util.i18n}
timestamp={Date.now() + 5 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 5 * 1000}
/>
@ -135,6 +147,7 @@
direction="incoming"
text="Expired timer"
i18n={util.i18n}
timestamp={Date.now()}
expirationLength={60 * 1000}
expirationTimestamp={Date.now()}
/>
@ -145,6 +158,7 @@
status="delivered"
text="Expired timer"
i18n={util.i18n}
timestamp={Date.now()}
expirationLength={60 * 1000}
expirationTimestamp={Date.now()}
/>
@ -155,6 +169,7 @@
direction="incoming"
text="Expiration is too far away"
i18n={util.i18n}
timestamp={Date.now() + 120 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 120 * 1000}
/>
@ -165,6 +180,7 @@
status="delivered"
text="Expiration is too far away"
i18n={util.i18n}
timestamp={Date.now() + 120 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() + 120 * 1000}
/>
@ -175,6 +191,7 @@
direction="incoming"
text="Already expired"
i18n={util.i18n}
timestamp={Date.now() - 20 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() - 20 * 1000}
/>
@ -185,6 +202,7 @@
status="delivered"
text="Already expired"
i18n={util.i18n}
timestamp={Date.now() - 20 * 1000}
expirationLength={60 * 1000}
expirationTimestamp={Date.now() - 20 * 1000}
/>