diff options
Diffstat (limited to 'comm/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml')
| -rw-r--r-- | comm/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml | 398 |
1 files changed, 398 insertions, 0 deletions
diff --git a/comm/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml b/comm/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml new file mode 100644 index 0000000000..56d53f57f1 --- /dev/null +++ b/comm/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml @@ -0,0 +1,398 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +<!-- Styles --> +<link rel="stylesheet" href="chrome://messenger/skin/vcard.css" /> + +<!-- Scripts --> +<script type="module" src="chrome://messenger/content/addressbook/edit/edit.mjs"></script> + +<!-- Localization --> +<link rel="localization" href="messenger/addressbook/vcard.ftl" /> + +<!-- Edit View --> +<template id="template-addr-book-edit"> + <!-- Name --> + <fieldset id="addr-book-edit-n" class="addr-book-edit-fieldset fieldset-reset"> + <legend class="screen-reader-only" data-l10n-id="vcard-name-header"/> + <div class="addr-book-edit-display-nickname"> + </div> + </fieldset> + <fieldset id="addr-book-edit-email" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-email-header"/> + <table> + <thead> + <tr> + <th id="addr-book-edit-email-type" scope="col"> + <!-- NOTE: We use the <span> so we can apply the screen-reader-only + - class to the <span> rather than the <th> element. If we apply + - the class to the <th> element directly it causes problems with + - Orca's "browse mode" table navigation. See bug 1776644. --> + <span class="screen-reader-only" + data-l10n-id="vcard-entry-type-label"> + </span> + </th> + <th id="addr-book-edit-email-label" scope="col"> + <span class="screen-reader-only" + data-l10n-id="vcard-email-label"> + </span> + </th> + <th id="addr-book-edit-email-default" scope="col"> + <span data-l10n-id="vcard-primary-email-label"></span> + </th> + </tr> + </thead> + <tbody id="vcard-email"></tbody> + </table> + <button id="vcard-add-email" + data-l10n-id="vcard-email-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- URL --> + <fieldset id="addr-book-edit-url" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-url-header"/> + <button id="vcard-add-url" + data-l10n-id="vcard-url-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Address --> + <fieldset id="addr-book-edit-address" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-adr-header"/> + <button id="vcard-add-adr" + data-l10n-id="vcard-adr-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Tel --> + <fieldset id="addr-book-edit-tel" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-tel-header"/> + <button id="vcard-add-tel" + data-l10n-id="vcard-tel-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Time Zone --> + <fieldset id="addr-book-edit-tz" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-tz-header"/> + <button id="vcard-add-tz" + data-l10n-id="vcard-tz-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- IMPP (Chat) --> + <fieldset id="addr-book-edit-impp" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-impp2-header"/> + <button id="vcard-add-impp" + data-l10n-id="vcard-impp-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Birthday and Anniversary (Special dates) --> + <fieldset id="addr-book-edit-bday-anniversary" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-bday-anniversary-header"/> + <button id="vcard-add-bday-anniversary" + data-l10n-id="vcard-bday-anniversary-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Notes --> + <fieldset id="addr-book-edit-note" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-note-header"/> + <button id="vcard-add-note" + data-l10n-id="vcard-note-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> + <!-- Organization Info --> + <fieldset id="addr-book-edit-org" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-org-header"/> + <button id="vcard-add-org" + data-l10n-id="vcard-org-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button" + hidden="hidden"></button> + </fieldset> + <!-- Custom --> + <fieldset id="addr-book-edit-custom" class="addr-book-edit-fieldset fieldset-reset"> + <legend data-l10n-id="vcard-custom-header"/> + <button id="vcard-add-custom" + data-l10n-id="vcard-custom-add" + class="addr-book-edit-fieldset-button add-property-button icon-button" + type="button"></button> + </fieldset> +</template> + +<!-- Individual fields --> + +<!-- N field --> +<template id="template-vcard-edit-n"> + <div id="n-list-component-prefix" class="n-list-component"> + <label for="vcard-n-prefix" data-l10n-id="vcard-n-prefix" /> + <input id="vcard-n-prefix" + type="text" + autocomplete="off" /> + <button class="primary" data-l10n-id="vcard-n-add-prefix" + type="button"> + <img src="chrome://global/skin/icons/add.svg" alt="" /> + </button> + </div> + <div id="n-list-component-firstname" class="n-list-component"> + <label for="vcard-n-firstname" data-l10n-id="vcard-n-firstname" /> + <input id="vcard-n-firstname" + type="text" + autocomplete="off" /> + </div> + <div id="n-list-component-middlename" class="n-list-component"> + <label for="vcard-n-middlename" data-l10n-id="vcard-n-middlename" /> + <input id="vcard-n-middlename" + type="text" + autocomplete="off" /> + <button class="primary" data-l10n-id="vcard-n-add-middlename" + type="button"> + <img src="chrome://global/skin/icons/add.svg" alt="" /> + </button> + </div> + <div id="n-list-component-lastname" class="n-list-component"> + <label for="vcard-n-lastname" data-l10n-id="vcard-n-lastname" /> + <input id="vcard-n-lastname" + type="text" + autocomplete="off" /> + </div> + <div id="n-list-component-suffix" class="n-list-component"> + <label for="vcard-n-suffix" data-l10n-id="vcard-n-suffix" /> + <button class="primary" data-l10n-id="vcard-n-add-suffix" + type="button"> + <img src="chrome://global/skin/icons/add.svg" alt="" /> + </button> + <input id="vcard-n-suffix" + type="text" + autocomplete="off" /> + </div> +</template> + +<!-- FN field. --> +<template id="template-vcard-edit-fn"> + <label for="vCardDisplayName" data-l10n-id="vcard-displayname"></label> + <input id="vCardDisplayName" type="text"/> + <label id="vCardDisplayNameCheckbox" class="vcard-checkbox"> + <!-- There is no l10n ID on this element because the vCard edit form is + also used in other sections that don't use this checkbox and don't have + access to the fluent string. The string is added when needed by the + address book edit.js file. --> + <input type="checkbox" id="vCardPreferDisplayName" checked="checked" /> + <!-- SPAN element needed for fluent string. --> + <span></span> + </label> +</template> + +<!-- NICKNAME field. --> +<template id="template-vcard-edit-nickname"> + <label for="vCardNickName" data-l10n-id="vcard-nickname"></label> + <input id="vCardNickName" type="text"/> +</template> + +<!-- Email --> +<template id="template-vcard-edit-email"> + <td> + <vcard-type></vcard-type> + </td> + <td class="email-column"> + <input type="email" + aria-labelledby="addr-book-edit-email-label" /> + </td> + <td class="default-column"> + <input type="checkbox" + aria-labelledby="addr-book-edit-email-default" /> + </td> + <td> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button-title"></button> + </td> +</template> + +<!-- Phone --> +<template id="template-vcard-edit-tel"> + <vcard-type></vcard-type> + <label class="screen-reader-only" for="text"/> + <input type="text"/> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button-title"></button> +</template> + +<!-- Field with type and text --> +<template id="template-vcard-edit-type-text"> + <vcard-type></vcard-type> + <label class="screen-reader-only" for="text"/> + <input type="text"/> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button-title"></button> +</template> + +<!-- Time Zone --> +<template id="template-vcard-edit-tz"> + <select> + <option value=""></option> + </select> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button"></button> +</template> + +<!-- IMPP --> +<template id="template-vcard-edit-impp"> + <label class="screen-reader-only" for="protocol" data-l10n-id="vcard-impp-select"></label> + <select name="protocol" class="vcard-type-selection"> + <option value="matrix:u/john:example.org" data-pattern="matrix:.+/.+:.+">Matrix</option> + <option value="xmpp:john@example.org" data-pattern="xmpp:.+@.+">XMPP</option> + <option value="ircs://irc.example.org/john,isuser" data-pattern="ircs?://.+/.+,.+">IRC</option> + <option value="sip:1-555-123-4567@voip.example.org" data-pattern="sip:.+@.+">SIP</option> + <option value="skype:johndoe" data-pattern="skype:[A-Za-z\d\-\._]{6,32}">Skype</option> + <option value="" data-l10n-id="vcard-impp-option-other" data-pattern="..+:..+"></option> + </select> + <label class="screen-reader-only" for="impp" data-l10n-id="vcard-impp-input-label"></label> + <input type="text" name="impp" pattern="..+:..+" /> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button-title"></button> +</template> + +<!-- Birthday and Anniversary --> +<template id="template-vcard-edit-bday-anniversary"> + <label class="vcard-type-label screen-reader-only" + data-l10n-id="vcard-entry-type-label"></label> + <select class="vcard-type-selection"> + <option value="bday" data-l10n-id="vcard-bday-label" selected="selected"/> + <option value="anniversary" data-l10n-id="vcard-anniversary-label"/> + </select> + + <div class="vcard-year-month-day-container"> + <label class="screen-reader-only" for="year" data-l10n-id="vcard-date-year"></label> + <input id="year" name="year" type="number" min="1000" max="9999" pattern="[0-9]{4}" class="size5" /> + + <label class="screen-reader-only" for="month" data-l10n-id="vcard-date-month"></label> + <select id="month" name="month" class="vcard-month-select"> + <option value="" data-l10n-id="vcard-date-month" selected="selected"></option> + </select> + + <label class="screen-reader-only" for="day" data-l10n-id="vcard-date-day"></label> + <select id="day" name="day" class="vcard-day-select"> + <option value="" data-l10n-id="vcard-date-day" selected="selected"></option> + </select> + + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button-title"></button> + </div> +</template> + +<!-- Address --> +<template id="template-vcard-edit-adr"> + <fieldset class="fieldset-grid fieldset-reset"> + <legend class="screen-reader-only" data-l10n-id="vcard-adr-label"/> + <vcard-type></vcard-type> + <div class="vcard-adr-inputs"> + <label for="street" data-l10n-id="vcard-adr-street"/> + <textarea name="street"></textarea> + </div> + <div class="vcard-adr-inputs"> + <label for="locality" data-l10n-id="vcard-adr-locality"/> + <input type="text" name="locality"/> + </div> + <div class="vcard-adr-inputs"> + <label for="region" data-l10n-id="vcard-adr-region"/> + <input type="text" name="region"/> + </div> + <div class="vcard-adr-inputs"> + <label for="code" data-l10n-id="vcard-adr-code"/> + <input type="text" name="code"/> + </div> + <div class="vcard-adr-inputs"> + <label for="country" data-l10n-id="vcard-adr-country"/> + <input type="text" name="country"/> + </div> + </fieldset> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button"></button> +</template> + +<!-- Notes --> +<template id="template-vcard-edit-note"> + <textarea></textarea> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button"></button> +</template> + +<!-- Organization Info --> +<template id="template-vcard-edit-title"> + <div class="vcard-adr-inputs"> + <label for="title" data-l10n-id="vcard-org-title"/> + <input type="text" data-l10n-id="vcard-org-title-input" name="title" /> + </div> +</template> +<template id="template-vcard-edit-role"> + <div class="vcard-adr-inputs"> + <label for="role" data-l10n-id="vcard-org-role"/> + <input type="text" data-l10n-id="vcard-org-role-input" name="role" /> + </div> +</template> +<template id="template-vcard-edit-org"> + <div class="vcard-adr-inputs"> + <label for="org" data-l10n-id="vcard-org-org" /> + <input type="text" name="org" data-l10n-id="vcard-org-org-input" /> + <label for="orgUnit" data-l10n-id="vcard-org-org-unit" class="screen-reader-only"/> + <input type="text" name="orgUnit" data-l10n-id="vcard-org-org-unit-input" /> + </div> +</template> + +<!-- Custom --> +<template id="template-vcard-edit-custom"> + <div class="vcard-adr-inputs"> + <label for="custom1"/> + <input type="text"/> + </div> + <div class="vcard-adr-inputs"> + <label for="custom2"/> + <input type="text"/> + </div> + <div class="vcard-adr-inputs"> + <label for="custom3"/> + <input type="text"/> + </div> + <div class="vcard-adr-inputs"> + <label for="custom4"/> + <input type="text"/> + </div> + <button type="button" + class="addr-book-edit-fieldset-button remove-property-button icon-button" + data-l10n-id="vcard-remove-button"></button> +</template> + +<template id="template-vcard-edit-type"> + <select class="vcard-type-selection"> + <option value="work" data-l10n-id="vcard-entry-type-work"/> + <option value="home" data-l10n-id="vcard-entry-type-home"/> + <option value="" data-l10n-id="vcard-entry-type-none" selected="selected"/> + </select> +</template> + +<template id="template-vcard-edit-type-tel"> + <select class="vcard-type-selection"> + <option value="work" data-l10n-id="vcard-entry-type-work"/> + <option value="home" data-l10n-id="vcard-entry-type-home"/> + <option value="cell" data-l10n-id="vcard-entry-type-cell"/> + <option value="fax" data-l10n-id="vcard-entry-type-fax"/> + <option value="pager" data-l10n-id="vcard-entry-type-pager"/> + <option value="" data-l10n-id="vcard-entry-type-none" selected="selected"/> + </select> +</template> |