diff options
Diffstat (limited to 'skins')
| -rw-r--r-- | skins/default/addressbook.css | 163 | ||||
| -rw-r--r-- | skins/default/common.css | 20 | ||||
| -rw-r--r-- | skins/default/functions.js | 21 | ||||
| -rw-r--r-- | skins/default/iehacks.css | 6 | ||||
| -rw-r--r-- | skins/default/images/contactpic.png | bin | 0 -> 375 bytes | |||
| -rw-r--r-- | skins/default/mail.css | 14 | ||||
| -rw-r--r-- | skins/default/templates/contact.html | 9 | ||||
| -rw-r--r-- | skins/default/templates/contactadd.html | 22 | ||||
| -rw-r--r-- | skins/default/templates/contactedit.html | 22 |
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 Binary files differnew file mode 100644 index 000000000..bdb6cdcc0 --- /dev/null +++ b/skins/default/images/contactpic.png 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()" /> <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" /> <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> |
