diff options
| author | jamiewalch@chromium.org <jamiewalch@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2014-05-14 06:10:16 +0000 |
|---|---|---|
| committer | jamiewalch@chromium.org <jamiewalch@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2014-05-14 06:10:16 +0000 |
| commit | f733f2680c94fad910ce9686aa2645bc90ebc160 (patch) | |
| tree | 1b43738a891b6713022c2d648b91c33733955d6a /remoting/webapp/html | |
| parent | 79e70d0fe37628603f793961269e74b9c6117e8b (diff) | |
| download | chromium_src-f733f2680c94fad910ce9686aa2645bc90ebc160.zip chromium_src-f733f2680c94fad910ce9686aa2645bc90ebc160.tar.gz chromium_src-f733f2680c94fad910ce9686aa2645bc90ebc160.tar.bz2 | |
Implement apps v2 custom window frame.
The default apps v2 container is pretty basic. We want to provide something that looks prettier and also implements some functionality specific to our use-case:
* When connected to a host, a disconnect icon is added to the window controls (it's therefore no longer needed in the tool-bar).
* When connected to a host, maximize == full-screen.
* In full-screen mode, the window controls are still accessible, but are auto-hidden near the top-left corner (but not obscuring it, since it's often a hot-spot on the server).
* For touch-screen devices with no concept of hover, clicking the "stub" will also reveal the controls.
There should be no change to the v1 UX, but I don't plan on landing this CL before the M36 branch point, just in case.
BUG=134213
Review URL: https://codereview.chromium.org/265393005
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@270342 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'remoting/webapp/html')
| -rw-r--r-- | remoting/webapp/html/template_main.html | 92 | ||||
| -rw-r--r-- | remoting/webapp/html/toolbar.html | 12 | ||||
| -rw-r--r-- | remoting/webapp/html/window_frame.html | 29 |
3 files changed, 86 insertions, 47 deletions
diff --git a/remoting/webapp/html/template_main.html b/remoting/webapp/html/template_main.html index e690e3f..78e738e 100644 --- a/remoting/webapp/html/template_main.html +++ b/remoting/webapp/html/template_main.html @@ -5,7 +5,7 @@ Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. --> -<html class="scrollable full-height"> +<html class="full-height"> <head> <meta charset="utf-8"> <link rel="icon" type="image/png" href="chromoting16.webp"> @@ -14,13 +14,16 @@ found in the LICENSE file. <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="menu_button.css"> <link rel="stylesheet" href="toolbar.css"> + <link rel="stylesheet" href="window_frame.css"> <meta-include type="javascript"/> <title i18n-content="PRODUCT_NAME"></title> </head> - <body class="full-height"> + <body class="full-height inner-border-for-apps-v2"> + + <meta-include src="webapp/html/window_frame.html"/> <!-- loading-mode is initially visible, but becomes hidden as soon as an AppMode is selected by remoting.init. All other divs are initially @@ -34,62 +37,65 @@ found in the LICENSE file. <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe> - <div class="inset" data-ui-mode="home" hidden> + <div id="scroller"> + <div class="inset" data-ui-mode="home" hidden> - <meta-include src="webapp/html/ui_header.html"/> - <meta-include src="webapp/html/butterbar.html"/> - <meta-include src="webapp/html/ui_it2me.html"/> - <meta-include src="webapp/html/ui_me2me.html"/> + <meta-include src="webapp/html/ui_header.html"/> + <meta-include src="webapp/html/butterbar.html"/> + <meta-include src="webapp/html/ui_it2me.html"/> + <meta-include src="webapp/html/ui_me2me.html"/> - </div> + </div> <!-- inset --> - <meta-include src="webapp/html/dialog_auth.html"/> + <meta-include src="webapp/html/dialog_auth.html"/> - <div class="dialog-screen" - data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings" - hidden></div> + <div class="dialog-screen" + data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings" + hidden></div> - <div class="dialog-container" - data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-install home.host-setup home.token-refresh-failed home.manage-pairings" - hidden> + <div class="dialog-container" + data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-install home.host-setup home.token-refresh-failed home.manage-pairings" + hidden> - <meta-include src="webapp/html/dialog_token_refresh_failed.html"/> - <meta-include src="webapp/html/dialog_host_setup.html"/> - <meta-include src="webapp/html/dialog_host_install.html"/> - <meta-include src="webapp/html/dialog_host.html"/> + <meta-include src="webapp/html/dialog_token_refresh_failed.html"/> + <meta-include src="webapp/html/dialog_host_setup.html"/> + <meta-include src="webapp/html/dialog_host_install.html"/> + <meta-include src="webapp/html/dialog_host.html"/> - <div id="client-dialog" - class="kd-modaldialog" - data-ui-mode="home.client"> + <div id="client-dialog" + class="kd-modaldialog" + data-ui-mode="home.client"> - <meta-include src="webapp/html/dialog_client_unconnected.html"/> - <meta-include src="webapp/html/dialog_client_connecting.html"/> - <meta-include src="webapp/html/dialog_client_host_needs_upgrade.html"/> - <meta-include src="webapp/html/dialog_client_pin_prompt.html"/> - <meta-include src="webapp/html/dialog_client_third_party_auth.html"/> - <meta-include src="webapp/html/dialog_client_connect_failed.html"/> - <meta-include src="webapp/html/dialog_client_session_finished.html"/> + <meta-include src="webapp/html/dialog_client_unconnected.html"/> + <meta-include src="webapp/html/dialog_client_connecting.html"/> + <meta-include src="webapp/html/dialog_client_host_needs_upgrade.html"/> + <meta-include src="webapp/html/dialog_client_pin_prompt.html"/> + <meta-include src="webapp/html/dialog_client_third_party_auth.html"/> + <meta-include src="webapp/html/dialog_client_connect_failed.html"/> + <meta-include src="webapp/html/dialog_client_session_finished.html"/> - </div> + </div> - <meta-include src="webapp/html/dialog_connection_history.html"/> - <meta-include src="webapp/html/dialog_confirm_host_delete.html"/> - <meta-include src="webapp/html/dialog_manage_pairings.html"/> + <meta-include src="webapp/html/dialog_connection_history.html"/> + <meta-include src="webapp/html/dialog_confirm_host_delete.html"/> + <meta-include src="webapp/html/dialog_manage_pairings.html"/> - </div> <!-- dialog-container --> + </div> <!-- dialog-container --> - <div id="session-mode" - data-ui-mode="in-session home.client" - class="full-height" - hidden> + <div id="session-mode" + data-ui-mode="in-session home.client" + class="full-height" + hidden> - <meta-include src="webapp/html/toolbar.html"/> - <meta-include src="webapp/html/client_plugin.html"/> + <meta-include src="webapp/html/toolbar.html"/> + <meta-include src="webapp/html/client_plugin.html"/> - </div> + </div> <!-- session-mode --> + + <div id="statistics" dir="ltr" class="selectable" hidden> + </div> - <div id="statistics" dir="ltr" class="selectable" hidden> - </div> + </div> <!-- scroller -> </body> </html> diff --git a/remoting/webapp/html/toolbar.html b/remoting/webapp/html/toolbar.html index eeead15..74fecbd 100644 --- a/remoting/webapp/html/toolbar.html +++ b/remoting/webapp/html/toolbar.html @@ -23,7 +23,8 @@ found in the LICENSE file. <button id="toolbar-disconnect" type="button" - i18n-content="DISCONNECT_MYSELF_BUTTON"> + i18n-content="DISCONNECT_MYSELF_BUTTON" + class="apps-v1-only"> </button> <span class="menu-button" id="send-keys-menu"> @@ -47,9 +48,12 @@ found in the LICENSE file. <ul> <li id="screen-resize-to-client" i18n-content="RESIZE_TO_CLIENT"></li> - <li id="screen-shrink-to-fit" i18n-content="SHRINK_TO_FIT"></li> - <li class="menu-separator"></li> - <li id="toggle-full-screen" i18n-content="FULL_SCREEN"></li> + <li id="screen-shrink-to-fit" + i18n-content="SHRINK_TO_FIT"></li> + <li class="menu-separator apps-v1-only"></li> + <li id="toggle-full-screen" + i18n-content="FULL_SCREEN" + class="apps-v1-only"></li> </ul> </span> diff --git a/remoting/webapp/html/window_frame.html b/remoting/webapp/html/window_frame.html new file mode 100644 index 0000000..3b24d48 --- /dev/null +++ b/remoting/webapp/html/window_frame.html @@ -0,0 +1,29 @@ +<!-- +Copyright 2014 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. +--> +<div id="title-bar" class="title-bar apps-v2-only"> + <span class="window-title"> </span> + <span class="window-controls-hover-target"> + <div class="window-controls"> + <span i18n-title="DISCONNECT_MYSELF_BUTTON" + class="window-control window-disconnect"> + <img src="icon_disconnect.webp"> + </span> + <span i18n-title="MINIMIZE_WINDOW" + class="window-control window-minimize"> + <img src="icon_minimize.webp"> + </span> + <span i18n-title="MAXIMIZE_WINDOW" + class="window-control window-maximize-restore"> + <img src="icon_maximize_restore.webp"> + </span> + <span i18n-title="CLOSE_WINDOW" + class="window-control window-close"> + <img src="icon_close.webp"> + </span> + </div> + <div class="window-controls-stub"> </div> + </span> +</div> |