mirror of
https://github.com/moonlight-stream/moonlight-chrome.git
synced 2025-08-17 16:46:31 +00:00
stylized UI to Material Design
This commit is contained in:
Aidan Campbell
parent
5145012d59
commit
7be7d975e4
102
index.html
102
index.html
@ -4,48 +4,70 @@
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<title>Moonlight</title>
|
||||
<script type="text/javascript" src="common.js"></script>
|
||||
<script type="text/javascript" src="index.js"></script>
|
||||
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
|
||||
<link rel="stylesheet" href="static/css/material.min.css">
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
</head>
|
||||
<body data-name="moonlight-chrome" data-width="1280" data-height="720" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
|
||||
<div id="title">
|
||||
<h1>Moonlight Streaming</h1>
|
||||
<h2>Chrome App Status: <code id="statusField">NO-STATUS</code></h2>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Moonlight</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation. We hide it in small screens. -->
|
||||
<ul class='mdl-list'>
|
||||
<li>Chrome App Status: <code id="statusField">NO-STATUS</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="log-holder">
|
||||
<code id="logField">log</code></div>
|
||||
<div id="streamSettings" style="display:none"></div>
|
||||
|
||||
<div id="hostSettings">
|
||||
<p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="GFEHostIPField">
|
||||
<label class="mdl-textfield__label" for="GFEHostIPField">IP Address</label>
|
||||
</div>
|
||||
<div class="mdl-select">
|
||||
<select id="selectHost">
|
||||
<option value="">No history available</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="button-holder">
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="pairButton">Pair</button>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="showAppsButton">Retrieve App List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testingDiv">
|
||||
<button id="startButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Start Testing Stuff</button>
|
||||
<button id="stopButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Stop Testing Stuff</button>
|
||||
</div>
|
||||
|
||||
<div id="gameSelection" style="display:none">
|
||||
<p>Select a game to run</p>
|
||||
<select id="selectGame">
|
||||
<option value="game_id_1">Game Name 1</option>
|
||||
<option value="game_id_2">Game Name 2</option>
|
||||
<option value="game_id_3">Game Name 3</option>
|
||||
</select>
|
||||
<button id="startGameButton">Run Game</button>
|
||||
<button id="quitGameButton">Quit Current Game</button>
|
||||
</div>
|
||||
|
||||
<!-- The NaCl plugin will be embedded inside the element with id "listener".
|
||||
See common.js. -->
|
||||
<div id="listener"></div>
|
||||
</main>
|
||||
</div>
|
||||
<code id="logField">log</code>
|
||||
|
||||
<div id="streamSettings" style="display:none"></div>
|
||||
|
||||
<div id="hostSettings">
|
||||
<p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
|
||||
<input type="text" size="15" id="GFEHostIPField" value="127.0.0.1">
|
||||
<select id="selectHost">
|
||||
<option value="">No history available</option>
|
||||
</select>
|
||||
<p></p>
|
||||
<button id="pairButton">Pair</button>
|
||||
<button id="showAppsButton">Retrieve App List</button>
|
||||
</div>
|
||||
|
||||
<div id="testingDiv" style="border:3px solid red">
|
||||
<button id="startButton">Start Testing Stuff</button>
|
||||
<button id="stopButton">Stop Testing Stuff</button>
|
||||
</div>
|
||||
|
||||
<div id="gameSelection" style="display:none">
|
||||
<p>Select a game to run</p>
|
||||
<select id="selectGame">
|
||||
<option value="game_id_1">Game Name 1</option>
|
||||
<option value="game_id_2">Game Name 2</option>
|
||||
<option value="game_id_3">Game Name 3</option>
|
||||
</select>
|
||||
<button id="startGameButton">Run Game</button>
|
||||
<button id="quitGameButton">Quit Current Game</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- The NaCl plugin will be embedded inside the element with id "listener".
|
||||
See common.js. -->
|
||||
<div id="listener"></div>
|
||||
<script defer src="static/js/jquery-2.2.0.min.js"></script>
|
||||
<script defer src="static/js/material.min.js"></script>
|
||||
<script type="text/javascript" src="static/js/common.js"></script>
|
||||
<script type="text/javascript" src="static/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
"app": {
|
||||
"background": {
|
||||
"persistent": false,
|
||||
"scripts": ["background.js"]
|
||||
"css": ["static/css/material.min.css", "static/css/style.css"],
|
||||
"scripts": ["static/js/jquery-2.2.0.min.js", "static/js/material.min.js", "static/js/common.js", "static/js/background.js"]
|
||||
}
|
||||
},
|
||||
"permissions": [
|
||||
|
||||
8
static/css/material.min.css
vendored
Normal file
8
static/css/material.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
51
static/css/style.css
Normal file
51
static/css/style.css
Normal file
@ -0,0 +1,51 @@
|
||||
.mdl-layout__header-row {
|
||||
color: #fff;
|
||||
}
|
||||
.mdl-button {
|
||||
color: #fff !important;
|
||||
}
|
||||
main {
|
||||
padding: 50px 100px;
|
||||
}
|
||||
.log-holder {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#hostSettings {
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#hostSettings p {
|
||||
margin: 0;
|
||||
}
|
||||
#hostSettings div {
|
||||
display: inline-block;
|
||||
}
|
||||
#hostSettings .mdl-textfield {
|
||||
width: 200px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#hostSettings #selectHost {
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
background: none;
|
||||
}
|
||||
#hostSettings .button-holder {
|
||||
float: right;
|
||||
}
|
||||
#testingDiv {
|
||||
border: 1px dashed;
|
||||
padding: 10px;
|
||||
}
|
||||
#listener {
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.fullscreen {
|
||||
height: 100vh;
|
||||
overflow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width 100%;
|
||||
}
|
||||
@ -327,11 +327,10 @@ var common = (function() {
|
||||
|
||||
if (typeof window.handleMessage !== 'undefined') {
|
||||
window.handleMessage(message_event);
|
||||
return;
|
||||
} else {
|
||||
logMessage('Unhandled message: ' + message_event.data);
|
||||
}
|
||||
|
||||
logMessage('Unhandled message: ' + message_event.data);
|
||||
}
|
||||
} // TODO: page reloads here???
|
||||
|
||||
/**
|
||||
* Called when the DOM content has loaded; i.e. the page's document is fully
|
||||
@ -14,7 +14,7 @@ function moduleDidLoad() {
|
||||
|
||||
// we want the user to progress through the streaming process
|
||||
// but to save from the PITA of inter-chrome-app-page JS message passing,
|
||||
// I'm opting to
|
||||
// I'm opting to do it in a single page, and keep the data around.
|
||||
function hideAllWorkflowDivs() {
|
||||
document.getElementById('streamSettings').style.display = 'inline-block';
|
||||
document.getElementById('hostSettings').style.display = 'inline-block';
|
||||
@ -24,7 +24,7 @@ function hideAllWorkflowDivs() {
|
||||
|
||||
// pair button was pushed. pass what the user entered into the GFEHostIPField.
|
||||
function pairPushed() {
|
||||
// common.naclModule.postMessage('pair:' + document.getElementById('GFEHostIPField').value);
|
||||
common.naclModule.postMessage('pair:' + document.getElementById('GFEHostIPField').value);
|
||||
}
|
||||
|
||||
// someone pushed the "show apps" button.
|
||||
@ -39,6 +39,10 @@ function showAppsPushed() {
|
||||
}
|
||||
common.naclModule.postMessage('showAppsPushed:' + target);
|
||||
// we just finished the hostSettings section. expose the next one
|
||||
showAppsMode();
|
||||
}
|
||||
|
||||
function showAppsMode() {
|
||||
document.getElementById('streamSettings').style.display = 'none';
|
||||
document.getElementById('hostSettings').style.display = 'none'
|
||||
document.getElementById('gameSelection').style.display = 'inline-block'
|
||||
@ -56,14 +60,13 @@ function startPushed() {
|
||||
var gameIDDropdown = document.getElementById("selectGame");
|
||||
var gameID = gameIDDropdown[gameIDDropdown.selectedIndex].value;
|
||||
common.naclModule.postMessage('setGFEHostIPField:' + target + ":" + gameID);
|
||||
|
||||
// we just finished the gameSelection section. only expose the NaCl section
|
||||
document.getElementById('streamSettings').style.display = 'none';
|
||||
document.getElementById('hostSettings').style.display = 'none';
|
||||
document.getElementById('gameSelection').style.display = 'none'
|
||||
document.getElementById('testingDiv').style.display = 'none'
|
||||
document.getElementById('listener').style.display = 'inline-block'
|
||||
document.getElementById('title').style.display = 'none'
|
||||
playGameMode();
|
||||
}
|
||||
|
||||
function playGameMode() {
|
||||
$("body").children().not("#listener").hide();
|
||||
$("body").addClass("fullscreen");
|
||||
}
|
||||
|
||||
// user pushed the stop button. we should stop.
|
||||
@ -73,6 +76,11 @@ function stopPushed() {
|
||||
|
||||
// hook from main.cpp into the javascript
|
||||
function handleMessage(msg) {
|
||||
var quitStreamString = "quitStream";
|
||||
var logEl = document.getElementById('logField');
|
||||
logEl.innerHTML = msg.data;
|
||||
if (msg.data.lastIndexOf(quitStreamString, 0) === 0) {
|
||||
showAppsMode();
|
||||
}
|
||||
}
|
||||
|
||||
4
static/js/jquery-2.2.0.min.js
vendored
Normal file
4
static/js/jquery-2.2.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10
static/js/material.min.js
vendored
Normal file
10
static/js/material.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user