summaryrefslogtreecommitdiff
path: root/skins
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2012-12-29 16:24:39 +0100
committerThomas Bruederli <thomas@roundcube.net>2012-12-29 16:24:39 +0100
commit54241516d7e4e44520b9c4dea1bc82e078432018 (patch)
treecfa10322c93259a1c0636132f8a972f9370bf9b9 /skins
parent8809a1828477101ade03b261662df089e268ecb4 (diff)
Add toggle to minimize page header; automatically triggers on small screens
Diffstat (limited to 'skins')
-rw-r--r--skins/larry/ie7hacks.css24
-rw-r--r--skins/larry/images/buttons.pngbin34009 -> 36693 bytes
-rw-r--r--skins/larry/includes/header.html2
-rw-r--r--skins/larry/styles.css156
-rw-r--r--skins/larry/ui.js20
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
Binary files differ
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);