Improve new mobile header bar

index.html

@@ -190,7 +190,7 @@
 
 	<div id="overlay_message_box" style="display: none;">
 		<div>
-			<h3><i class="material-icons">keyboard</i><span class="tl">keybindings.recording</span></h3>
+			<h3><i class="material-icons icon">keyboard</i><span class="tl">keybindings.recording</span></h3>
 			<p class="tl">keybindings.press</p>
 			<button class="tl" onclick="Keybinds.recording.stopRecording()">dialog.cancel</button>
 			<button class="tl" onclick="Keybinds.recording.clear().stopRecording()">keybindings.clear</button>
@@ -206,11 +206,11 @@
 			<img class="blockbench_logo" src="assets/logo_text_white.svg" alt="Blockbench" />
 		</div>
 		<ul id="menu_bar" class="scroll_horizontal"></ul>
-		<div id="title_bar_home_button" class="tool" onclick="Interface.tab_bar.openNewTab()"><i class="material-icons">home</i></div>
+		<div id="title_bar_home_button" class="tool" onclick="Interface.tab_bar.openNewTab()"><i class="material-icons icon">home</i></div>
 		<div class="app-drag-region" id="header_free_bar"></div>
 		<div id="update_menu"></div>
 		<div id="settings_profiles_header_menu" class="hidden">
-			<i class="material-icons">manage_accounts</i>
+			<i class="material-icons icon">manage_accounts</i>
 		</div>
 		<ul id="windows_window_menu" hidden>
 			<li onclick="currentwindow.minimize()">
@@ -226,7 +226,7 @@
 		</ul>
 		<button id="web_download_button" hidden><a href="https://blockbench.net/downloads">
 			<span class="tl">web.download_app</span>
-			<i class="material-icons">system_update</i>
+			<i class="material-icons icon">system_update</i>
 		</a></button>
 	</header>
 	

js/interface/interface.js

@@ -476,6 +476,9 @@ function setupInterface() {
 		setupMobilePanelSelector()
 		Prop.show_right_bar = false;
 		Prop.show_left_bar = false;
+	} else {
+		let panel_selector_bar = document.getElementById('panel_selector_bar');
+		if (panel_selector_bar) panel_selector_bar.remove();
 	}
 
 	for (var key in Interface.Resizers) {

js/interface/menu_bar.js

@@ -546,7 +546,9 @@ const MenuBar = {
 			})
 			MenuBar.mode_switcher_button = mode_switcher;
 
-			let buttons = [menu_button, search_button, undo_button, redo_button, mode_switcher];
+			let home_button = document.getElementById('title_bar_home_button');
+
+			let buttons = [menu_button, search_button, home_button, undo_button, redo_button, mode_switcher];
 			buttons.forEach(button => {
 				header.append(button);
 			})

js/interface/panels.js

