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

Truncate long filenames in attachments

Browse source 
The :before technique for adding the icon was removed, because it
resulted in some rendering issues when the layout pressure in the
message bubble got too high - you would see a partial icon. This
solution shrinks the icon a bit when the filename wants to expand to
take its space.

The iOS bubble width also needed special care to ensure it didn't expand
to accommodate the very wide filenames. Beyond that, overflow: hidden
needed to be applied at several levels to make everything behave as
expected.

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-07-05 17:58:37 -07:00
parent 877f092b2c
commit 293be5d9f6
5 changed files with 92 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
stylesheets/_android.scss
View file

@ -48,7 +48,7 @@
} }
} }
.incoming .bubble .fileView .icon::before { .incoming .bubble .fileView .icon {
@include color-svg('/images/file.svg', white); @include color-svg('/images/file.svg', white);
} }

24
stylesheets/_conversation.scss
View file

@ -488,6 +488,7 @@ li.entry .error-icon-container {
.fileView { .fileView {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden;
position: relative; position: relative;
padding: 5px; padding: 5px;
@ -498,6 +499,13 @@ li.entry .error-icon-container {
.fileName { .fileName {
font-weight: bold; font-weight: bold;
margin-bottom: 0.25em; margin-bottom: 0.25em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text {
overflow: hidden;
} }
.icon, .text { .icon, .text {
@ -515,21 +523,17 @@ li.entry .error-icon-container {
margin-right: 0.5em; margin-right: 0.5em;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:before { width: $button-height * 2;
content: ''; height: $button-height * 2;
display: inline-block; @include color-svg('/images/file.svg', $grey_d);
width: $button-height * 2;
height: $button-height * 2;
@include color-svg('/images/file.svg', $grey_d);
}
&.audio:before { &.audio {
@include color-svg('/images/audio.svg', $grey_d); @include color-svg('/images/audio.svg', $grey_d);
} }
&.video:before { &.video {
@include color-svg('/images/video.svg', $grey_d); @include color-svg('/images/video.svg', $grey_d);
} }
&.voice:before { &.voice {
@include color-svg('/images/voice.svg', $grey_d); @include color-svg('/images/voice.svg', $grey_d);
} }
} }

12
stylesheets/_ios.scss
View file

@ -169,6 +169,7 @@ $ios-border-color: rgba(0,0,0,0.1);
background-color: white; background-color: white;
color: black; color: black;
float: left; float: left;
max-width: 100%;
&:before { &:before {
left: -1px; left: -1px;
@ -196,6 +197,7 @@ $ios-border-color: rgba(0,0,0,0.1);
.outgoing { .outgoing {
.content, .attachments .bubbled { .content, .attachments .bubbled {
background-color: $blue; background-color: $blue;
max-width: 100%;
&, .body, a { &, .body, a {
@include invert-text-color; @include invert-text-color;
} }
@ -204,16 +206,14 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
.outgoing .attachments .fileView .icon { .outgoing .attachments .fileView .icon {
&::before { @include color-svg('/images/file.svg', white);
@include color-svg('/images/file.svg', white); &.audio {
}
&.audio:before {
@include color-svg('/images/audio.svg', white); @include color-svg('/images/audio.svg', white);
} }
&.video:before { &.video {
@include color-svg('/images/video.svg', white); @include color-svg('/images/video.svg', white);
} }
&.voice:before { &.voice {
@include color-svg('/images/voice.svg', white); @include color-svg('/images/voice.svg', white);
} }
} }

20
stylesheets/android-dark.scss
View file

@ -184,31 +184,27 @@ $text-dark_l2: darken($text-dark, 30%);
} }
.incoming .bubble .fileView .icon{ .incoming .bubble .fileView .icon{
&::before { @include color-svg('/images/file.svg', white);
@include color-svg('/images/file.svg', white); &.audio {
}
&.audio:before {
@include color-svg('/images/audio.svg', white); @include color-svg('/images/audio.svg', white);
} }
&.video:before { &.video {
@include color-svg('/images/video.svg', white); @include color-svg('/images/video.svg', white);
} }
&.voice:before { &.voice {
@include color-svg('/images/voice.svg', white); @include color-svg('/images/voice.svg', white);
} }
} }
.outgoing .bubble .fileView .icon { .outgoing .bubble .fileView .icon {
&::before { @include color-svg('/images/file.svg', #CCCCCC);
@include color-svg('/images/file.svg', #CCCCCC); &.audio {
}
&.audio:before {
@include color-svg('/images/audio.svg', #CCCCCC); @include color-svg('/images/audio.svg', #CCCCCC);
} }
&.video:before { &.video {
@include color-svg('/images/video.svg', #CCCCCC); @include color-svg('/images/video.svg', #CCCCCC);
} }
&.voice:before { &.voice {
@include color-svg('/images/voice.svg', #CCCCCC); @include color-svg('/images/voice.svg', #CCCCCC);
} }
} }

121
stylesheets/manifest.css
View file

@ -1414,6 +1414,7 @@ li.entry .error-icon-container {
.message-list .attachments .fileView { .message-list .attachments .fileView {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden;
position: relative; position: relative;
padding: 5px; padding: 5px;
padding-right: 10px; padding-right: 10px;
@ -1421,7 +1422,13 @@ li.entry .error-icon-container {
.message-container .attachments .fileView .fileName, .message-container .attachments .fileView .fileName,
.message-list .attachments .fileView .fileName { .message-list .attachments .fileView .fileName {
font-weight: bold; font-weight: bold;
margin-bottom: 0.25em; } margin-bottom: 0.25em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.message-container .attachments .fileView .text,
.message-list .attachments .fileView .text {
overflow: hidden; }
.message-container .attachments .fileView .icon, .message-container .attachments .fileView .text, .message-container .attachments .fileView .icon, .message-container .attachments .fileView .text,
.message-list .attachments .fileView .icon, .message-list .attachments .fileView .icon,
.message-list .attachments .fileView .text { .message-list .attachments .fileView .text {
@ -1435,28 +1442,24 @@ li.entry .error-icon-container {
margin-left: -0.5em; margin-left: -0.5em;
margin-right: 0.5em; margin-right: 0.5em;
display: inline-block; display: inline-block;
vertical-align: middle; } vertical-align: middle;
.message-container .attachments .fileView .icon:before, width: 48px;
.message-list .attachments .fileView .icon:before { height: 48px;
content: ''; -webkit-mask: url("/images/file.svg") no-repeat center;
display: inline-block; -webkit-mask-size: 100%;
width: 48px; background-color: #454545; }
height: 48px; .message-container .attachments .fileView .icon.audio,
-webkit-mask: url("/images/file.svg") no-repeat center; .message-list .attachments .fileView .icon.audio {
-webkit-mask-size: 100%;
background-color: #454545; }
.message-container .attachments .fileView .icon.audio:before,
.message-list .attachments .fileView .icon.audio:before {
-webkit-mask: url("/images/audio.svg") no-repeat center; -webkit-mask: url("/images/audio.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #454545; } background-color: #454545; }
.message-container .attachments .fileView .icon.video:before, .message-container .attachments .fileView .icon.video,
.message-list .attachments .fileView .icon.video:before { .message-list .attachments .fileView .icon.video {
-webkit-mask: url("/images/video.svg") no-repeat center; -webkit-mask: url("/images/video.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #454545; } background-color: #454545; }
.message-container .attachments .fileView .icon.voice:before, .message-container .attachments .fileView .icon.voice,
.message-list .attachments .fileView .icon.voice:before { .message-list .attachments .fileView .icon.voice {
-webkit-mask: url("/images/voice.svg") no-repeat center; -webkit-mask: url("/images/voice.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #454545; } background-color: #454545; }
@ -1767,7 +1770,8 @@ li.entry .error-icon-container {
.ios .incoming .bubbled { .ios .incoming .bubbled {
background-color: white; background-color: white;
color: black; color: black;
float: left; } float: left;
max-width: 100%; }
.ios .incoming .bubbled:before { .ios .incoming .bubbled:before {
left: -1px; left: -1px;
background-color: white; } background-color: white; }
@ -1784,28 +1788,29 @@ li.entry .error-icon-container {
left: -6px; } left: -6px; }
.ios .outgoing .content, .ios .outgoing .attachments .bubbled { .ios .outgoing .content, .ios .outgoing .attachments .bubbled {
background-color: #2090ea; background-color: #2090ea;
max-width: 100%;
float: right; } float: right; }
.ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a, .ios .outgoing .attachments .bubbled, .ios .outgoing .attachments .bubbled .body, .ios .outgoing .attachments .bubbled a { .ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a, .ios .outgoing .attachments .bubbled, .ios .outgoing .attachments .bubbled .body, .ios .outgoing .attachments .bubbled a {
color: white; } color: white; }
.ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection, .ios .outgoing .attachments .bubbled::selection, .ios .outgoing .attachments .bubbled .body::selection, .ios .outgoing .attachments .bubbled a::selection { .ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection, .ios .outgoing .attachments .bubbled::selection, .ios .outgoing .attachments .bubbled .body::selection, .ios .outgoing .attachments .bubbled a::selection {
background: white; background: white;
color: #454545; } color: #454545; }
.ios .outgoing .attachments .fileView .icon::before { .ios .outgoing .attachments .fileView .icon {
-webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask: url("/images/file.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.ios .outgoing .attachments .fileView .icon.audio:before { .ios .outgoing .attachments .fileView .icon.audio {
-webkit-mask: url("/images/audio.svg") no-repeat center; -webkit-mask: url("/images/audio.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.ios .outgoing .attachments .fileView .icon.video:before { .ios .outgoing .attachments .fileView .icon.video {
-webkit-mask: url("/images/video.svg") no-repeat center; -webkit-mask: url("/images/video.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.ios .outgoing .attachments .fileView .icon.voice:before { .ios .outgoing .attachments .fileView .icon.voice {
-webkit-mask: url("/images/voice.svg") no-repeat center; -webkit-mask: url("/images/voice.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.ios .attachment { .ios .attachment {
margin-bottom: 1px; } margin-bottom: 1px; }
.ios .attachment a { .ios .attachment a {
@ -1937,7 +1942,7 @@ li.entry .error-icon-container {
color: #454545; } color: #454545; }
.android .incoming .bubble .attachments a, .android .incoming .bubble .content a { .android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.android .incoming .bubble .fileView .icon::before { .android .incoming .bubble .fileView .icon {
-webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask: url("/images/file.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
@ -2217,38 +2222,38 @@ li.entry .error-icon-container {
color: #454545; } color: #454545; }
.android-dark .incoming .bubble .content a { .android-dark .incoming .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.android-dark .incoming .bubble .fileView .icon::before { .android-dark .incoming .bubble .fileView .icon {
-webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask: url("/images/file.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.android-dark .incoming .bubble .fileView .icon.audio:before { .android-dark .incoming .bubble .fileView .icon.audio {
-webkit-mask: url("/images/audio.svg") no-repeat center; -webkit-mask: url("/images/audio.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.android-dark .incoming .bubble .fileView .icon.video:before { .android-dark .incoming .bubble .fileView .icon.video {
-webkit-mask: url("/images/video.svg") no-repeat center; -webkit-mask: url("/images/video.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.android-dark .incoming .bubble .fileView .icon.voice:before { .android-dark .incoming .bubble .fileView .icon.voice {
-webkit-mask: url("/images/voice.svg") no-repeat center; -webkit-mask: url("/images/voice.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: white; }
.android-dark .outgoing .bubble .fileView .icon::before { .android-dark .outgoing .bubble .fileView .icon {
-webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask: url("/images/file.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #CCCCCC; } background-color: #CCCCCC; }
.android-dark .outgoing .bubble .fileView .icon.audio:before { .android-dark .outgoing .bubble .fileView .icon.audio {
-webkit-mask: url("/images/audio.svg") no-repeat center; -webkit-mask: url("/images/audio.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #CCCCCC; } background-color: #CCCCCC; }
.android-dark .outgoing .bubble .fileView .icon.video:before { .android-dark .outgoing .bubble .fileView .icon.video {
-webkit-mask: url("/images/video.svg") no-repeat center; -webkit-mask: url("/images/video.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #CCCCCC; } background-color: #CCCCCC; }
.android-dark .outgoing .bubble .fileView .icon.voice:before { .android-dark .outgoing .bubble .fileView .icon.voice {
-webkit-mask: url("/images/voice.svg") no-repeat center; -webkit-mask: url("/images/voice.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: #CCCCCC; } background-color: #CCCCCC; }
.android-dark button.clock { .android-dark button.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center; -webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;