summaryrefslogtreecommitdiff
path: root/skins
diff options
context:
space:
mode:
Diffstat (limited to 'skins')
-rw-r--r--skins/default/addressbook.css163
-rw-r--r--skins/default/common.css20
-rw-r--r--skins/default/functions.js21
-rw-r--r--skins/default/iehacks.css6
-rw-r--r--skins/default/images/contactpic.pngbin0 -> 375 bytes
-rw-r--r--skins/default/mail.css14
-rw-r--r--skins/default/templates/contact.html9
-rw-r--r--skins/default/templates/contactadd.html22
-rw-r--r--skins/default/templates/contactedit.html22
9 files changed, 246 insertions, 31 deletions
diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css
index a90dcf1bf..6e07281f7 100644
--- a/skins/default/addressbook.css
+++ b/skins/default/addressbook.css
@@ -214,3 +214,166 @@ body.iframe,
text-align: right;
}
+#contacttabs
+{
+ position: relative;
+ padding-bottom: 22px;
+}
+
+#contacttabs div.tabsbar {
+ top: 0;
+ left: 2px;
+}
+
+#contacttabs fieldset.tabbed {
+ position: relative;
+ top: 22px;
+ min-height: 5em;
+}
+
+#contacthead
+{
+ margin-bottom: 1em;
+ border: 0;
+ padding: 0;
+}
+
+#contacthead .names span.namefield,
+#contacthead .names input
+{
+ font-size: 140%;
+}
+
+#contacthead .displayname span.namefield
+{
+ font-size: 120%;
+}
+
+#contacthead span.nickname:before,
+#contacthead span.nickname:after,
+#contacthead input.ff_nickname:before,
+#contacthead input.ff_nickname:after
+{
+ content: '"';
+}
+
+#contacthead input
+{
+ margin-right: 6px;
+ margin-bottom: 0.2em;
+}
+
+#contacthead .names input,
+#contacthead .addnames input,
+#contacthead .jobnames input
+{
+ width: 180px;
+}
+
+#contacthead input.ff_prefix,
+#contacthead input.ff_suffix
+{
+ width: 90px;
+}
+
+#contacthead .addnames input.ff_name
+{
+ width: 374px;
+}
+
+#contactphoto
+{
+ float: right;
+ width: 60px;
+ margin-left: 3em;
+ margin-right: 4px;
+}
+
+#contactpic
+{
+ width: 60px;
+ min-height: 60px;
+ border: 1px solid #ccc;
+ background: white;
+}
+
+#contactpic img {
+ width: 60px;
+}
+
+#contactphoto .formlinks
+{
+ margin-top: 0.5em;
+ text-align: center;
+}
+
+fieldset.contactfieldgroup
+{
+ border: 0;
+ margin: 0.5em 0;
+ padding: 0.5em 2px;
+}
+
+fieldset.contactfieldgroup legend
+{
+ font-size: 0.9em;
+}
+
+.contactfieldgroup .row
+{
+ position: relative;
+ margin-bottom: 0.4em;
+}
+
+.contactfieldgroup .contactfieldlabel
+{
+ position: absolute;
+ top: 0;
+ left: 2px;
+ width: 90px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #666;
+ font-weight: bold;
+}
+
+.contactfieldgroup .contactfieldlabel select
+{
+ width: 78px;
+ background: none;
+ border: 0;
+ color: #666;
+ font-weight: bold;
+ padding-left: 0;
+}
+
+.contactfieldgroup .contactfieldcontent
+{
+ padding-left: 100px;
+ min-height: 1em;
+ line-height: 1.3em;
+}
+
+.contactfieldgroup .contactfield {
+ line-height: 1.3em;
+}
+
+.contactcontrolleraddress .contactfieldcontent input {
+ margin-bottom: 0.1em;
+}
+
+.contactfieldcontent .contactfieldbutton {
+ vertical-align: middle;
+ margin-left: 0.5em;
+}
+
+#upload-form
+{
+ padding: 6px;
+}
+
+#upload-form div
+{
+ padding: 2px;
+}
diff --git a/skins/default/common.css b/skins/default/common.css
index e052552d0..0d9b30718 100644
--- a/skins/default/common.css
+++ b/skins/default/common.css
@@ -76,6 +76,12 @@ input, textarea
padding: 1px 3px;
}
+input.placeholder,
+textarea.placeholder
+{
+ color: #aaa;
+}
+
input.button
{
height: 20px;
@@ -114,6 +120,20 @@ img
font-size: 11px;
}
+.formlinks a,
+.formlinks a:visited
+{
+ color: #CC0000;
+ font-size: 11px;
+ text-decoration: none;
+}
+
+.formlinks a.disabled,
+.formlinks a.disabled:visited
+{
+ color: #999999;
+}
+
/** common user interface objects */
#mainscreen
diff --git a/skins/default/functions.js b/skins/default/functions.js
index 00e97fd1a..62e4783cb 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -25,9 +25,8 @@ function rcube_show_advanced(visible)
// Warning: don't place "caller" <script> inside page element (id)
function rcube_init_tabs(id, current)
{
- var content = document.getElementById(id),
- // get fieldsets of the higher-level (skip nested fieldsets)
- fs = $('fieldset', content).not('fieldset > fieldset');
+ var content = $('#'+id),
+ fs = content.children('fieldset');
if (!fs.length)
return;
@@ -42,9 +41,7 @@ function rcube_init_tabs(id, current)
// convert fildsets into tabs
fs.each(function(idx) {
- var tab, a, elm = $(this),
- // get first legend element
- legend = $(elm).children('legend');
+ var tab, a, elm = $(this), legend = elm.children('legend');
// create a tab
a = $('<a>').text(legend.text()).attr('href', '#');
@@ -66,8 +63,7 @@ function rcube_init_tabs(id, current)
function rcube_show_tab(id, index)
{
- var content = document.getElementById(id),
- fs = $('fieldset', content).not('fieldset > fieldset');
+ var fs = $('#'+id).children('fieldset');
fs.each(function(idx) {
// Show/hide fieldset (tab content)
@@ -94,7 +90,8 @@ function rcube_mail_ui()
mailboxmenu: {id:'mailboxoptionsmenu', above:1},
composemenu: {id:'composeoptionsmenu', editable:1},
// toggle: #1486823, #1486930
- uploadmenu: {id:'attachment-form', editable:1, above:1, toggle:!bw.ie&&!bw.linux }
+ uploadmenu: {id:'attachment-form', editable:1, above:1, toggle:!bw.ie&&!bw.linux },
+ uploadform: {id:'upload-form', editable:1, toggle:!bw.ie&&!bw.linux }
};
var obj;
@@ -136,6 +133,9 @@ show_popupmenu: function(popup, show)
if (!above && pos.top + ref.offsetHeight + obj.height() > window.innerHeight)
above = true;
+ if (pos.left + obj.width() > window.innerWidth)
+ pos.left = window.innerWidth - obj.width() - 30;
+
obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) });
}
@@ -500,6 +500,9 @@ function rcube_init_mail_ui()
if (rcmail.env.action == 'compose')
rcmail_ui.init_compose_form();
}
+ else if (rcmail.env.task == 'addressbook') {
+ rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); });
+ }
}
// Events handling in iframes (eg. preview pane)
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index 29ab8cb75..4c0816ad8 100644
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@@ -236,3 +236,9 @@ table.records-table thead tr td
{
margin-top: 2px;
}
+
+.contactfieldgroup legend
+{
+ padding: 0 0 0.5em 0;
+ margin-left: -4px;
+}
diff --git a/skins/default/images/contactpic.png b/skins/default/images/contactpic.png
new file mode 100644
index 000000000..bdb6cdcc0
--- /dev/null
+++ b/skins/default/images/contactpic.png
Binary files differ
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 7bb308c06..30572299e 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -1342,20 +1342,6 @@ input.from_address
display: none;
}
-.formlinks a,
-.formlinks a:visited
-{
- color: #999999;
- font-size: 11px;
- text-decoration: none;
-}
-
-.formlinks a,
-.formlinks a:visited
-{
- color: #CC0000;
-}
-
#compose-editorfooter
{
position: absolute;
diff --git a/skins/default/templates/contact.html b/skins/default/templates/contact.html
index 06d0fbee5..084664e9d 100644
--- a/skins/default/templates/contact.html
+++ b/skins/default/templates/contact.html
@@ -9,12 +9,17 @@
<div id="contact-title" class="boxtitle"><roundcube:label name="contactproperties" /></div>
<div id="contact-details" class="boxcontent">
- <roundcube:object name="contactdetails" />
+ <div id="contactphoto"><roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /></div>
+ <roundcube:object name="contacthead" id="contacthead" />
+ <div style="clear:both"></div>
+ <div id="contacttabs">
+ <roundcube:object name="contactdetails" />
+ </div>
<p>
<roundcube:button command="edit" type="input" class="button" label="editcontact" condition="!ENV:readonly" />
</p>
</div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
</body>
</html>
diff --git a/skins/default/templates/contactadd.html b/skins/default/templates/contactadd.html
index 1a10f10ac..b5fd05609 100644
--- a/skins/default/templates/contactadd.html
+++ b/skins/default/templates/contactadd.html
@@ -5,18 +5,34 @@
<roundcube:include file="/includes/links.html" />
<script type="text/javascript" src="/functions.js"></script>
</head>
-<body class="iframe">
+<body class="iframe" onload="rcube_init_mail_ui()">
<div id="contact-title" class="boxtitle"><roundcube:label name="addcontact" /></div>
<div id="contact-details" class="boxcontent">
- <roundcube:object name="contacteditform" size="40" />
+<form name="editform" method="post" action="./">
+ <div id="contactphoto">
+ <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+ <div class="formlinks">
+ <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="addphoto" class="disabled" classAct="active" onclick="rcmail_ui.show_popup('uploadform', true);return false" condition="env:photocol" /><br/>
+ <roundcube:button command="delete-photo" type="link" label="delete" class="disabled" classAct="active" condition="env:photocol" />
+ </div>
+ </div>
+ <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
+ <div style="clear:both"></div>
+
+ <div id="contacttabs">
+ <roundcube:object name="contacteditform" size="40" textareacols="60" deleteIcon="/images/icons/delete.png" form="editform" />
+ </div>
<p>
<input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />&nbsp;
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
</p>
</form>
</div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+
+<roundcube:object name="photoUploadForm" id="upload-form" size="30" class="popupmenu" />
+
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
</body>
</html>
diff --git a/skins/default/templates/contactedit.html b/skins/default/templates/contactedit.html
index a15aaf22a..681201caa 100644
--- a/skins/default/templates/contactedit.html
+++ b/skins/default/templates/contactedit.html
@@ -5,18 +5,34 @@
<roundcube:include file="/includes/links.html" />
<script type="text/javascript" src="/functions.js"></script>
</head>
-<body class="iframe">
+<body class="iframe" onload="rcube_init_mail_ui()">
<div id="contact-title" class="boxtitle"><roundcube:label name="editcontact" /></div>
<div id="contact-details" class="boxcontent">
- <roundcube:object name="contacteditform" size="40" />
+<form name="editform" method="post" action="./">
+ <div id="contactphoto">
+ <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+ <div class="formlinks">
+ <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="disabled" classAct="active" onclick="rcmail_ui.show_popup('uploadform', true);return false" condition="env:photocol" /><br/>
+ <roundcube:button command="delete-photo" type="link" label="delete" class="disabled" classAct="active" condition="env:photocol" />
+ </div>
+ </div>
+ <roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
+ <div style="clear:both"></div>
+
+ <div id="contacttabs">
+ <roundcube:object name="contacteditform" size="40" textareacols="60" deleteIcon="/images/icons/delete.png" form="editform" />
+ </div>
<p>
<roundcube:button command="show" type="input" class="button" label="cancel" />&nbsp;
<roundcube:button command="save" type="input" class="button mainaction" label="save" />
</p>
</form>
</div>
-<script type="text/javascript">rcube_init_tabs('contact-details')</script>
+
+<roundcube:object name="photoUploadForm" id="upload-form" size="30" class="popupmenu" />
+
+<script type="text/javascript">rcube_init_tabs('contacttabs')</script>
</body>
</html>