From 68e13c45d396744a7e848d1a82830b7fd408863a Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Thu, 22 Dec 2011 13:00:18 -0500
Subject: [PATCH] Address book styling for Larry; show about page in UI dialog
---
skins/larry/templates/about.html | 15 -
skins/larry/includes/mailtoolbar.html | 4
skins/larry/templates/addressbook.html | 15
skins/larry/settings.css | 9
skins/larry/templates/contactedit.html | 7
skins/larry/addressbook.css | 102 ++++++++
skins/larry/templates/mail.html | 6
skins/larry/images/listicons.png | 0
skins/larry/templates/contactsearch.html | 21 +
skins/larry/templates/importcontacts.html | 34 ++
skins/larry/styles.css | 289 +++++++++++++++++++----
skins/larry/includes/header.html | 4
skins/larry/images/buttons.png | 0
skins/larry/mail.css | 127 +--------
skins/larry/ui.js | 56 ++++
15 files changed, 502 insertions(+), 187 deletions(-)
diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 57a1b0d..c1a8e54 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -90,6 +90,22 @@
background-position: 32px -1579px;
}
+#directorylist li.contactgroup input {
+ margin-left: 36px;
+}
+
+#directorylist li.contactsearch a {
+ background-position: 6px -1651px;
+}
+
+#directorylist li.contactsearch.selected a {
+ background-position: 6px -1675px;
+}
+
+#directorylist li.contactsearch input {
+ margin-left: 8px;
+}
+
#contacts-table .contact td.name {
background-position: 6px -1603px;
}
@@ -141,10 +157,14 @@
#contacthead {
border: 0;
- margin: 0 20em 1em 0;
+ margin: 0 16em 1em 0;
padding: 0;
line-height: 1.5em;
font-size: 12px;
+}
+
+form #contacthead {
+ margin-right: 0;
}
#contacthead .names span.namefield,
@@ -180,6 +200,84 @@
width: 90px;
}
+.contactfieldgroup {
+ border: 0;
+ border-radius: 5px;
+ background: #f7f7f7;
+ background: -moz-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eee));
+ background: -o-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+ background: -ms-linear-gradient(top, #f7f7f7 0%, #eee 100%);
+ background: linear-gradient(top, #f7f7f7 0%, #eee 100%);
+ margin: 0 0 12px 0;
+ padding: 8px;
+}
+
+.contactfieldgroup legend {
+ display: block;
+ margin: 0 -8px;
+ width: 100%;
+ font-weight: bold;
+ text-shadow: 0px 1px 1px #fff;
+ padding: 6px 8px 3px 8px;
+ background: #f0f0f0;
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d6d6d6));
+ background: -o-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+ background: -ms-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+ background: linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
+ border-bottom: 1px solid #cfcfcf;
+ border-radius: 5px 5px 0 0;
+}
+
+.contactfieldgroup .row {
+ position: relative;
+ margin: 0.2em 0;
+}
+
+.contactfieldgroup .contactfieldlabel {
+ position: absolute;
+ top: 0;
+ left: 2px;
+ width: 110px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #666;
+}
+
+.contactfieldgroup .contactfieldlabel select {
+ width: 100%;
+ color: #666;
+}
+
+.contactfieldgroup .contactfieldcontent {
+ padding-left: 120px;
+ min-height: 1em;
+ line-height: 1.3em;
+}
+
+.contactfieldgroup .contactfield {
+ line-height: 1.3em;
+}
+
+.contactcontrolleraddress .contactfieldcontent input {
+ margin-bottom: 0.1em;
+}
+
+.contactfieldcontent.composite {
+ padding-bottom: 8px;
+}
+
+.contactfieldcontent .contactfieldbutton {
+ vertical-align: middle;
+ margin-left: 0.5em;
+}
+
+.contactfield .ff_notes {
+ width: 99%;
+}
+
a.deletebutton {
position: relative;
left: 5px;
@@ -189,5 +287,5 @@
height: 18px;
text-decoration: none;
text-indent: -1000px;
- background: url(images/buttons.png) -7px -337px no-repeat;
+ background: url(images/buttons.png) -7px -377px no-repeat;
}
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index 438768f..0e3bf3f 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
Binary files differ
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index 5f4473f..abd6dc0 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
Binary files differ
diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html
index 2fd6774..b088e4f 100644
--- a/skins/larry/includes/header.html
+++ b/skins/larry/includes/header.html
@@ -1,9 +1,9 @@
<div id="header">
<div id="topline">
<div class="topleft">
- <roundcube:button command="about" type="link" label="about" class="about-link" />
+ <roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" />
<roundcube:if condition="config:support_url" />
- <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
+ <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link" id="supportlink"><roundcube:label name="support" /></a>
<roundcube:endif />
</div>
<div class="topright">
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
index d7cb212..7e0c5cb 100644
--- a/skins/larry/includes/mailtoolbar.html
+++ b/skins/larry/includes/mailtoolbar.html
@@ -42,7 +42,7 @@
</div>
<div id="messagemenu" class="popupmenu">
- <ul class="toolbarmenu">
+ <ul class="toolbarmenu iconized">
<li><roundcube:button command="print" label="printmessage" class="icon" classAct="icon active" innerclass="icon print" /></li>
<li><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li>
<li><roundcube:button command="edit" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li>
@@ -54,7 +54,7 @@
<roundcube:if condition="template:name == 'mail'" />
<div id="markmessagemenu" class="popupmenu">
- <ul class="toolbarmenu">
+ <ul class="toolbarmenu iconized">
<li><roundcube:button command="mark" prop="read" label="markread" classAct="icon active" class="icon" innerclass="icon read" /></li>
<li><roundcube:button command="mark" prop="unread" label="markunread" classAct="icon active" class="icon" innerclass="icon unread" /></li>
<li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li>
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 44721c5..1381e2d 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -90,21 +90,21 @@
a.iconbutton.listmode {
width: 26px;
height: 20px;
- background-position: 0 -437px;
+ background-position: 0 -477px;
}
a.iconbutton.threadmode {
width: 26px;
height: 20px;
- background-position: 0 -457px;
+ background-position: 0 -497px;
}
a.iconbutton.listmode.selected {
- background-position: -26px -437px;
+ background-position: -26px -477px;
}
a.iconbutton.threadmode.selected {
- background-position: -26px -457px;
+ background-position: -26px -497px;
}
#mailboxlist li.mailbox {
@@ -165,6 +165,14 @@
#mailboxlist li.trash.selected > a {
background-position: 6px -406px;
+}
+
+#mailboxlist li.archive > a {
+ background-position: 6px -1699px;
+}
+
+#mailboxlist li.archive.selected > a {
+ background-position: 6px -1723px;
}
#mailboxlist li.virtual > a {
@@ -283,94 +291,15 @@
right: 2px;
width: 20px;
height: 18px;
- background: url(images/buttons.png) -3px -418px no-repeat;
+ background: url(images/buttons.png) -3px -458px no-repeat;
}
#mailpreviewtoggle.enabled {
- background-position: -28px -418px;
+ background-position: -28px -458px;
}
/*** message list ***/
-
-.boxlistcontent table {
- display: table;
- width: 100%;
- table-layout: fixed;
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-.boxlistcontent thead tr td {
- font-weight: bold;
- background: #d6eaf3;
- background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
- background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(14px,#d6eaf3), color-stop(100%,#d6eaf3));
- background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
- background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
- background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
- border-left: 1px solid #bbd3da;
-}
-
-.boxlistcontent thead tr td a,
-.boxlistcontent thead tr td span {
- display: block;
- padding: 8px 7px;
- color: #69939e;
- text-decoration: none;
-}
-
-.boxlistcontent tbody tr td {
- padding: 3px 7px;
- border-bottom: 1px solid #ddd;
- border-left: 1px dotted #bbd3da;
- white-space: nowrap;
- cursor: default;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.boxlistcontent thead tr td:first-child,
-.boxlistcontent tbody tr td:first-child {
- border-left: 0;
-}
-
-.boxlistcontent tbody tr td a {
- color: #333;
- text-decoration: none;
- white-space: nowrap;
- cursor: default;
-}
-
-.boxlistcontent tr.selected td {
- color: #fff !important;
- background: #019bc6;
- background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
- background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%);
- background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%);
- background: linear-gradient(top, #019bc6 0%, #017cb4 100%);
-}
-
-.boxlistcontent tr.selected td a,
-.boxlistcontent tr.selected td span {
- color: #fff !important;
-}
-
-.boxlistcontent tr.unfocused td {
- color: #fff !important;
- background: #4db0d2;
-}
-
-.boxlistcontent tr.unfocused td a,
-.boxlistcontent tr.unfocused td span {
- color: #fff !important;
-}
-
-.boxlistcontent tr.deleted td,
-.boxlistcontent tr.deleted td a {
- color: #ccc !important;
-}
#messagelist tr td.attachment,
#messagelist tr td.threads,
@@ -381,11 +310,11 @@
padding: 4px 3px;
}
-html.chrome #messagelist tr td.attachment,
-html.chrome #messagelist tr td.threads,
-html.chrome #messagelist tr td.status,
-html.chrome #messagelist tr td.flag,
-html.chrome #messagelist tr td.priority {
+.chrome #messagelist tr td.attachment,
+.chrome #messagelist tr td.threads,
+.chrome #messagelist tr td.status,
+.chrome #messagelist tr td.flag,
+.chrome #messagelist tr td.priority {
width: 26px;
}
@@ -393,7 +322,7 @@
width: 26px;
}
-html.chrome #messagelist tr td.threads {
+.chrome #messagelist tr td.threads {
width: 30px;
}
@@ -807,18 +736,6 @@
#message-objects div a.button,
#messagebody span.part-notice a.button {
margin-left: 10px;
- box-shadow: 0 1px 1px 0 #e8e386;
- -o-box-shadow: 0 1px 1px 0 #e8e386;
- -webkit-box-shadow: 0 1px 1px 0 #e8e386;
- -moz-box-shadow: 0 1px 1px 0 #e8e386;
-}
-
-#message-objects div a.button:hover,
-#messagebody span.part-notice a.button:hover {
- box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
- -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
- -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
- -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
}
div.message-part,
@@ -1095,12 +1012,12 @@
left: 6px;
width: 20px;
height: 18px;
- background: url(images/buttons.png) -3px -418px no-repeat;
+ background: url(images/buttons.png) -3px -458px no-repeat;
text-decoration: none;
}
#composeoptionstoggle.enabled {
- background-position: -28px -418px;
+ background-position: -28px -458px;
}
#composeview-bottom {
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 05a587a..105b350 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -182,3 +182,12 @@
text-align: right;
}
+#pluginlist td.version {
+ width: 5em;
+}
+
+#pluginlist td.license,
+#pluginlist td.source {
+ width: 8em;
+}
+
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 48c8c6f..875125b 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -78,10 +78,10 @@
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
- box-shadow: 0 1px 1px 0 #ccc;
- -o-box-shadow: 0 1px 1px 0 #ccc;
- -webkit-box-shadow: 0 1px 1px 0 #ccc;
- -moz-box-shadow: 0 1px 1px 0 #ccc;
+ box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
text-decoration: none;
outline: none;
}
@@ -94,11 +94,11 @@
border-color: #465864;
border-radius: 5px;
background: #7a7b7d;
- background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(123,123,123,1)), color-stop(100%,rgba(96,96,96,1))); /* Chrome,Safari4+ */
- background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */
- background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */
+ background: -moz-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#606060)); /* Chrome,Safari4+ */
+ background: -o-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */
+ background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */
box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
-o-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
-webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
@@ -117,32 +117,32 @@
.formbuttons input.button:active {
color: #fff;
- background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(123,123,123,1) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1)));
- background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
- background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
- background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%);
+ background: -moz-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#7b7b7b));
+ background: -o-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+ background: -ms-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
+ background: linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
}
input.button.mainaction {
color: #ededed;
border-color: #1f262c;
background: #505050;
- background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(42,46,49,1) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1)));
- background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
- background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
- background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%);
+ background: -moz-linear-gradient(top, #505050 0%, #2a2e31 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31));
+ background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%);
+ background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%);
+ background: linear-gradient(top, #505050 0%, #2a2e31 100%);
}
input.button.mainaction:active {
color: #fff;
background: #515151;
- background: -moz-linear-gradient(top, #515151 0%, #2c2c2c 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#2c2c2c));
- background: -o-linear-gradient(top, #515151 0%, #2c2c2c 100%);
- background: -ms-linear-gradient(top, #515151 0%, #2c2c2c 100%);
- background: linear-gradient(top, #515151 0%, #2c2c2c 100%);
+ background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050));
+ background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%);
+ background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%);
+ background: linear-gradient(top, #2a2e31 0%, #505050 100%);
}
input.button[disabled],
@@ -171,21 +171,21 @@
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
- box-shadow: 0 1px 1px 0 #ccc;
- -o-box-shadow: 0 1px 1px 0 #ccc;
- -webkit-box-shadow: 0 1px 1px 0 #ccc;
- -moz-box-shadow: 0 1px 1px 0 #ccc;
+ box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
+ -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
text-decoration: none;
}
-a.button:hover,
-input.button:hover,
+a.button:focus,
input.button:focus {
border-color: #4fadd5;
box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
-o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
+ outline: none;
}
label.disabled,
@@ -200,10 +200,10 @@
input.button.disabled:hover,
input.button[disabled]:hover {
border-color: #c6c6c6;
- box-shadow: 0 1px 1px 0 #ddd;
- -o-box-shadow: 0 1px 1px 0 #ddd;
- -webkit-box-shadow: 0 1px 1px 0 #ddd;
- -moz-box-shadow: 0 1px 1px 0 #ddd;
+ box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+ -o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
+ -moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
}
a.button.disabled span.inner {
@@ -247,6 +247,7 @@
.pagenav a.button {
padding: 1px 3px;
+ height: 16px;
}
.pagenav a.button span.inner {
@@ -339,16 +340,28 @@
text-decoration: underline;
}
+a.iconlink.delete {
+ background-position: -7px -337px;
+}
+
a.iconlink.add {
background-position: -7px -357px;
}
-a.iconlink.edit {
+a.iconlink.remove {
+ background-position: -7px -377px;
+}
+
+a.iconlink.cancel {
background-position: -7px -397px;
}
-a.iconlink.delete {
- background-position: -7px -337px;
+a.iconlink.edit {
+ background-position: -7px -417px;
+}
+
+a.iconlink.upload {
+ background-position: -6px -437px;
}
@@ -548,6 +561,10 @@
top: 130px;
}
+#mainscreen .offset {
+ margin-top: 42px;
+}
+
.uibox {
border: 1px solid #a3a3a3;
border-radius: 4px;
@@ -565,6 +582,7 @@
.readtext {
width: 42em;
padding: 12px;
+ font-size: 12px;
}
.readtext > h1,
@@ -651,8 +669,11 @@
.listbox .listitem.selected,
.listbox .tablink.selected,
+.listbox .listitem.selected a,
+.listbox .tablink.selected a,
.listing tbody tr.selected td,
-.listing li.selected {
+.listing li.selected,
+.listing li.selected a {
color: #004458;
font-weight: bold;
}
@@ -695,6 +716,8 @@
-webkit-box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
box-shadow: inset 0 1px 0 0 #fff;
+ white-space: nowrap;
+ overflow: hidden;
}
.boxfooter .listbutton {
@@ -707,10 +730,6 @@
margin-top: 1px;
}
-.boxfooter .listbutton.disabled {
- opacity: 0.4;
-}
-
.boxfooter .listbutton .inner {
display: inline-block;
width: 48px;
@@ -720,20 +739,65 @@
}
.boxfooter .listbutton.add .inner {
- background-position: 10px -1211px;
+ background-position: 10px -1291px;
}
.boxfooter .listbutton.delete .inner {
- background-position: 10px -1252px;
+ background-position: 10px -1332px;
}
.boxfooter .listbutton.groupactions .inner {
- background-position: 5px -1292px;
+ background-position: 5px -1372px;
+}
+
+.boxfooter .listbutton.disabled .inner {
+ opacity: 0.4;
+}
+
+.boxfooter .countdisplay {
+ display: inline-block;
+ position: relative;
+ top: 10px;
+ color: #69929e;
+ padding: 3px 6px;
+}
+
+.boxpagenav {
+ position: absolute;
+ top: 10px;
+ right: 6px;
+ width: auto;
+}
+
+.boxpagenav a.icon {
+ display: inline-block;
+ padding: 1px 3px;
+ height: 13px;
+ width: 14px;
+ text-indent: 1000px;
+ overflow: hidden;
+ background: url(images/buttons.png) -4px -286px no-repeat;
+}
+
+.boxpagenav a.icon.prevpage {
+ background-position: -4px -301px;
+}
+
+.boxpagenav a.icon.nextpage {
+ background-position: -28px -301px;
+}
+
+.boxpagenav a.icon.lastpage {
+ background-position: -28px -286px;
+}
+
+.boxpagenav a.icon.disabled {
+ opacity: 0.4;
}
.centerbox {
width: 40em;
- margin: 36px auto;
+ margin: 16px auto;
}
.errorbox {
@@ -747,11 +811,117 @@
}
+/*** Records table ***/
+
+table.records-table {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: collapse;
+ border-spacing: 0;
+ border: 1px solid #bbd3da;
+}
+
+.boxlistcontent .records-table {
+ border: 0;
+}
+
+.records-table thead td {
+ color: #69939e;
+ font-size: 11px;
+ font-weight: bold;
+ background: #d6eaf3;
+ background: -moz-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0,#e3f2f6), color-stop(14px,#d6eaf3), color-stop(100%,#d6eaf3));
+ background: -o-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+ background: -ms-linear-gradient(left, #e3f2f6 0, #d6eaf3 14px ,#d6eaf3 100%);
+ background: linear-gradient(left, #e3f2f6 0, #d6eaf3 14px, #d6eaf3 100%);
+ border-left: 1px solid #bbd3da;
+ padding: 8px 7px;
+}
+
+.records-table.sortheader thead td {
+ padding: 0;
+}
+
+.records-table thead td a,
+.records-table thead td span {
+ display: block;
+ padding: 8px 7px;
+ color: #69939e;
+ text-decoration: none;
+}
+
+.records-table tbody td {
+ padding: 3px 7px;
+ border-bottom: 1px solid #ddd;
+ border-left: 1px dotted #bbd3da;
+ white-space: nowrap;
+ cursor: default;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ background-color: #fff;
+}
+
+.records-table thead tr td:first-child,
+.records-table tbody tr td:first-child {
+ border-left: 0;
+}
+
+.records-table tbody td a {
+ color: #333;
+ text-decoration: none;
+ white-space: nowrap;
+ cursor: default;
+}
+
+.records-table tr.selected td {
+ color: #fff !important;
+ background: #019bc6;
+ background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
+ background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+ background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%);
+ background: linear-gradient(top, #019bc6 0%, #017cb4 100%);
+}
+
+.records-table tr.selected td a,
+.records-table tr.selected td span {
+ color: #fff !important;
+}
+
+.records-table tr.unfocused td {
+ color: #fff !important;
+ background: #4db0d2;
+}
+
+.records-table tr.unfocused td a,
+.records-table tr.unfocused td span {
+ color: #fff !important;
+}
+
+.records-table tr.deleted td,
+.records-table tr.deleted td a {
+ color: #ccc !important;
+}
+
+
/*** iFrames ***/
+
+#aboutframe {
+ width: 97%;
+ height: 100%;
+ border: 0;
+ padding: 0;
+}
body.iframe {
background: #fff;
- margin: 38px 0 20px 0;
+ margin: 38px 0 10px 0;
+}
+
+body.iframe.footerbuttons {
+ margin-bottom: 42px;
}
body.iframe.fullheight {
@@ -776,6 +946,16 @@
left: 0;
width: 100%;
z-index: 100;
+}
+
+body.iframe .footerbuttons {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ z-index: 110;
+ background: #fff;
+ padding: 8px;
}
.boxcontent {
@@ -1027,20 +1207,20 @@
top: 0;
height: 42px;
width: 18px;
- background: url(images/buttons.png) -24px -1129px no-repeat;
+ background: url(images/buttons.png) -24px -1249px no-repeat;
cursor: pointer;
}
.dropbutton .dropbuttontip:hover {
- background-position: 0 -1129px;
+ background-position: 0 -1249px;
}
.toolbar a.button.back {
- background-position: 0 -1170px;
+ background-position: 0 -1210px;
}
.toolbar a.button.checkmail {
- background-position: center -490px;
+ background-position: center -1170px;
}
.toolbar a.button.compose {
@@ -1173,6 +1353,10 @@
background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%);
background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%);
background: linear-gradient(top, #00aad6 0%, #008fc9 100%);
+}
+
+ul.toolbarmenu.iconized li a {
+ padding-left: 30px;
}
ul.toolbarmenu li label {
@@ -1340,7 +1524,7 @@
/*** fieldset tabs ***/
.tabsbar {
- margin-bottom: 10px;
+ margin-bottom: 12px;
padding-top: 15px;
height: 27px;
}
@@ -1387,6 +1571,7 @@
fieldset.tab {
border: 0;
padding: 0;
+ margin-left: 0;
}
diff --git a/skins/larry/templates/about.html b/skins/larry/templates/about.html
index f1e4242..04e308a 100644
--- a/skins/larry/templates/about.html
+++ b/skins/larry/templates/about.html
@@ -4,11 +4,7 @@
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
-<body>
-
-<roundcube:include file="/includes/header.html" />
-
-<div class="offset uibox scroller centerbox" style="width:60em">
+<body class="ui-widget-content">
<div class="readtext">
<roundcube:object name="aboutcontent" />
@@ -16,10 +12,9 @@
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
<p class="copyright">Copyright © 2005-2011, The Roundcube Dev Team</p>
<p class="license">This program is free software; you can redistribute it and/or modify
-it under the terms of the <a href="http://www.gnu.org/licenses/gpl-2.0.html" target="_blank">GNU General Public License version 2</a>
-as published by the Free Software Foundation.
+it under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a>
+as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
</p>
-<p class="links"><roundcube:object name="supportlink" label="support" target="_blank" /></p>
</div>
@@ -27,10 +22,6 @@
<h3><roundcube:label name="installedplugins" en_US="Installed plugins" /></h3>
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" cellspacing="0" />
</div>
-
-</div>
-
-<roundcube:include file="/includes/footer.html" />
</body>
</html>
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index 23da141..da1b7ba 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -36,10 +36,10 @@
<!-- toolbar -->
<div id="addressbooktoolbar" class="toolbar">
- <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advsearch" />
- <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" />
- <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="importcontacts" />
- <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="exportvcards" />
+ <roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advsearch" title="advsearch" />
+ <roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" title="writenewmessage" />
+ <roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="importcontacts" title="importcontacts" />
+ <roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="exportvcards" title="exportvcards" />
<roundcube:container name="toolbar" id="addressbooktoolbar" />
</div>
@@ -51,6 +51,13 @@
</div>
<div class="boxfooter">
<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" />
+ <roundcube:object name="recordsCountDisplay" class="countdisplay" label="fromtoshort" />
+</div>
+<div class="boxpagenav">
+ <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&lt;" />
+ <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&lt;" />
+ <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&gt;" />
+ <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&gt;|" />
</div>
</div>
diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html
index 562e6d2..4bea55b 100644
--- a/skins/larry/templates/contactedit.html
+++ b/skins/larry/templates/contactedit.html
@@ -4,7 +4,7 @@
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
-<body class="iframe">
+<body class="iframe footerbuttons">
<h1 class="boxtitle">
<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
@@ -18,11 +18,14 @@
<div id="contactphoto">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+ <roundcube:if condition="env:photocol" />
<div class="formlinks">
<roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="iconlink upload disabled" classAct="iconlink upload active" onclick="UI.show_uploadform();return false" condition="env:photocol" /><br/>
<roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
</div>
+ <roundcube:endif />
</div>
+
<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
<br style="clear:both" />
@@ -32,7 +35,7 @@
</form>
-<div id="headerbuttons" class="formbuttons">
+<div class="footerbuttons formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
<roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" />
<roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />
diff --git a/skins/larry/templates/contactsearch.html b/skins/larry/templates/contactsearch.html
new file mode 100644
index 0000000..e622ddf
--- /dev/null
+++ b/skins/larry/templates/contactsearch.html
@@ -0,0 +1,21 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body class="iframe">
+
+<h1 class="boxtitle"><roundcube:label name="advsearch" /></h1>
+
+<div id="contact-details" class="boxcontent">
+ <roundcube:object name="searchform" id="advsearchform" class="tabbed" size=30 />
+ <p class="formbuttons">
+ <roundcube:button command="save" type="input" class="button mainaction" label="search" />
+ </p>
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html
new file mode 100644
index 0000000..bdc1f3f
--- /dev/null
+++ b/skins/larry/templates/importcontacts.html
@@ -0,0 +1,34 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body>
+
+<roundcube:include file="/includes/header.html" />
+
+<div id="mainscreen">
+
+<div id="addressbooktoolbar" class="toolbar">
+ <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
+</div>
+
+<div class="offset uibox contentbox">
+<h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2>
+
+<div class="boxcontent readtext">
+<roundcube:object name="importstep" />
+
+<p class="formbuttons">
+ <roundcube:object name="importnav" class="button" />
+</p>
+
+</div>
+
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 9f4b756..0d33064 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -56,9 +56,9 @@
<!-- messagelist -->
<div id="messagelistcontainer" class="uibox boxlistcontent">
<roundcube:object name="messages"
- id="messagelist"
- columns=""
- optionsmenuIcon="true" />
+ id="messagelist"
+ class="records-table sortheader"
+ optionsmenuIcon="true" />
</div>
<!-- list footer -->
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 4b811cb..7033ebf 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -14,6 +14,7 @@
function rcube_mail_ui()
{
+ var env = {};
var popups = {};
var popupconfig = {
forwardmenu: { editable:1 },
@@ -33,13 +34,24 @@
var compose_headers = {};
// export public methods
+ this.set = setenv;
this.init = init;
this.init_tabs = init_tabs;
+ this.show_about = show_about;
this.show_popup = show_popup;
this.set_searchmod = set_searchmod;
this.show_uploadform = show_uploadform;
this.show_header_row = show_header_row;
this.hide_header_row = hide_header_row;
+
+
+ /**
+ *
+ */
+ function setenv(key, val)
+ {
+ env[key] = val;
+ }
/**
*
@@ -49,7 +61,6 @@
if (rcmail.env.task == 'mail') {
rcmail.addEventListener('menu-open', show_listoptions);
rcmail.addEventListener('menu-save', save_listoptions);
- rcmail.addEventListener('aftersend-attachment', show_uploadform);
rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
var dragmenu = $('#dragmessagemenu');
@@ -67,6 +78,7 @@
layout_messageview();
}
else if (rcmail.env.action == 'compose') {
+ rcmail.addEventListener('aftersend-attachment', show_uploadform);
layout_composeview();
$('#composeoptionstoggle').parent().click(function(){
@@ -109,6 +121,14 @@
}
}
else if (rcmail.env.task == 'addressbook') {
+ rcmail.addEventListener('afterupload-photo', show_uploadform);
+
+ if (rcmail.env.action == '') {
+ new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right',
+ orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
+ new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
+ orientation:'v', relative:true, start:296, min:220, size:12 }).init();
+ }
}
@@ -529,7 +549,7 @@
$('#_' + which).val(compose_headers[which]);
$('#compose-' + which).show();
$('#' + which + '-link').hide();
- this.resize_compose_body();
+ layout_composeview();
return false;
}
@@ -545,7 +565,8 @@
$('#compose-' + which).hide();
$('#' + which + '-link').show();
- this.resize_compose_body();
+ layout_composeview();
+ return false;
}
@@ -606,6 +627,35 @@
$('#tab'+idx).toggleClass('selected', idx==index);
});
}
+
+ /**
+ * Show about page as jquery UI dialog
+ */
+ function show_about(elem)
+ {
+ var frame = $('<iframe>').attr('id', 'aboutframe')
+ .attr('src', rcmail.url('settings/about'))
+ .appendTo(document.body);
+
+ var h = Math.floor($(window).height() * 0.75);
+ var buttons = {};
+ var supportln = $('#supportlink');
+ if (supportln.length && (env.supporturl = supportln.attr('href')))
+ buttons[supportln.html()] = function(e){ env.supporturl.indexOf('mailto:') < 0 ? window.open(env.supporturl) : location.href = env.supporturl };
+
+ frame.dialog({
+ modal: true,
+ resizable: false,
+ closeOnEscape: true,
+ title: elem ? elem.title || elem.innerHTML : null,
+ close: function() {
+ frame.dialog('destroy').remove();
+ },
+ buttons: buttons,
+ width: 640,
+ height: h
+ }).width(640);
+ }
}
--
Gitblit v1.9.1