Skip to content

Commit

Permalink
Merge pull request mozilla-b2g#5421 from basiclines/contacts-apply-bu…
Browse files Browse the repository at this point in the history 
…ilding_blocks

Bug 798247 [Contacts] Apply building blocks [input_areas]
  • Loading branch information
Ismael González committed Oct 8, 2012
2 parents 08d53ca + 2980f83 commit b5e5c5d
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 275 deletions.
128 changes: 65 additions & 63 deletions apps/communications/contacts/index.html
View file
Expand Up @@ -6,6 +6,7 @@

<!-- Buildging Blocks -->
<link href="/shared/style/headers.css" rel="stylesheet">
<link href="/shared/style/input_areas.css" rel="stylesheet">

<link href="/contacts/style/app.css" rel="stylesheet">
<link href="/contacts/style/contacts.css" rel="stylesheet">
Expand Down Expand Up @@ -109,10 +110,12 @@ <h1 data-l10n-id="contacts">Contacts</h1>
</div>

<div id="groups-container" class="view-body-inner">
<form id="search-container" class="search">
<label for="search-contact">
<input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact" />
</label>
<form id="search-container" class="search" role="search">
<p>
<label for="search-contact">
<input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact" />
</label>
</p>
</form>
<p id="no-result" class="hide" data-l10n-id="noResults">No contacts found</p>
<ol class="block-list" id="groups-list">
Expand All @@ -124,12 +127,15 @@ <h1 data-l10n-id="contacts">Contacts</h1>
<div id="current-jumper" class="view-jumper-current"></div>

<section id="search-view" class="view">
<form id="searchview-container" class="search">
<label for="search-contact">
<input data-cancelable required type="search" name="search" class="textfield" placeholder="Search" id="search-contact" data-l10n-id="search-contact" />
<button id='cancel-search' data-l10n-id="cancel">Cancel</button>
</label>
</form>
<form id="searchview-container" class="search" role="search">
<button id='cancel-search' data-l10n-id="cancel" type="submit">Cancel</button>
<p>
<label for="search-contact">
<input data-cancelable required type="search" name="search" class="textfield" onfocus='return contacts.Search.enterSearchMode();' placeholder="Search" id="search-contact" onkeyup="contacts.Search.search()" data-l10n-id="search-contact" />
<button type="reset" onclick="return false;" class="hide">Clear</button>
</label>
</p>
</form>
</section>
</section>

Expand Down Expand Up @@ -261,75 +267,72 @@ <h1 id='contact-form-title'></h1>

<!-- PHONE TEMPLATE -->
<div id='add-phone-#i#' data-template class='phone-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title">
<a class='with-arrow' data-taglist='phone-type' name="tel" value="#type#" id="tel_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
<dd class="setbox-body">
<fieldset class="fillflow-row">
<legend class="action">
<span data-taglist="phone-type" name="tel" value="#type#" id="tel_type_#i#" data-field="type">#type#</span>
</legend>
<section>
<p class="setbox-item">
<label class="hide" for="tel_#i#" data-l10n-id="labelPhoneNumber">Phone number:</label>
<input data-cancelable placeholder="Phone" data-field="value" data-l10n-id="tel" name="tel" class="textfield" type="tel" value="#value#" id="number_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
<p class="setbox-item">
<label class="hide" for="carrier_#i#" data-l10n-id="labelCarrier">Carrier:</label>
<input data-cancelable placeholder="Carrier" data-field="carrier" data-l10n-id="carrier" name="tel" class="textfield" type="text" value="#carrier#" id="carrier_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</dd>
</dl>
</section>
</fieldset>
</div>

