From 7646282dd1db8dc0a609e67f0b694f0fe5d5dfa5 Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sat, 11 May 2024 13:18:53 +0200 Subject: [PATCH 1/8] Redesign mobile main menu --- css/window.css | 28 ++++++++++++++++ js/interface/actions.js | 5 +-- js/interface/interface.js | 6 +++- js/interface/menu_bar.js | 70 ++++++++++++++++++++++++++++----------- 4 files changed, 86 insertions(+), 23 deletions(-) diff --git a/css/window.css b/css/window.css index 8b309c262..fb201018c 100644 --- a/css/window.css +++ b/css/window.css @@ -625,6 +625,34 @@ margin-top: 3px; } + #mobile_menu_bar { + position: absolute; + margin: auto; + top: 50px; + left: 0; + right: 0; + width: fit-content; + max-width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + background-color: var(--color-bright_ui); + box-shadow: 0 0px 8px rgba(0, 0, 0, 0.64); + border-radius: 5px; + padding: 0 5px; + z-index: 30; + } + #mobile_menu_bar > .tool { + color: var(--color-bright_ui_text); + width: 42px; + height: 36px; + padding-top: 3px; + } + #mobile_menu_bar > .tool.selected { + background-color: var(--color-accent); + color: var(--color-accent_text); + } + /* Tab Bar */ #tab_bar { display: flex; diff --git a/js/interface/actions.js b/js/interface/actions.js index 275daaa02..8b1e0217b 100644 --- a/js/interface/actions.js +++ b/js/interface/actions.js @@ -2198,9 +2198,10 @@ const BARS = { Toolbars.element_origin, Toolbars.element_rotation ].forEach(toolbar => { - Toolbars.main_tools.children.forEach(child => { + for (let child of Toolbars.main_tools.children) { + if (toolbar.children.includes(child)) return; toolbar.add(child); - }) + } }) } Blockbench.onUpdateTo('4.4.0-beta.0', () => { diff --git a/js/interface/interface.js b/js/interface/interface.js index d554bbe0a..ccad0a47a 100644 --- a/js/interface/interface.js +++ b/js/interface/interface.js @@ -424,7 +424,11 @@ Interface.definePanels = function(callback) { //Misc function unselectInterface(event) { - if (open_menu && $('.contextMenu').find(event.target).length === 0 && $('.menu_bar_point.opened:hover').length === 0) { + if ( + open_menu && $('.contextMenu').find(event.target).length === 0 && + $('.menu_bar_point.opened:hover').length === 0 && + !document.getElementById('mobile_menu_bar')?.contains(event.target) + ) { Menu.closed_in_this_click = open_menu.id; open_menu.hide(); diff --git a/js/interface/menu_bar.js b/js/interface/menu_bar.js index 59d1fe0bb..a8fe0d17d 100644 --- a/js/interface/menu_bar.js +++ b/js/interface/menu_bar.js @@ -10,6 +10,7 @@ class BarMenu extends Menu { this.node.className = 'contextMenu menu_bar_menu'; this.node.style.minHeight = '8px'; this.node.style.minWidth = '150px'; + this.icon = options.icon; this.name = tl(options.name || `menu.${id}`); this.label = Interface.createElement('li', {class: 'menu_bar_point'}, this.name); this.label.addEventListener('click', (event) => { @@ -37,6 +38,7 @@ class BarMenu extends Menu { MenuBar.open = undefined; this.highlight_action = null; this.label.classList.remove('highlighted'); + if (MenuBar.last_opened == this) document.getElementById('mobile_menu_bar')?.remove(); return this; } highlight(action) { @@ -48,6 +50,7 @@ class BarMenu extends Menu { const MenuBar = { menus: {}, open: undefined, + last_opened: null, setup() { MenuBar.menues = MenuBar.menus; new BarMenu('file', [ @@ -228,7 +231,7 @@ const MenuBar = { ]}, 'plugins_window', 'edit_session' - ]) + ], {icon: 'draft'}) new BarMenu('edit', [ new MenuSeparator('undo'), 'undo', @@ -270,7 +273,7 @@ const MenuBar = { 'select_all', 'unselect_all', 'invert_selection' - ]) + ], {icon: 'icon-gizmo'}) new BarMenu('transform', [ 'scale', {name: 'menu.transform.rotate', id: 'rotate', icon: 'rotate_90_degrees_ccw', children: [ @@ -302,7 +305,8 @@ const MenuBar = { ]} ], { - condition: {modes: ['edit']} + icon: 'open_with', + condition: {modes: ['edit']}, }) new BarMenu('uv', UVEditor.menu.structure, { @@ -310,7 +314,7 @@ const MenuBar = { onOpen() { setActivePanel('uv'); } - }) + }, {icon: 'photo_size_select_large'}) new BarMenu('image', [ new MenuSeparator('adjustment'), @@ -330,6 +334,7 @@ const MenuBar = { 'resize_texture', 'crop_texture_to_selection' ], { + icon: 'image', condition: {modes: ['paint']} }) @@ -350,6 +355,7 @@ const MenuBar = { 'save_all_animations', 'export_animation_file' ], { + icon: 'movie', condition: {modes: ['animate']} }) @@ -373,6 +379,7 @@ const MenuBar = { 'resolve_keyframe_expressions', 'delete', ], { + icon: 'icon-keyframe', condition: {modes: ['animate']} }) @@ -382,7 +389,7 @@ const MenuBar = { onOpen() { setActivePanel('timeline'); } - }) + }, {icon: 'timeline'}) new BarMenu('display', [ new MenuSeparator('copypaste'), @@ -392,6 +399,7 @@ const MenuBar = { 'add_display_preset', 'apply_display_preset' ], { + icon: 'tune', condition: {modes: ['display']} }) @@ -427,7 +435,7 @@ const MenuBar = { 'convert_to_mesh', 'auto_set_cullfaces', 'remove_blank_faces', - ]) + ], {icon: 'handyman'}) MenuBar.menus.filter = MenuBar.menus.tools; new BarMenu('view', [ @@ -458,7 +466,7 @@ const MenuBar = { 'advanced_screenshot', 'record_model_gif', 'timelapse', - ]) + ], {icon: 'visibility'}) new BarMenu('help', [ new MenuSeparator('search'), {name: 'menu.help.search_action', description: BarItems.action_control.description, keybind: BarItems.action_control.keybind, id: 'search_action', icon: 'search', click: ActionControl.select}, @@ -515,7 +523,7 @@ const MenuBar = { 'reload', ]}, 'about_window' - ]) + ], {icon: 'help'}) MenuBar.update(); if (Blockbench.isMobile) { @@ -555,21 +563,43 @@ const MenuBar = { } }, openMobile(button, event) { - let entries = []; + if (document.getElementById('mobile_menu_bar')) { + document.getElementById('mobile_menu_bar').remove(); + return; + } + let bar = Interface.createElement('div', {id: 'mobile_menu_bar'}); + let menu_button_nodes = []; + let menu_position; + let setSelected = node => { + menu_button_nodes.forEach(n => n.classList.remove('selected')) + node.classList.add('selected'); + } for (let id in MenuBar.menus) { - if (id == 'filter') continue; let menu = MenuBar.menus[id]; - let entry = { - id, - icon: menu.icon || '', - name: menu.name, - children: menu.structure, - condition: menu.condition, - }; - entries.push(entry); + if (id == 'filter') continue; + if (!Condition(menu.condition)) continue; + + let node = Interface.createElement('div', {class: 'tool'}, Blockbench.getIconNode(menu.icon)); + addEventListeners(node, 'pointerdown touchmove', event => { + if (MenuBar.last_opened == menu) return; + MenuBar.last_opened = MenuBar.open = menu; + menu.open(menu_position); + setSelected(node); + }) + menu_button_nodes.push(node); + bar.append(node); + if (MenuBar.last_opened == menu) { + setTimeout(() => { + menu.open(menu_position); + setSelected(node); + }, 1) + } + } + document.body.append(bar); + menu_position = { + clientX: bar.offsetLeft + 7, + clientY: bar.offsetTop + bar.clientHeight - 1 } - let menu = new Menu(entries).open(button); - return menu; }, update() { if (!Blockbench.isMobile) { From e341012991c1a3e04397caa495eef54d3b8ba93e Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Sat, 11 May 2024 13:28:44 +0200 Subject: [PATCH 2/8] Fix icon alignments in header bar --- css/window.css | 12 ++++++------ index.html | 2 +- js/interface/menu_bar.js | 3 ++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/css/window.css b/css/window.css index fb201018c..c55d912ab 100644 --- a/css/window.css +++ b/css/window.css @@ -401,7 +401,7 @@ width: 68px; flex-shrink: 0; } - #settings_profiles_header_menu { + body:not(.is_mobile) #settings_profiles_header_menu { width: 24px; text-align: center; padding-top: 2px; @@ -586,19 +586,19 @@ li.menu_bar_point.highlighted { animation: menu_item_highlight 1s infinite ease-in-out; } - header .tool { + body.is_mobile header .tool { height: 100%; width: 42px; } - header .tool > .icon { + body.is_mobile header .tool > .icon { margin-top: 7px; } + body:not(.is_mobile) header .tool > .icon { + margin-top: 2px; + } header .tool.hidden { display: none; } - body.is_mobile.is_landscape #title_bar_undo_controls { - display: block; - } #mode_selector { height: 30px; diff --git a/index.html b/index.html index 89b188d16..bb688fde3 100644 --- a/index.html +++ b/index.html @@ -210,7 +210,7 @@

keyboardkeybindings.reco
home
-