From eddb79d97d72a63fc3af6741567077e3e59b2871 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Wed, 22 Jul 2015 17:18:33 -0400 Subject: Add an info box next to image thumbnails which provides the name, type, and size of a file. --- web/sass-files/sass/partials/_files.scss | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 56d03e171..2a4b21d01 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -117,13 +117,14 @@ } .post-image__column { position: relative; - width: 120px; + width: 240px; height: 100px; float: left; margin: 5px 10px 5px 0; + display: flex; + border: 1px solid lightgrey; &.custom-file { - width: 85px; - height: 100px; + // TODO remove this class if it doesn't end up getting used any more } .post__load { height: 100%; @@ -133,13 +134,34 @@ background-position: center; } .post__image { - height: 100%; width: 100%; - border: 1px solid #E2E2E2; + height: 100%; background-color: #FFF; background-repeat: no-repeat; background-position: top left; } + .post-image__thumbnail { + width: 50%; + height: 100%; + } + .post-image__details { + width: 50%; + height: 100%; + background: white; + border-left: 1px solid lightgrey; + font-size: small; + padding: 5px 5px; + .post-image__name { + font-weight: 600; + } + .post-image__type { + color: grey; + } + .post-image__size { + border-left: 2px; + color: grey; + } + } a { text-decoration: none; color: grey; -- cgit v1.2.3-1-g7c22 From e1257b781939bc8767b379e3e49a7f2ca7e52e7b Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 23 Jul 2015 18:00:57 -0400 Subject: Center image icons in attachment previews instead of stretching them --- web/sass-files/sass/partials/_files.scss | 37 +++++++++++++++----------------- 1 file changed, 17 insertions(+), 20 deletions(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 2a4b21d01..d61d48ae9 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -71,48 +71,45 @@ width:300px; height:300px; } + +@mixin file-icon($path) { + background: url($path); + background-position: center; + background-repeat: no-repeat; + @include background-size(auto 100%); +} .file-icon { width: 100%; height: 100%; &.audio { - background: url("../images/icons/audio.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/audio.png"); } &.video { - background: url("../images/icons/video.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/video.png"); } &.ppt { - background: url("../images/icons/ppt.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/ppt.png"); } &.generic { - background: url("../images/icons/generic.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/generic.png"); } &.code { - background: url("../images/icons/code.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/code.png"); } &.excel { - background: url("../images/icons/excel.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/excel.png"); } &.word { - background: url("../images/icons/word.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/word.png"); } &.pdf { - background: url("../images/icons/pdf.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/pdf.png"); } &.patch { - background: url("../images/icons/patch.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/patch.png"); } &.image { - background: url("../images/icons/image.png"); - @include background-size(100% 100%); + @include file-icon("../images/icons/image.png"); } } .post-image__column { -- cgit v1.2.3-1-g7c22 From 0f0a887205da3890671fd77ca4b7ece42de8b903 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 23 Jul 2015 18:29:53 -0400 Subject: Removed unused custom-file CSS class that was being applied to non-image file attachment previews --- web/sass-files/sass/partials/_files.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index d61d48ae9..ab4030935 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -120,9 +120,6 @@ margin: 5px 10px 5px 0; display: flex; border: 1px solid lightgrey; - &.custom-file { - // TODO remove this class if it doesn't end up getting used any more - } .post__load { height: 100%; width: 100%; -- cgit v1.2.3-1-g7c22 From 92c9ec71a051e076fd1dc3985a8a1225e5389a95 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 23 Jul 2015 18:56:35 -0400 Subject: Fixed race condition which could occur while requesting the file size for the file attachment previews --- web/sass-files/sass/partials/_files.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ab4030935..2da4afefc 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -152,7 +152,7 @@ color: grey; } .post-image__size { - border-left: 2px; + margin-left: 4px; color: grey; } } -- cgit v1.2.3-1-g7c22 From f502fdef5061cdd10777beeb785716b9a3a1acfd Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Sat, 25 Jul 2015 01:26:04 +0500 Subject: UI update for files --- web/sass-files/sass/partials/_files.scss | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 2da4afefc..e8ea8817d 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -14,10 +14,6 @@ position: relative; border: 1px solid #DDD; @include clearfix; - &.custom-file { - width: 85px; - height: 100px; - } &:hover .remove-preview:after { @include opacity(1); } @@ -73,10 +69,10 @@ } @mixin file-icon($path) { - background: url($path); + background: #fff url($path); background-position: center; background-repeat: no-repeat; - @include background-size(auto 100%); + @include background-size(60px auto); } .file-icon { width: 100%; @@ -142,11 +138,11 @@ width: 50%; height: 100%; background: white; - border-left: 1px solid lightgrey; - font-size: small; - padding: 5px 5px; + border-left: 1px solid #ddd; + font-size: 13px; + padding: 7px; .post-image__name { - font-weight: 600; + margin-bottom: 3px; } .post-image__type { color: grey; -- cgit v1.2.3-1-g7c22 From af246bb44b7968b9f880d819e3aa04342846fccc Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 28 Jul 2015 16:41:57 -0400 Subject: Updated ViewImage modal dialog to include details about non-image files --- web/sass-files/sass/partials/_files.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index e8ea8817d..58b36f483 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -157,3 +157,35 @@ color: grey; } } + +.file-details__container { + display: flex; + + .file-details { + width: 320px; + height: 270px; + padding: 14px; + text-align: left; + vertical-align: top; + + .file-details__name { + font-size: 16px; + } + .file-details__info { + color: grey; + } + } + .file-details__preview { + width: 320px; + height: 270px; + border-right: 1px solid #ddd; + vertical-align: center; + + // helper to center the image icon in the preview window + .file-details__preview-helper { + height: 100%; + display: inline-block; + vertical-align: middle; + } + } +} -- cgit v1.2.3-1-g7c22 From 782e7b03adc6cf322dd7d9a95490d264399a5a90 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 28 Jul 2015 17:54:10 -0400 Subject: Changed flexbox styles to be compatible with all browsers --- web/sass-files/sass/partials/_files.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'web/sass-files/sass/partials/_files.scss') diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 58b36f483..ea7548267 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -114,7 +114,8 @@ height: 100px; float: left; margin: 5px 10px 5px 0; - display: flex; + @include display-flex; + display: -ms-flexbox; border: 1px solid lightgrey; .post__load { height: 100%; @@ -159,7 +160,8 @@ } .file-details__container { - display: flex; + @include display-flex; + display: -ms-flexbox; .file-details { width: 320px; -- cgit v1.2.3-1-g7c22