Raataar/pokedex
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Neues Initialrelease mit IonicMaterial

Browse Source
This commit is contained in:
Carsten Hilmer
2016-08-22 12:55:52 +02:00
parent 30a5df79aa
commit 45e482b14d
1249 changed files with 305225 additions and 68794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
www/templates/material-user-interface/dashboard/html/dashboard-setting.html Normal file
View File

@@ -0,0 +1,32 @@
<!--View Information-->
<!--View name : Dashboard Setting-->
<!--Controller name : dashboardSettingCtrl-->
<!--Controller path : www/templates/material-user-interface/dashboard/js/controllers.js-->
<!--State name : app.dashboardSetting-->
<!--URL : #app/dashboardSetting-->
<ion-view title="Dashboard 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 Dashboard View</md-subheader>
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.dashboard',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.dashboard',false)">
<i class="fa fa-stop"></i>
<p>Disable Row Animation</p>
</md-list-item>
</md-list><!--end list section-->
</ion-content>
</ion-view>

771
www/templates/material-user-interface/dashboard/html/dashboard.html Normal file
View File

@@ -0,0 +1,771 @@
<!--View Information-->
<!--View name : Dashboard-->
<!--Controller name : dashboardCtrl-->
<!--Controller path : www/templates/material-user-interface/dashboard/js/controllers.js-->
<!--State name : app.dashboard-->
<!--URL : #app/dashboard-->
<ion-view view-title="">
<!--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-->
<!--toolbar section-->
<md-toolbar class="bar-subheader md-tall md-primary toolbar-medium">
<div>
<h1>Material Design</h1>
<h2>Ionic 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 toolbar section-->
<!--dashboard section-->
<ion-content id="dashboard-content">
<!--list section-->
<!--Below code it will disable animation to better performance-->
<div ng-if="!isAnimated" class="menu-list">
<md-subheader class="md-warn">Application Storage</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.contractlist')">
<div class="col-25">
<i class="fa fa-database"></i>
</div>
<div class="col-50">
<span>SQLite DB</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.notelist')">
<div class="col-25">
<i class="fa fa-cube"></i>
</div>
<div class="col-50">
<span>Local Storage DB</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Social Network Connect</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.wordpressLogin')">
<div class="col-25">
<i class="fa fa-wordpress"></i>
</div>
<div class="col-50">
<span>WordPress</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.facebookLogin')">
<div class="col-25">
<i class="fa fa-facebook"></i>
</div>
<div class="col-50">
<span>Facebook</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.googlePlusLogin')">
<div class="col-25">
<i class="fa fa-google-plus"></i>
</div>
<div class="col-50">
<span>Google Plus</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.instagramLogin')">
<div class="col-25">
<i class="fa fa-instagram"></i>
</div>
<div class="col-50">
<span>Instagram</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.foursquareLogin')">
<div class="col-25">
<i class="fa fa-foursquare"></i>
</div>
<div class="col-50">
<span>Foursquare</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.dropboxLogin')">
<div class="col-25">
<i class="fa fa-dropbox"></i>
</div>
<div class="col-50">
<span>Dropbox</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Share Application Content</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.productList')">
<div class="col-25">
<i class="fa fa-share-alt"></i>
</div>
<div class="col-50">
<span>Social Share</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.contractUs')">
<div class="col-25">
<i class="fa fa-inbox"></i>
</div>
<div class="col-50">
<span>Email & Message</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Advertising Application</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.googleAdmob')">
<div class="col-25">
<i class="fa fa-money"></i>
</div>
<div class="col-50">
<span>Google AdMob</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Push Notification</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.singlePushNotification')">
<div class="col-25">
<i class="fa fa-sign-in fa-rotate-90"></i>
</div>
<div class="col-50">
<span>Single Push</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.schedulePushNotification')">
<div class="col-25">
<i class="fa fa-clock-o"></i>
</div>
<div class="col-50">
<span>Schedule Push</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Map API Connect</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.iosMapConnect')">
<div class="col-25">
<i class="fa fa-map-o"></i>
</div>
<div class="col-50">
<span>IOS Map</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.androidMapConnect')">
<div class="col-25">
<i class="fa fa-map"></i>
</div>
<div class="col-50">
<span>Android Map</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Hardware Connect</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.mobileContractList')">
<div class="col-25">
<i class="fa fa-users"></i>
</div>
<div class="col-50">
<span>Mobile Contract</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.imagePicker')">
<div class="col-25">
<i class="fa fa-picture-o"></i>
</div>
<div class="col-50">
<span>Image Picker</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.vibration')">
<div class="col-25">
<i class="fa fa-asterisk"></i>
</div>
<div class="col-50">
<span>Vibration</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.flashLight')">
<div class="col-25">
<i class="fa fa-bolt"></i>
</div>
<div class="col-50">
<span>Flashlight</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.deviceInformation')">
<div class="col-25">
<i class="fa fa-info"></i>
</div>
<div class="col-50">
<span>Device Information</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Material User Interface</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.defaultUI')">
<div class="col-25">
<i class="fa fa-bookmark-o"></i>
</div>
<div class="col-50">
<span>Default UI</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<md-subheader class="md-warn">Themes</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.tryAppNoBackBtn')">
<div class="col-25">
<i class="fa fa-diamond"></i>
</div>
<div class="col-50">
<span>Try App</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.pricing')">
<div class="col-25">
<i class="fa fa-line-chart"></i>
</div>
<div class="col-50">
<span>Pricing</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.menuDashboard')">
<div class="col-25">
<i class="fa fa-th-large"></i>
</div>
<div class="col-50">
<span>Menu Dashboard</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.expense')">
<div class="col-25">
<i class="fa fa-suitcase"></i>
</div>
<div class="col-50">
<span>Expense</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.newsFeed')">
<div class="col-25">
<i class="fa fa-newspaper-o"></i>
</div>
<div class="col-50">
<span>News Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.onlineCourse')">
<div class="col-25">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="col-50">
<span>Online Course</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.locationFeed')">
<div class="col-25">
<i class="fa fa-flag"></i>
</div>
<div class="col-50">
<span>Location Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.cubeFeed')">
<div class="col-25">
<i class="fa fa-cubes"></i>
</div>
<div class="col-50">
<span>Cube Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.clothShop')">
<div class="col-25">
<i class="fa fa-heart"></i>
</div>
<div class="col-50">
<span>Cloth Shop</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.catalog')">
<div class="col-25">
<i class="fa fa-tags"></i>
</div>
<div class="col-50">
<span>Catalog</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.restaurant')">
<div class="col-25">
<i class="fa fa-cutlery"></i>
</div>
<div class="col-50">
<span>Restaurant</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</div>
</div>
<!--Below code it will show animation when selecting row.-->
<md-list ng-if="isAnimated">
<md-subheader class="md-warn">Application Storage</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.contractlist')">
<div class="col-25">
<i class="fa fa-database"></i>
</div>
<div class="col-50">
<p>SQLite DB</p>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.notelist')">
<div class="col-25">
<i class="fa fa-cube"></i>
</div>
<div class="col-50">
<p>Local Storage DB</p>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Social Network Connect</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.wordpressLogin')">
<div class="col-25">
<i class="fa fa-wordpress"></i>
</div>
<div class="col-50">
<span>WordPress</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.facebookLogin')">
<div class="col-25">
<i class="fa fa-facebook"></i>
</div>
<div class="col-50">
<span>Facebook</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.googlePlusLogin')">
<div class="col-25">
<i class="fa fa-google-plus"></i>
</div>
<div class="col-50">
<span>Google Plus</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.instagramLogin')">
<div class="col-25">
<i class="fa fa-instagram"></i>
</div>
<div class="col-50">
<span>Instagram</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.foursquareLogin')">
<div class="col-25">
<i class="fa fa-foursquare"></i>
</div>
<div class="col-50">
<span>Foursquare</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.dropboxLogin')">
<div class="col-25">
<i class="fa fa-dropbox"></i>
</div>
<div class="col-50">
<span>Dropbox</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Share Application Content</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.productList')">
<div class="col-25">
<i class="fa fa-share-alt"></i>
</div>
<div class="col-50">
<span>Social Share</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.contractUs')">
<div class="col-25">
<i class="fa fa-inbox"></i>
</div>
<div class="col-50">
<span>Email & Message</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Advertising Application</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.googleAdmob')">
<div class="col-25">
<i class="fa fa-money"></i>
</div>
<div class="col-50">
<span>Google AdMob</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Push Notification</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.singlePushNotification')">
<div class="col-25">
<i class="fa fa-sign-in fa-rotate-90"></i>
</div>
<div class="col-50">
<span>Single Push</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.schedulePushNotification')">
<div class="col-25">
<i class="fa fa-clock-o"></i>
</div>
<div class="col-50">
<span>Schedule Push</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Map API Connect</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.iosMapConnect')">
<div class="col-25">
<i class="fa fa-map-o"></i>
</div>
<div class="col-50">
<span>IOS Map</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.androidMapConnect')">
<div class="col-25">
<i class="fa fa-map"></i>
</div>
<div class="col-50">
<span>Android Map</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Hardware Connect</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.mobileContractList')">
<div class="col-25">
<i class="fa fa-users"></i>
</div>
<div class="col-50">
<span>Mobile Contract</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.imagePicker')">
<div class="col-25">
<i class="fa fa-picture-o"></i>
</div>
<div class="col-50">
<span>Image Picker</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.vibration')">
<div class="col-25">
<i class="fa fa-asterisk"></i>
</div>
<div class="col-50">
<span>Vibration</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.flashLight')">
<div class="col-25">
<i class="fa fa-bolt"></i>
</div>
<div class="col-50">
<span>Flashlight</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.deviceInformation')">
<div class="col-25">
<i class="fa fa-info"></i>
</div>
<div class="col-50">
<span>Device Info</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Material User Interface</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.defaultUI')">
<div class="col-25">
<i class="fa fa-bookmark-o"></i>
</div>
<div class="col-50">
<span>Default UI</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-subheader class="md-warn">Themes</md-subheader>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.tryAppNoBackBtn')">
<div class="col-25">
<i class="fa fa-diamond"></i>
</div>
<div class="col-50">
<span>Try App</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.pricing')">
<div class="col-25">
<i class="fa fa-line-chart"></i>
</div>
<div class="col-50">
<span>Pricing</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.menuDashboard')">
<div class="col-25">
<i class="fa fa-th-large"></i>
</div>
<div class="col-50">
<span>Menu Dashboard</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.expense')">
<div class="col-25">
<i class="fa fa-suitcase"></i>
</div>
<div class="col-50">
<span>Expense</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.newsFeed')">
<div class="col-25">
<i class="fa fa-newspaper-o"></i>
</div>
<div class="col-50">
<span>News Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.onlineCourse')">
<div class="col-25">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="col-50">
<span>Online Course</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.locationFeed')">
<div class="col-25">
<i class="fa fa-flag"></i>
</div>
<div class="col-50">
<span>Location Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.cubeFeed')">
<div class="col-25">
<i class="fa fa-cubes"></i>
</div>
<div class="col-50">
<span>Cube Feed</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.clothShop')">
<div class="col-25">
<i class="fa fa-heart"></i>
</div>
<div class="col-50">
<span>Cloth Shop</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.catalog')">
<div class="col-25">
<i class="fa fa-tags"></i>
</div>
<div class="col-50">
<span>Catalog</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
<md-list-item class="md-list-item-default row" ng-click="navigateTo('app.restaurant')">
<div class="col-25">
<i class="fa fa-cutlery"></i>
</div>
<div class="col-50">
<span>Restaurant</span>
</div>
<div class="col-25 menu-more">
<i class="ion-android-more-vertical"></i>
</div>
</md-list-item>
</md-list>
<!--end list section-->
</ion-content><!--end dashboard section-->
</ion-view>

