From 6996dee8567b32144c10aea5bf8db7feb07c2ce6 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Thu, 21 Mar 2013 06:56:21 -0400 Subject: [PATCH] Add switch for text/html alternative part view (#1486939) --- skins/larry/templates/message.html | 15 +++++++ skins/larry/styles.css | 66 ++++++++++++++++++++++++++++++++- skins/larry/svggradients.css | 7 +++ skins/larry/images/buttons.png | 0 skins/larry/iehacks.css | 7 +++ skins/larry/mail.css | 8 +++ skins/larry/templates/messagepreview.html | 11 +++++ 7 files changed, 109 insertions(+), 5 deletions(-) diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 871cce4..960ce76 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -29,7 +29,8 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2e31', endColorstr='#505050', GradientType=0); } -a.button { +a.button, +.buttongroup { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); } @@ -47,6 +48,10 @@ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#d8d8d8', GradientType=0); } +.buttongroup a.button.selected { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#909090', endColorstr='#858585', GradientType=0); +} + #message.statusbar { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); } diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png index 0ec061a..54bee01 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png Binary files differ diff --git a/skins/larry/mail.css b/skins/larry/mail.css index e6529d1..71ff785 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -950,7 +950,8 @@ border-radius: 4px; } -#messageheader #countcontrols { +#messageheader #countcontrols, +#messageheader #formatcontrols { position: absolute; top: 8px; right: 8px; @@ -958,6 +959,11 @@ white-space: nowrap; } +#messageheader #formatcontrols { + top: 38px; + right: 8px; +} + #messageheader .pagenav .countdisplay { min-width: 0; padding-right: 0.5em; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 1e3e6f7..ddfe8ef 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -177,7 +177,8 @@ /** link buttons **/ -a.button { +a.button, +.buttongroup { display: inline-block; margin: 0 2px; padding: 2px 5px; @@ -196,6 +197,11 @@ -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); text-decoration: none; +} + +.buttongroup { + padding: 0; + white-space: nowrap; } a.button:focus, @@ -229,6 +235,29 @@ a.button.disabled span.inner { opacity: 0.4; filter: alpha(opacity=40); +} + +.buttongroup a.button { + margin: 0; + border-width: 0 1px 0 0; + border-radius: 0; + background: none; + box-shadow: none; + -o-box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} + +.buttongroup a.button.first, +.buttongroup a.button:first-child { + border-radius: 4px 0 0 4px; + border-left: 0; +} + +.buttongroup a.button.last, +.buttongroup a.button:last-child { + border-radius: 0 4px 4px 0; + border-right: 0; } a.button.pressed, @@ -266,11 +295,30 @@ background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } +.buttongroup a.button.selected { + background: #8a8a8a; + background: -moz-linear-gradient(top, #909090 0%, #858585 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#909090), color-stop(100%,#858585)); + background: -o-linear-gradient(top, #909090 0%, #858585 100%); + background: -ms-linear-gradient(top, #909090 0%, #858585 100%); + background: linear-gradient(top, #909090 0%, #858585 100%); + -webkit-box-shadow: inset 0 1px 2px 0 #555; + -moz-box-shadow: inset 0 1px 2px 0 #555; + box-shadow: inset 0 1px 2px 0 #555; + border-right-color: #555; + border-left-color: #555; +} + .pagenav a.button { padding: 1px 3px; height: 16px; vertical-align: middle; margin-bottom: 1px; +} + +.pagenav .buttongroup a.button { + padding: 1px 5px; + margin-bottom: 0; } .pagenav a.button span.inner { @@ -316,6 +364,20 @@ .pagenav a.extwin span.inner { background-position: -29px -271px; +} + +.pagenav a.changeformat.html span.inner { + background-position: -7px -1859px; +} +.pagenav a.changeformat.html.selected span.inner { + background-position: -29px -1859px; +} + +.pagenav a.changeformat.text span.inner { + background-position: -7px -1874px; +} +.pagenav a.changeformat.text.selected span.inner { + background-position: -29px -1874px; } .pagenav .countdisplay { @@ -2230,7 +2292,7 @@ .attachmentslist li a.drop { background: url(images/buttons.png) no-repeat scroll center -1570px; width: 14px; - height: 26px; + height: 20px; cursor: pointer; position: absolute; right: 0; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 2172ac3..c40d44f 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -29,7 +29,8 @@ background-image: url(svggradient.php?c=2a2e31;505050); } -a.button { +a.button, +.buttongroup { background-image: url(svggradient.php?c=f9f9f9;e6e6e6); } @@ -47,6 +48,10 @@ background-image: url(svggradient.php?c=bababa;d8d8d8); } +.buttongroup a.button.selected { + background-image: url(svggradient.php?c=909090;858585); +} + #message.statusbar { background-image: url(svggradient.php?c=eaeaea;c8c8c8); } diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 36e0efa..0e19afa 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -54,6 +54,21 @@ <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> </div> +<roundcube:if condition="env:optional_format=='text'" /> +<div class="pagenav" id="formatcontrols"> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="inner" title="changeformattext" /> + </span> +</div> +<roundcube:elseif condition="env:optional_format=='html'" /> +<div class="pagenav" id="formatcontrols"> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" /> + </span> +</div> +<roundcube:endif /> + + <div id="contactphoto"><roundcube:object name="contactphoto" /></div> </div> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index dbfe2dc..12a9f2d 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -30,6 +30,17 @@ <!-- record navigation --> <div id="countcontrols" class="pagenav"> +<roundcube:if condition="env:optional_format=='text'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="inner" title="changeformattext" /> + </span> + +<roundcube:elseif condition="env:optional_format=='html'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" /> + </span> + +<roundcube:endif /> <roundcube:if condition="env:mailbox != config:drafts_mbox"> <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="inner" title="replytomessage" content="<-" /> <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="inner" title="replytoallmessage" content="<<-" /> -- Gitblit v1.9.1