From f8a9c2c59cda13e41f1295ce378885e29ad39780 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <alec@alec.pl>
Date: Fri, 04 Apr 2014 05:47:16 -0400
Subject: [PATCH] Improve HTML structure so toolbar and content are in separate containers. This makes splitters size and positioning better.
---
skins/larry/templates/mail.html | 40 ++++++++++----------
skins/larry/templates/messageerror.html | 4 ++
skins/larry/templates/addressbook.html | 19 +++++----
skins/larry/templates/message.html | 8 +++
skins/larry/templates/messagepart.html | 3 +
skins/larry/styles.css | 13 ++++--
skins/larry/addressbook.css | 6 +-
skins/larry/mail.css | 12 +++---
skins/larry/templates/compose.html | 4 ++
skins/larry/ui.js | 2
10 files changed, 67 insertions(+), 44 deletions(-)
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 8e17d77..bfdd681 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -39,7 +39,7 @@
#directorylistbox {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
width: 100%;
bottom: 0;
@@ -47,7 +47,7 @@
#addresslist {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
width: 280px;
bottom: 0;
@@ -55,7 +55,7 @@
#contacts-box {
position: absolute;
- top: 42px;
+ top: 0;
left: 292px;
right: 0;
bottom: 0;
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 6cfbcaa..74ce43e 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -34,7 +34,7 @@
#mailview-top {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
right: 0;
bottom: 0px;
@@ -59,7 +59,7 @@
#mailboxcontainer,
#messagelistcontainer {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
width: 100%;
bottom: 0;
@@ -1203,7 +1203,7 @@
#messagepartcontainer {
position: absolute;
- top: 42px;
+ top: 0;
left: 232px;
right: 0;
bottom: 0;
@@ -1217,7 +1217,7 @@
#messagepartheader {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
width: 220px;
bottom: 0;
@@ -1259,7 +1259,7 @@
#compose-contacts {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
width: 100%;
bottom: 0;
@@ -1362,7 +1362,7 @@
#compose-content {
position: absolute;
- top: 42px;
+ top: 0;
left: 0;
right: 0;
bottom: 0px;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index f55ac31..518ac72 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -964,6 +964,14 @@
bottom: 20px;
}
+#mainscreencontent {
+ position: absolute;
+ top: 42px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
.minimal #mainscreen {
top: 62px;
}
@@ -996,11 +1004,6 @@
}
.minwidth {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 100%;
min-width: 1024px;
}
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index ebdce51..97efdc6 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -24,6 +24,15 @@
<roundcube:container name="toolbar" id="addressbooktoolbar" />
</div>
+<!-- search box -->
+<div id="quicksearchbar" class="searchbox">
+<roundcube:object name="searchform" id="quicksearchbox" />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+</div>
+
+<div id="mainscreencontent">
+
<div id="addressview-left">
<!-- sources/groups list -->
@@ -40,13 +49,6 @@
</div><!-- end addressview-left -->
<div id="addressview-right">
-
-<!-- search box -->
-<div id="quicksearchbar" class="searchbox">
-<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
-</div>
<!-- contacts list -->
<div id="addresslist" class="uibox listbox">
@@ -73,9 +75,10 @@
</div>
</div>
-
</div><!-- end addressview-right -->
+</div><!-- end mainscreencontent -->
+
</div><!-- end mainscreen -->
<div id="exportmenu" class="popupmenu">
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index 11662d1..a7f2e7e 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -35,6 +35,8 @@
</div>
</div>
+<div id="mainscreencontent">
+
<div id="composeview-left">
<!-- inline address book -->
@@ -181,6 +183,8 @@
</div><!-- end mailview-right -->
+</div><!-- end mainscreencontent -->
+
</div><!-- end mainscreen -->
<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />">
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index ff5f754..b4e216a 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -11,9 +11,8 @@
<roundcube:endif />
</style>
</head>
-<body>
+<body class="minwidth">
-<div class="minwidth">
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
@@ -24,6 +23,23 @@
<roundcube:include file="/includes/mailtoolbar.html" />
</div>
+<div id="messagesearchtools">
+
+<!-- search filter -->
+<div id="searchfilter">
+ <roundcube:object name="searchfilter" class="searchfilter decorated" />
+</div>
+
+<!-- search box -->
+<div id="quicksearchbar" class="searchbox">
+<roundcube:object name="searchform" id="quicksearchbox" />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+</div>
+
+</div>
+
+<div id="mainscreencontent">
<div id="mailview-left">
<!-- folders list -->
@@ -42,22 +58,6 @@
</div>
<div id="mailview-right">
-
-<div id="messagesearchtools">
-
-<!-- search filter -->
-<div id="searchfilter">
- <roundcube:object name="searchfilter" class="searchfilter decorated" />
-</div>
-
-<!-- search box -->
-<div id="quicksearchbar" class="searchbox">
-<roundcube:object name="searchform" id="quicksearchbox" />
-<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
-<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
-</div>
-
-</div>
<roundcube:if condition="config:preview_pane == true" />
<div id="mailview-top" class="uibox">
@@ -119,9 +119,9 @@
</div><!-- end mailview-right -->
-</div><!-- end mainscreen -->
+</div><!-- end mainscreencontent -->
-</div><!-- end minwidth -->
+</div><!-- end mainscreen -->
<div id="searchmenu" class="popupmenu">
<ul class="toolbarmenu">
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index df92b75..0343004 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -20,6 +20,8 @@
<roundcube:if condition="!env:extwin" />
+<div id="mainscreencontent">
+
<div id="mailview-left">
<!-- folders list -->
@@ -31,7 +33,7 @@
</div>
-<div id="mailview-right" class="offset uibox">
+<div id="mailview-right" class="uibox">
<roundcube:else />
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
@@ -84,6 +86,10 @@
</div><!-- end mailview-right -->
+<roundcube:if condition="!env:extwin" />
+</div><!-- end mainscreencontent -->
+<roundcube:endif />
+
</div><!-- end mainscreen -->
<div id="attachmentmenu" class="popupmenu">
diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html
index dbe373a..d509ce8 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -23,6 +23,8 @@
</div>
</div>
+<div id="mainscreencontent">
+
<div id="mailview-left">
<!-- folders list -->
@@ -40,6 +42,8 @@
</div><!-- end mailview-right -->
+</div><!-- end mainscreencontent -->
+
</div><!-- end mainscreen -->
<roundcube:include file="/includes/footer.html" />
diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html
index 0ec9358..3b878c9 100644
--- a/skins/larry/templates/messagepart.html
+++ b/skins/larry/templates/messagepart.html
@@ -16,6 +16,8 @@
<roundcube:container name="toolbar" id="messagetoolbar" />
</div>
+<div id="mainscreencontent">
+
<div id="messagepartheader" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="properties" /></h2>
<div class="scroller">
@@ -30,6 +32,7 @@
</div>
</div>
+</div>
<roundcube:include file="/includes/footer.html" />
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index af5a6f3..05bfa70 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -329,7 +329,7 @@
});
// set min-width to show all toolbar buttons
- var screen = $('body > div.minwidth');
+ var screen = $('body.minwidth');
if (screen.length) {
screen.css('min-width', $('.toolbar').width() + $('#quicksearchbar').width() + $('#searchfilter').width() + 30);
}
--
Gitblit v1.9.1