Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose: Enclose hotkeys in `kbd` tag. 

We change how `kdb` is displayed in dark-theme for
compose so that they don't take too much user attention
when composing.
This commit is contained in:
Aman Agrawal 2021-12-02 04:59:26 +00:00 committed by Tim Abbott
parent 7610b33963
commit ffd9d18577
7 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend_tests/node_tests/compose_video.js
View File

@ -2,7 +2,7 @@
const {strict: assert} = require("assert");
const {mock_esm, zrequire} = require("../zjsunit/namespace");
const {mock_esm, zrequire, set_global} = require("../zjsunit/namespace");
const {run_test} = require("../zjsunit/test");
const $ = require("../zjsunit/zjquery");
const {page_params} = require("../zjsunit/zpage_params");
@ -17,6 +17,7 @@ mock_esm("../../static/js/giphy", {
mock_esm("../../static/js/resize", {
watch_manual_resize() {},
});
set_global("navigator", {});
const server_events_dispatch = zrequire("server_events_dispatch");
const compose_ui = zrequire("compose_ui");

2
static/js/compose.js
View File

@ -5,6 +5,7 @@ import render_compose from "../templates/compose.hbs";
import * as blueslip from "./blueslip";
import * as channel from "./channel";
import * as common from "./common";
import * as compose_actions from "./compose_actions";
import * as compose_error from "./compose_error";
import * as compose_fade from "./compose_fade";
@ -396,6 +397,7 @@ export function render_compose_box() {
}),
);
$(`.enter_sends_${user_settings.enter_sends}`).show();
common.adjust_mac_shortcuts(".enter_sends kbd");
}
export function initialize() {

15
static/styles/app_components.css
View File

@ -13,6 +13,21 @@
display: none;
}
kbd {
display: inline-block;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 20%);
margin: 0.25em 0.1em;
padding: 0.1em 0.4em;
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
/* Prevent selection */
user-select: none;
}
@media (width < $sm_min) {
.hide-sm {
display: none !important;

5
static/styles/compose.css
View File

@ -451,6 +451,11 @@ input.recipient_box {
height: 14px;
padding-left: 4px;
opacity: 0.7;
margin-bottom: 5px;
kbd {
height: 16px;
}
&:hover {
opacity: 1;

8
static/styles/dark_theme.css
View File

@ -27,6 +27,14 @@ body.dark-theme {
color: inherit;
}
.enter_sends kbd {
background-color: hsl(211, 29%, 14%);
border-color: hsl(211, 29%, 14%);
box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2);
text-shadow: none;
color: hsl(236, 33%, 90%);
}
table.table-striped thead.table-sticky-headers th {
background-color: hsl(0, 0%, 0%);

15
static/styles/informational_overlays.css
View File

@ -81,21 +81,6 @@
}
}
kbd {
display: inline-block;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 20%);
margin: 0.25em 0.1em;
padding: 0.1em 0.4em;
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
/* Prevent selection */
user-select: none;
}
.arrow-key {
font-size: 1.36em;
line-height: 1;

8
static/templates/compose.hbs
View File

@ -107,17 +107,17 @@
<div class="enter_sends">
<label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
<span class="enter_sends_true">
{{t 'Enter to send' }}
<kbd>Enter</kbd> {{t 'to send' }}
</span>
<span class="enter_sends_false">
{{t 'Ctrl + Enter to send' }}
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> {{t 'to send' }}
</span>
<i class="fa fa-exchange" aria-hidden="true"></i>
<span class="enter_sends_true">
{{t "Ctrl + Enter to add a new line" }}
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> {{t 'to add a new line' }}
</span>
<span class="enter_sends_false">
{{t "Enter to add a new line" }}
<kbd>Enter</kbd> {{t 'to add a new line' }}
</span>
</label>
</div>