thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Replace sinewave with ellipse

Browse source 
Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
This commit is contained in:
lilia 2015-11-08 14:25:03 -08:00
parent 20901e69fb
commit 0d5291acad
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/sinewave.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 368 B

18
stylesheets/_conversation.scss
View file

@ -193,10 +193,6 @@
margin-right: 3px;
}
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -18px 0;}
}
.outgoing.entry {
.status {
display: inline-block;
@ -205,13 +201,19 @@
}
&.sent .status {
background: url('/images/check-white.png');
opacity: 0.5;
}
&.delivered .status {
background: url('/images/double-check-white.png');
opacity: 0.5;
}
&.pending .status {
background: url('/images/sinewave.png') repeat-x;
animation: backgroundScroll 0.5s linear infinite;
background: none;
&:before { content: '...'; }
}
.meta:hover .status {
opacity: 1;
}
}
@ -324,6 +326,10 @@
.meta {
color: $blue_l;
&:hover {
color: white;
}
}
&::before {

16
stylesheets/manifest.css
View file

@ -685,12 +685,17 @@ input.search {
width: 18px;
height: 1em; }
.outgoing.entry.sent .status {
background: url("/images/check-white.png"); }
background: url("/images/check-white.png");
opacity: 0.5; }
.outgoing.entry.delivered .status {
background: url("/images/double-check-white.png"); }
background: url("/images/double-check-white.png");
opacity: 0.5; }
.outgoing.entry.pending .status {
background: url("/images/sinewave.png") repeat-x;
animation: backgroundScroll 0.5s linear infinite; }
background: none; }
.outgoing.entry.pending .status:before {
content: '...'; }
.outgoing.entry .meta:hover .status {
opacity: 1; }
.message-list {
margin: 0;
@ -776,6 +781,9 @@ input.search {
.message-detail .outgoing .bubble .meta,
.message-list .outgoing .bubble .meta {
color: #a2d2f4; }
.message-detail .outgoing .bubble .meta:hover,
.message-list .outgoing .bubble .meta:hover {
color: white; }
.message-detail .outgoing .bubble::before,
.message-list .outgoing .bubble::before {
right: -10px;