Roundcubemail devel
parent: de485f88 | patch | commit | ignore whitespace
Thomas Bruederli
2012-07-06 af32a2f5ece250427aa753b236e48784ffa07aba 
Improve iframe form buttons display: fix iframe heights and make footer buttons float if scrolling is active
1 files added
10 files modified
74 ■■■■■ changed files
skins/larry/images/overflowshadow.png patch | view | raw | blame | history
skins/larry/styles.css 29 ●●●●● patch | view | raw | blame | history
skins/larry/templates/addressbook.html 4 ●●●●● patch | view | raw | blame | history
skins/larry/templates/contactedit.html 4 ●●●●● patch | view | raw | blame | history
skins/larry/templates/folderedit.html 2 ●●●●● patch | view | raw | blame | history
skins/larry/templates/folders.html 4 ●●●●● patch | view | raw | blame | history
skins/larry/templates/identities.html 4 ●●●●● patch | view | raw | blame | history
skins/larry/templates/identityedit.html 2 ●●●●● patch | view | raw | blame | history
skins/larry/templates/settings.html 6 ●●●●● patch | view | raw | blame | history
skins/larry/templates/settingsedit.html 4 ●●●●● patch | view | raw | blame | history
skins/larry/ui.js 15 ●●●●● patch | view | raw | blame | history 
 skins/larry/images/overflowshadow.png




 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 {




 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>






 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" />


@@ -35,7 +35,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'" />




 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()" />&nbsp;


    <roundcube:endif />


</div>


</div>




<roundcube:include file="/includes/footer.html" />




 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>






 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>






 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" />




 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>




 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" />




 skins/larry/ui.js


@@ -220,6 +220,7 @@




    // don't use $(window).resize() due to some unwanted side-effects


    window.onresize = resize;


    resize();


  }




  /**


@@ -257,6 +258,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');


      }


    })




  }




  /**