Mobile UI improvements

Redesign timeline toolbar

css/panels.css

@@ -21,6 +21,10 @@
 		box-sizing: content-box;
 		z-index: 14;
 	}
+	body.is_mobile .panel {
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
 	h3.panel_handle {
 		display: flex;
 		width: 100%;

css/spectrum.css

@@ -248,11 +248,8 @@ License: MIT
 .sp-cf:after { clear: both; }
 .sp-cf { *zoom: 1; }
 
-/* Mobile devices, make hue slider bigger so it is easier to slide */
+body.is_touch .sp-fill { padding-top: 64%; }
 
-body.is_touch .sp-color { right: 40%; }
-body.is_touch .sp-hue { left: 63%; }
-body.is_touch .sp-fill { padding-top: 60%; }
 .sp-dragger {
    border-radius: 6px;
    height: 8px;

css/window.css

@@ -307,7 +307,7 @@
 	}
 	body.is_mobile.is_landscape #work_screen {
 		grid-template-columns: auto 48px !important;
-		grid-template-rows: auto minmax(200px, 5000px) 26px !important;
+		grid-template-rows: auto minmax(100px, 5000px) 26px !important;
 		grid-template-areas: 
 			"toolbar panel_selector"
 			"center panel_selector"
@@ -347,6 +347,9 @@
 		display: none;
 	}
 
+	body.is_mobile #preview {
+		overflow: hidden;
+	}
 	body.is_mobile #panel_selector_bar {
 		display: flex;
 		grid-area: panel_selector;

js/interface/actions.js

@@ -2047,25 +2047,27 @@ const BARS = {
 		Blockbench.onUpdateTo('4.0', () => {
 			Toolbars.keyframe.add(BarItems.keyframe_uniform, 2);
 		})
+		Blockbench.onUpdateTo('4.2.0-beta.0', () => {
+			delete BARS.stored.timeline;
+		})
 		Toolbars.timeline = new Toolbar({
 			id: 'timeline',
 			children: [
 				'timeline_graph_editor',
 				'timeline_focus',
 				'clear_timeline',
+				'bring_up_all_animations',
 				'select_effect_animator',
 				'add_marker',
-				'_',
-				'slider_animation_speed',
-				'previous_keyframe',
-				'next_keyframe',
+				'+',
+				'jump_to_timeline_start',
 				'play_animation',
+				'jump_to_timeline_end',
+				'+',
+				'slider_animation_speed',
 			],
 			default_place: true
 		})
-		Blockbench.onUpdateTo('3.8', () => {
-			Toolbars.timeline.add(BarItems.timeline_graph_editor, 0);
-		})
 		//Tools
 		Toolbars.main_tools = new Toolbar({
 			id: 'main_tools',

js/interface/interface.js

@@ -338,8 +338,10 @@ function setupInterface() {
 		'timelapse',
 	])
 	
-	if (Blockbench.isMobile && window.setupMobilePanelSelector) {
+	if (Blockbench.isMobile) {
 		setupMobilePanelSelector()
+		Prop.show_right_bar = false;
+		Prop.show_left_bar = false;
 	}
 
 	for (var key in Interface.Resizers) {

js/outliner/group.js

@@ -66,10 +66,11 @@ class Group extends OutlinerNode {
 		Canvas.updateAllBones([this]);
 		return this;
 	}
-	select(event) {
+	select(event, isOutlinerClick) {
 		var scope = this;
 		if (Blockbench.hasFlag('renaming') || this.locked) return this;
 		if (!event) event = true
+		if (isOutlinerClick && event.pointerType == 'touch') return;
 		var allSelected = Group.selected === this && selected.length && this.matchesSelection()
 
 		//Clear Old Group
@@ -85,7 +86,7 @@ class Group extends OutlinerNode {
 		Group.selected = this;
 
 		//Select / Unselect Children
-		if (allSelected && event.which === 1) {
+		if (allSelected && (event.which === 1 || event instanceof TouchEvent)) {
 			//Select Only Group, unselect Children
 			selected.length = 0
 		} else {