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 a7a250c855..5251e439e6 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 c159fb9e60..f57e4214e1 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 a1fbb74291..1d84f3c54f 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 0ccde92753..0512052da2 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 9867f0e880..a75a745b28 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%;