The goal of this app is to show basic Angular.js Material Design components in action together. It can also be used as a starting point if you're looking to try things out.
Forked from Marcy Sutton's Pen Angular Material Basic App.
Forked from Marcy Sutton's Pen Angular Material Basic App.
A Pen by Thomas Vander Stichele on CodePen.
| <html lang="en" ng-app="MushinApp"> | |
| <head> | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" | |
| rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| </head> | |
| <body layout="column" ng-controller="AppCtrl"> | |
| <md-toolbar layout="row"> | |
| <div class="md-toolbar-tools"> | |
| <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button menuBtn"> | |
| <i class="material-icons">menu</i> | |
| </md-button> | |
| <h1 layout-align-gt-sm="center" class="md-toolbar-tools">Things</h1> | |
| <md-button class="md-icon-button menuBtn" aria-label="Search"> | |
| <i class="material-icons">search</i> | |
| </md-button> | |
| <md-button class="md-icon-button menuBtn" aria-label="Login"> | |
| <i class="material-icons md-36">face</i> | |
| </md-button> | |
| </div> | |
| </md-toolbar> | |
| <div layout="row" flex class="content-wrapper"> | |
| <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"> | |
| <md-list class="muppet-list"> | |
| <md-item ng-repeat="it in muppets"> | |
| <md-item-content> | |
| <md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }"> | |
| <img ng-src="{{it.iconurl}}" class="face" alt=""> | |
| {{it.name}} | |
| </md-button> | |
| </md-item-content> | |
| </md-item> | |
| </md-list> | |
| </md-sidenav> | |
| <div layout="column" flex class="content-wrapper" id="primary-col"> | |
| <md-content layout="column" flex class="md-padding"> | |
| <md-list class="things-list"> | |
| <md-list-item class="md-2-line" ng-repeat="thing in things"> | |
| <div class="complete"> | |
| <span ng-if="thing.recurrence" ng-class="{ 'repeat-fade': completed }"> | |
| <md-button class="md-icon-button completeBtn" aria-label="Mark as done this time"> | |
| <i class="material-icons">autorenew</i> | |
| </md-button> | |
| </span> | |
| <span ng-if="!thing.recurrence"> | |
| <span ng-if="thing.complete != 100"> | |
| <md-button class="md-icon-button completeBtn" aria-label="Mark as done"> | |
| <i class="material-icons" >check_box_outline_blank</i> | |
| </md-button> | |
| </span> | |
| <span ng-if="thing.complete == 100"> | |
| <md-button class="md-icon-button completeBtn" aria-label="Already done"> | |
| <i class="material-icons">check_box</i> | |
| </md-button> | |
| </span> | |
| </span> | |
| </div> | |
| <div class="md-list-item-text"> | |
| <h3>{{ thing.title }}</h3> | |
| <p> | |
| <span class="contexts"> | |
| <b ng-if="thing.contexts" ng-repeat="context in thing.contexts">@{{context}}</b> | |
| </span> | |
| <span class="projects"> | |
| <i ng-if="thing.projects" ng-repeat="project in thing.projects">p:{{project}}</i> | |
| </span> | |
| <span class="recurrence"><span ng-if="thing.recurrence">every {{ thing.recurrence }}</span></span> | |
| </p> | |
| </div> | |
| </md-list-item> | |
| </md-content> | |
| <md-bottom-sheet class="md-grid"> | |
| <section layout="row" layout-align="center center" layout-wrap> | |
| <md-button class="md-raised">Save</md-button> | |
| <md-button class="md-raised">Order</md-button> | |
| <md-button class="md-raised">Filter</md-button> | |
| </section> | |
| </md-bottom-sheet> | |
| </div> | |
| </div> | |
| <!-- Angular Material Dependencies --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.js"></script> | |
| </body> | |
| </html> |
| var app = angular.module('MushinApp', ['ngMaterial']); | |
| app.controller('AppCtrl', ['$scope', '$mdSidenav', 'thingService', '$timeout','$log', function($scope, $mdSidenav, thingService, $timeout, $log) { | |
| var allThings = []; | |
| $scope.selected = null; | |
| $scope.things = allThings; | |
| $scope.toggleSidenav = toggleSidenav; | |
| loadThings(); | |
| //******************* | |
| // Internal Methods | |
| //******************* | |
| function loadThings() { | |
| thingService.loadAll() | |
| .then(function(things){ | |
| allThings = things; | |
| $scope.things = [].concat(things); | |
| }) | |
| } | |
| function toggleSidenav(name) { | |
| $mdSidenav(name).toggle(); | |
| } | |
| function selectMuppet(muppet) { | |
| $scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet; | |
| $scope.toggleSidenav('left'); | |
| } | |
| }]) | |
| app.service('thingService', ['$q', function($q) { | |
| var things = [ | |
| { | |
| title: 'create logo', | |
| projects: ['mushin'], | |
| contexts: ['laptop'], | |
| importance: 5, | |
| urgency: 3 | |
| }, | |
| { | |
| title: 'release', | |
| projects: ['mushin'], | |
| contexts: ['laptop'], | |
| recurrence: '8W', | |
| importance: 4, | |
| urgency: 2 | |
| }, | |
| { | |
| title: 'buy metro card', | |
| projects: ['personal'], | |
| contexts: ['metro'], | |
| recurrence: '4W', | |
| importance: 4, | |
| urgency: 2 | |
| }, | |
| { | |
| title: 'buy olive oil', | |
| projects: ['food'], | |
| contexts: ['shop'], | |
| complete: 100 | |
| }, | |
| { | |
| title: 'redesign', | |
| projects: ['website'], | |
| contexts: ['work'], | |
| }, | |
| { | |
| title: 'find online hosting platform', | |
| projects: ['website'], | |
| contexts: ['work'], | |
| }, ]; | |
| // Promise-based API | |
| return { | |
| loadAll: function() { | |
| // Simulate async nature of real remote calls | |
| return $q.when(things); | |
| } | |
| }; | |
| }]); |
| /* center icons in top menu */ | |
| .md-button.md-icon-button.menuBtn i { | |
| margin-top: 12px; | |
| margin-right: 0; | |
| } | |
| .md-button.md-icon-button.completeBtn i { | |
| margin-top: 16px; | |
| margin-right: 0; | |
| } | |
| .muppet-list .md-button { | |
| color: inherit; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .muppet-list .selected { | |
| color: #03a9f4; | |
| } | |
| .face { | |
| border-radius: 30px; | |
| border: 1px solid #ddd; | |
| display: inline-block; | |
| margin: 4px 16px; | |
| vertical-align: middle; | |
| width: 48px; | |
| } | |
| .content-wrapper { | |
| position: relative; | |
| } | |
| #primary-col { | |
| overflow: hidden; | |
| } | |
| #primary-col .md-button { | |
| margin: 8px auto 16px 0; | |
| } | |
| #primary-col .cell { | |
| flex: 1 1 auto; | |
| } | |
| #primary-col img { | |
| display: block; | |
| max-width: 100%; | |
| } |