You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.6 KiB
101 lines
3.6 KiB
10 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<title>mpv remote</title>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||
|
|
|
||
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
|
||
|
|
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
|
||
|
|
<link rel="stylesheet" href="app.css"/>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
/**
|
||
|
|
* Hide when Angular is not yet loaded and initialized
|
||
|
|
*/
|
||
|
|
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body ng-app="starterApp" layout="row" ng-controller="UserController as ul">
|
||
|
|
|
||
|
|
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
|
||
|
|
md-component-id="left"
|
||
|
|
ng-click="ul.toggleList()" aria-label="Show User List"
|
||
|
|
md-is-locked-open="$mdMedia('gt-sm')">
|
||
|
|
|
||
|
|
<md-toolbar class="md-whiteframe-z1">
|
||
|
|
<h3>Users</h3>
|
||
|
|
</md-toolbar>
|
||
|
|
|
||
|
|
<md-list>
|
||
|
|
<md-list-item ng-repeat="it in ul.users">
|
||
|
|
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
|
||
|
|
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
|
||
|
|
{{it.name}}
|
||
|
|
</md-button>
|
||
|
|
</md-list-item>
|
||
|
|
</md-list>
|
||
|
|
|
||
|
|
</md-sidenav>
|
||
|
|
|
||
|
|
|
||
|
|
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
|
||
|
|
|
||
|
|
<md-toolbar layout="row" class="md-whiteframe-z1">
|
||
|
|
<md-button id="main" class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
|
||
|
|
<md-icon md-svg-icon="menu" ></md-icon>
|
||
|
|
</md-button>
|
||
|
|
<h3>Angular Material - Starter App</h3>
|
||
|
|
</md-toolbar>
|
||
|
|
|
||
|
|
<md-content flex id="content">
|
||
|
|
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
|
||
|
|
<h2>{{ul.selected.name}}</h2>
|
||
|
|
<p>{{ul.selected.content}}</p>
|
||
|
|
|
||
|
|
<md-button class="contact" md-no-ink ng-click="ul.makeContact(ul.selected)" aria-label="Share with {{ ul.selected.name }}">
|
||
|
|
<md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
|
||
|
|
<md-icon md-svg-icon="share"></md-icon>
|
||
|
|
</md-button>
|
||
|
|
</md-content>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../node_modules/angular/angular.js"></script>
|
||
|
|
<script src="../node_modules/angular-animate/angular-animate.js"></script>
|
||
|
|
<script src="../node_modules/angular-aria/angular-aria.js"></script>
|
||
|
|
<script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
angular
|
||
|
|
.module('starterApp', ['ngMaterial', 'users'])
|
||
|
|
.config(function($mdThemingProvider, $mdIconProvider){
|
||
|
|
|
||
|
|
$mdIconProvider
|
||
|
|
.defaultIconSet("./assets/svg/avatars.svg", 128)
|
||
|
|
.icon("menu" , "./assets/svg/menu.svg" , 24)
|
||
|
|
.icon("share" , "./assets/svg/share.svg" , 24)
|
||
|
|
.icon("google_plus", "./assets/svg/google_plus.svg" , 512)
|
||
|
|
.icon("hangouts" , "./assets/svg/hangouts.svg" , 512)
|
||
|
|
.icon("twitter" , "./assets/svg/twitter.svg" , 512)
|
||
|
|
.icon("phone" , "./assets/svg/phone.svg" , 512);
|
||
|
|
|
||
|
|
$mdThemingProvider.theme('default')
|
||
|
|
.primaryPalette('brown')
|
||
|
|
.accentPalette('red');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|