githubFork/roundcubemail.git

parent: 4d61806c | patch | commit | show whitespace

Improve HTML structure so toolbar and content are in separate containers. T...

Aleksander Machniak

2014-04-04 f8a9c2c59cda13e41f1295ce378885e29ad39780

Improve HTML structure so toolbar and content are in separate containers.
This makes splitters size and positioning better.

10 files modified

	skins/larry/addressbook.css	6 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/mail.css	12 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/styles.css	13 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/addressbook.html	19 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/compose.html	4 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/mail.html	40 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/message.html	8 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/messageerror.html	4 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/templates/messagepart.html	3 ●●●●● patch \| view \| raw \| blame \| history
	skins/larry/ui.js	2 ●●●●● patch \| view \| raw \| blame \| history

 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;

 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;

 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;
}


 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">

 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' />">

 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">

 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">

 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" />

 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" />


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

			@@ -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;

			@@ -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;

			@@ -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;
			}

			@@ -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">

			@@ -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' />">

			@@ -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">

			@@ -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">

			@@ -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" />

			@@ -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" />

			@@ -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);
			}