right-sidebar: Add keyboard instructions shortcut in bottom-right corner.

Fixes #9182. Adds a link to the keyboard shortcuts popup at the
bottom-right corner of the right sidebar. A tooltip saying
`Keyboard Shortcuts(?)` has been added to the icon. The icon is
positioned using `position: fixed`.

static/js/resize.js

@@ -72,6 +72,7 @@ function get_new_heights() {
     // RIGHT SIDEBAR
     var user_presences = $('#user_presences').expectOne();
     var group_pms = $('#group-pms').expectOne();
+    var keyboard_popover_shortcut = $('#sidebar-keyboard-shortcuts #keyboard-icon').expectOne();
 
     var usable_height =
         res.right_sidebar_height
@@ -83,7 +84,9 @@ function get_new_heights() {
         - invite_user_link_height
         - parseInt(group_pms.css("marginTop"),10)
         - parseInt(group_pms.css("marginBottom"), 10)
-        - $("#group-pm-header").safeOuterHeight(true);
+        - $("#group-pm-header").safeOuterHeight(true)
+        - keyboard_popover_shortcut.safeOuterHeight(true)
+        - parseInt(keyboard_popover_shortcut.css("marginBottom"), 10);
 
     // set these
     // res.user_presences_max_height

static/js/scroll_bar.js

@@ -52,6 +52,7 @@ $(function () {
         $(".compose-content").css({left: sbWidth + "px",
                                    "margin-right": (250 + sbWidth) + "px"});
         $("#compose-container").css("max-width", (1400 + sbWidth) + "px");
+        $('#sidebar-keyboard-shortcuts #keyboard-icon').css({right: sbWidth + 13 + "px"});
 
         $("head").append("<style> @media (max-width: 1025px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
                          "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +

static/js/ui_init.js

@@ -212,6 +212,11 @@ function initialize_kitchen_sink_stuff() {
         timerender.set_full_datetime(message, time_elem);
     });
 
+    // compose-content padding = icon bottom to make keyboard popover shortcut
+    // vertically aligned with the compose box
+    $('#sidebar-keyboard-shortcuts #keyboard-icon').css('bottom',
+                                                        parseInt($(".compose-content").css("paddingBottom"), 10));
+
     $('#streams_header h4').tooltip({placement: 'right',
                                      animation: false});
 
@@ -228,6 +233,8 @@ function initialize_kitchen_sink_stuff() {
 
     $('.copy_message[data-toggle="tooltip"]').tooltip();
 
+    $('#keyboard-icon').tooltip();
+
     $("body").on("mouseover", ".message_edit_content", function () {
         $(this).closest(".message_row").find(".copy_message").show();
     });

static/styles/right-sidebar.scss

@@ -208,3 +208,9 @@
     border-bottom: 1px solid hsl(0, 0%, 88%);
     margin-right: 10px;
 }
+
+#sidebar-keyboard-shortcuts #keyboard-icon {
+    position: fixed;
+    cursor: pointer;
+    font-size: 20px;
+}

templates/zerver/app/right_sidebar.html

@@ -30,5 +30,8 @@
             <ul id="group-pms" class="filters scrolling_list">
             </ul>
         </div>
+        <div id="sidebar-keyboard-shortcuts">
+            <i id="keyboard-icon" class="fa fa-keyboard-o fa-2x" data-html="true" data-overlay-trigger="keyboard-shortcuts" data-toggle="tooltip" title="{{ _('Keyboard shortcuts') }} <span class='hotkey-hint'>(?)</span>"></i>
+        </div>
     </div>
 </div>