<!-- EMAIL TEMPLATE -->
<div id='add-email-#i#' data-template class='email-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title">
<a data-taglist='email-type' name="email" value="#type#" id="email_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
<dd class="setbox-body">
<fieldset class="fillflow-row">
<legend class="action">
<span data-taglist="email-type" name="email" value="#type#" id="email_type_#i#" data-field="type">#type#</span>
</legend>
<section>
<p class="setbox-item">
<label class="hide" for="email_#i#" data-l10n-id="labelEmail">e-mail:</label>
<input data-cancelable placeholder="Email" data-l10n-id="email" name="email" class="textfield" type="email" value="#value#" id="email_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</dd>
</dl>
</section>
</fieldset>
</div>

<!-- ADDRESS TEMPLATE -->
<div id='add-address-#i#' data-template class='address-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dt class="setbox-title">
<a data-taglist="address-type" name="address" value="#type#" id="address_type_#i#" data-field="type">#type#</a>
<span role="button" class="icon-arrow icon-arrow-bottom setbox-icon">Expand</span>
</dt>
<dd class="setbox-body">
<fieldset class="fillflow-row">
<legend class="action">
<span data-taglist="address-type" name="address" value="#type#" id="address_type_#i#" data-field="type">#type#</span>
</legend>
<section>
<p class="setbox-item">
<label class="hide" for="streetAddress_#i#" data-l10n-id="labelStreet">Street:</label>
<input data-cancelable placeholder="Street" data-field="streetAddress" data-l10n-id="streetAddress" name="address" class="textfield" type="text" value="#streetAddress#" id="streetAddress_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
<p class="setbox-item">
<label class="hide" for="postalCode_#i#" data-l10n-id="labelZip">Zip Code:</label>
<input data-cancelable placeholder="Zip Code" data-field="postalCode" data-l10n-id="postalCode" name="address" class="textfield" type="text" value="#postalCode#" id="postalCode_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
<p class="setbox-item">
<label class="hide" for="locality_#i#" data-l10n-id="labelCity">City:</label>
<input data-cancelable placeholder="City" data-field="locality" data-l10n-id="locality" name="address" class="textfield" type="text" value="#locality#" id="locality_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
<p class="setbox-item">
<label class="hide" for="countryName_#i#" data-l10n-id="labelCountry">Country:</label>
<input data-cancelable placeholder="Country" data-field="countryName" data-l10n-id="countryName" name="address" class="textfield" type="text" value="#countryName#" id="countryName_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</dd>
</dl>
</section>
</fieldset>
</div>

<!-- COMMENTS TEMPLATE -->
<div id='add-note-#i#' data-template class='note-template' data-index="#i#">
<dl class="setbox fillflow-row">
<dd class="setbox-body">
<p class="setbox-item">
<label class="hide" for="note_#i#" data-l10n-id="labelComment">comment:</label>
<input data-cancelable placeholder="Comment" data-l10n-id="comment" name="note" class="textfield" type="text" value="#note#" id="note_#i#">
<input data-cancelable placeholder="Comment" data-l10n-id="comment" name="note" class="textfield" type="text" value="#note#" id="note_#i#">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</dd>
</dl>
Expand All @@ -340,8 +343,7 @@ <h1 id='contact-form-title'></h1>
<div class="view-body-inner">
<form id="contact-form" action="#" class="fill-flow">
<input name="id" id="contact-form-id" type="hidden" value="">
<fieldset class="item first">
<legend class="hide" data-l10n-id="legendTitleMain">Main information</legend>
<section class="item first">
<a id="thumbnail-action" href="#" class="item-media fillflow-media">
<p>
<span role="button" class="icon-addimage"></span>
Expand All @@ -351,61 +353,58 @@ <h1 id='contact-form-title'></h1>
</a>
<div class="item-body-exp">
<p class="fillflow-row">
<label class="hide" for="givenName" data-l10n-id="labelName">Name:</label>
<input data-cancelable placeholder="Name" data-l10n-id="givenName" name="givenName" class="textfield" type="text" value="#givenName#" id="givenName">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
<p class="fillflow-row">
<label class="hide" for="user_lastname" data-l10n-id="labelLastName">Last name:</label>
<input data-cancelable placeholder="Last name" data-l10n-id="familyName" name="familyName" class="textfield" type="text" value="#familyName#" id="familyName">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</div>
<p class="fillflow-row">
<input data-cancelable placeholder="Company Name" data-l10n-id="org" name="org" class="textfield" type="text" value="" id="org">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</fieldset>
</section>