54
www/templates/material-user-interface/dashboard/js/controllers.js Normal file
View File

@@ -0,0 +1,54 @@
// Controller of dashboard.
appControllers.controller('dashboardCtrl', function ($scope, $timeout, $state,$stateParams, $ionicHistory) {
//$scope.isAnimated is the variable that use for receive object data from state params.
//For enable/disable row animation.
$scope.isAnimated = $stateParams.isAnimated;
// navigateTo is for navigate to other page
// by using targetPage to be the destination state.
// Parameter :
// stateNames = target state to go.
$scope.navigateTo = function (stateName) {
$timeout(function () {
if ($ionicHistory.currentStateName() != stateName) {
$ionicHistory.nextViewOptions({
disableAnimate: false,
disableBack: true
});
$state.go(stateName);
}
}, ($scope.isAnimated ? 300 : 0));
}; // End of navigateTo.
// goToSetting is for navigate to Dashboard Setting page
$scope.goToSetting = function () {
$state.go("app.dashboardSetting");
};// End goToSetting.
}); // End of dashboard controller.
// Controller of Dashboard Setting.
appControllers.controller('dashboardSettingCtrl', 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 Dashboard Setting controller.

433
www/templates/material-user-interface/default-user-interface/html/default-user-interface.html Normal file
View File

@@ -0,0 +1,433 @@
<!--View Information-->
<!--View name : Default User Interface-->
<!--Controller name : defaultUserInterfaceCtrl-->
<!--Controller path : www/templates/material-user-interface/default-user-interface/js/controllers.js-->
<!--State name : app.defaultUI-->
<!--URL : #app/defaultUI-->
<ion-view title="User Interface">
<!--user interface section-->
<ion-slide-box id="user-interface-content" active-slide="0">
<!--slide section-->
<ion-slide class="slide-01">
<div class="row">
<div class="col">
<a class="md-button md-accent md-fab" aria-label="Add">
<i class="icon ion-plus"></i>
</a>
<a class="md-button md-accent md-fab" aria-label="Edit">
<i class="ion-android-create"></i>
</a>
<br/>
<a class="md-button md-accent md-fab" aria-label="Shop">
<i class="fa fa-shopping-cart"></i>
</a>
<a class="md-button md-accent md-fab" aria-label="Call">
<i class="ion-android-call"></i>
</a>
<br/>
<div class="button-icon-content">
<i class="ion-android-mail button-icon"></i>
<i class="ion-android-textsms button-icon"></i>
</div>
<a href="" class="md-raised md-button md-default-theme material-background">Button</a>
<br/>
<a href="" class="md-raised md-button md-default-theme"> Button</a>
</div>
</div>
</ion-slide>
<ion-slide class="slide-02">
<form name="contractForm">
<ion-content id="default-input-content">
<md-input-container md-no-float="" class="md-list-item-full-width">
<input placeholder=" Input Text">
</md-input-container>
<md-input-container class="icon-title" md-no-float>
<i class="ion-android-mail"></i>
<input name="email" placeholder="Input Text">
</md-input-container>
<md-input-container class="icon-title" md-no-float>
<i class="fa fa-unlock-alt"></i>
<input type="password" name="password" placeholder="Input Password">
</md-input-container>
<md-input-container class="icon-title" md-no-float>
<i class="ion-android-favorite"></i>
<input numbers-only name="age" ng-model="inputNumber" placeholder="Input Number" type="tel">
</md-input-container>
</ion-content>
</form>
</ion-slide>
<ion-slide class="slide-03">
<div class="radio-container">
<md-radio-group ng-model="radioData.fruit">
<md-radio-button value="Apple">Apple</md-radio-button>
<md-radio-button value="Banana"> Banana</md-radio-button>
<md-radio-button value="Mango">Mango</md-radio-button>
</md-radio-group>
</div>
<div class="checkbox-container">
<md-checkbox aria-label="Checkbox">
Check Me.
</md-checkbox>
</div>
<div class="switch-container">
<md-switch ng-model="switchData.switchNormal" aria-label="Switch" ng-true-value="'You change to True'"
ng-false-value="'You change to False'" class="md-warn">
{{ switchData.switchNormal }}
</md-switch>
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="switchData.switchNoInk">
Switch md no ink
</md-switch>
</div>
</ion-slide>
<ion-slide class="slide-04">
<md-card>
<img ng-src="{{'img/bg_cover_01.png'}}" class="md-card-image" alt="Card image">
<md-card-content>
<h2 class="md-title">MD-CARD</h2>
<p>
card content ........................................
</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<a href="" class="md-button md-default-theme">Action 1</a>
<a href="" class="md-button md-default-theme">Action 2</a>
</div>
</md-card>
</ion-slide>
<ion-slide class="slide-05">
<div class="row">
<div class="col">
<a href="" ng-click="showConfirmDialog($event)"
class="md-raised md-button md-default-theme material-background">Confirm Dialog</a>
<br/>
<a href="" ng-click="showAlertDialog($event)"
class="md-raised md-button md-default-theme material-background">Alert Dialog</a>
<br/>
<p>
{{dialogResult}}
</p>
</div>
</div>
</ion-slide>
<ion-slide class="slide-06">
<div class="row">
<div class="col">
<a href="" ng-click="showToast('top')"
class="md-raised md-button md-default-theme material-background">Toast Top</a>
<br/>
<a href="" ng-click="showToast('bottom')"
class="md-raised md-button md-default-theme material-background">Toast Bottom</a>
</div>
</div>
</ion-slide>
<ion-slide class="slide-07">
<div class="row">
<div class="col">
<a href="" ng-click="showListBottomSheet($event)"
class="md-raised md-button md-default-theme material-background">List Bottom Sheet</a>
<br/>
<a href="" ng-click="showGridBottomSheet($event)"
class="md-raised md-button md-default-theme material-background">Grid Bottom Sheet</a>
</div>
</div>
</ion-slide>
<ion-slide class="slide-08">
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<p ng-click="$mdOpenMenu()">
Menu Small&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
</p>
<md-menu-content width="1">
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 1</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 2</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 3</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 4</span>
</a>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<p ng-click="$mdOpenMenu()">
Menu Medium&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
</p>
<md-menu-content width="2">
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 1</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 2</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 3</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 4</span>
</a>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<p ng-click="$mdOpenMenu()">
Menu Large&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
</p>
<md-menu-content width="3">
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 1</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 2</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 3</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 4</span>
</a>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
<p ng-click="$mdOpenMenu()">
Menu Super Large
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
</p>
<md-menu-content width="4">
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 1</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 2</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 3</span>
</a>
</md-menu-item>
<md-menu-item>
<a class="md-button md-default-theme" ng-click="doSomeThing()">
<span class="menu-item-button">Action 4</span>
</a>
</md-menu-item>
</md-menu-content>
</md-menu>
<div class="row">
<div class="col-25">
</div>
<div class="col-50">
<md-select ng-model="mdSelectValue" aria-label="md-option">
<md-option value="0">Option 1</md-option>
<md-option value="1">Option 2</md-option>
<md-option value="2">Option 3</md-option>
<md-option value="3">Option 4</md-option>
</md-select>
</div>
</div>
</ion-slide>
<ion-slide class="slide-09">
<div class="ui-progress-circular">
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
</div>
<p class="ui-progress-circular-content">Progress Circular</p>
</ion-slide>
<ion-slide class="slide-10">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Tab 1">
<md-content>
Tab 1 Detail .......
</md-content>
</md-tab>
<md-tab label="Tab 2">
<md-content>
Tab 2 Detail .......
</md-content>
</md-tab>
</md-tabs>
</ion-slide>
<ion-slide class="slide-11">
<md-list>
<md-divider></md-divider>
<md-subheader class="md-warn">Default List</md-subheader>
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
<i class="ion-android-pin"></i>
<p>Data Row 1</p>
</md-list-item>
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
<i class="ion-android-refresh"></i>
<p>Data Row 2</p>
</md-list-item>
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
<i class="ion-android-create"></i>
<p>Data Row 3</p>
</md-list-item>
<md-divider></md-divider>
<md-subheader>2 line item</md-subheader>
<md-list-item class="md-2-line">
<img ng-src="{{'img/app_icon.png'}}" class="md-avatar"/>
<div class="md-list-item-text">
<h3>Hrader ...</h3>
<p>Detail ....</p>
</div>
</md-list-item>
<md-divider></md-divider>
</ion-slide>
<ion-slide class="slide-12">
<md-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
<span>.md-whiteframe-z1</span>
</md-whiteframe>
<md-whiteframe class="md-whiteframe-z2" layout layout-align="center center">
<span>.md-whiteframe-z2</span>
</md-whiteframe>
<md-whiteframe class="md-whiteframe-z3" layout layout-align="center center">
<span>.md-whiteframe-z3</span>
</md-whiteframe>
<md-whiteframe class="md-whiteframe-z4" layout layout-align="center center">
<span>.md-whiteframe-z4</span>
</md-whiteframe>
<md-whiteframe class="md-whiteframe-z5" layout layout-align="center center">
<span>.md-whiteframe-z5</span>
</md-whiteframe>
</ion-slide>
<ion-slide class="slide-13">
</ion-slide>
<!--end slide section-->
</ion-slide-box> <!--end user interface section-->
</ion-view>
<!--angular template section-->
<script type="text/ng-template" id="ui-list-bottom-sheet-template">
<md-bottom-sheet class="md-list md-has-header">
<h1 class="md-bottom-sheet-header">List Bottom Sheet</h1>
<!--list section-->
<md-list>
<md-list-item>
<a class="md-default-theme md-bottom-sheet-list-item"
ng-click="closeListBottomSheet()">
<i class="ion-android-call"></i>
<span>Actions 1</span>
</a>
</md-list-item>
<md-list-item>
<a class="md-default-theme md-bottom-sheet-list-item"
ng-click="closeListBottomSheet()">
<i class="ion-android-list"></i>
<span>Actions 2</span>
</a>
</md-list-item>
<md-list-item>
<a class="md-default-theme md-bottom-sheet-list-item"
ng-click="closeListBottomSheet()">
<i class="ion-android-delete"></i>
<span>Actions 3</span>
</a>
</md-list-item>
</md-list>
<!--end list section-->
</md-bottom-sheet>
</script>
<script type="text/ng-template" id="ui-grid-bottom-sheet-template">
<md-bottom-sheet class="md-grid">
<!--list section-->
<md-list id="bottom-sheet-grid-md-list">
<md-list-item>
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
<md-icon md-svg-src="facebook"></md-icon>
<div class="md-grid-text"> Facebook</div>
</a>
</md-list-item>
<md-list-item>
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
<md-icon md-svg-src="twitter"></md-icon>
<div class="md-grid-text"> Twitter</div>
</a>
</md-list-item>
<md-list-item>
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
<md-icon md-svg-src="mail"></md-icon>
<div class="md-grid-text"> Mail</div>
</a>
</md-list-item>
<md-list-item>
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
<i class="ion-android-image"></i>
<div class="md-grid-text"> Save Image</div>
</a>
</md-list-item>
<md-list-item>
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
<md-icon md-svg-src="share-arrow"></md-icon>
<div class="md-grid-text"> More</div>
</a>
</md-list-item>
</md-list>
<!--end list section-->
</md-bottom-sheet>
</script>
<!--end angular template section-->

99
www/templates/material-user-interface/default-user-interface/js/controllers.js Normal file
View File

@@ -0,0 +1,99 @@
// Controller of defaultUserInterface.
appControllers.controller('defaultUserInterfaceCtrl', function ($scope, $mdBottomSheet, $mdToast, $mdDialog) {
//Default value of input number.
$scope.inputNumber = 0;
//Default value of dialog.
$scope.dialogResult = "";
//Default value of Selection.
$scope.mdSelectValue = "0";
//Default value of switch.
$scope.switchData = {
switchNormal: "Please change me",
switchNoInk: false
};
//Default value of radio data.
$scope.radioData = {fruit: 0};
// For show show List Bottom Sheet.
$scope.showListBottomSheet = function ($event) {
$mdBottomSheet.show({
templateUrl: 'ui-list-bottom-sheet-template',
targetEvent: $event,
scope: $scope.$new(false),
});
};// End of showListBottomSheet.
// For show Grid Bottom Sheet.
$scope.showGridBottomSheet = function ($event) {
$mdBottomSheet.show({
templateUrl: 'ui-grid-bottom-sheet-template',
targetEvent: $event,
scope: $scope.$new(false),
});
};// End of showGridBottomSheet.
// For show toast.
$scope.showToast = function (toastPosition) {
$mdToast.show({
controller: 'toastController',
templateUrl: 'toast.html',
hideDelay: 800,
position: toastPosition,
locals: {
displayOption: {
title: 'Action Toast'
}
}
});
}; // End of showToast.
// For close list bottom sheet.
$scope.closeListBottomSheet = function () {
$mdBottomSheet.hide();
} // End of closeListBottomSheet.
// For do something in this function.
$scope.doSomeThing = function () {
// you can put any function here.
}// Emd of doSomeThing
// For show Confrim Dialog.
$scope.showConfirmDialog = function ($event) {
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'confirm-dialog.html',
targetEvent: $event,
locals: {
displayOption: {
title: "Confirm dialog ...?",
content: "This is confirm dialog content.",
ok: "Confirm",
cancel: "Close"
}
}
}).then(function () {
$scope.dialogResult = "You choose Confirm!"
}, function () {
$scope.dialogResult = "You choose Close !!"
});
}// End showConfirmDialog.
// For show alert Dialog.
$scope.showAlertDialog = function ($event) {
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'confirm-dialog.html',
targetEvent: $event,
locals: {
displayOption: {
title: "Alert dialog !!",
content: "This is alert dialog content.",
ok: "Confirm"
}
}
}).then(function () {
$scope.dialogResult = "You choose Confirm!"
});
}// End showAlertDialog.
}); // End of defaultUserInterface controller.