nebukadneza
/
MPVRemote
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

it's something

Browse Source
master
Jing 10 years ago
parent 0cca6094fd
commit 193b2c190e
2 changed files with 115 additions and 182 deletions
Show Stats Download Patch File Download Diff File

111
client/static/app.css
Unescape View File

@ -1,111 +0,0 @@
/* 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;
}

170
client/static/index.html
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en" ng-app="StarterApp">
<head>
<title>mpv remote</title>
@ -8,91 +8,135 @@
<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="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;
}
md-content.md-default-theme {
background-color: #eee;
}
md-card {
background-color: #fff;
text-align: center;
}
md-card h2:first-of-type {
margin-top: 0;
}
md-toolbar .md-button.md-default-theme {
border-radius: 99%;
}
h2 {
font-weight: 400;
}
.md-toolbar-tools-bottom {
font-size: small;
}
.md-toolbar-tools-bottom :last-child {
opacity: 0.8;
}
</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>
<body layout="row" ng-controller="MpvRemote">
<div layout="column" class="relative" layout-fill role="main">
<md-toolbar>
<div class="md-toolbar-tools">
<h3>
mpv remote control
</h3>
<span flex></span>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
</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-content flex md-scroll-y>
<ui-view layout="column" layout-fill layout-padding>
<div class="inset" hide-sm></div>
<div role="tabpanel" id="tab1-content" aria-labelledby="tab1" layout="row" layout-align="center center">
<md-card flex-gt-sm="90" flex-gt-md="80">
<md-card-content>
<h2 ng-show=true>Current status: {{status}}</h2>
<md-button class="md-fab" aria-label="To start of file">
<<
</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 class="md-fab" aria-label="Back 1 min">
<
</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 class="md-fab" aria-label="Pause">
||
</md-button>
</md-content>
<md-button class="md-fab" aria-label="Forward 1 min">
>
</md-button>
<md-button class="md-fab" aria-label="To end of file">
>>
</md-button>
</md-card-content>
</md-card>
</div>
</ui-view>
</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 src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.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);
var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
app.controller('MpvRemote', ['$scope', '$mdBottomSheet', function($scope, $mdBottomSheet){
$scope.status = 'Playing';
$scope.alert = 'FFFFF';
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
controller: 'ListBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
$scope.alert = clickedItem.name + ' clicked!';
});
};
}]);
app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
app.config(function($mdThemingProvider) {
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50'],
'50': 'ffffff'
});
$mdThemingProvider.definePalette('customBlue', customBlueMap);
$mdThemingProvider.theme('default')
.primaryPalette('brown')
.primaryPalette('customBlue', {
'default': '500',
'hue-1': '50'
})
.accentPalette('red');
});
$mdThemingProvider.theme('input', 'default')
.primaryPalette('grey');
});
</script>

Write Preview
Loading…
Cancel
Save