<fieldset>
<legend data-l10n-id="legendPhones">Phone numbers</legend>
<section>
<div id="contacts-form-phones">
<!-- Iterating over phone template here -->
</div>
</fieldset>
</section>

<button data-field-type="tel" id='add-new-phone' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addPhone">Add phone number</b>
</button>

<fieldset>
<legend data-l10n-id="legendEmail">E-mail address</legend>
<section>
<div id="contacts-form-emails">
<!-- Iterating over email template here -->
</div>
</fieldset>
</section>

<button data-field-type="email" id='add-new-email' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addEmail">Add email address</b>
</button>

<fieldset>
<legend data-l10n-id="legendAddress">Address</legend>
<section>
<div id="contacts-form-addresses">
<!-- Iterating over address template here -->
</div>
</fieldset>
</section>

<button data-field-type="adr" id='add-new-address' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
<b data-l10n-id="addAddress">Add new address</b>
</button>

<fieldset>
<legend data-l10n-id="comments">Comments</legend>
<section>
<div id="contacts-form-notes">
<!-- Iterating over comment template here -->
</div>
</fieldset>
</section>

<button data-field-type="note" id='add-new-note' class="fillflow-row action action-add">
<span role="button" class="icon-add"></span>
Expand All @@ -432,11 +431,14 @@ <h1 data-l10n-id="label">Label</h1>
</header>

<article class="view-body">
<div class="view-body-inner">
<form class="view-body-inner">
<ul id="tags-list" class="selection-list">
</ul>
<input data-cancelable class="textfield" type="text" placeholder="Custom Tag" value="" id='custom-tag' data-l10n-id="custom">
</div>
<p>
<input data-cancelable class="textfield" type="text" placeholder="Custom Tag" value="" id='custom-tag' data-l10n-id="custom">
<button type="reset" onclick="return false;" class="hide">Clear</button>
</p>
</form>
</article>
</section>

Expand Down
2 changes: 1 addition & 1 deletion apps/communications/contacts/js/contacts_form.js
View file
Expand Up @@ -254,7 +254,7 @@ contacts.Form = (function() {
}

// Add event listeners
var boxTitle = rendered.querySelector('.setbox-title');
var boxTitle = rendered.querySelector('legend.action');
if (boxTitle) {
boxTitle.addEventListener('mousedown', onGoToSelectTag);
}
Expand Down
11 changes: 4 additions & 7 deletions apps/communications/contacts/js/input_cancel_button.js
View file
Expand Up @@ -56,13 +56,10 @@ var InputCancelButton = (function inputCancelButton() {

var parentElement = input.parentNode;
input.classList.add('cancel-button');
var cancelButton = document.createElement('span');
cancelButton.className = 'icon-clear';
cancelButton.setAttribute('role', 'button');
var afterInput = input.nextSibling;
var newElement = parentElement.insertBefore(cancelButton, afterInput);
var clearButton = parentElement.querySelector('[type=reset]');
clearButton.classList.remove("hide");

newElement.addEventListener('mousedown', function removeText() {
clearButton.addEventListener('mousedown', function removeText() {
input.value = '';
var event = new CustomEvent('cancelInput');
document.dispatchEvent(event);
Expand All @@ -84,7 +81,7 @@ var InputCancelButton = (function inputCancelButton() {

var parentElement = input.parentNode;
input.classList.remove('cancel-button');
parentElement.removeChild(input.nextSibling);
parentElement.querySelector('[type=reset]').classList.add("hide");
};

}());

0 comments on commit b5e5c5d

Please sign in to comment.