From 54241516d7e4e44520b9c4dea1bc82e078432018 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Sat, 29 Dec 2012 10:24:39 -0500
Subject: [PATCH] Add toggle to minimize page header; automatically triggers on small screens
---
skins/larry/ie7hacks.css | 24 +++++
skins/larry/styles.css | 156 ++++++++++++++++++++++++++++++++++++++
skins/larry/includes/header.html | 2
skins/larry/images/buttons.png | 0
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 f07d79a..d383c1e 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 @@
.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 @@
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
index 7d042cb..4438d9c 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
Binary files differ
diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html
index 2620faf..5a30020 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 f3b0277..cd6810e 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -570,8 +570,138 @@
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;
@@ -630,6 +760,22 @@
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 @@
}
#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 da4f230..d2faa36 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -43,6 +43,15 @@
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 @@
{
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);
--
Gitblit v1.9.1