comm-central/mail/components/addrbook/content/vcard-edit/vCardTemplates.inc.xhtml

Revision control

Copy as Markdown

Other Tools

# 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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
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 button button-flat"
type="button"></button>
<button id="vcard-remove-org"
type="button"
class="addr-book-edit-fieldset-button remove-property-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 button button-flat"
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"/>
</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"
data-telemetry-id="vcard-email-address"
aria-labelledby="addr-book-edit-email-label" />
</td>
<td class="default-column">
<input type="checkbox"
data-telemetry-id="vcard-email-default"
aria-labelledby="addr-book-edit-email-default" />
</td>
<td>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button only-icon"
data-telemetry-id="vcard-remove-email"
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="tel"/>
<input type="tel" data-telemetry-id="vcard-tel"/>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button only-icon"
data-telemetry-id="vcard-remove-tel"
data-l10n-id="vcard-remove-button-title"></button>
</template>
<!-- Field with type and url -->
<template id="template-vcard-edit-type-url">
<vcard-type></vcard-type>
<label class="screen-reader-only" for="url"/>
<input type="url" data-telemetry-id="vcard-url"/>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button only-icon"
data-telemetry-id="vcard-remove-url"
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"
data-telemetry-id="vcard-remove-tz"
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"
data-telemetry-id="vcard-type-selection-impp">
<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="..+:..+" data-telemetry-id="vcard-impp"/>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button only-icon"
data-telemetry-id="vcard-remove-impp"
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"
data-telemetry-id="vcard-type-selection-bday-anniversary">
<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"
data-telemetry-id="vcard-year"/>
<label class="screen-reader-only" for="month" data-l10n-id="vcard-date-month"></label>
<select id="month" name="month" class="vcard-month-select" data-telemetry-id="vcard-month">
<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" data-telemetry-id="vcard-day">
<option value="" data-l10n-id="vcard-date-day" selected="selected"></option>
</select>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button only-icon"
data-telemetry-id="vcard-remove-bday-anniversary"
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" data-telemetry-id="vcard-street"></textarea>
</div>
<div class="vcard-adr-inputs">
<label for="locality" data-l10n-id="vcard-adr-locality"/>
<input type="text" name="locality" data-telemetry-id="vcard-locality"/>
</div>
<div class="vcard-adr-inputs">
<label for="region" data-l10n-id="vcard-adr-region"/>
<input type="text" name="region" data-telemetry-id="vcard-region"/>
</div>
<div class="vcard-adr-inputs">
<label for="code" data-l10n-id="vcard-adr-code"/>
<input type="text" name="code" data-telemetry-id="vcard-code"/>
</div>
<div class="vcard-adr-inputs">
<label for="country" data-l10n-id="vcard-adr-country"/>
<input type="text" name="country" data-telemetry-id="vcard-country"/>
</div>
</fieldset>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button"
data-telemetry-id="vcard-remove-adr"
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"
data-telemetry-id="vcard-remove-note"
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"
name="title"
data-telemetry-id="vcard-title"
data-l10n-id="vcard-org-title-input"/>
</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"
name="role"
data-telemetry-id="vcard-role"
data-l10n-id="vcard-org-role-input"/>
</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-telemetry-id="vcard-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-telemetry-id="vcard-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" data-telemetry-id="vcard-custom"/>
</div>
<div class="vcard-adr-inputs">
<label for="custom2"/>
<input type="text" data-telemetry-id="vcard-custom"/>
</div>
<div class="vcard-adr-inputs">
<label for="custom3"/>
<input type="text" data-telemetry-id="vcard-custom"/>
</div>
<div class="vcard-adr-inputs">
<label for="custom4"/>
<input type="text" data-telemetry-id="vcard-custom"/>
</div>
<button type="button"
class="addr-book-edit-fieldset-button remove-property-button"
data-telemetry-id="vcard-remove-custom"
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>