Rename primitives panel
This commit is contained in:
parent
8ca88e2542
commit
93a2ab9037
2 changed files with 8 additions and 8 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, computed, onMounted, watch } from 'vue'
|
||||||
import PrimitivesSidebar from './PrimitivesSidebar.vue'
|
import PrimitivesPanel from './PrimitivesPanel.vue'
|
||||||
import PropertiesPanel from './PropertiesPanel.vue'
|
import PropertiesPanel from './PropertiesPanel.vue'
|
||||||
|
|
||||||
const STORAGE_KEY = 'rapidmodel-sidebar-state'
|
const STORAGE_KEY = 'rapidmodel-sidebar-state'
|
||||||
|
|
@ -60,13 +60,13 @@ onMounted(() => {
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<PrimitivesSidebar
|
<PrimitivesPanel
|
||||||
v-model:collapsed="leftCollapsed"
|
v-model:collapsed="leftCollapsed"
|
||||||
class="left-sidebar"
|
class="left-sidebar"
|
||||||
:style="{ width: leftSidebarWidth }"
|
:style="{ width: leftSidebarWidth }"
|
||||||
>
|
>
|
||||||
<slot name="left-sidebar" />
|
<slot name="left-sidebar" />
|
||||||
</PrimitivesSidebar>
|
</PrimitivesPanel>
|
||||||
|
|
||||||
<PropertiesPanel class="properties-panel">
|
<PropertiesPanel class="properties-panel">
|
||||||
<slot name="properties-panel" />
|
<slot name="properties-panel" />
|
||||||
|
|
|
||||||
|
|
@ -25,16 +25,16 @@ function toggle() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="primitives-sidebar-container">
|
<div class="primitives-panel-container">
|
||||||
<button
|
<button
|
||||||
class="toggle"
|
class="toggle"
|
||||||
:class="{ 'toggle--floating': isCollapsed }"
|
:class="{ 'toggle--floating': isCollapsed }"
|
||||||
:title="isCollapsed ? 'Expand primitives toolbox' : 'Collapse primitives toolbox'"
|
:title="isCollapsed ? 'Expand primitives panel' : 'Collapse primitives panel'"
|
||||||
@click="toggle"
|
@click="toggle"
|
||||||
>
|
>
|
||||||
<span class="toggle-icon">{{ isCollapsed ? '»' : '«' }}</span>
|
<span class="toggle-icon">{{ isCollapsed ? '»' : '«' }}</span>
|
||||||
</button>
|
</button>
|
||||||
<aside v-show="!isCollapsed" class="primitives-sidebar">
|
<aside v-show="!isCollapsed" class="primitives-panel">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -43,13 +43,13 @@ function toggle() {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.primitives-sidebar-container {
|
.primitives-panel-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primitives-sidebar {
|
.primitives-panel {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue