From 03149131f754dd122f8707fbfc9e7ff47e9d6524 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Sat, 10 Nov 2012 21:08:14 +0100 Subject: New feature: display attached images as thumbnails below message body --- skins/classic/mail.css | 59 ++++++++++++++++++++++++++++++++++ skins/larry/mail.css | 43 ++++++++++++++++++++++++- skins/larry/templates/messagepart.html | 2 +- 3 files changed, 102 insertions(+), 2 deletions(-) (limited to 'skins') diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 7408d49f1..85c53d569 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -1254,6 +1254,65 @@ div.message-htmlpart div.rcmBody color: #333333; } +#messagebody fieldset.image-attachment { + border: 0; + border-top: 1px solid #ccc; + margin: 1em 1em 0 1em; +} + +#messagebody fieldset.image-attachment p > img +{ + max-width: 80%; +} + +#messagebody legend.image-filename +{ + color: #999; + font-size: 0.9em; +} + +#messagebody p.image-attachment +{ + margin: 0 1em; + padding: 1em; + border-top: 1px solid #ccc; +} + +#messagebody p.image-attachment a.image-link +{ + float: left; + margin-right: 2em; + min-width: 160px; + min-height: 60px; + text-align: center; +} + +#messagebody p.image-attachment .image-filename +{ + display: block; + font-weight: bold; + line-height: 1.6em; +} + +#messagebody p.image-attachment .image-filesize +{ + font-size: 11px; + padding-right: 1em; +} + +#messagebody p.image-attachment .attachment-links a +{ + margin-right: 0.6em; + color: #cc0000; + font-size: 11px; + text-decoration: none; +} + +#messagebody p.image-attachment .attachment-links a:hover +{ + text-decoration: underline; +} + #openextwinlink { position: absolute; diff --git a/skins/larry/mail.css b/skins/larry/mail.css index eb623222a..48560abe2 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -1050,10 +1050,51 @@ div.message-part blockquote blockquote blockquote { border-bottom: 2px solid #f0f0f0; } -#messagebody > p > img { +#messagebody fieldset.image-attachment { + border: 0; + border-top: 1px solid #ccc; + margin-top: 1em; +} + +#messagebody fieldset.image-attachment p > img { max-width: 80%; } +#messagebody legend.image-filename { + color: #999; + font-size: 0.9em; + margin: 0 1em; +} + +#messagebody p.image-attachment { + position: relative; + padding: 1em; + border-top: 1px solid #ccc; +} + +#messagebody p.image-attachment a.image-link { + float: left; + display: block; + margin-right: 2em; + min-width: 160px; + min-height: 60px; + text-align: center; +} + +#messagebody p.image-attachment .image-filename { + display: block; + font-weight: bold; + line-height: 1.6em; +} + +#messagebody p.image-attachment .image-filesize { + padding-right: 1em; +} + +#messagebody p.image-attachment .attachment-links a { + margin-right: 0.6em; +} + #messagepartcontainer { position: absolute; top: 60px; diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html index db078296f..e029973a8 100644 --- a/skins/larry/templates/messagepart.html +++ b/skins/larry/templates/messagepart.html @@ -4,7 +4,7 @@ <roundcube:object name="pagetitle" /> - +