banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active

Browse Source
pull/13/head
Thomas Bruederli 13 years ago
parent 30eb9eee28
commit 98d096004d
11 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File

BIN
skins/larry/images/overflowshadow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

29
skins/larry/styles.css
Unescape Escape View File

@ -1036,8 +1036,8 @@ body.iframe {
margin: 38px 0 10px 0; margin: 38px 0 10px 0;
} }
body.iframe.footerbuttons { body.iframe.floatingbuttons {
margin-bottom: 42px; margin-bottom: 40px;
} }
body.iframe.fullheight { body.iframe.fullheight {
@ -1064,14 +1064,25 @@ body.iframe .boxtitle {
z-index: 100; z-index: 100;
} }
body.iframe .footerbuttons { body.iframe .footerleft.floating {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
z-index: 110; z-index: 110;
background: #fff; 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 { .boxcontent {
@ -1087,8 +1098,16 @@ body.iframe .footerbuttons {
overflow: auto; overflow: auto;
} }
.iframebox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 28px;
}
.footerleft { .footerleft {
padding: 0 12px 10px 12px; padding: 0 12px 4px 12px;
} }
.propform fieldset { .propform fieldset {

4
skins/larry/templates/addressbook.html
Unescape Escape View File

@ -67,7 +67,9 @@
<div id="contacts-box" class="uibox"> <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" /> <roundcube:object name="message" id="message" class="statusbar" />
</div> </div>

4
skins/larry/templates/contactedit.html
Unescape Escape View File

@ -4,7 +4,7 @@
<title><roundcube:object name="pagetitle" /></title> <title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" /> <roundcube:include file="/includes/links.html" />
</head> </head>
<body class="iframe footerbuttons"> <body class="iframe">
<h1 class="boxtitle"> <h1 class="boxtitle">
<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" /> <roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
@ -36,7 +36,7 @@
</form> </form>
<div class="footerbuttons formbuttons"> <div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <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 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'" /> <roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />

2
skins/larry/templates/folderedit.html
Unescape Escape View File

@ -12,14 +12,12 @@
<roundcube:object name="folderdetails" class="propform" /> <roundcube:object name="folderdetails" class="propform" />
</div> </div>
<div id="formfooter">
<div class="footerleft formbuttons"> <div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:button command="save" type="input" class="button mainaction" label="save" />
<roundcube:if condition="!strlen(request:_mbox)" /> <roundcube:if condition="!strlen(request:_mbox)" />
<input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />&nbsp; <input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />&nbsp;
<roundcube:endif /> <roundcube:endif />
</div> </div>
</div>
<roundcube:include file="/includes/footer.html" /> <roundcube:include file="/includes/footer.html" />

4
skins/larry/templates/folders.html
Unescape Escape View File

@ -28,7 +28,9 @@
</div> </div>
<div id="folder-details" class="uibox contentbox"> <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" /> <roundcube:object name="message" id="message" class="statusbar" />
</div> </div>

4
skins/larry/templates/identities.html
Unescape Escape View File

@ -25,7 +25,9 @@
</div> </div>
<div id="identity-details" class="uibox contentbox"> <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" /> <roundcube:object name="message" id="message" class="statusbar" />
</div> </div>

2
skins/larry/templates/identityedit.html
Unescape Escape View File

@ -12,11 +12,9 @@
<roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" /> <roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" />
</div> </div>
<div id="formfooter">
<div class="footerleft formbuttons"> <div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:button command="save" type="input" class="button mainaction" label="save" />
</div> </div>
</div>
<roundcube:include file="/includes/footer.html" /> <roundcube:include file="/includes/footer.html" />

6
skins/larry/templates/settings.html
Unescape Escape View File

@ -21,8 +21,10 @@
</div> </div>
<div id="preferences-box" class="uibox contentbox"> <div id="preferences-box" class="uibox contentbox">
<roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:96%" frameborder="0" src="/watermark.html" /> <div class="iframebox">
<roundcube:object name="message" id="message" class="statusbar" /> <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>
</div> </div>

4
skins/larry/templates/settingsedit.html
Unescape Escape View File

@ -12,10 +12,8 @@
<roundcube:object name="userprefs" form="form" class="propform" /> <roundcube:object name="userprefs" form="form" class="propform" />
</div> </div>
<div id="formfooter">
<div class="footerleft formbuttons"> <div class="footerleft formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <roundcube:button command="save" type="input" class="button mainaction" label="save" />
</div>
</div> </div>
<roundcube:include file="/includes/footer.html" /> <roundcube:include file="/includes/footer.html" />

15
skins/larry/ui.js
Unescape Escape View File

@ -218,6 +218,7 @@ function rcube_mail_ui()
// don't use $(window).resize() due to some unwanted side-effects // don't use $(window).resize() due to some unwanted side-effects
window.onresize = resize; window.onresize = resize;
resize();
} }
/** /**
@ -255,6 +256,20 @@ function rcube_mail_ui()
if (rcmail.env.task == 'mail' && rcmail.env.action == 'compose') { if (rcmail.env.task == 'mail' && rcmail.env.action == 'compose') {
layout_composeview(); 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');
}
})
} }
/** /**

Write Preview
Loading…
Cancel
Save