Refactor Apple keyboard logic to be more explicit

This commit is contained in:
Tim Miller-Williams 2019-11-07 23:43:28 +00:00 committed by Pavel Djundik
parent 94bdff4fa0
commit 347802a4b6
3 changed files with 29 additions and 37 deletions

View file

@ -97,8 +97,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd></kbd></span>
<span class="key-apple"><kbd></kbd> <kbd></kbd> <kbd></kbd></span>
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd></kbd></span>
<span v-else><kbd></kbd> <kbd></kbd> <kbd></kbd></span>
</div>
<div class="description">
<p>Switch to the next lobby in the channel list.</p>
@ -107,8 +107,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd></kbd></span>
<span class="key-apple"><kbd></kbd> <kbd></kbd> <kbd></kbd></span>
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd></kbd></span>
<span v-else><kbd></kbd> <kbd></kbd> <kbd></kbd></span>
</div>
<div class="description">
<p>Switch to the previous lobby in the channel list.</p>
@ -117,8 +117,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd></kbd></span>
<span class="key-apple"><kbd></kbd> <kbd></kbd></span>
<span v-if="!isApple"><kbd>Alt</kbd> <kbd></kbd></span>
<span v-else><kbd></kbd> <kbd></kbd></span>
</div>
<div class="description">
<p>Switch to the next window in the channel list.</p>
@ -127,8 +127,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd></kbd></span>
<span class="key-apple"><kbd></kbd> <kbd></kbd></span>
<span v-if="!isApple"><kbd>Alt</kbd> <kbd></kbd></span>
<span v-else><kbd></kbd> <kbd></kbd></span>
</div>
<div class="description">
<p>Switch to the previous window in the channel list.</p>
@ -137,8 +137,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd>A</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>A</kbd></span>
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>A</kbd></span>
<span v-else><kbd></kbd> <kbd>A</kbd></span>
</div>
<div class="description">
<p>Switch to the first window with unread messages.</p>
@ -147,8 +147,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>K</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
<span v-else><kbd></kbd> <kbd>K</kbd></span>
</div>
<div class="description">
<p>
@ -176,8 +176,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>B</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
<span v-else><kbd></kbd> <kbd>B</kbd></span>
</div>
<div class="description">
<p>
@ -189,8 +189,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>U</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
<span v-else><kbd></kbd> <kbd>U</kbd></span>
</div>
<div class="description">
<p>
@ -202,8 +202,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>I</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
<span v-else><kbd></kbd> <kbd>I</kbd></span>
</div>
<div class="description">
<p>
@ -215,8 +215,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>S</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
<span v-else><kbd></kbd> <kbd>S</kbd></span>
</div>
<div class="description">
<p>
@ -228,8 +228,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>M</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
<span v-else><kbd></kbd> <kbd>M</kbd></span>
</div>
<div class="description">
<p>
@ -241,8 +241,8 @@
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
<span class="key-apple"><kbd></kbd> <kbd>O</kbd></span>
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
<span v-else><kbd></kbd> <kbd>O</kbd></span>
</div>
<div class="description">
<p>
@ -694,5 +694,10 @@ export default {
SidebarToggle,
VersionChecker,
},
data() {
return {
isApple: navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false,
};
},
};
</script>

View file

@ -1904,15 +1904,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin-bottom: 0;
}
.is-apple #help .key-all,
#help .key-apple {
display: none;
}
.is-apple #help .key-apple {
display: inline-block;
}
.whois {
display: grid;
grid-template-columns: max-content auto;

View file

@ -17,10 +17,6 @@ const vueApp = new Vue({
el: "#viewport",
router,
mounted() {
if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
document.body.classList.add("is-apple");
}
document.addEventListener("visibilitychange", this.synchronizeNotifiedState);
document.addEventListener("focus", this.synchronizeNotifiedState);
document.addEventListener("click", this.synchronizeNotifiedState);