From 98d096004d7222df2ec944d136ef6356df173f7b Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Fri, 6 Jul 2012 12:53:07 +0200 Subject: Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active --- skins/larry/images/overflowshadow.png | Bin 0 -> 1163 bytes skins/larry/styles.css | 29 ++++++++++++++++++++++++----- skins/larry/templates/addressbook.html | 4 +++- skins/larry/templates/contactedit.html | 4 ++-- skins/larry/templates/folderedit.html | 2 -- skins/larry/templates/folders.html | 4 +++- skins/larry/templates/identities.html | 4 +++- skins/larry/templates/identityedit.html | 2 -- skins/larry/templates/settings.html | 6 ++++-- skins/larry/templates/settingsedit.html | 4 +--- skins/larry/ui.js | 15 +++++++++++++++ 11 files changed, 55 insertions(+), 19 deletions(-) create mode 100644 skins/larry/images/overflowshadow.png diff --git a/skins/larry/images/overflowshadow.png b/skins/larry/images/overflowshadow.png new file mode 100644 index 000000000..54dfdafce Binary files /dev/null and b/skins/larry/images/overflowshadow.png differ diff --git a/skins/larry/styles.css b/skins/larry/styles.css index e793fabbb..85372d5c8 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1036,8 +1036,8 @@ body.iframe { margin: 38px 0 10px 0; } -body.iframe.footerbuttons { - margin-bottom: 42px; +body.iframe.floatingbuttons { + margin-bottom: 40px; } body.iframe.fullheight { @@ -1064,14 +1064,25 @@ body.iframe .boxtitle { z-index: 100; } -body.iframe .footerbuttons { +body.iframe .footerleft.floating { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 110; background: #fff; - padding: 8px; + padding-top: 8px; + padding-bottom: 12px; +} + +body.iframe .footerleft.floating:before { + content: " "; + position: absolute; + top: -6px; + left: 0; + width: 100%; + height: 6px; + background: url(images/overflowshadow.png) top center no-repeat; } .boxcontent { @@ -1087,8 +1098,16 @@ body.iframe .footerbuttons { overflow: auto; } +.iframebox { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 28px; +} + .footerleft { - padding: 0 12px 10px 12px; + padding: 0 12px 4px 12px; } .propform fieldset { diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index b379609f5..ee92ff4dc 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -67,7 +67,9 @@

- +

+ +

diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html index 9978c4757..f84936635 100644 --- a/skins/larry/templates/contactedit.html +++ b/skins/larry/templates/contactedit.html @@ -4,7 +4,7 @@ <roundcube:object name="pagetitle" /> - +

@@ -36,7 +36,7 @@ -
+
diff --git a/skins/larry/templates/folderedit.html b/skins/larry/templates/folderedit.html index cfc8bc3d4..18d246942 100644 --- a/skins/larry/templates/folderedit.html +++ b/skins/larry/templates/folderedit.html @@ -12,14 +12,12 @@
-

" class="button" onclick="history.back()" />
-
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index ab4e46ce1..988ff952c 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -28,7 +28,9 @@

- +
+ +

diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index 061088ea5..d9270b68a 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -25,7 +25,9 @@
- +
+ +

diff --git a/skins/larry/templates/identityedit.html b/skins/larry/templates/identityedit.html index 3ef41319a..8d5e62290 100644 --- a/skins/larry/templates/identityedit.html +++ b/skins/larry/templates/identityedit.html @@ -12,11 +12,9 @@ -

-
diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 88b6b96b2..427e0a4f5 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -21,8 +21,10 @@
- - +
+ +
+
diff --git a/skins/larry/templates/settingsedit.html b/skins/larry/templates/settingsedit.html index ada5b57ee..1a80f58e9 100644 --- a/skins/larry/templates/settingsedit.html +++ b/skins/larry/templates/settingsedit.html @@ -12,10 +12,8 @@ -

- -
+
diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 894278a9a..780ce7a62 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -218,6 +218,7 @@ function rcube_mail_ui() // don't use $(window).resize() due to some unwanted side-effects window.onresize = resize; + resize(); } / @@ -255,6 +256,20 @@ function rcube_mail_ui() if (rcmail.env.task == 'mail' && rcmail.env.action == 'compose') { layout_composeview(); } + + // make iframe footer buttons float if scrolling is active + $('body.iframe .footerleft').each(function(){ + var footer = $(this), + body = $(document.body), + floating = footer.hasClass('floating'), + overflow = body.outerHeight(true) > $(window).height(); + if (overflow != floating) { + var action = overflow ? 'addClass' : 'removeClass'; + footer[action]('floating'); + body[action]('floatingbuttons'); + } + }) + } / -- cgit v1.2.3