summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2012-07-06 12:53:07 +0200
committerThomas Bruederli <thomas@roundcube.net>2012-07-06 12:53:07 +0200
commit98d096004d7222df2ec944d136ef6356df173f7b (patch)
tree7c6080bd032e301184fb2da7d50b3b50928dc55f
parent30eb9eee28f962048d638e6d13598e33fcf29ddc (diff)
Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active
Diffstat
-rw-r--r--skins/larry/images/overflowshadow.pngbin0 -> 1163 bytes
-rw-r--r--skins/larry/styles.css29
-rw-r--r--skins/larry/templates/addressbook.html4
-rw-r--r--skins/larry/templates/contactedit.html4
-rw-r--r--skins/larry/templates/folderedit.html2
-rw-r--r--skins/larry/templates/folders.html4
-rw-r--r--skins/larry/templates/identities.html4
-rw-r--r--skins/larry/templates/identityedit.html2
-rw-r--r--skins/larry/templates/settings.html6
-rw-r--r--skins/larry/templates/settingsedit.html4
-rw-r--r--skins/larry/ui.js15
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 000000000..54dfdafce
--- /dev/null
+++ b/skins/larry/images/overflowshadow.png
Binary files 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 @@
<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 9978c4757..f84936635 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 cfc8bc3d4..18d246942 100644
--- a/skins/larry/templates/folderedit.html
+++ b/skins/larry/templates/folderedit.html
@@ -12,14 +12,12 @@
<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()" />&nbsp;
<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 ab4e46ce1..988ff952c 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 061088ea5..d9270b68a 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 3ef41319a..8d5e62290 100644
--- a/skins/larry/templates/identityedit.html
+++ b/skins/larry/templates/identityedit.html
@@ -12,11 +12,9 @@
<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 88b6b96b2..427e0a4f5 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 ada5b57ee..1a80f58e9 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 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');
+ }
+ })
+
}
/**
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-10 03:31:51 +0000