Make FloatingPane more flexible

baku89 · Sep 29, 2023 · eed0b8a · eed0b8a
1 parent ec45ead
commit eed0b8a
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 142 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
 		"@typescript-eslint/parser": "^6.7.0",
 		"@vitejs/plugin-vue": "^4.3.4",
 		"@vueuse/core": "^10.4.1",
-		"bndr-js": "^0.10.0",
+		"bndr-js": "^0.11.1",
 		"case": "^1.6.3",
 		"eslint": "^8.49.0",
 		"eslint-config-prettier": "^9.0.0",

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -360,45 +360,45 @@ window.addEventListener('drop', async e => {
 					:view-transform="viewTransform"
 				/>
 			</div>
-			<FloatingPane name="inspector" icon="code">
-				<Tabs class="inspector-tab" name="inspector.tab">
-					<template #before-tablist>
-						<RoundButton
-							class="play"
-							:icon="autoRefresh ? 'pause_circle' : 'play_circle'"
-							:label="autoRefresh ? 'Pause' : 'Resume'"
-							longest-label="Resume"
-							@click="autoRefresh = !autoRefresh"
-						/>
-					</template>
-					<Tab name="Settings">
-						<MonacoEditor v-model="meta" class="editor" lang="text" />
-					</Tab>
-					<Tab name="Code">
-						<MonacoEditor
-							v-model="code"
-							v-model:cursorIndex="cursorIndex"
-							v-model:cursorPosition="cursorPosition"
-							class="editor"
-							lang="javascript"
-							:errors="errors"
-						/>
-						<OverlayColorPicker
-							v-model:code="code"
-							v-model:visible="colorPickerVisible"
-							:cursor-index="cursorIndex"
-							:cursor-position="cursorPosition"
-						/>
-						<OverlayNumberSlider
-							v-show="!colorPickerVisible"
-							v-model:code="code"
-							v-model:cursorIndex="cursorIndex"
-							:cursor-position="cursorPosition"
-						/>
-					</Tab>
-				</Tabs>
-			</FloatingPane>
 		</main>
+		<FloatingPane name="inspector-pane" icon="code">
+			<Tabs class="inspector-tab" name="inspector.tab">
+				<template #before-tablist>
+					<RoundButton
+						class="play"
+						:icon="autoRefresh ? 'pause_circle' : 'play_circle'"
+						:label="autoRefresh ? 'Pause' : 'Resume'"
+						longest-label="Resume"
+						@click="autoRefresh = !autoRefresh"
+					/>
+				</template>
+				<Tab name="Settings">
+					<MonacoEditor v-model="meta" class="editor" lang="text" />
+				</Tab>
+				<Tab name="Code">
+					<MonacoEditor
+						v-model="code"
+						v-model:cursorIndex="cursorIndex"
+						v-model:cursorPosition="cursorPosition"
+						class="editor"
+						lang="javascript"
+						:errors="errors"
+					/>
+					<OverlayColorPicker
+						v-model:code="code"
+						v-model:visible="colorPickerVisible"
+						:cursor-index="cursorIndex"
+						:cursor-position="cursorPosition"
+					/>
+					<OverlayNumberSlider
+						v-show="!colorPickerVisible"
+						v-model:code="code"
+						v-model:cursorIndex="cursorIndex"
+						:cursor-position="cursorPosition"
+					/>
+				</Tab>
+			</Tabs>
+		</FloatingPane>
 	</div>
 </template>