@@ -800,61 +800,59 @@ function setActivePanel(panel) {
 }
 
 function setupMobilePanelSelector() {
-	if (Blockbench.isMobile) {
-		Interface.PanelSelectorVue = new Vue({
-			el: '#panel_selector_bar',
-			data: {
-				all_panels: Interface.Panels,
-				selected: null,
-				modifiers: Pressing.overrides
-			},
-			computed: {
-			},
-			methods: {
-				panels() {
-					let arr = [];
-					for (var id in this.all_panels) {
-						let panel = this.all_panels[id];
-						if (Condition(panel.condition) && Condition(panel.display_condition)) {
-							arr.push(panel);
-						}
+	Interface.PanelSelectorVue = new Vue({
+		el: '#panel_selector_bar',
+		data: {
+			all_panels: Interface.Panels,
+			selected: null,
+			modifiers: Pressing.overrides
+		},
+		computed: {
+		},
+		methods: {
+			panels() {
+				let arr = [];
+				for (var id in this.all_panels) {
+					let panel = this.all_panels[id];
+					if (Condition(panel.condition) && Condition(panel.display_condition)) {
+						arr.push(panel);
 					}
-					return arr;
-				},
-				select(panel) {
-					this.selected = panel && panel.id;
-					for (let key in Panels) {
-						let panel_b = Panels[key];
-						if (panel_b.slot == 'bottom') {
-							$(panel_b.node).detach();
-							panel_b.position_data.slot = 'left_bar';
-						}
-					}
-					if (panel) {
-						panel.moveTo('bottom');
-						if (panel.folded) panel.fold();
-					} else {
-						resizeWindow();
-					}
-				},
-				openKeyboardMenu() {
-					openTouchKeyboardModifierMenu(this.$refs.mobile_keyboard_menu);
-				},
-				Condition,
-				getIconNode: Blockbench.getIconNode
+				}
+				return arr;
 			},
-			template: `
-				<div id="panel_selector_bar">
-					<div class="panel_selector" :class="{selected: selected == null}" @click="select(null)">
-						<div class="icon_wrapper"><i class="material-icons icon">3d_rotation</i></div>
-					</div>
-					<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()" ref="mobile_keyboard_menu" :class="{enabled: modifiers.ctrl || modifiers.shift || modifiers.alt}">
-						<i class="material-icons">keyboard</i>
-					</div>
-				</div>`
-		})
-	}
+			select(panel) {
+				this.selected = panel && panel.id;
+				for (let key in Panels) {
+					let panel_b = Panels[key];
+					if (panel_b.slot == 'bottom') {
+						$(panel_b.node).detach();
+						panel_b.position_data.slot = 'left_bar';
+					}
+				}
+				if (panel) {
+					panel.moveTo('bottom');
+					if (panel.folded) panel.fold();
+				} else {
+					resizeWindow();
+				}
+			},
+			openKeyboardMenu() {
+				openTouchKeyboardModifierMenu(this.$refs.mobile_keyboard_menu);
+			},
+			Condition,
+			getIconNode: Blockbench.getIconNode
+		},
+		template: `
+			<div id="panel_selector_bar">
+				<div class="panel_selector" :class="{selected: selected == null}" @click="select(null)">
+					<div class="icon_wrapper"><i class="material-icons icon">3d_rotation</i></div>
+				</div>
+				<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()" ref="mobile_keyboard_menu" :class="{enabled: modifiers.ctrl || modifiers.shift || modifiers.alt}">
+					<i class="material-icons">keyboard</i>
+				</div>
+			</div>`
+	})
 }

js/interface/start_screen.js

@@ -6,6 +6,31 @@ const StartScreen = {
 	}
 };
 
+/**
+ * 
+ * @param {string} id Identifier
+ * @param {object} data 
+ * @param {object} data.graphic
+ * @param {'icon'|string} data.graphic.type
+ * @param {string} data.graphic.icon
+ * @param {string} data.graphic.source
+ * @param {number} data.graphic.width
+ * @param {number} data.graphic.height
+ * @param {number} data.graphic.aspect_ratio Section aspect ratio
+ * @param {string} data.graphic.description Markdown string
+ * @param {string} data.graphic.text_color
+ * @param {Array.<{text: String, type: String, list: Array.String, click: Function}>} data.text
+ * @param {'vertical'|'horizontal'} data.layout
+ * @param {Array} data.features
+ * @param {boolean} data.closable
+ * @param {Function} data.click
+ * @param {string} data.color
+ * @param {string} data.text_color
+ * @param {boolean} data.last
+ * @param {string} data.insert_after
+ * @param {string} data.insert_before
+ * @returns 
+ */
 function addStartScreenSection(id, data) {
 	if (typeof id == 'object') {
 		data = id;

js/web.js

@@ -17,12 +17,12 @@ function initializeWebApp() {
 		event.preventDefault();
 		window.open(event.currentTarget.href, '_blank');
 	});
-	if (location.host == 'blockbench-dev.netlify.app') {
-		let button = $(`<a href="https://www.netlify.com/" style="padding: 3px 8px; color: white; cursor: pointer; text-decoration: none;" target="_blank" rel="noopener">
+	if (location.host == 'blockbench-dev.netlify.app' || true) {
+		let button = $(`<a href="https://www.netlify.com/" style="padding: 10px; color: white; cursor: pointer; text-decoration: none; display: block;" target="_blank" rel="noopener">
 				Hosted by
 				<img src="https://www.blockbench.net/_nuxt/74d4819838c06fa271394f626e8c4b16.svg" height="20px" style="vertical-align: text-top;">
 			</div>`);
-		button.insertBefore('#web_download_button');
+		button.insertBefore('#start_files');
 	}
 	if (!Blockbench.isTouch && !Blockbench.isPWA) {
 		$('#web_download_button').show()