Old school D3 from simpler times

All examples By author By category About

2947721120

Full window Github gist

Android Address Book with AngularJs and MongoDB

<style>
@import url(https://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}
</style>

<div ng-app="android-addressbook">
	<div ng-controller="AddressBook.Init">
	<div class="row main-app">
		<div ng-view></div>
	</div>
	</div>

<script type="text/ng-template" id="list.html">
	<ul class="fixed top full bar topbar tabs two">
		<li class="icon active">
			<a href='#/contacts'><span class="entypo-user"></span></a>
		</li>
		<li class="icon">
			<a href='#/contacts/starred'><span class="entypo-star"></span></a>
		</li>
	</ul>
	<div class="content" id="wrapper">
		<div class="lists" id="scroller">
			<div ng:repeat="group in groups">
				<div class="title fleft full">{{ group.label }}</div>
				<ul class="list single-fill">
					<li class="list-item" ng:repeat="contact in group.contacts">
						<a class="item" href='#/contact/view/{{ contact._id.$oid }}'>
							<span class="fleft name">{{ contact.firstName + ' ' + contact.lastName }}</span>
							<span class="fright image"><img width="60" ng-src="{{ ProfileImage('60x60', contact) }}"/></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<ul class="fixed bottom full bar bottombar">
		<li class="icon icn left">
			<a href='#/contacts/search'><span class="entypo-search"></span></a>
		</li>
		<li class="icon icn center">
			<a href='#/contact/add'><span class="entypo-user-add"></span></a>
		</li>
	</ul>
</script>

<script type="text/ng-template" id="starred.html">
	<ul class="fixed top full bar topbar tabs two">
		<li class="icon">
			<a href='#/contacts'><span class="entypo-user"></span></a>
		</li>
		<li class="icon active">
			<a href='#/contacts/starred'><span class="entypo-star"></span></a>
		</li>
	</ul>
	
	<div class="content" id="wrapper">
		<div id="scroller" class="fleft">
			<div class="lists full">
				<ul class="list single-fill">
					<li class="list-item half" ng:repeat="contact in starred">
						<a class="item profile-image" href='#/contact/view/{{ contact._id.$oid }}'>
							<img width="100%" ng-src="{{ ProfileImage('480x480', contact) }}"/>
							<span class="absolute bottom caption">
								<span class="text">{{ contact.firstName + ' ' + contact.lastName }}</span>
								<span class="overlay"></span>
							</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="lists">
				<div class="title fleft full">Frequently viewed</div>
				<ul class="list single-fill">
					<li class="list-item" ng:repeat="contact in contacts">
						<a class="item" href='#/contact/view/{{ contact._id.$oid }}'>
							<span class="fleft name">{{ contact.firstName + ' ' + contact.lastName }}</span>
							<span class="fright image"><img width="60" ng-src="{{ ProfileImage('60x60', contact) }}"/></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<ul class="fixed bottom full bar bottombar">
		<li class="icon icn left">
			<a href='#/contacts/search'><span class="entypo-search"></span></a>
		</li>
		<li class="icon icn center">
			<a href='#/contact/add'><span class="entypo-user-add"></span></a>
		</li>
	</ul>
</script>

<script type="text/ng-template" id="search.html">
	<ul class="fixed top full bar topbar">
		<li class="icon icn left">
			<a href='javascript:void(0)' ng-click="Back()"><span class="entypo-left-open-big"></span></a>
		</li>
		<li class="contact-name icn full form">
			<div class="form-item">
				<input placeholder="Find contacts" type="text" id="searchterm" name="searchterm" ng-model="searchterm"/>
				<span class="form-item-decorator"></span>
				<span class="cancel entypo-cancel-circled" ng-show="searchterm" ng-click="searchterm=''"></span>
			</div>
		</li>
	</ul>
	
	<div class="content no-bottombar" id="wrapper">
		<div class="lists" id="scroller">
			<div ng:repeat="group in groups">
				<div class="title fleft full">{{ group.label }}</div>
				<ul class="list single-fill">
					<li class="list-item" ng:repeat="contact in group.contacts | filter:searchterm">
						<a class="item" href='#/contact/view/{{ contact._id.$oid }}'>
							<span class="fleft name">{{ contact.firstName + ' ' + contact.lastName }}</span>
							<span class="fright image"><img width="60" ng-src="{{ ProfileImage('60x60', contact) }}"/></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="view.html">
	<ul class="fixed top full bar topbar">
		<li class="icon icn left">
			<a href='javascript:void(0)' ng-click="Back()"><span class="entypo-left-open-big"></span></a>
		</li>
		<li class="contact-name icn full" ng-bind="FullName()"></li>
		<li class="icon icn right sec">
			<a href='javascript:void(0)'><span ng-click="StarUnStar()" ng-class="{'entypo-star': contact.starred, 'entypo-star-empty': !contact.starred}"></span></a>
		</li>
		<li class="icon icn right" ng-click="_submenu()" ng-class="{'show-submenu': submenu}">
			<a href='javascript:void(0)'><span class="entypo-pencil"></span></a>
			<ul class="submenu">
				<li>
					<a href='#/contact/edit/{{ contact._id.$oid }}'>编辑</a>
				</li>
				<li>
					<a href='javascript:void(0)' ng-click="DeleteContact()">删除</a>
				</li>
			</ul>
		</li>
	</ul>
	
	<div class="content no-bottombar" id="wrapper">
		<div class="lists fleft" id="scroller">
			
			<div class="profile-image" ng-click="_showImage()" ng-class="{open: selected}">
				<img ng-src="{{ ProfileImage('480x480') }}"/>
			</div>
			
			<div ng-show="contact.phones.length">
				<div class="title fleft full">手机</div>
				<ul class="list">
					<li class="list-item" ng:repeat="item in contact.phones">
						<a class="item" href="tel:{{ item.value }}">
							<span class="value">{{ item.value }}</span>
							<span class="label">{{ item.type }}</span>
						</a>
					</li>
				</ul>
			</div>
			
			<div ng-show="contact.emails.length">
				<div class="title fleft full">Email</div>
				<ul class="list">
					<li class="list-item" ng:repeat="item in contact.emails">
						<a class="item" target="_black" href="mailto:{{ item.value }}">
							<span class="value">{{ item.value }}</span>
							<span class="label">{{ item.type }}</span>
						</a>
					</li>
				</ul>
			</div>
			
			<div ng-show="contact.addresses.length">
				<div class="title fleft full">Address</div>
				<ul class="list">
					<li class="list-item" ng:repeat="item in contact.addresses">
						<a class="item" target="_black" href="https://maps.google.com/maps?q={{ item.value }}">
							<span class="value">{{ item.value }}</span>
							<span class="label">{{ item.type }}</span>
						</a>
					</li>
				</ul>
			</div>
			
			<div ng-show="contact.birthday">
				<div class="title fleft full">生日</div>
				<ul class="list">
					<li class="list-item">
						<span class="item">
							<span class="value">{{ contact.birthday }}</span>
						</span>
					</li>
				</ul>
			</div>
			
			<div ng-show="contact.websites.length">
				<div class="title fleft full">Websites</div>
				<ul class="list">
					<li class="list-item" ng:repeat="item in contact.websites">
						<a class="item" target="_black" href="{{ item.value }}">
							<span class="value">{{ item.value }}</span>
							<span class="label">{{ item.type }}</span>
						</a>
					</li>
				</ul>
			</div>
			
			<div ng-show="contact.notes">
				<div class="title fleft full">Notes</div>
				<ul class="list">
					<li class="list-item">
						<span class="item">
							<span class="value">{{ contact.notes }}</span>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="edit.html">
	<ul class="fixed top full bar topbar">
		<li class="icon icn left">
			<a href='javascript:void(0)' ng-click="SaveContact()"><span ng-class="{'entypo-dot': contactForm.name.$invalid, 'entypo-check': !contactForm.name.$invalid}"></span></a>
		</li>
		<li class="contact-name icn full" ng-bind="FullName()"></li>
		<li class="icon icn right" ng-show="contact._id.$oid">
			<a ng-href="#/contact/view/{{ contact._id.$oid }}"><span class="entypo-cancel"></span></a>
		</li>
		<li class="icon icn right" ng-show="!contact._id.$oid">
			<a href='javascript:void(0)' ng-click="Back()"><span class="entypo-cancel"></span></a>
		</li>
	</ul>
	
	<div class="content no-bottombar" id="wrapper">
		<div class="lists fleft" id="scroller">
			
			<form class="form" name="contactForm">
				<div class="title fleft full">Name</div>
				<ul class="list">
					<li class="list-item">
						<div class="item form-item">
							<input type="text" name="name" maxlength="25" ng-model="contact.firstName" required />
								<span class="form-item-decorator"></span>
							</div>
						</li>
						<li class="list-item">
							<div class="item form-item">
								<input type="text" maxlength="25" ng-model="contact.lastName"/>
								<span class="form-item-decorator"></span>
							</div>
						</li>
					</ul>
					
					<div class="title fleft full">Picture URL</div>
					<ul class="list">
						<li class="list-item">
							<div class="item form-item field-left img">
								<input type="text" ng-model="contact.picture"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right img">
								<img width="60" ng-src="{{ ProfileImage('60x60') }}"/>
							</div>
						</li>
					</ul>
					
					<div class="title fleft full">手机</div>
					<ul class="list">
						<li class="list-item" ng:repeat="item in contact.phones">
							<div class="item form-item field-left">
								<input type="text" ng-model="item.value"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right">
								<input type="text" ng-model="item.type"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right-right action">
								<button class="delete" ng-click="DiscardField('phones', $index)"><span class="entypo-cancel"></span></button>
							</div>
						</li>
						<li class="list-item action">
							<button class="save" ng-click="AddField('phones')">添新</button>
						</li>
					</ul>
					
					<div class="title fleft full">Email</div>
					<ul class="list">
						<li class="list-item" ng:repeat="item in contact.emails">
							<div class="item form-item field-left">
								<input type="text" ng-model="item.value"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right">
								<input type="text" ng-model="item.type"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right-right action">
								<button class="delete" ng-click="DiscardField('emails', $index)"><span class="entypo-cancel"></span></button>
							</div>
						</li>
						<li class="list-item action">
							<button class="save" ng-click="AddField('emails')">添新</button>
						</li>
					</ul>
					
					<div class="title fleft full">地址</div>
					<ul class="list">
						<li class="list-item" ng:repeat="item in contact.addresses">
							<div class="item form-item field-left">
								<input type="text" ng-model="item.value"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right">
								<input type="text" ng-model="item.type"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right-right action">
								<button class="delete" ng-click="DiscardField('addresses', $index)"><span class="entypo-cancel"></span></button>
							</div>
						</li>
						<li class="list-item action">
							<button class="save" ng-click="AddField('addresses')">添新</button>
						</li>
					</ul>
					
					<div class="title fleft full">生日</div>
					<ul class="list">
						<li class="list-item">
							<div class="item form-item">
								<input type="date" ng-model="contact.birthday"/>
								<span class="form-item-decorator"></span>
							</div>
						</li>
					</ul>
					
					<div class="title fleft full">网站</div>
					<ul class="list">
						<li class="list-item" ng:repeat="item in contact.websites">
							<div class="item form-item field-left">
								<input type="url" ng-model="item.value"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right">
								<input type="text" ng-model="item.type"/>
								<span class="form-item-decorator"></span>
							</div>
							<div class="item form-item field-right-right action">
								<button class="delete" ng-click="DiscardField('websites', $index)"><span class="entypo-cancel"></span></button>
							</div>
						</li>
						<li class="list-item action">
							<button class="save" ng-click="AddField('websites')">添新</button>
						</li>
					</ul>
					
					<div class="title fleft full">备注</div>
					<ul class="list">
						<li class="list-item">
							<div class="item form-item">
								<textarea ng-model="contact.notes"></textarea>
								<span class="form-item-decorator"></span>
							</div>
						</li>
					</ul>
				</form>
				
			</div>
		</div>
</script>

</div>