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

Change iOS file attachment bubbles to be on-theme

Browse source 
FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-05-09 13:31:04 -07:00
parent cd1569e57a
commit ae6e6da44b
3 changed files with 91 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
stylesheets/_conversation.scss
View file

@ -473,11 +473,7 @@ li.entry .error-icon-container {
padding: 5px;
padding-right: 10px;
background-color: #fafafa;
border: 1px solid $grey_l2;
border-radius: $border-radius;
cursor: pointer;
color: $grey_d;
.fileName {
font-weight: bold;

53
stylesheets/_ios.scss
View file

@ -85,6 +85,37 @@ $ios-border-color: rgba(0,0,0,0.1);
.control .content {
padding: 10px;
}
.message-list .attachments .fileView {
border-radius: 15px;
margin-bottom: 0.25em;
padding: 10px;
position: relative;
&:before, &:after {
content: '';
display: block;
border-radius: 20px;
position: absolute;
width: 10px;
}
&:before {
right: -1px;
bottom: -3px;
height: 10px;
border-radius: 20px;
background: $blue;
}
&:after {
height: 11px;
right: -6px;
bottom: -3px;
background: white;
}
}
.bubble {
.content {
margin-bottom: 5px;
@ -126,6 +157,21 @@ $ios-border-color: rgba(0,0,0,0.1);
clear: both;
}
}
.message-list .incoming .attachment .fileView {
background-color: #e6e5ea;
color: black;
float: left;
&:before {
left: -1px;
background-color: #e6e5ea;
}
&:after {
left: -6px;
}
}
.incoming .content {
background-color: #e6e5ea;
color: black;
@ -141,7 +187,7 @@ $ios-border-color: rgba(0,0,0,0.1);
}
}
.outgoing {
.content {
.content, .attachments .fileView {
background-color: $blue;
&, .body, a {
@include invert-text-color;
@ -149,6 +195,11 @@ $ios-border-color: rgba(0,0,0,0.1);
float: right;
}
}
.outgoing .attachments .fileView .icon::before {
@include color-svg('/images/file.svg', white);
}
.attachment {
a {
border-radius: 15px;

47
stylesheets/manifest.css
View file

@ -1320,11 +1320,7 @@ li.entry .error-icon-container {
position: relative;
padding: 5px;
padding-right: 10px;
background-color: #fafafa;
border: 1px solid #d9d9d9;
border-radius: 5px;
cursor: pointer;
color: #454545; }
cursor: pointer; }
.message-container .attachments .fileView .fileName,
.message-list .attachments .fileView .fileName {
font-weight: bold;
@ -1532,6 +1528,28 @@ li.entry .error-icon-container {
.ios .error-message.content,
.ios .control .content {
padding: 10px; }
.ios .message-list .attachments .fileView {
border-radius: 15px;
margin-bottom: 0.25em;
padding: 10px;
position: relative; }
.ios .message-list .attachments .fileView:before, .ios .message-list .attachments .fileView:after {
content: '';
display: block;
border-radius: 20px;
position: absolute;
width: 10px; }
.ios .message-list .attachments .fileView:before {
right: -1px;
bottom: -3px;
height: 10px;
border-radius: 20px;
background: #2090ea; }
.ios .message-list .attachments .fileView:after {
height: 11px;
right: -6px;
bottom: -3px;
background: white; }
.ios .bubble .content {
margin-bottom: 5px; }
.ios .bubble .content .body {
@ -1562,6 +1580,15 @@ li.entry .error-icon-container {
border: 1px solid rgba(0, 0, 0, 0.1); }
.ios .bubble .meta {
clear: both; }
.ios .message-list .incoming .attachment .fileView {
background-color: #e6e5ea;
color: black;
float: left; }
.ios .message-list .incoming .attachment .fileView:before {
left: -1px;
background-color: #e6e5ea; }
.ios .message-list .incoming .attachment .fileView:after {
left: -6px; }
.ios .incoming .content {
background-color: #e6e5ea;
color: black;
@ -1571,14 +1598,18 @@ li.entry .error-icon-container {
background-color: #e6e5ea; }
.ios .incoming .content .body:after {
left: -6px; }
.ios .outgoing .content {
.ios .outgoing .content, .ios .outgoing .attachments .fileView {
background-color: #2090ea;
float: right; }
.ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a {
.ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a, .ios .outgoing .attachments .fileView, .ios .outgoing .attachments .fileView .body, .ios .outgoing .attachments .fileView a {
color: white; }
.ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection {
.ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection, .ios .outgoing .attachments .fileView::selection, .ios .outgoing .attachments .fileView .body::selection, .ios .outgoing .attachments .fileView a::selection {
background: white;
color: #454545; }
.ios .outgoing .attachments .fileView .icon::before {
-webkit-mask: url("/images/file.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.ios .attachment {
margin-bottom: 1px; }
.ios .attachment a {