From 9831b358f823e688c924ace7af97c10283e4dcae Mon Sep 17 00:00:00 2001 From: zotlabs Date: Sun, 1 Jan 2017 13:29:27 -0800 Subject: profile vcard - preliminary work --- view/css/mod_profile.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++ view/css/mod_profiles.css | 107 +++++++++++++++++++++++++++++++++++++++++++++ view/js/mod_profiles.js | 66 ++++++++++++++++++++++++++++ 3 files changed, 281 insertions(+) diff --git a/view/css/mod_profile.css b/view/css/mod_profile.css index 35016d10b..6591f8a57 100644 --- a/view/css/mod_profile.css +++ b/view/css/mod_profile.css @@ -5,3 +5,111 @@ .profile-thing-img { margin: 7px 0px; } + +.vcard-header { + cursor: pointer; + padding: 7px 10px; + margin-bottom: 3px; +} + +.vcard-header:hover, +.vcard-header.active { + background-color: rgb(238,238,238); + cursor: pointer; +} + +.vcard-header.active:hover { + cursor: initial; +} + +.vcard-add-field { + margin-top: 8px; + display: none; +} + +.vcard-cancel { + margin: 6px 10px; + height: 32px; + line-height: 32px; + color: #777; + font-size: 16px; + + cursor: pointer; + display: none; + float: right; +} + +.vcard-info { + display: none; +} + +.vcard-nophoto { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 4px; + border: 1px solid #ccc; + text-align: center; + font-size: 20px; + color: #fff; + background-color: #ddd; +} + +.vcard-photo { + width: 32px; + height: 32px; + border-radius: 4px; + border: 1px solid #ccc; + text-align: center; +} + +.vcard-fn-preview, +input.vcard-fn { + font-size: 16px !important; + margin-left: 5px; +} + +.vcard-email-preview, +.vcard-tel-preview { + color: #999; +} + + +.vcard-fn, +#create_form, +#more_block { + display: none; +} + +input.vcard-fn, +.vcard-fn-create input, +.vcard-org input, +.vcard-title input, +.vcard-tel input, +.vcard-email input, +.vcard-impp input, +.vcard-url input, +.vcard-adr input, +.vcard-note input { + padding: 0px; + margin-left: 5px; + border-width: 0px 0px 1px 0px; + border-radius: 0px; + background-color: transparent; + min-width: 160px; +} + +#template-form-vcard-org, +#template-form-vcard-title, +#template-form-vcard-tel, +#template-form-vcard-email, +#template-form-vcard-impp, +#template-form-vcard-url, +#template-form-vcard-adr, +#template-form-vcard-note { + display: none; +} + +.connphone { + color: green; +} diff --git a/view/css/mod_profiles.css b/view/css/mod_profiles.css index 4d83e6419..bd2a449ed 100644 --- a/view/css/mod_profiles.css +++ b/view/css/mod_profiles.css @@ -29,3 +29,110 @@ height: 48px; margin: 10px 0px; } +.vcard-header { + cursor: pointer; + padding: 7px 10px; + margin-bottom: 3px; +} + +.vcard-header:hover, +.vcard-header.active { + background-color: rgb(238,238,238); + cursor: pointer; +} + +.vcard-header.active:hover { + cursor: initial; +} + +.vcard-add-field { + margin-top: 8px; + display: none; +} + +.vcard-cancel { + margin: 6px 10px; + height: 32px; + line-height: 32px; + color: #777; + font-size: 16px; + + cursor: pointer; + display: none; + float: right; +} + +.vcard-info { + display: none; +} + +.vcard-nophoto { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 4px; + border: 1px solid #ccc; + text-align: center; + font-size: 20px; + color: #fff; + background-color: #ddd; +} + +.vcard-photo { + width: 32px; + height: 32px; + border-radius: 4px; + border: 1px solid #ccc; + text-align: center; +} + +.vcard-fn-preview, +input.vcard-fn { + font-size: 16px !important; + margin-left: 5px; +} + +.vcard-email-preview, +.vcard-tel-preview { + color: #999; +} + + +.vcard-fn, +#create_form, +#more_block { + display: none; +} + +input.vcard-fn, +.vcard-fn-create input, +.vcard-org input, +.vcard-title input, +.vcard-tel input, +.vcard-email input, +.vcard-impp input, +.vcard-url input, +.vcard-adr input, +.vcard-note input { + padding: 0px; + margin-left: 5px; + border-width: 0px 0px 1px 0px; + border-radius: 0px; + background-color: transparent; + min-width: 160px; +} + +#template-form-vcard-org, +#template-form-vcard-title, +#template-form-vcard-tel, +#template-form-vcard-email, +#template-form-vcard-impp, +#template-form-vcard-url, +#template-form-vcard-adr, +#template-form-vcard-note { + display: none; +} + +.connphone { + color: green; +} \ No newline at end of file diff --git a/view/js/mod_profiles.js b/view/js/mod_profiles.js index a7754e0c5..acc9f9953 100644 --- a/view/js/mod_profiles.js +++ b/view/js/mod_profiles.js @@ -1,4 +1,70 @@ $(document).ready(function() { $('form').areYouSure(); // Warn user about unsaved settings $('textarea').bbco_autocomplete('bbcode'); + + $(document).on('click', '.vcard-header, .vcard-cancel-btn', updateView); + $(document).on('click', '.add-field', doAdd); + $(document).on('click', '.remove-field', doRemove); + + function updateView() { + var id = $(this).data('id'); + var action = $(this).data('action'); + var header = $('#vcard-header-' + id); + var cancel = $('#vcard-cancel-' + id); + var addField = $('#vcard-add-field-' + id); + var info = $('#vcard-info-' + id); + var vcardPreview = $('#vcard-preview-' + id); + var fn = $('#vcard-fn-' + id); + + if(action === 'open') { + $(header).addClass('active'); + $(cancel).show(); + $(addField).show(); + $(info).show(); + $(fn).show(); + $(vcardPreview).hide(); + } + else { + $(header).removeClass('active'); + $(cancel).hide(); + $(addField).hide(); + $(info).hide(); + $(fn).hide(); + $(vcardPreview).show(); + } + } + + function doAdd() { + var what = $(this).data('add'); + var id = $(this).data('id'); + var element = '#template-form-' + what; + var where = '#abook-edit-form'; + + $(element + ' .remove-field').attr('data-id', id) + + if(what === 'vcard-adr') { + var adrCount = $(where + ' .form-' + what).length; + var attrName = 'adr[' + adrCount + '][]'; + $(element + ' input').attr('name', attrName); + } + + if(what === 'vcard-org' || what === 'vcard-title' || what === 'vcard-note') { + $(where + ' .add-' + what).hide() + } + + $(element).clone().removeAttr('id').appendTo(where + ' .form-' + what + '-wrapper'); + } + + function doRemove() { + var what = $(this).data('remove'); + var element = $(this).parents('div.form-' + what); + var where = '#abook_edit_form' + $(this).data('id'); + + if(what === 'vcard-org' || what === 'vcard-title' || what === 'vcard-note') { + $(where + ' .add-' + what).show() + } + + $(element).remove(); + } + }); -- cgit v1.2.3