ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,80 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note Detail-->
|
||||
<!--Controller name : noteDetailCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notedetail-->
|
||||
<!--URL : #app/notedetail-->
|
||||
|
||||
<ion-view view-title="">
|
||||
<!--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-->
|
||||
|
||||
<!--note detail section-->
|
||||
<form name="noteForm">
|
||||
<ion-content>
|
||||
<!--toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium toolbar-in-content">
|
||||
<div>
|
||||
<h1>
|
||||
<i class="ion-android-list"></i>
|
||||
</h1>
|
||||
|
||||
<h3>Note detail</h3>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium"
|
||||
ng-click="showListBottomSheet($event,noteForm)"
|
||||
aria-label="showListBottomSheet">
|
||||
<i class="ion-android-star"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end toolbar section-->
|
||||
|
||||
<div id="note-detail-content">
|
||||
<!--content section-->
|
||||
<p>
|
||||
<i class="ion-android-calendar"></i> {{note.createDate}}
|
||||
</p>
|
||||
<md-input-container md-no-float>
|
||||
<input required name="noteTitle" placeholder="Note Title (Required)" ng-model="note.title">
|
||||
</md-input-container>
|
||||
<textarea rows="7" ng-model="note.detail" maxlength="250"
|
||||
placeholder="Write something here ...."></textarea>
|
||||
<span>
|
||||
{{(note.detail.length > 0 ? note.detail.length :0) | json}}/250
|
||||
</span>
|
||||
</div><!--end content section-->
|
||||
</ion-content>
|
||||
</form><!--end note detail section-->
|
||||
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="contract-actions-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">Note Actions</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-class="{ 'disabled-link': disableSaveBtn}"
|
||||
ng-click="saveNote(note,$event)">
|
||||
<i class="ion-android-list"></i>
|
||||
<span>Save Note</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item ng-show="actionDelete">
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="deleteNote(note,$event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
<span>Remove Note</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script><!--end angular template section-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note List-->
|
||||
<!--Controller name : noteListCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notelist-->
|
||||
<!--URL : #app/notelist-->
|
||||
|
||||
<ion-view title="Note List">
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button ng-disabled="isLoading" class="md-icon-button ion-nav-button-right" ng-click="navigateTo('app.notesetting')"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons><!--end right button on navigation bar-->
|
||||
|
||||
<!--note list section-->
|
||||
<ion-content id="note-list-content" class="fade-in">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<!--list item section-->
|
||||
<md-list-item>
|
||||
<md-input-container md-no-float="" class="search-box">
|
||||
<i class="ion-android-search"></i>
|
||||
<input ng-model="filterText" placeholder="Search for notes.">
|
||||
</md-input-container>
|
||||
</md-list-item>
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<md-card ng-if="!isAnimated" ng-click="navigateTo('app.notedetail' , note )" class="card-item"
|
||||
ng-repeat="note in noteList | filter: { title: filterText } | orderBy: 'title'">
|
||||
<md-card-content>
|
||||
<div class="card-content">
|
||||
<h1 class="md-title">
|
||||
<span>
|
||||
<i class="ion-android-list"></i>{{note.title}}
|
||||
</span>
|
||||
</h1>
|
||||
<div class="note-content-detail">
|
||||
{{note.createDate}} : {{note.detail}}
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list-item ng-if="isAnimated" ng-repeat="note in noteList | filter: { title: filterText } | orderBy: 'title'">
|
||||
<md-card>
|
||||
<md-button ng-click="navigateTo('app.notedetail' , note )">
|
||||
<md-card-content>
|
||||
<div class="card-content">
|
||||
<h1 class="md-title">
|
||||
<span>
|
||||
<i class="ion-android-list"></i>{{note.title}}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
{{note.createDate}} : {{note.detail}}
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
</md-button>
|
||||
</md-card>
|
||||
</md-list-item>
|
||||
<!--end list item section-->
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content><!--end note list section-->
|
||||
|
||||
<!--footer fab bar-->
|
||||
<div class="footer-fab-bar">
|
||||
<a class="md-button md-accent md-fab fab-footer" ng-click="navigateTo('app.notedetail')" aria-label="Add">
|
||||
<i class="ion-android-create"></i>
|
||||
</a>
|
||||
</div><!--end footer fab bar-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="note-list-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Note Setting-->
|
||||
<!--Controller name : noteSettingCtrl-->
|
||||
<!--Controller path : www/templates/application-storage/local-application-db/js/controllers.js-->
|
||||
<!--State name : app.notesetting-->
|
||||
<!--URL : #app/notesetting-->
|
||||
|
||||
<ion-view title="Local Storage Setting">
|
||||
<!--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 scroll="false">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<!--md list item default-->
|
||||
<md-subheader class="md-warn">The setting will change Local Storage data</md-subheader>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.notelist',true)">
|
||||
<i class="fa fa-play"></i>
|
||||
|
||||
<p>Enable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.notelist',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-list-item-default" ng-click="clearAllData($event)">
|
||||
<i class="ion-android-delete"></i>
|
||||
|
||||
<p>Clear All Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="$ionicGoBack()">
|
||||
<i class="ion-android-refresh"></i>
|
||||
|
||||
<p>Refresh Data</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>Note Count</p>
|
||||
<span>{{noteLenght}}</span>
|
||||
|
||||
</md-list-item>
|
||||
<!--end md list item default-->
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user