From 98d096004d7222df2ec944d136ef6356df173f7b Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Fri, 06 Jul 2012 06:53:07 -0400
Subject: [PATCH] Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active
---
skins/larry/templates/folderedit.html | 2 -
skins/larry/templates/settings.html | 6 ++-
skins/larry/templates/addressbook.html | 4 +
skins/larry/templates/contactedit.html | 4 +-
skins/larry/templates/folders.html | 4 +
skins/larry/styles.css | 29 ++++++++++++--
skins/larry/templates/identities.html | 4 +
skins/larry/images/overflowshadow.png | 0
skins/larry/templates/settingsedit.html | 4 -
skins/larry/templates/identityedit.html | 2 -
skins/larry/ui.js | 15 +++++++
11 files changed, 55 insertions(+), 19 deletions(-)
diff --git a/skins/larry/images/overflowshadow.png b/skins/larry/images/overflowshadow.png
new file mode 100644
index 0000000..54dfdaf
--- /dev/null
+++ b/skins/larry/images/overflowshadow.png
Binary files differ
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index e793fab..85372d5 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1036,8 +1036,8 @@
margin: 38px 0 10px 0;
}
-body.iframe.footerbuttons {
- margin-bottom: 42px;
+body.iframe.floatingbuttons {
+ margin-bottom: 40px;
}
body.iframe.fullheight {
@@ -1064,14 +1064,25 @@
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 @@
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 b379609..ee92ff4 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -67,7 +67,9 @@
<div id="contacts-box" class="uibox">
- <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" />
+ <div class="iframebox">
+ <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ </div>
<roundcube:object name="message" id="message" class="statusbar" />
</div>
diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html
index 9978c47..f849366 100644
--- a/skins/larry/templates/contactedit.html
+++ b/skins/larry/templates/contactedit.html
@@ -4,7 +4,7 @@
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
-<body class="iframe footerbuttons">
+<body class="iframe">
<h1 class="boxtitle">
<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
@@ -36,7 +36,7 @@
</form>
-<div class="footerbuttons formbuttons">
+<div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
<roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" />
<roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />
diff --git a/skins/larry/templates/folderedit.html b/skins/larry/templates/folderedit.html
index cfc8bc3..18d2469 100644
--- a/skins/larry/templates/folderedit.html
+++ b/skins/larry/templates/folderedit.html
@@ -12,13 +12,11 @@
<roundcube:object name="folderdetails" class="propform" />
</div>
-<div id="formfooter">
<div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
<roundcube:if condition="!strlen(request:_mbox)" />
<input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />
<roundcube:endif />
-</div>
</div>
<roundcube:include file="/includes/footer.html" />
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html
index ab4e46c..988ff95 100644
--- a/skins/larry/templates/folders.html
+++ b/skins/larry/templates/folders.html
@@ -28,7 +28,9 @@
</div>
<div id="folder-details" class="uibox contentbox">
- <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" />
+ <div class="iframebox">
+ <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ </div>
<roundcube:object name="message" id="message" class="statusbar" />
</div>
diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html
index 061088e..d9270b6 100644
--- a/skins/larry/templates/identities.html
+++ b/skins/larry/templates/identities.html
@@ -25,7 +25,9 @@
</div>
<div id="identity-details" class="uibox contentbox">
- <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" />
+ <div class="iframebox">
+ <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ </div>
<roundcube:object name="message" id="message" class="statusbar" />
</div>
diff --git a/skins/larry/templates/identityedit.html b/skins/larry/templates/identityedit.html
index 3ef4131..8d5e622 100644
--- a/skins/larry/templates/identityedit.html
+++ b/skins/larry/templates/identityedit.html
@@ -12,10 +12,8 @@
<roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" />
</div>
-<div id="formfooter">
<div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
-</div>
</div>
<roundcube:include file="/includes/footer.html" />
diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html
index 88b6b96..427e0a4 100644
--- a/skins/larry/templates/settings.html
+++ b/skins/larry/templates/settings.html
@@ -21,8 +21,10 @@
</div>
<div id="preferences-box" class="uibox contentbox">
-<roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" />
-<roundcube:object name="message" id="message" class="statusbar" />
+ <div class="iframebox">
+ <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ </div>
+ <roundcube:object name="message" id="message" class="statusbar" />
</div>
</div>
diff --git a/skins/larry/templates/settingsedit.html b/skins/larry/templates/settingsedit.html
index ada5b57..1a80f58 100644
--- a/skins/larry/templates/settingsedit.html
+++ b/skins/larry/templates/settingsedit.html
@@ -12,10 +12,8 @@
<roundcube:object name="userprefs" form="form" class="propform" />
</div>
-<div id="formfooter">
<div class="footerleft formbuttons">
-<roundcube:button command="save" type="input" class="button mainaction" label="save" />
-</div>
+ <roundcube:button command="save" type="input" class="button mainaction" label="save" />
</div>
<roundcube:include file="/includes/footer.html" />
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 894278a..780ce7a 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -218,6 +218,7 @@
// don't use $(window).resize() due to some unwanted side-effects
window.onresize = resize;
+ resize();
}
/**
@@ -255,6 +256,20 @@
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');
+ }
+ })
+
}
/**
--
Gitblit v1.9.1