An initial version of a "keyboard shortcuts" help panel.
This commit is contained in:
Boris Grozev
yanas
parent
334f7bf95a
commit
d79971a737
2
Makefile
2
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 = .
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
67
index.html
67
index.html
|
|
@ -279,5 +279,72 @@
|
|||
<a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
||||
<div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
|
||||
<div class="content">
|
||||
<ul class="item">
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">M</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.mute"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">V</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.videoMute"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">C</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.toggleChat"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">R</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.raiseHand"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">T</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.pushToTalk"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">D</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.toggleScreensharing"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">F</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.toggleFilmstrip"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">?</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.toggleShortcuts"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">0</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.focusLocal"></strong>
|
||||
</li>
|
||||
<li class="item-details">
|
||||
<span class="item-action">
|
||||
<kbd class="regular-key">1-9</kbd>
|
||||
</span>
|
||||
<strong class="item-description" data-i18n="keyboardShortcuts.focusRemote"></strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue