Add toggle to minimize page header; automatically triggers on small screens

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
index 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);