summaryrefslogtreecommitdiffstats
path: root/remoting/webapp
diff options
context:
space:
mode:
authorjamiewalch@chromium.org <jamiewalch@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-05-10 23:02:18 +0000
committerjamiewalch@chromium.org <jamiewalch@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-05-10 23:02:18 +0000
commit1a80cdcdd2122761e557c2897e3b5e0ce52110aa (patch)
treec5e4c8ba6126a552d15b17253f402b407952433c /remoting/webapp
parent3f1d5b02aa8bdc9c7f13a943403773f371a88d33 (diff)
downloadchromium_src-1a80cdcdd2122761e557c2897e3b5e0ce52110aa.zip
chromium_src-1a80cdcdd2122761e557c2897e3b5e0ce52110aa.tar.gz
chromium_src-1a80cdcdd2122761e557c2897e3b5e0ce52110aa.tar.bz2
Basic UI flow.
BUG=None TEST=Manual Review URL: http://codereview.chromium.org/7001005 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@84886 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'remoting/webapp')
-rw-r--r--remoting/webapp/me2mom/choice.html118
-rw-r--r--remoting/webapp/me2mom/client.html15
-rw-r--r--remoting/webapp/me2mom/host.html15
-rw-r--r--remoting/webapp/me2mom/main.css20
-rw-r--r--remoting/webapp/me2mom/remoting.js67
5 files changed, 195 insertions, 40 deletions
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index c4e5e4e..49abf80 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -1,3 +1,4 @@
+<!doctype html>
<!--
Copyright (c) 2011 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
@@ -5,19 +6,118 @@ found in the LICENSE file.
-->
<html>
+
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <script type="text/javascript" src="remoting.js"></script>
<title>Select Role</title>
</head>
- <body>
- <div id="host-or-client-choice">
- <p class="message">Select role:</p>
- <button class="role-select" onclick="location.replace('host.html');">
- Host
- </button>
- <button class="role-select" onclick="location.replace('client.html');">
- Client
- </button>
+
+ <body onload="init();">
+
+ <!-- Host UI -->
+ <div id="host">
+
+ <div id="unshared">
+ <p class="message">
+ Your desktop is currently unshared.
+ </p>
+ <button type="button"
+ class="ok"
+ onclick="tryShare();">
+ Start sharing
+ </button>
+ <p>
+ <a class="switch_mode"
+ href="#c"
+ onclick="setGlobalMode('client');">
+ I want to connect to another computer instead...
+ </a>
+ </p>
+ </div>
+
+ <div id="ready_to_share">
+ <p class="message">
+ To begin sharing your desktop, read out the access code below to the
+ person who will be assisting you.
+ </p>
+ <p id="access_code_display">
+ ABCD-1234-WXYZ
+ </p>
+ <p class="message">
+ Waiting for connection...
+ <button type="button"
+ class="cancel"
+ onclick="cancelShare();">
+ Cancel
+ </button>
+ </p>
+ <p class="message mock">
+ (For this mock-up, this message will disappear automatically.)
+ </p>
+ </div>
+
+ <div id="shared">
+ <p class="message">
+ Your desktop is currently being shared.
+ </p>
+ <button type="button"
+ class="cancel"
+ onclick="setHostMode('unshared');">
+ Stop sharing
+ </button>
+ </div>
+
</div>
+
+ <!-- Client UI -->
+ <div id="client">
+
+ <div id="unconnected">
+ <p class="message">
+ To connect to another computer, enter the access code provided to you
+ by that computer's user.
+ </p>
+ <form action="">
+ <input type="text"
+ id="access_code_entry"/>
+ <button type="submit"
+ onclick="tryConnect(this.form);">
+ Connect
+ </button>
+ </form>
+ <a class="switch_mode"
+ href="#h"
+ onclick="setGlobalMode('host');">
+ I want to share this computer instead...
+ </a>
+ </div>
+
+ <div id="connecting">
+ <p class="message">
+ Verifying access code...
+ <button type="button"
+ class="cancel"
+ onclick="cancelConnect();">
+ Cancel
+ </button>
+
+ </p>
+ <p class="message mock">
+ (For this mock-up, this message will disappear automatically.)
+ </p>
+ </div>
+
+ </div>
+
+ <!-- In-session UI -->
+ <div id="session">
+ <p class="message">
+ Congratulations! You have connected successfully. Your access code was
+ <em id="access_code_proof"></em>.
+ </p>
+ </div>
+
</body>
+
</html>
diff --git a/remoting/webapp/me2mom/client.html b/remoting/webapp/me2mom/client.html
deleted file mode 100644
index 065053e..0000000
--- a/remoting/webapp/me2mom/client.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-
-<html>
- <head>
- <link rel="stylesheet" type="text/css" href="main.css" />
- <title>Select Role</title>
- </head>
- <body>
- <p class="message">Client-mode selected.</p>
- </body>
-</html>
diff --git a/remoting/webapp/me2mom/host.html b/remoting/webapp/me2mom/host.html
deleted file mode 100644
index 38630f0..0000000
--- a/remoting/webapp/me2mom/host.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-
-<html>
- <head>
- <link rel="stylesheet" type="text/css" href="main.css" />
- <title>Select Role</title>
- </head>
- <body>
- <p class="message">Host-mode selected.</p>
- </body>
-</html>
diff --git a/remoting/webapp/me2mom/main.css b/remoting/webapp/me2mom/main.css
index c7d0e8d..ed2413d 100644
--- a/remoting/webapp/me2mom/main.css
+++ b/remoting/webapp/me2mom/main.css
@@ -1,3 +1,8 @@
+/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
body {
font-family: Helvetica, sans-serif;
cursor: default;
@@ -16,6 +21,20 @@ p {
padding: 0 4px 0 4px;
}
+.mock {
+ color: gray;
+}
+
+#access_code_display {
+ font-family: sans-serif;
+ font-size: 200%;
+ margin: 0 0 0 24px;
+ padding: 0 4px 0 4px;
+ border-style: solid;
+ background-color: lightgray;
+ display: inline-block;
+}
+
button {
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -29,7 +48,6 @@ button {
padding: 3px 12px 3px 12px;
}
-
button:hover {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
new file mode 100644
index 0000000..e01b1ed
--- /dev/null
+++ b/remoting/webapp/me2mom/remoting.js
@@ -0,0 +1,67 @@
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var chromoting = {};
+
+function init() {
+ setHostMode('unshared');
+ setClientMode('unconnected');
+ setGlobalMode('host'); // TODO(jamiewalch): Make the initial mode sticky.
+}
+
+// Show the div with id |mode| and hide those with other ids in |modes|.
+function setMode(mode, modes) {
+ for (var i = 0; i < modes.length; ++i) {
+ var div = document.getElementById(modes[i]);
+ if (mode == modes[i]) {
+ div.style.display = 'block';
+ } else {
+ div.style.display = 'none';
+ }
+ }
+}
+
+function setGlobalMode(mode) {
+ setMode(mode, ['host', 'client', 'session']);
+}
+
+function setHostMode(mode) {
+ setMode(mode, ['unshared', 'ready_to_share', 'shared']);
+}
+
+function setClientMode(mode) {
+ setMode(mode, ['unconnected', 'connecting']);
+}
+
+function tryShare() {
+ setHostMode('ready_to_share');
+ chromoting.hostTimer = setTimeout(
+ function() {
+ setHostMode('shared');
+ },
+ 3000);
+}
+
+function cancelShare() {
+ setHostMode('unshared');
+ clearTimeout(chromoting.hostTimer);
+}
+
+function tryConnect(form) {
+ chromoting.accessCode = form.access_code_entry.value;
+ setClientMode('connecting');
+ chromoting.clientTimer = setTimeout(
+ function() {
+ var code = document.getElementById('access_code_proof');
+ code.innerHTML = chromoting.accessCode;
+ setGlobalMode('session');
+ },
+ 3000);
+}
+
+function cancelConnect() {
+ chromoting.accessCode = '';
+ setClientMode('unconnected');
+ clearTimeout(chromoting.clientTimer);
+}
generated by cgit v1.1 at 2025-01-13 08:45:10 +0000