paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 14:35:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

right-sidebar: Improve keyboard shortcuts icon styling.

Browse Source 
* Eliminate unnecessary div element wrapping around the icon and
change jQuery selectors accordingly
* Set initial position through CSS instead of JS
* Set color to inherit to prevent night mode issues.
This commit is contained in:
Cynthia Lin
2018-08-19 14:18:51 -07:00
committed by Tim Abbott
parent e7311cdf5d
commit 1ab4d08258
5 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/resize.js
View File

@@ -72,7 +72,7 @@ function get_new_heights() {
// RIGHT SIDEBAR // RIGHT SIDEBAR
var buddy_list_wrapper = $('#buddy_list_wrapper').expectOne(); var buddy_list_wrapper = $('#buddy_list_wrapper').expectOne();
var group_pms = $('#group-pms').expectOne(); var group_pms = $('#group-pms').expectOne();
var keyboard_popover_shortcut = $('#sidebar-keyboard-shortcuts #keyboard-icon').expectOne(); var keyboard_popover_shortcut = $('#keyboard-icon').expectOne();
var usable_height = var usable_height =
res.right_sidebar_height res.right_sidebar_height

2
static/js/scroll_bar.js
View File

@@ -51,7 +51,7 @@ exports.initialize = function () {
$(".compose-content").css({left: sbWidth + "px", $(".compose-content").css({left: sbWidth + "px",
"margin-right": 250 + sbWidth + "px"}); "margin-right": 250 + sbWidth + "px"});
$("#compose-container").css("max-width", 1400 + sbWidth + "px"); $("#compose-container").css("max-width", 1400 + sbWidth + "px");
$('#sidebar-keyboard-shortcuts #keyboard-icon').css({right: sbWidth + 13 + "px"}); $('#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; } } " + $("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; } } " + "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +

5
static/js/ui_init.js
View File

@@ -219,11 +219,6 @@ function initialize_kitchen_sink_stuff() {
timerender.set_full_datetime(message, time_elem); 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', $('#streams_header h4').tooltip({placement: 'right',
animation: false}); animation: false});

7
static/styles/right-sidebar.scss
View File

@@ -236,12 +236,13 @@
margin-right: 10px; margin-right: 10px;
} }
#sidebar-keyboard-shortcuts #keyboard-icon { #keyboard-icon {
position: fixed; position: fixed;
bottom: 8px; /* bottom padding of .compose-content */
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
} }
#sidebar-keyboard-shortcuts a { #sidebar-keyboard-shortcuts {
color: hsl(0, 0%, 1.2%); //#333 color: inherit;
} }

8
templates/zerver/app/right_sidebar.html
View File

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