Address book styling for Larry; show about page in UI dialog

pull/1/head
thomascube 13 years ago
parent faaa1ba534
commit 68e13c45d3

@ -90,6 +90,22 @@
background-position: 32px -1579px; 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 { #contacts-table .contact td.name {
background-position: 6px -1603px; background-position: 6px -1603px;
} }
@ -141,12 +157,16 @@
#contacthead { #contacthead {
border: 0; border: 0;
margin: 0 20em 1em 0; margin: 0 16em 1em 0;
padding: 0; padding: 0;
line-height: 1.5em; line-height: 1.5em;
font-size: 12px; font-size: 12px;
} }
form #contacthead {
margin-right: 0;
}
#contacthead .names span.namefield, #contacthead .names span.namefield,
#contacthead .names input { #contacthead .names input {
font-size: 140%; font-size: 140%;
@ -180,6 +200,84 @@
width: 90px; 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 { a.deletebutton {
position: relative; position: relative;
left: 5px; left: 5px;
@ -189,5 +287,5 @@ a.deletebutton {
height: 18px; height: 18px;
text-decoration: none; text-decoration: none;
text-indent: -1000px; text-indent: -1000px;
background: url(images/buttons.png) -7px -337px no-repeat; background: url(images/buttons.png) -7px -377px no-repeat;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 22 KiB

@ -1,9 +1,9 @@
<div id="header"> <div id="header">
<div id="topline"> <div id="topline">
<div class="topleft"> <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" /> <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 /> <roundcube:endif />
</div> </div>
<div class="topright"> <div class="topright">

@ -42,7 +42,7 @@
</div> </div>
<div id="messagemenu" class="popupmenu"> <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="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="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> <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'" /> <roundcube:if condition="template:name == 'mail'" />
<div id="markmessagemenu" class="popupmenu"> <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="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="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> <li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="icon active" class="icon" innerclass="icon flagged" /></li>

@ -90,21 +90,21 @@
a.iconbutton.listmode { a.iconbutton.listmode {
width: 26px; width: 26px;
height: 20px; height: 20px;
background-position: 0 -437px; background-position: 0 -477px;
} }
a.iconbutton.threadmode { a.iconbutton.threadmode {
width: 26px; width: 26px;
height: 20px; height: 20px;
background-position: 0 -457px; background-position: 0 -497px;
} }
a.iconbutton.listmode.selected { a.iconbutton.listmode.selected {
background-position: -26px -437px; background-position: -26px -477px;
} }
a.iconbutton.threadmode.selected { a.iconbutton.threadmode.selected {
background-position: -26px -457px; background-position: -26px -497px;
} }
#mailboxlist li.mailbox { #mailboxlist li.mailbox {
@ -167,6 +167,14 @@ a.iconbutton.threadmode.selected {
background-position: 6px -406px; 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 { #mailboxlist li.virtual > a {
color: #aaa; color: #aaa;
} }
@ -283,95 +291,16 @@ a.iconbutton.threadmode.selected {
right: 2px; right: 2px;
width: 20px; width: 20px;
height: 18px; height: 18px;
background: url(images/buttons.png) -3px -418px no-repeat; background: url(images/buttons.png) -3px -458px no-repeat;
} }
#mailpreviewtoggle.enabled { #mailpreviewtoggle.enabled {
background-position: -28px -418px; background-position: -28px -458px;
} }
/*** message list ***/ /*** 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.attachment,
#messagelist tr td.threads, #messagelist tr td.threads,
#messagelist tr td.status, #messagelist tr td.status,
@ -381,11 +310,11 @@ a.iconbutton.threadmode.selected {
padding: 4px 3px; padding: 4px 3px;
} }
html.chrome #messagelist tr td.attachment, .chrome #messagelist tr td.attachment,
html.chrome #messagelist tr td.threads, .chrome #messagelist tr td.threads,
html.chrome #messagelist tr td.status, .chrome #messagelist tr td.status,
html.chrome #messagelist tr td.flag, .chrome #messagelist tr td.flag,
html.chrome #messagelist tr td.priority { .chrome #messagelist tr td.priority {
width: 26px; width: 26px;
} }
@ -393,7 +322,7 @@ html.chrome #messagelist tr td.priority {
width: 26px; width: 26px;
} }
html.chrome #messagelist tr td.threads { .chrome #messagelist tr td.threads {
width: 30px; width: 30px;
} }
@ -807,18 +736,6 @@ h3.subject {
#message-objects div a.button, #message-objects div a.button,
#messagebody span.part-notice a.button { #messagebody span.part-notice a.button {
margin-left: 10px; 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, div.message-part,
@ -1095,12 +1012,12 @@ div.message-part blockquote blockquote blockquote {
left: 6px; left: 6px;
width: 20px; width: 20px;
height: 18px; height: 18px;
background: url(images/buttons.png) -3px -418px no-repeat; background: url(images/buttons.png) -3px -458px no-repeat;
text-decoration: none; text-decoration: none;
} }
#composeoptionstoggle.enabled { #composeoptionstoggle.enabled {
background-position: -28px -418px; background-position: -28px -458px;
} }
#composeview-bottom { #composeview-bottom {

@ -182,3 +182,12 @@
text-align: right; text-align: right;
} }
#pluginlist td.version {
width: 5em;
}
#pluginlist td.license,
#pluginlist td.source {
width: 8em;
}

@ -78,10 +78,10 @@ input.button {
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
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 #ccc; -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-webkit-box-shadow: 0 1px 1px 0 #ccc; -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-moz-box-shadow: 0 1px 1px 0 #ccc; -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
text-decoration: none; text-decoration: none;
outline: none; outline: none;
} }
@ -94,11 +94,11 @@ input.button {
border-color: #465864; border-color: #465864;
border-radius: 5px; border-radius: 5px;
background: #7a7b7d; background: #7a7b7d;
background: -moz-linear-gradient(top, rgba(123,123,123,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #7b7b7b 0%, #606060 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: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#606060)); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, #7b7b7b 0%, #606060 100%); /* IE10+ */
background: linear-gradient(top, rgba(123,123,123,1) 0%,rgba(96,96,96,1) 100%); /* W3C */ background: linear-gradient(top, #7b7b7b 0%, #606060 100%); /* W3C */
box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888; 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; -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; -webkit-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
@ -117,32 +117,32 @@ input.button {
.formbuttons input.button:active { .formbuttons input.button:active {
color: #fff; color: #fff;
background: -moz-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%,rgba(92,92,92,1)), color-stop(100%,rgba(123,123,123,1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#7b7b7b));
background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); background: -o-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); background: -ms-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(123,123,123,1) 100%); background: linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
} }
input.button.mainaction { input.button.mainaction {
color: #ededed; color: #ededed;
border-color: #1f262c; border-color: #1f262c;
background: #505050; background: #505050;
background: -moz-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%,rgba(80,80,82,1)), color-stop(100%,rgba(42,46,49,1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31));
background: -o-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%);
background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%);
background: linear-gradient(top, rgba(80,80,80,1) 0%,rgba(42,46,49,1) 100%); background: linear-gradient(top, #505050 0%, #2a2e31 100%);
} }
input.button.mainaction:active { input.button.mainaction:active {
color: #fff; color: #fff;
background: #515151; background: #515151;
background: -moz-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%,#515151), color-stop(100%,#2c2c2c)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050));
background: -o-linear-gradient(top, #515151 0%, #2c2c2c 100%); background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%);
background: -ms-linear-gradient(top, #515151 0%, #2c2c2c 100%); background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%);
background: linear-gradient(top, #515151 0%, #2c2c2c 100%); background: linear-gradient(top, #2a2e31 0%, #505050 100%);
} }
input.button[disabled], input.button[disabled],
@ -171,21 +171,21 @@ a.button {
background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%);
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 #ccc; -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-webkit-box-shadow: 0 1px 1px 0 #ccc; -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
-moz-box-shadow: 0 1px 1px 0 #ccc; -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3);
text-decoration: none; text-decoration: none;
} }
a.button:hover, a.button:focus,
input.button:hover,
input.button:focus { input.button:focus {
border-color: #4fadd5; border-color: #4fadd5;
box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); 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); -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); -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); -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
outline: none;
} }
label.disabled, label.disabled,
@ -200,10 +200,10 @@ a.button.disabled:hover,
input.button.disabled:hover, input.button.disabled:hover,
input.button[disabled]:hover { input.button[disabled]:hover {
border-color: #c6c6c6; border-color: #c6c6c6;
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 #ddd; -o-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
-webkit-box-shadow: 0 1px 1px 0 #ddd; -webkit-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
-moz-box-shadow: 0 1px 1px 0 #ddd; -moz-box-shadow: 0 1px 1px 0 rgba(160, 160, 160, 0.4);
} }
a.button.disabled span.inner { a.button.disabled span.inner {
@ -247,6 +247,7 @@ input.button:active {
.pagenav a.button { .pagenav a.button {
padding: 1px 3px; padding: 1px 3px;
height: 16px;
} }
.pagenav a.button span.inner { .pagenav a.button span.inner {
@ -339,16 +340,28 @@ a.iconlink:hover {
text-decoration: underline; text-decoration: underline;
} }
a.iconlink.delete {
background-position: -7px -337px;
}
a.iconlink.add { a.iconlink.add {
background-position: -7px -357px; background-position: -7px -357px;
} }
a.iconlink.edit { a.iconlink.remove {
background-position: -7px -377px;
}
a.iconlink.cancel {
background-position: -7px -397px; background-position: -7px -397px;
} }
a.iconlink.delete { a.iconlink.edit {
background-position: -7px -337px; background-position: -7px -417px;
}
a.iconlink.upload {
background-position: -6px -437px;
} }
@ -548,6 +561,10 @@ a.iconlink.delete {
top: 130px; top: 130px;
} }
#mainscreen .offset {
margin-top: 42px;
}
.uibox { .uibox {
border: 1px solid #a3a3a3; border: 1px solid #a3a3a3;
border-radius: 4px; border-radius: 4px;
@ -565,6 +582,7 @@ a.iconlink.delete {
.readtext { .readtext {
width: 42em; width: 42em;
padding: 12px; padding: 12px;
font-size: 12px;
} }
.readtext > h1, .readtext > h1,
@ -651,8 +669,11 @@ a.iconlink.delete {
.listbox .listitem.selected, .listbox .listitem.selected,
.listbox .tablink.selected, .listbox .tablink.selected,
.listbox .listitem.selected a,
.listbox .tablink.selected a,
.listing tbody tr.selected td, .listing tbody tr.selected td,
.listing li.selected { .listing li.selected,
.listing li.selected a {
color: #004458; color: #004458;
font-weight: bold; font-weight: bold;
} }
@ -695,6 +716,8 @@ table.layout td {
-webkit-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff;
-moz-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; box-shadow: inset 0 1px 0 0 #fff;
white-space: nowrap;
overflow: hidden;
} }
.boxfooter .listbutton { .boxfooter .listbutton {
@ -707,10 +730,6 @@ table.layout td {
margin-top: 1px; margin-top: 1px;
} }
.boxfooter .listbutton.disabled {
opacity: 0.4;
}
.boxfooter .listbutton .inner { .boxfooter .listbutton .inner {
display: inline-block; display: inline-block;
width: 48px; width: 48px;
@ -720,20 +739,65 @@ table.layout td {
} }
.boxfooter .listbutton.add .inner { .boxfooter .listbutton.add .inner {
background-position: 10px -1211px; background-position: 10px -1291px;
} }
.boxfooter .listbutton.delete .inner { .boxfooter .listbutton.delete .inner {
background-position: 10px -1252px; background-position: 10px -1332px;
} }
.boxfooter .listbutton.groupactions .inner { .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 { .centerbox {
width: 40em; width: 40em;
margin: 36px auto; margin: 16px auto;
} }
.errorbox { .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 ***/ /*** iFrames ***/
#aboutframe {
width: 97%;
height: 100%;
border: 0;
padding: 0;
}
body.iframe { body.iframe {
background: #fff; background: #fff;
margin: 38px 0 20px 0; margin: 38px 0 10px 0;
}
body.iframe.footerbuttons {
margin-bottom: 42px;
} }
body.iframe.fullheight { body.iframe.fullheight {
@ -778,6 +948,16 @@ body.iframe .boxtitle {
z-index: 100; z-index: 100;
} }
body.iframe .footerbuttons {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 110;
background: #fff;
padding: 8px;
}
.boxcontent { .boxcontent {
padding: 10px; padding: 10px;
} }
@ -1027,20 +1207,20 @@ ul.proplist li {
top: 0; top: 0;
height: 42px; height: 42px;
width: 18px; width: 18px;
background: url(images/buttons.png) -24px -1129px no-repeat; background: url(images/buttons.png) -24px -1249px no-repeat;
cursor: pointer; cursor: pointer;
} }
.dropbutton .dropbuttontip:hover { .dropbutton .dropbuttontip:hover {
background-position: 0 -1129px; background-position: 0 -1249px;
} }
.toolbar a.button.back { .toolbar a.button.back {
background-position: 0 -1170px; background-position: 0 -1210px;
} }
.toolbar a.button.checkmail { .toolbar a.button.checkmail {
background-position: center -490px; background-position: center -1170px;
} }
.toolbar a.button.compose { .toolbar a.button.compose {
@ -1175,6 +1355,10 @@ ul.toolbarmenu li a.active:hover,
background: 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 { ul.toolbarmenu li label {
display: block; display: block;
color: #fff; color: #fff;
@ -1340,7 +1524,7 @@ ul.toolbarmenu li span.extwin {
/*** fieldset tabs ***/ /*** fieldset tabs ***/
.tabsbar { .tabsbar {
margin-bottom: 10px; margin-bottom: 12px;
padding-top: 15px; padding-top: 15px;
height: 27px; height: 27px;
} }
@ -1387,6 +1571,7 @@ ul.toolbarmenu li span.extwin {
fieldset.tab { fieldset.tab {
border: 0; border: 0;
padding: 0; padding: 0;
margin-left: 0;
} }

@ -4,11 +4,7 @@
<title><roundcube:object name="pagetitle" /></title> <title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" /> <roundcube:include file="/includes/links.html" />
</head> </head>
<body> <body class="ui-widget-content">
<roundcube:include file="/includes/header.html" />
<div class="offset uibox scroller centerbox" style="width:60em">
<div class="readtext"> <div class="readtext">
<roundcube:object name="aboutcontent" /> <roundcube:object name="aboutcontent" />
@ -16,10 +12,9 @@
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2> <h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
<p class="copyright">Copyright &copy; 2005-2011, The Roundcube Dev Team</p> <p class="copyright">Copyright &copy; 2005-2011, The Roundcube Dev Team</p>
<p class="license">This program is free software; you can redistribute it and/or modify <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> 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. as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
</p> </p>
<p class="links"><roundcube:object name="supportlink" label="support" target="_blank" /></p>
</div> </div>
@ -28,9 +23,5 @@ as published by the Free Software Foundation.
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" cellspacing="0" /> <roundcube:object name="pluginlist" id="pluginlist" class="records-table" cellspacing="0" />
</div> </div>
</div>
<roundcube:include file="/includes/footer.html" />
</body> </body>
</html> </html>

@ -36,10 +36,10 @@
<!-- toolbar --> <!-- toolbar -->
<div id="addressbooktoolbar" class="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="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" /> <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" /> <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" /> <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" /> <roundcube:container name="toolbar" id="addressbooktoolbar" />
</div> </div>
@ -51,6 +51,13 @@
</div> </div>
<div class="boxfooter"> <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: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="|&amp;lt;" />
<roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
<roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
<roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;gt;|" />
</div> </div>
</div> </div>

@ -4,7 +4,7 @@
<title><roundcube:object name="pagetitle" /></title> <title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" /> <roundcube:include file="/includes/links.html" />
</head> </head>
<body class="iframe"> <body class="iframe footerbuttons">
<h1 class="boxtitle"> <h1 class="boxtitle">
<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" /> <roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
@ -18,11 +18,14 @@
<div id="contactphoto"> <div id="contactphoto">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /> <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
<roundcube:if condition="env:photocol" />
<div class="formlinks"> <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="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" /> <roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
</div> </div>
<roundcube:endif />
</div> </div>
<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" /> <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
<br style="clear:both" /> <br style="clear:both" />
@ -32,7 +35,7 @@
</form> </form>
<div id="headerbuttons" class="formbuttons"> <div class="footerbuttons formbuttons">
<roundcube:button command="save" type="input" class="button mainaction" label="save" /> <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 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'" /> <roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />

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

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

@ -56,9 +56,9 @@
<!-- messagelist --> <!-- messagelist -->
<div id="messagelistcontainer" class="uibox boxlistcontent"> <div id="messagelistcontainer" class="uibox boxlistcontent">
<roundcube:object name="messages" <roundcube:object name="messages"
id="messagelist" id="messagelist"
columns="" class="records-table sortheader"
optionsmenuIcon="true" /> optionsmenuIcon="true" />
</div> </div>
<!-- list footer --> <!-- list footer -->

@ -14,6 +14,7 @@
function rcube_mail_ui() function rcube_mail_ui()
{ {
var env = {};
var popups = {}; var popups = {};
var popupconfig = { var popupconfig = {
forwardmenu: { editable:1 }, forwardmenu: { editable:1 },
@ -33,14 +34,25 @@ function rcube_mail_ui()
var compose_headers = {}; var compose_headers = {};
// export public methods // export public methods
this.set = setenv;
this.init = init; this.init = init;
this.init_tabs = init_tabs; this.init_tabs = init_tabs;
this.show_about = show_about;
this.show_popup = show_popup; this.show_popup = show_popup;
this.set_searchmod = set_searchmod; this.set_searchmod = set_searchmod;
this.show_uploadform = show_uploadform; this.show_uploadform = show_uploadform;
this.show_header_row = show_header_row; this.show_header_row = show_header_row;
this.hide_header_row = hide_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') { if (rcmail.env.task == 'mail') {
rcmail.addEventListener('menu-open', show_listoptions); rcmail.addEventListener('menu-open', show_listoptions);
rcmail.addEventListener('menu-save', save_listoptions); rcmail.addEventListener('menu-save', save_listoptions);
rcmail.addEventListener('aftersend-attachment', show_uploadform);
rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); }); rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
var dragmenu = $('#dragmessagemenu'); var dragmenu = $('#dragmessagemenu');
@ -67,6 +78,7 @@ function rcube_mail_ui()
layout_messageview(); layout_messageview();
} }
else if (rcmail.env.action == 'compose') { else if (rcmail.env.action == 'compose') {
rcmail.addEventListener('aftersend-attachment', show_uploadform);
layout_composeview(); layout_composeview();
$('#composeoptionstoggle').parent().click(function(){ $('#composeoptionstoggle').parent().click(function(){
@ -109,6 +121,14 @@ function rcube_mail_ui()
} }
} }
else if (rcmail.env.task == 'addressbook') { 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]); $('#_' + which).val(compose_headers[which]);
$('#compose-' + which).show(); $('#compose-' + which).show();
$('#' + which + '-link').hide(); $('#' + which + '-link').hide();
this.resize_compose_body(); layout_composeview();
return false; return false;
} }
@ -545,7 +565,8 @@ function rcube_mail_ui()
$('#compose-' + which).hide(); $('#compose-' + which).hide();
$('#' + which + '-link').show(); $('#' + 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); $('#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);
}
} }

Loading…
Cancel
Save