mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2024-11-21 01:13:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Keyboard modifier menu in tablet mode

Browse Source
This commit is contained in:
JannisX11 2022-11-27 14:17:17 +01:00
parent 5a72f592d7
commit aee549c58b
3 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/window.css
View File

@ -450,23 +450,23 @@
padding-right: 5px;
padding-left: 0;
}
body.is_mobile .panel_selector:only-child {
.panel_selector:only-child {
display: none;
}
body.is_mobile #panel_selector_bar .panel_selector .icon_wrapper {
#panel_selector_bar .panel_selector .icon_wrapper {
margin-top: 6px;
}
body.is_mobile #mobile_keyboard_menu {
#mobile_keyboard_menu {
width: 48px;
text-align: center;
padding: 6px;
position: relative;
color: var(--color-accent);
}
body.is_mobile #mobile_keyboard_menu:hover {
#mobile_keyboard_menu:hover {
color: var(--color-light);
}
body.is_mobile #mobile_keyboard_menu.enabled::after {
#mobile_keyboard_menu.enabled::after {
content: "";
display: block;
position: absolute;
@ -477,6 +477,10 @@
bottom: 2px;
right: 19px;
}
#status_bar #mobile_keyboard_menu.enabled::after {
right: 4px;
bottom: 9px;
}
/*Menu Bar*/

40
js/interface/interface.js
View File

@ -683,7 +683,34 @@ Interface.CustomElements.SelectInput = function(id, data) {
this.set = setKey;
}
function openTouchKeyboardModifierMenu(node) {
if (Menu.closed_in_this_click == 'mobile_keyboard') return;
let modifiers = ['ctrl', 'shift', 'alt'];
let menu = new Menu('mobile_keyboard', [
...modifiers.map(key => {
let name = tl(`keys.${key}`);
if (Interface.status_bar.vue.modifier_keys[key].length) {
name += ' (' + tl(Interface.status_bar.vue.modifier_keys[key].last()) + ')';
}
return {
name,
icon: Pressing.overrides[key] ? 'check_box' : 'check_box_outline_blank',
click() {
Pressing.overrides[key] = !Pressing.overrides[key]
}
}
}),
'_',
{icon: 'clear_all', name: 'menu.mobile_keyboard.disable_all', condition: () => {
let {length} = [Pressing.overrides.ctrl, Pressing.overrides.shift, Pressing.overrides.alt].filter(key => key);
return length;
}, click() {
Pressing.overrides.ctrl = false; Pressing.overrides.shift = false; Pressing.overrides.alt = false;
}},
])
menu.open(node);
}
onVueSetup(function() {
Interface.status_bar.vue = new Vue({
@ -701,7 +728,9 @@ onVueSetup(function() {
ctrl: [],
shift: [],
alt: []
}
},
modifiers: Blockbench.isTouch && !Blockbench.isMobile && Pressing.overrides,
keyboard_menu_in_status_bar: Blockbench.isTouch && !Blockbench.isMobile
},
methods: {
showContextMenu(event) {
@ -756,6 +785,9 @@ onVueSetup(function() {
openValidator() {
Validator.openDialog();
},
openKeyboardMenu() {
openTouchKeyboardModifierMenu(this.$refs.mobile_keyboard_menu);
},
toggleSidebar: Interface.toggleSidebar,
getIconNode: Blockbench.getIconNode,
tl
@ -799,11 +831,15 @@ onVueSetup(function() {
<div class="status_selection_info">{{ selection_info }}</div>
<div class="f_right" id="validator_status" v-if="warnings.length || errors.length" @click="openValidator()">
<span v-if="warnings.length" style="color: var(--color-warning)">{{ warnings.length }}<i class="material-icons">warning</i></span>
<span v-if="errors.length" style="color: var(--color-error)">{{ errors.length }}<i class="material-icons">error</i></span>
</div>
<div v-if="keyboard_menu_in_status_bar" id="mobile_keyboard_menu" @click="openKeyboardMenu()" ref="mobile_keyboard_menu" :class="{enabled: modifiers.ctrl || modifiers.shift || modifiers.alt}">
<i class="material-icons">keyboard</i>
</div>
<div class="f_right">
{{ Prop.fps }} FPS
</div>

31
js/interface/panels.js
View File

@ -677,33 +677,8 @@ function setupMobilePanelSelector() {
resizeWindow();
}
},
openKeyboardMenu(event) {
if (Menu.closed_in_this_click == 'mobile_keyboard') return;
let modifiers = ['ctrl', 'shift', 'alt'];
let menu = new Menu('mobile_keyboard', [
...modifiers.map(key => {
let name = tl(`keys.${key}`);
if (Interface.status_bar.vue.modifier_keys[key].length) {
name += ' (' + tl(Interface.status_bar.vue.modifier_keys[key].last()) + ')';
}
return {
name,
icon: Pressing.overrides[key] ? 'check_box' : 'check_box_outline_blank',
click() {
Pressing.overrides[key] = !Pressing.overrides[key]
}
}
}),
'_',
{icon: 'clear_all', name: 'menu.mobile_keyboard.disable_all', condition: () => {
let {length} = [Pressing.overrides.ctrl, Pressing.overrides.shift, Pressing.overrides.alt].filter(key => key);
return length;
}, click() {
Pressing.overrides.ctrl = false; Pressing.overrides.shift = false; Pressing.overrides.alt = false;
}},
])
menu.open(this.$refs.mobile_keyboard_menu)
openKeyboardMenu() {
openTouchKeyboardModifierMenu(this.$refs.mobile_keyboard_menu);
},
Condition,
getIconNode: Blockbench.getIconNode
@ -716,7 +691,7 @@ function setupMobilePanelSelector() {
<div class="panel_selector" :class="{selected: selected == panel.id}" v-for="panel in panels()" v-if="Condition(panel.condition)" @click="select(panel)">
<div class="icon_wrapper" v-html="getIconNode(panel.icon).outerHTML"></div>
</div>
<div id="mobile_keyboard_menu" @click="openKeyboardMenu($event)" ref="mobile_keyboard_menu" :class="{enabled: modifiers.ctrl || modifiers.shift || modifiers.alt}">
<div id="mobile_keyboard_menu" @click="openKeyboardMenu()" ref="mobile_keyboard_menu" :class="{enabled: modifiers.ctrl || modifiers.shift || modifiers.alt}">
<i class="material-icons">keyboard</i>
</div>
</div>`