diff options
Diffstat (limited to 'skins')
-rw-r--r-- | skins/larry/addressbook.css | 102 | ||||
-rw-r--r-- | skins/larry/images/buttons.png | bin | 33173 -> 27931 bytes | |||
-rw-r--r-- | skins/larry/images/listicons.png | bin | 25785 -> 22515 bytes | |||
-rw-r--r-- | skins/larry/includes/header.html | 4 | ||||
-rw-r--r-- | skins/larry/includes/mailtoolbar.html | 4 | ||||
-rw-r--r-- | skins/larry/mail.css | 127 | ||||
-rw-r--r-- | skins/larry/settings.css | 9 | ||||
-rw-r--r-- | skins/larry/styles.css | 289 | ||||
-rw-r--r-- | skins/larry/templates/about.html | 15 | ||||
-rw-r--r-- | skins/larry/templates/addressbook.html | 15 | ||||
-rw-r--r-- | skins/larry/templates/contactedit.html | 7 | ||||
-rw-r--r-- | skins/larry/templates/contactsearch.html | 21 | ||||
-rw-r--r-- | skins/larry/templates/importcontacts.html | 34 | ||||
-rw-r--r-- | skins/larry/templates/mail.html | 6 | ||||
-rw-r--r-- | 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 57a1b0da4..c1a8e54dc 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,12 +157,16 @@ #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, #contacthead .names input { font-size: 140%; @@ -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 @@ a.deletebutton { 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 Binary files differindex 438768f91..0e3bf3ff8 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex 5f4473fdd..abd6dc0cb 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 2fd6774fe..b088e4fb7 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 d7cb212d7..7e0c5cb75 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 44721c551..1381e2dc2 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 { @@ -167,6 +167,14 @@ a.iconbutton.threadmode.selected { 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 { color: #aaa; } @@ -283,95 +291,16 @@ a.iconbutton.threadmode.selected { 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, #messagelist tr td.status, @@ -381,11 +310,11 @@ a.iconbutton.threadmode.selected { 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 @@ html.chrome #messagelist tr td.priority { width: 26px; } -html.chrome #messagelist tr td.threads { +.chrome #messagelist tr td.threads { width: 30px; } @@ -807,18 +736,6 @@ h3.subject { #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 @@ div.message-part blockquote blockquote blockquote { 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 05a587a8b..105b3506b 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 48c8c6fb6..875125bd6 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -78,10 +78,10 @@ input.button { 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 @@ input.button { 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 @@ input.button { .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 @@ a.button { 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 @@ a.button.disabled:hover, 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 @@ input.button:active { .pagenav a.button { padding: 1px 3px; + height: 16px; } .pagenav a.button span.inner { @@ -339,16 +340,28 @@ a.iconlink:hover { 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 @@ a.iconlink.delete { top: 130px; } +#mainscreen .offset { + margin-top: 42px; +} + .uibox { border: 1px solid #a3a3a3; border-radius: 4px; @@ -565,6 +582,7 @@ a.iconlink.delete { .readtext { width: 42em; padding: 12px; + font-size: 12px; } .readtext > h1, @@ -651,8 +669,11 @@ a.iconlink.delete { .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 @@ table.layout td { -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 @@ table.layout td { margin-top: 1px; } -.boxfooter .listbutton.disabled { - opacity: 0.4; -} - .boxfooter .listbutton .inner { display: inline-block; width: 48px; @@ -720,20 +739,65 @@ table.layout td { } .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 @@ table.layout td { } +/*** 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 { @@ -778,6 +948,16 @@ body.iframe .boxtitle { z-index: 100; } +body.iframe .footerbuttons { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + z-index: 110; + background: #fff; + padding: 8px; +} + .boxcontent { padding: 10px; } @@ -1027,20 +1207,20 @@ ul.proplist li { 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 { @@ -1175,6 +1355,10 @@ ul.toolbarmenu li a.active:hover, background: linear-gradient(top, #00aad6 0%, #008fc9 100%); } +ul.toolbarmenu.iconized li a { + padding-left: 30px; +} + ul.toolbarmenu li label { display: block; color: #fff; @@ -1340,7 +1524,7 @@ ul.toolbarmenu li span.extwin { /*** fieldset tabs ***/ .tabsbar { - margin-bottom: 10px; + margin-bottom: 12px; padding-top: 15px; height: 27px; } @@ -1387,6 +1571,7 @@ ul.toolbarmenu li span.extwin { fieldset.tab { border: 0; padding: 0; + margin-left: 0; } diff --git a/skins/larry/templates/about.html b/skins/larry/templates/about.html index f1e424260..04e308a4e 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> @@ -28,9 +23,5 @@ as published by the Free Software Foundation. <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 23da1411d..da1b7ba8b 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 562e6d2d6..4bea55bf7 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 000000000..e622ddfd5 --- /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 000000000..bdc1f3f51 --- /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 9f4b756d9..0d3306407 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 4b811cbc2..7033ebf55 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,14 +34,25 @@ function rcube_mail_ui() 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 @@ function rcube_mail_ui() 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 @@ function rcube_mail_ui() layout_messageview(); } else if (rcmail.env.action == 'compose') { + rcmail.addEventListener('aftersend-attachment', show_uploadform); layout_composeview(); $('#composeoptionstoggle').parent().click(function(){ @@ -109,6 +121,14 @@ function rcube_mail_ui() } } 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 @@ function rcube_mail_ui() $('#_' + which).val(compose_headers[which]); $('#compose-' + which).show(); $('#' + which + '-link').hide(); - this.resize_compose_body(); + layout_composeview(); return false; } @@ -545,7 +565,8 @@ function rcube_mail_ui() $('#compose-' + which).hide(); $('#' + which + '-link').show(); - this.resize_compose_body(); + layout_composeview(); + return false; } @@ -606,6 +627,35 @@ function rcube_mail_ui() $('#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); + } } |