From 293be5d9f63261dbe8239b3d3d7aff389e4355bd Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Wed, 5 Jul 2017 17:58:37 -0700 Subject: [PATCH] Truncate long filenames in attachments 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 --- stylesheets/_android.scss | 2 +- stylesheets/_conversation.scss | 24 ++++--- stylesheets/_ios.scss | 12 ++-- stylesheets/android-dark.scss | 20 +++--- stylesheets/manifest.css | 121 +++++++++++++++++---------------- 5 files changed, 92 insertions(+), 87 deletions(-) diff --git a/stylesheets/_android.scss b/stylesheets/_android.scss index a7a250c85581..5251e439e64c 100644 --- a/stylesheets/_android.scss +++ b/stylesheets/_android.scss @@ -48,7 +48,7 @@ } } - .incoming .bubble .fileView .icon::before { + .incoming .bubble .fileView .icon { @include color-svg('/images/file.svg', white); } diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index c159fb9e604b..f57e4214e12b 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -488,6 +488,7 @@ li.entry .error-icon-container { .fileView { display: flex; align-items: center; + overflow: hidden; position: relative; padding: 5px; @@ -498,6 +499,13 @@ li.entry .error-icon-container { .fileName { font-weight: bold; margin-bottom: 0.25em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .text { + overflow: hidden; } .icon, .text { @@ -515,21 +523,17 @@ li.entry .error-icon-container { margin-right: 0.5em; display: inline-block; vertical-align: middle; - &:before { - content: ''; - display: inline-block; - width: $button-height * 2; - height: $button-height * 2; - @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); } - &.video:before { + &.video { @include color-svg('/images/video.svg', $grey_d); } - &.voice:before { + &.voice { @include color-svg('/images/voice.svg', $grey_d); } } diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss index a1fbb7429164..1d84f3c54f65 100644 --- a/stylesheets/_ios.scss +++ b/stylesheets/_ios.scss @@ -169,6 +169,7 @@ $ios-border-color: rgba(0,0,0,0.1); background-color: white; color: black; float: left; + max-width: 100%; &:before { left: -1px; @@ -196,6 +197,7 @@ $ios-border-color: rgba(0,0,0,0.1); .outgoing { .content, .attachments .bubbled { background-color: $blue; + max-width: 100%; &, .body, a { @include invert-text-color; } @@ -204,16 +206,14 @@ $ios-border-color: rgba(0,0,0,0.1); } .outgoing .attachments .fileView .icon { - &::before { - @include color-svg('/images/file.svg', white); - } - &.audio:before { + @include color-svg('/images/file.svg', white); + &.audio { @include color-svg('/images/audio.svg', white); } - &.video:before { + &.video { @include color-svg('/images/video.svg', white); } - &.voice:before { + &.voice { @include color-svg('/images/voice.svg', white); } } diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss index 0ccde9275366..0512052da220 100644 --- a/stylesheets/android-dark.scss +++ b/stylesheets/android-dark.scss @@ -184,31 +184,27 @@ $text-dark_l2: darken($text-dark, 30%); } .incoming .bubble .fileView .icon{ - &::before { - @include color-svg('/images/file.svg', white); - } - &.audio:before { + @include color-svg('/images/file.svg', white); + &.audio { @include color-svg('/images/audio.svg', white); } - &.video:before { + &.video { @include color-svg('/images/video.svg', white); } - &.voice:before { + &.voice { @include color-svg('/images/voice.svg', white); } } .outgoing .bubble .fileView .icon { - &::before { - @include color-svg('/images/file.svg', #CCCCCC); - } - &.audio:before { + @include color-svg('/images/file.svg', #CCCCCC); + &.audio { @include color-svg('/images/audio.svg', #CCCCCC); } - &.video:before { + &.video { @include color-svg('/images/video.svg', #CCCCCC); } - &.voice:before { + &.voice { @include color-svg('/images/voice.svg', #CCCCCC); } } diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 9867f0e880bf..a75a745b2827 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -1414,6 +1414,7 @@ li.entry .error-icon-container { .message-list .attachments .fileView { display: flex; align-items: center; + overflow: hidden; position: relative; padding: 5px; padding-right: 10px; @@ -1421,7 +1422,13 @@ li.entry .error-icon-container { .message-container .attachments .fileView .fileName, .message-list .attachments .fileView .fileName { 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-list .attachments .fileView .icon, .message-list .attachments .fileView .text { @@ -1435,28 +1442,24 @@ li.entry .error-icon-container { margin-left: -0.5em; margin-right: 0.5em; display: inline-block; - vertical-align: middle; } - .message-container .attachments .fileView .icon:before, - .message-list .attachments .fileView .icon:before { - content: ''; - display: inline-block; - width: 48px; - height: 48px; - -webkit-mask: url("/images/file.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: #454545; } - .message-container .attachments .fileView .icon.audio:before, - .message-list .attachments .fileView .icon.audio:before { + vertical-align: middle; + width: 48px; + height: 48px; + -webkit-mask: url("/images/file.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: #454545; } + .message-container .attachments .fileView .icon.audio, + .message-list .attachments .fileView .icon.audio { -webkit-mask: url("/images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } - .message-container .attachments .fileView .icon.video:before, - .message-list .attachments .fileView .icon.video:before { + .message-container .attachments .fileView .icon.video, + .message-list .attachments .fileView .icon.video { -webkit-mask: url("/images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } - .message-container .attachments .fileView .icon.voice:before, - .message-list .attachments .fileView .icon.voice:before { + .message-container .attachments .fileView .icon.voice, + .message-list .attachments .fileView .icon.voice { -webkit-mask: url("/images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } @@ -1767,7 +1770,8 @@ li.entry .error-icon-container { .ios .incoming .bubbled { background-color: white; color: black; - float: left; } + float: left; + max-width: 100%; } .ios .incoming .bubbled:before { left: -1px; background-color: white; } @@ -1784,28 +1788,29 @@ li.entry .error-icon-container { left: -6px; } .ios .outgoing .content, .ios .outgoing .attachments .bubbled { background-color: #2090ea; + max-width: 100%; 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 { 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 { background: white; color: #454545; } -.ios .outgoing .attachments .fileView .icon::before { +.ios .outgoing .attachments .fileView .icon { -webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } -.ios .outgoing .attachments .fileView .icon.audio:before { - -webkit-mask: url("/images/audio.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } -.ios .outgoing .attachments .fileView .icon.video:before { - -webkit-mask: url("/images/video.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } -.ios .outgoing .attachments .fileView .icon.voice:before { - -webkit-mask: url("/images/voice.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } + .ios .outgoing .attachments .fileView .icon.audio { + -webkit-mask: url("/images/audio.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } + .ios .outgoing .attachments .fileView .icon.video { + -webkit-mask: url("/images/video.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } + .ios .outgoing .attachments .fileView .icon.voice { + -webkit-mask: url("/images/voice.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } .ios .attachment { margin-bottom: 1px; } .ios .attachment a { @@ -1937,7 +1942,7 @@ li.entry .error-icon-container { color: #454545; } .android .incoming .bubble .attachments a, .android .incoming .bubble .content a { color: #f3f3f3; } -.android .incoming .bubble .fileView .icon::before { +.android .incoming .bubble .fileView .icon { -webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } @@ -2217,38 +2222,38 @@ li.entry .error-icon-container { color: #454545; } .android-dark .incoming .bubble .content a { 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-size: 100%; background-color: white; } - .android-dark .incoming .bubble .fileView .icon.audio:before { - -webkit-mask: url("/images/audio.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } - .android-dark .incoming .bubble .fileView .icon.video:before { - -webkit-mask: url("/images/video.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } - .android-dark .incoming .bubble .fileView .icon.voice:before { - -webkit-mask: url("/images/voice.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: white; } - .android-dark .outgoing .bubble .fileView .icon::before { + .android-dark .incoming .bubble .fileView .icon.audio { + -webkit-mask: url("/images/audio.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } + .android-dark .incoming .bubble .fileView .icon.video { + -webkit-mask: url("/images/video.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } + .android-dark .incoming .bubble .fileView .icon.voice { + -webkit-mask: url("/images/voice.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: white; } + .android-dark .outgoing .bubble .fileView .icon { -webkit-mask: url("/images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } - .android-dark .outgoing .bubble .fileView .icon.audio:before { - -webkit-mask: url("/images/audio.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: #CCCCCC; } - .android-dark .outgoing .bubble .fileView .icon.video:before { - -webkit-mask: url("/images/video.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: #CCCCCC; } - .android-dark .outgoing .bubble .fileView .icon.voice:before { - -webkit-mask: url("/images/voice.svg") no-repeat center; - -webkit-mask-size: 100%; - background-color: #CCCCCC; } + .android-dark .outgoing .bubble .fileView .icon.audio { + -webkit-mask: url("/images/audio.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: #CCCCCC; } + .android-dark .outgoing .bubble .fileView .icon.video { + -webkit-mask: url("/images/video.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: #CCCCCC; } + .android-dark .outgoing .bubble .fileView .icon.voice { + -webkit-mask: url("/images/voice.svg") no-repeat center; + -webkit-mask-size: 100%; + background-color: #CCCCCC; } .android-dark button.clock { -webkit-mask: url("/images/clock.svg") no-repeat center; -webkit-mask-size: 100%;