diff options
author | Thomas Bruederli <thomas@roundcube.net> | 2012-12-29 16:26:36 +0100 |
---|---|---|
committer | Thomas Bruederli <thomas@roundcube.net> | 2012-12-29 16:26:36 +0100 |
commit | 6f3c97c5d32f93bb81b157bc4340fef8ee0b60ea (patch) | |
tree | b22f02a15ade46f519c650103362815a2c0ce21c /skins | |
parent | 49437c123a4435ce98e62edd084442ff20aaef1d (diff) | |
parent | b26171227804a135b8ba4fef605753ee2121be67 (diff) |
Merge branch 'master' of github.com:roundcube/roundcubemail
Diffstat (limited to 'skins')
-rw-r--r-- | skins/larry/ie7hacks.css | 24 | ||||
-rw-r--r-- | skins/larry/images/buttons.png | bin | 34009 -> 36693 bytes | |||
-rw-r--r-- | skins/larry/includes/header.html | 2 | ||||
-rw-r--r-- | skins/larry/styles.css | 156 | ||||
-rw-r--r-- | skins/larry/ui.js | 20 |
5 files changed, 200 insertions, 2 deletions
diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index f07d79a65..d383c1e3e 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -17,6 +17,14 @@ height: expression((parseInt(document.documentElement.clientHeight)-150)+'px'); } +.minimal #mainscreen { + height: expression((parseInt(document.documentElement.clientHeight)-82)+'px'); +} + +.minimal #mainscreen.offset { + height: expression((parseInt(document.documentElement.clientHeight)-120)+'px'); +} + input.button { display: inline; font-size: 90%; @@ -29,7 +37,8 @@ a.deletebutton, .boxfooter .listbutton .inner, .attachmentslist li a.delete, .attachmentslist li a.cancelupload, -.previewheader .iconlink { +.previewheader .iconlink, +.minimal #taskbar .button-inner { /* workaround for text-indent which also offsets the background image */ text-indent: 0; font-size: 0; @@ -183,3 +192,16 @@ ul.toolbarmenu li label { padding: 0 1px 0 0; } +.minimal #topline { + width: 100%; + height: 18px; + box-sizing: border-box; +} + + +.minimal #taskbar a:hover .tooltip { + right: 34px; + top: 1px; +} + + diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex 7d042cb23..4438d9cbc 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 2620fafe5..5a30020f3 100644 --- a/skins/larry/includes/header.html +++ b/skins/larry/includes/header.html @@ -26,6 +26,8 @@ <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" /> <roundcube:container name="taskbar" id="taskbar" /> <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" /> + <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" /> + <span class="minmodetoggle"></span> </div> <roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" onclick="rcmail.command('switch-task','mail');return false;" /> </div> diff --git a/skins/larry/styles.css b/skins/larry/styles.css index f3b02779e..cd6810e8d 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -570,9 +570,139 @@ a.iconlink.upload { color: #fff; } +#taskbar .button-logout { + display: none; +} + +#taskbar a.button-logout span.button-inner { + background-position: -2px -1791px; +} + +#taskbar a.button-logout:hover span.button-inner { + background-position: -2px -1829px; +} + + +/*** minimal version of the page header ***/ + +.minimal #topline { + position: fixed; + top: -18px; + background: #444; + z-index: 5000; + width: 100%; + height: 22px; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.minimal #topline:hover { + top: 0px; + opacity: 0.94; + filter: alpha(opacity=94); + -webkit-transition: top 0.3s ease-in-out; + -moz-transition: top 0.3s ease-in-out; + -o-transition: top 0.3s ease-in-out; + transition: top 0.3s ease-in-out; +} + +.minimal #topline a.button-logout { + display: none; +} + +.minimal #topline span.username { + display: inline-block; + padding-top: 2px; +} + +.minimal #topnav { + position: relative; + top: 4px; + height: 42px; +} + +.minimal #taskbar { + height: ; +} + +.minimal #taskbar a { + position: relative; + padding: 10px 10px 0 6px; + height: 32px; +} + +.minimal #taskbar .button-logout { + display: inline-block; +} + +.minimal #taskbar .button-inner { + top: -4px; + padding: 0; + height: 24px !important; + width: 27px; + text-indent: -5000px; +} + +#taskbar .tooltip { + display: none; +} + +.minimal #taskbar .tooltip { + position: absolute; + top: -500px; + right: 2px; + display: inline-block; + padding: 2px 8px 3px 8px; + background: #444; + background: -moz-linear-gradient(top, #444 0%, #333 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#333)); + background: -o-linear-gradient(top, #444 0%, #333 100%); + background: -ms-linear-gradient(top, #444 0%, #333 100%); + background: linear-gradient(top, #444 0%, #333 100%); + color: #eee; + font-weight: bold; + white-space: nowrap; + border: 1px solid #777; + box-shadow: 0 1px 5px 0 #333; + -moz-box-shadow: 0 1px 5px 0 #333; + -webkit-box-shadow: 0 1px 5px 0 #333; + -o-box-shadow: 0 1px 5px 0 #333; + z-index: 200; + white-space: nowrap; + text-shadow: 0px 1px 1px #000; +} + +.minimal #taskbar .tooltip:after { + content: ""; + position: absolute; + top: -4px; + right: 15px; + border-style: solid; + border-width: 0 4px 4px; + border-color: #888 transparent; + /* reduce the damage in FF3.0 */ + display: block; + width: 0; + z-index: 251; +} + +.ie8 .minimal #taskbar .tooltip:after { + top: -6px; +} + +.minimal #taskbar a:hover .tooltip { + display: block; + top: 39px; +} + /*** taskbar ***/ +#taskbar { + position: relative; + padding-right: 18px; +} + #taskbar a { display: inline-block; height: 34px; @@ -630,6 +760,22 @@ a.iconlink.upload { background-position: 0 -168px; } +#taskbar .minmodetoggle { + position: absolute; + top: 0; + right: 0; + display: block; + width: 19px; + height: 46px; + cursor: pointer; + background: url(images/buttons.png) -35px -1778px no-repeat; +} + +.minimal #taskbar .minmodetoggle { + height: 42px; + background-position: -35px -1820px; +} + #mainscreen { position: absolute; top: 88px; @@ -643,13 +789,21 @@ a.iconlink.upload { } #mainscreen.offset { - top: 130px; + top: 132px; } #mainscreen .offset { margin-top: 42px; } +.minimal #mainscreen { + top: 62px; +} + +.minimal #mainscreen.offset { + top: 102px; +} + .uibox { border: 1px solid #a3a3a3; border-radius: 4px; diff --git a/skins/larry/ui.js b/skins/larry/ui.js index da4f2300e..d2faa3611 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -43,6 +43,15 @@ function rcube_mail_ui() this.hide_header_row = hide_header_row; + // set minimal mode on small screens (don't wait for document.ready) + if (window.$ && document.body) { + var minmode = rcmail.get_cookie('minimalmode'); + if (parseInt(minmode) || (minmode === null && $(window).height() < 850)) { + $(document.body).addClass('minimal'); + } + } + + /** * */ @@ -59,6 +68,17 @@ function rcube_mail_ui() { rcmail.addEventListener('message', message_displayed); + /*** prepare minmode functions ***/ + $('#taskbar a').each(function(i,elem){ + $(elem).append('<span class="tooltip">' + $('.button-inner', this).html() + '</span>') + }); + + $('#taskbar .minmodetoggle').click(function(e){ + var ismin = $(document.body).toggleClass('minimal').hasClass('minimal'); + rcmail.set_cookie('minimalmode', ismin?1:0); + $(window).resize(); + }); + /*** mail task ***/ if (rcmail.env.task == 'mail') { rcmail.addEventListener('menu-open', show_listoptions); |