Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Setting-->
|
||||
<!--Controller name : expenseDashboardSettingCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expenseSetting-->
|
||||
<!--URL : #app/expenseSetting-->
|
||||
|
||||
<ion-view title="Expense 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-subheader class="md-warn">The setting will change Expense View</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.expense',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.expense',false)">
|
||||
<i class="fa fa-stop"></i>
|
||||
|
||||
<p>Disable Row Animation</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Expense Dashboard-->
|
||||
<!--Controller name : expenseDashboardCtrl-->
|
||||
<!--Controller path : www/templates/themes/expense-dashboard/js/controllers.js-->
|
||||
<!--State name : app.expense-->
|
||||
<!--URL : #app/expense-->
|
||||
|
||||
<ion-view title="Expense" id="expense-dashboard">
|
||||
|
||||
<!--right button on navigation bar-->
|
||||
<ion-nav-buttons side="right">
|
||||
<md-button class="md-icon-button ion-nav-button-right" ng-click="goToSetting()"
|
||||
aria-label="Setting">
|
||||
<i class="ion-android-more-vertical"></i>
|
||||
</md-button>
|
||||
</ion-nav-buttons> <!--end right button on navigation bar-->
|
||||
|
||||
<!--expense toolbar section-->
|
||||
<md-toolbar class="bar-subheader md-tall md-primary toolbar-expense">
|
||||
<div>
|
||||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||||
|
||||
<h1>John Able</h1>
|
||||
|
||||
<h2>Material Design</h2>
|
||||
</div>
|
||||
<a class="md-button md-accent md-fab fab-toolbar-medium" aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
</md-toolbar><!--end expense toolbar section-->
|
||||
|
||||
<!--expense content section-->
|
||||
<ion-content id="expense-dashboard-content">
|
||||
|
||||
<!--Below code it will disable animation to better performance-->
|
||||
<div ng-if="!isAnimated" class="list-expense-menu">
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-expense-menu-item" ng-click="doSomeThing()">
|
||||
<div class="row">
|
||||
<div class="col-20">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Below code it will show animation when selecting row.-->
|
||||
<md-list ng-if="isAnimated">
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-money"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Add Budget</p>
|
||||
|
||||
<p class="detail">Add your budget to start saving.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Expense History</p>
|
||||
|
||||
<p class="detail">View expense history report</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-inbox"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Export to e-Mail</p>
|
||||
|
||||
<p class="detail">Export expense to e-Mail</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item class="row" ng-click="doSomeThing()">
|
||||
<div class="col-20 icon">
|
||||
<i class="fa fa-line-chart"></i>
|
||||
</div>
|
||||
<div class="col-80 menu">
|
||||
<p class="header">Summary Report</p>
|
||||
|
||||
<p class="detail">View summary report.</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
</md-list>
|
||||
</ion-content><!--end expense content section-->
|
||||
</ion-view>
|
||||
43
www/templates/themes/expense-dashboard/js/controllers.js
Normal file
43
www/templates/themes/expense-dashboard/js/controllers.js
Normal file
@@ -0,0 +1,43 @@
|
||||
// Controller of expense dashboard page.
|
||||
appControllers.controller('expenseDashboardCtrl', function ($scope,$state,$stateParams) {
|
||||
|
||||
//$scope.isAnimated is the variable that use for receive object data from state params.
|
||||
//For enable/disable row animation.
|
||||
$scope.isAnimated = $stateParams.isAnimated;
|
||||
|
||||
// doSomeThing is for do something when user click on a button
|
||||
$scope.doSomeThing = function () {
|
||||
// You can put any function here.
|
||||
} // End doSomeThing.
|
||||
|
||||
// goToSetting is for navigate to Dashboard Setting page
|
||||
$scope.goToSetting = function () {
|
||||
$state.go("app.expenseSetting");
|
||||
};// End goToSetting.
|
||||
|
||||
});// End of controller expense dashboard.
|
||||
|
||||
// Controller of expense dashboard setting.
|
||||
appControllers.controller('expenseDashboardSettingCtrl', function ($scope, $state,$ionicHistory,$ionicViewSwitcher) {
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination state.
|
||||
// Parameter :
|
||||
// stateNames = target state to go.
|
||||
// objectData = Object data will send to destination state.
|
||||
$scope.navigateTo = function (stateName,objectData) {
|
||||
if ($ionicHistory.currentStateName() != stateName) {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableAnimate: false,
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
//Next view animate will display in back direction
|
||||
$ionicViewSwitcher.nextDirection('back');
|
||||
|
||||
$state.go(stateName, {
|
||||
isAnimated: objectData,
|
||||
});
|
||||
}
|
||||
}; // End of navigateTo.
|
||||
}); // End of controller expense dashboard setting.
|
||||
Reference in New Issue
Block a user