From d79971a73774ef7a0c80d5c304556b6119454e0c Mon Sep 17 00:00:00 2001 From: Boris Grozev Date: Fri, 10 Jun 2016 19:42:17 +0000 Subject: [PATCH] An initial version of a "keyboard shortcuts" help panel. --- Makefile | 2 +- css/keyboard-shortcuts.css | 54 ++++++++++++++++ index.html | 67 ++++++++++++++++++++ lang/main.json | 13 ++++ modules/UI/UI.js | 9 ++- modules/keyboardshortcut/keyboardshortcut.js | 11 +++- 6 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 css/keyboard-shortcuts.css diff --git a/Makefile b/Makefile index 7d945eb01f..51dc88acf0 100644 --- a/Makefile +++ b/Makefile @@ -3,7 +3,7 @@ BROWSERIFY = ./node_modules/.bin/browserify UGLIFYJS = ./node_modules/.bin/uglifyjs EXORCIST = ./node_modules/.bin/exorcist CLEANCSS = ./node_modules/.bin/cleancss -CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css +CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css DEPLOY_DIR = libs BROWSERIFY_FLAGS = -d OUTPUT_DIR = . diff --git a/css/keyboard-shortcuts.css b/css/keyboard-shortcuts.css new file mode 100644 index 0000000000..4d53ed4c5e --- /dev/null +++ b/css/keyboard-shortcuts.css @@ -0,0 +1,54 @@ +#keyboard-shortcuts { + display: none; + position: absolute; + bottom: 20px; + left: 20px; + overflow: hidden; + z-index: 1; + opacity: .85; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + border-bottom-left-radius: 15px; + background-color: rgb(0, 0, 0); + background-image: none; + background-repeat: repeat; + background-attachment: scroll; + background-position: 0px center; + background-clip: border-box; + background-origin: padding-box; + background-size: auto auto; +} + +#keyboard-shortcuts.header { + font-size: 15pt; +} + +#keyboard-shortcuts.content { + font-size: 10pt; + color: #ffffff; +} + +#keyboard-shortcuts.item { + color: #ffffff; + font-size: 10pt; +} +#keyboard-shortcuts.item-details { + color: #ffffff; + font-size: 10pt; +} + +#keyboard-shortcuts.item-action { + color: #ffffff; + font-size: 10pt; +} + +#keyboard-shortcuts.item-description { + color: #ffffff; + font-size: 10pt; +} + +#keyboard-shortcuts.regular-key { + color: #ffffff; + font-size: 10pt; +} diff --git a/index.html b/index.html index b05cf32a30..62c6ebdec6 100644 --- a/index.html +++ b/index.html @@ -279,5 +279,72 @@ + diff --git a/lang/main.json b/lang/main.json index 70505ec0f3..e947c3f727 100644 --- a/lang/main.json +++ b/lang/main.json @@ -11,6 +11,19 @@ "defaultNickname": "ex. Jane Pink", "defaultLink": "e.g. __url__", "calling": "Calling __name__ ...", + "keyboardShortcuts": { + "keyboardShortcuts": "Keyboard shortcuts:", + "raiseHand": "Raise your hand.", + "pushToTalk": "Push to talk.", + "toggleScreensharing": "Switch between camera and screensharing.", + "toggleFilmstrip": "Show or hide the filmstrip.", + "toggleShortcuts": "Show or hide this help menu.", + "focusLocal": "Focus on the local video.", + "focusRemote": "Focus on one of the remote videos.", + "toggleChat": "Open or close the chat panel.", + "mute": "Mute or unmute the microphone.", + "videoMute": "Stop or start the local video." + }, "welcomepage":{ "go": "GO", "roomname": "Enter room name", diff --git a/modules/UI/UI.js b/modules/UI/UI.js index bcfcac3919..300e00a7ed 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -1379,10 +1379,17 @@ UI.showRingOverLay = function () { }; UI.hideRingOverLay = function () { - if(!RingOverlay.hide()) + if (!RingOverlay.hide()) return; ToolbarToggler.resetAlwaysVisibleToolbar(); FilmStrip.toggleFilmStrip(true); }; +/** + * Shows or hides the keyboard shortcuts panel.' + */ +UI.toggleKeyboardShortcutsPanel = function() { + $('#keyboard-shortcuts').toggle(); +}; + module.exports = UI; diff --git a/modules/keyboardshortcut/keyboardshortcut.js b/modules/keyboardshortcut/keyboardshortcut.js index 4f48af97d8..1d129c2b06 100644 --- a/modules/keyboardshortcut/keyboardshortcut.js +++ b/modules/keyboardshortcut/keyboardshortcut.js @@ -3,6 +3,15 @@ var shortcuts = {}; function initShortcutHandlers() { shortcuts = { + 191: { + character: "/", + function: function(e) { + // Only trigger on "?", not on "/". + if (e.shiftKey) { + APP.UI.toggleKeyboardShortcutsPanel(); + } + } + }, 67: { character: "C", id: "toggleChatPopover", @@ -56,7 +65,7 @@ var KeyboardShortcut = { $(":focus").is("input[type=password]") || $(":focus").is("textarea"))) { if (typeof shortcuts[keycode] === "object") { - shortcuts[keycode].function(); + shortcuts[keycode].function(e); } else if (keycode >= "0".charCodeAt(0) && keycode <= "9".charCodeAt(0)) {