jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Viewport panel layout scaffolding

This commit is contained in:
Keavon Chambers 2021-02-21 03:11:49 -08:00
parent 3582432fc7
commit 93e7da5917
6 changed files with 160 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web-frontend/src/components/panel-system/DockablePanel.vue
View File

@ -11,7 +11,7 @@
</div>
</div>
<div class="panel-content">
<component :is="panelType" />
</div>
</div>
</template>
@ -138,13 +138,24 @@
<script lang="ts">
import { defineComponent } from "vue";
import Viewport from "../panels/ViewportPanel.vue";
import Properties from "../panels/PropertiesPanel.vue";
import Layers from "../panels/LayersPanel.vue";
import Minimap from "../panels/MinimapPanel.vue";
export default defineComponent({
components: {
Viewport,
Properties,
Layers,
Minimap,
},
props: {
tabConstantWidths: { type: Boolean, default: false },
tabCloseButtons: { type: Boolean, default: false },
tabLabels: { type: Array, required: true },
tabActiveIndex: { type: Number, required: true },
panelType: { type: String, required: true },
},
});
</script>

8
web-frontend/src/components/panel-system/PanelArea.vue
View File

@ -1,20 +1,20 @@
<template>
<LayoutRow class="dockable-grid-subdivision">
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597;">
<DockablePanel :tabCloseButtons="true" :tabConstantWidths="true" :tabLabels="['X-35B*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
<DockablePanel :panelType="'Viewport'" :tabCloseButtons="true" :tabConstantWidths="true" :tabLabels="['X-35B*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
</LayoutCol>
<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">
<LayoutRow class="dockable-grid-subdivision">
<DockablePanel :tabLabels="['Properties', 'Typography', 'Colors']" :tabActiveIndex="0" />
<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Typography', 'Colors']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
<LayoutRow class="dockable-grid-subdivision">
<DockablePanel :tabLabels="['Layers']" :tabActiveIndex="0" />
<DockablePanel :panelType="'Layers'" :tabLabels="['Layers']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">
<DockablePanel :tabLabels="['Minimap', 'Brushes', 'Links']" :tabActiveIndex="0" />
<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Brushes', 'Links']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
</LayoutRow>

21
web-frontend/src/components/panels/LayersPanel.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { defineComponent } from "vue";
// import LayoutRow from "../layout/LayoutRow.vue";
// import LayoutCol from "../layout/LayoutCol.vue";
export default defineComponent({
components: {
},
props: {
},
});
</script>

21
web-frontend/src/components/panels/MinimapPanel.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { defineComponent } from "vue";
// import LayoutRow from "../layout/LayoutRow.vue";
// import LayoutCol from "../layout/LayoutCol.vue";
export default defineComponent({
components: {
},
props: {
},
});
</script>

21
web-frontend/src/components/panels/PropertiesPanel.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { defineComponent } from "vue";
// import LayoutRow from "../layout/LayoutRow.vue";
// import LayoutCol from "../layout/LayoutCol.vue";
export default defineComponent({
components: {
},
props: {
},
});
</script>

81
web-frontend/src/components/panels/ViewportPanel.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<LayoutCol :class="'viewport'">
<LayoutRow :class="'options-bar'">
<div class="left side">
<span class="label">Grab</span>
<div class="divider"></div>
</div>
<div class="spacer"></div>
<div class="right side">
<span class="label">Layer 1</span>
</div>
</LayoutRow>
<LayoutRow :class="'tools-and-viewport'">
<LayoutCol :class="'tools'"></LayoutCol>
<LayoutCol :class="'viewport-container'"></LayoutCol>
</LayoutRow>
</LayoutCol>
</template>
<style lang="scss">
.viewport {
height: 100%;
.options-bar {
flex: 0 0 32px;
.side {
height: 100%;
flex: 0 1 auto;
display: flex;
align-items: center;
margin: 0 4px;
> * {
margin: 0 4px;
}
.label {
white-space: nowrap;
font-weight: bold;
}
.divider {
width: 1px;
height: 24px;
background: #666;
}
}
.spacer {
flex: 1 1 100%;
}
}
.tools-and-viewport {
.tools {
flex: 0 0 32px;
}
.viewport-container {
background: #111;
flex: 1 1 100%;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
},
props: {
},
});
</script>