ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,65 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Feed -->
|
||||
<!--Controller name : facebookFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFeed-->
|
||||
<!--URL : #app/facebookFeed-->
|
||||
|
||||
<ion-view title="Facebook feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="https://graph.facebook.com/{{ item.from.id }}/picture"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.from.name}}</h3>
|
||||
|
||||
<p>{{item.created_time | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p ng-show="item.message != null ? true : false">{{item.message}}</p>
|
||||
|
||||
<p ng-show="item.link != null && item.message == null ? true : false">was shared: {{item.link}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.full_picture}}"
|
||||
ng-show="item.full_picture != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.likes.summary.total_count | numberSuffix}} <span>Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.comments.summary.total_count | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{ item.shares != null ? item.shares.count : 0 | numberSuffix }} <span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Friend List -->
|
||||
<!--Controller name : facebookFriendListCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFriendList-->
|
||||
<!--URL : #app/facebookFriendList-->
|
||||
|
||||
<ion-view view-title="Friend List">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--list section-->
|
||||
<md-list class="md-list-padding-left">
|
||||
<md-list-item ng-repeat="item in friendsList">
|
||||
<img alt="{{item.name}}" ng-src="{{ item.picture.data.url }}" class="md-avatar"/>
|
||||
|
||||
<p>{{ item.name }}</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Login-->
|
||||
<!--Controller name : facebookLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookLogin-->
|
||||
<!--URL : #app/facebookLogin-->
|
||||
|
||||
<ion-view title="Facebook Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-facebook facebook-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with facebook.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO FACEBOOK APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background" ng-click="login()">
|
||||
LOG IN WITH FACEBOOK
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Profile-->
|
||||
<!--Controller name : facebookProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookProfile-->
|
||||
<!--URL : #app/facebookProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-birthday-cake"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.birthday}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="facebook-color">More Facebook APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Timeline Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFriendList')">
|
||||
<i class="ion-person-stalker"></i>
|
||||
|
||||
<p>Friends List</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user