Jing
10 years ago
parent
5038844da7
commit
52547d9a22
@ -0,0 +1,111 @@
|
|||||||
|
/* Toolbar area */
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
height: 38px;
|
||||||
|
margin: 16px;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
md-toolbar h3 {
|
||||||
|
margin: auto;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidenav area */
|
||||||
|
|
||||||
|
md-list-item > button {
|
||||||
|
width:100%;
|
||||||
|
text-align:left !important;
|
||||||
|
height:70px;;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-icon.avatar {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-list .md-button.selected {
|
||||||
|
color: #03a9f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
button#main {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-sidenav > md-toolbar {
|
||||||
|
height:64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-list-item {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primary content area */
|
||||||
|
|
||||||
|
|
||||||
|
#content {
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content .md-button.contact {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 8px auto 16px 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content md-icon.avatar {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content .md-button.contact > md-icon {
|
||||||
|
fill:black;
|
||||||
|
width:36px;
|
||||||
|
height:36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#content .md-button.contact:active > md-icon {
|
||||||
|
background-color: #dadada;
|
||||||
|
border-radius: 75%;
|
||||||
|
padding:4px;
|
||||||
|
transition: all 100ms ease-out 30ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Utils */
|
||||||
|
|
||||||
|
/* Typography support coming in 0.8.0 */
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
position:relative;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0px;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
md-bottom-sheet md-icon {
|
||||||
|
margin-right:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size:1.1em;
|
||||||
|
padding-left:5px;
|
||||||
|
}
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
<!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>
|
||||||
Loading…
Reference in new issue