Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
197 lines (170 sloc) 4.85 KB
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
font-family: helvetica;
height: 100%;
font-size: 12px;
}
#topRow {
padding: 5px 10px;
background-color: #B2CCFF;
height: 25px;
font-size: 12px;
}
#newContactButton {
float: right;
}
#mainBox {
display: -moz-box;
-moz-box-orient: horizontal;
border: 1px solid black;
width: -moz-calc(100% - 2px);
height: auto;
min-height: -moz-calc(100% - 75px);
}
#leftSide {
border-right: 1px solid black;
height: 100%;
}
#contactList {
font-size: 12px;
}
section h1 {
font-size: 25px;
}
section h2 {
font-size: 15px;
}
#contactView {
margin-left: 20px;
}
.selected {
background-color: blue;
color: white;
}
#contactList td {
cursor: pointer;
min-width: 250px;
}
footer {
padding: 10px 10px;
font-size: 12px;
background-color: #B2CCFF;
height: 18px;
}
</style>
</head>
<body onload="AB.init()">
<script type="application/javascript;version=1.8" src="contacts.js"></script>
<script type="application/javascript;version=1.8" src="addressbook.js"></script>
<div id="topRow">
<label for="filter">Search address book:</label>
<input type="search" id="filter" onkeyup="return AB.onFilterKeyUp(event);">
<button id="clearFilterButton" onclick="return AB.clearFilter();">X</button>
<button id="newContactButton" onclick="return AB.newContactForm();">
Create new contact
</button>
</div>
<div id="mainBox">
<!-- XXX semantically I'm using this like a <ul> right now -->
<div id="leftSide">
<table id="contactList" onclick="return AB.onContactListClick(event);">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
</div>
<section id="contactView" style="display: none;">
<h1 id="view.displayName">Ohai there</h1>
<h2>Phone</h2>
<table id="view.phoneNumbers">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
<h2>Email</h2>
<table id="view.emails">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
<h2>IM</h2>
<table id="view.ims">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
<h2>Addresses</h2>
<table id="view.addresses">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
<h2>Websites</h2>
<table id="view.urls">
<tbody>
<!-- Dynamically created content goes here. -->
</tbody>
</table>
<h2>Birthday</h2>
<p id="view.birthday"></id>
<h2>Note</h2>
<pre id="view.note"></pre>
<div>
<button onclick="return AB.deleteContact();">Delete</button>
<button onclick="return AB.editContact();">Edit</button>
</div>
</section>
<form id="contactEdit"
style="width: 300px; display: none;">
<!-- Name stuff -->
<fieldset name="name">
<input type="text" id="edit.name.givenName" placeholder="First name">
<input type="text" id="edit.name.familyName" placeholder="Surname">
<!-- TODO expandy thingy for other attributes -->
</fieldset>
<fieldset name="phoneNumbers" id="edit.fieldset.phoneNumbers">
<!-- Dynamically created content goes here. -->
<button id="edit.phoneNumbers.add" onclick="return AB.newSimpleListEntry('phoneNumbers');">+</button>
</fieldset>
<fieldset name="emails" id="edit.fieldset.emails">
<!-- Dynamically created content goes here. -->
<button id="edit.emails.add" onclick="return AB.newSimpleListEntry('emails');">+</button>
</fieldset>
<fieldset name="ims" id="edit.fieldset.ims">
<!-- Dynamically created content goes here. -->
<button id="edit.ims.add" onclick="return AB.newSimpleListEntry('ims');">+</button>
</fieldset>
<fieldset name="addresses" id="edit.fieldset.addresses">
<!-- TODO this can't be a simple list entry -->
<!-- Dynamically created content goes here. -->
<button id="edit.addresses.add" onclick="return AB.newSimpleListEntry('addresses');">+</button>
</fieldset>
<fieldset name="urls" id="edit.fieldset.urls">
<!-- Dynamically created content goes here. -->
<button id="edit.urls.add" onclick="return AB.newSimpleListEntry('urls');">+</button>
</fieldset>
<!-- XXX gecko doesn't support type="date" yet :( -->
<input type="date" id="edit.birthday" placeholder="Birthday">
<textarea id="edit.note" placeholder="Notes"></textarea>
<div>
<button onclick="return AB.cancelContactEditForm();">Cancel</button>
<button onclick="return AB.saveContact();">Save</button>
</div>
<p id="errorMsg"></p>
</form>
</div>
<footer>
More
&middot;
<a href="fbimport.html">Import Facebook friends</a>
&middot;
<a href="gmailimport.html">Import Gmail contacts</a>
&middot;
<a href="https://github.com/philikon/webcontacts">Code on GitHub</a>
</footer>
</body>
</html>