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

Rename Panel Area -> Workspace and Dockable Panel -> Workspace Panel

This commit is contained in:
Keavon Chambers 2021-05-16 18:15:04 -07:00
parent 11e408523a
commit b7b329c85a
4 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/web/src/components/panel-system/PanelArea.vue
View File

@ -1,60 +0,0 @@
<template>
<LayoutRow class="dockable-grid-subdivision">
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597">
<DockablePanel
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['X-35B Over Death Valley*', '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 :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
<LayoutRow class="dockable-grid-subdivision">
<DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0">
<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
</template>
<style lang="scss">
.dockable-grid-subdivision {
min-height: 28px;
}
.dockable-grid-resize-gutter {
flex: 0 0 4px;
&.layout-row {
cursor: ns-resize;
}
&.layout-col {
cursor: ew-resize;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import DockablePanel from "./DockablePanel.vue";
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
DockablePanel,
},
});
</script>

10
client/web/src/components/window/MainWindow.vue
View File

@ -3,8 +3,8 @@
<LayoutRow :class="'title-bar'">
<TitleBar :platform="platform" :maximized="maximized" />
</LayoutRow>
<LayoutRow :class="'panel-container'">
<PanelArea />
<LayoutRow :class="'workspace'">
<Workspace />
</LayoutRow>
<LayoutRow :class="'status-bar'">
<StatusBar />
@ -22,7 +22,7 @@
flex: 0 0 auto;
}
.panel-container {
.workspace {
flex: 1 1 100%;
height: 100%;
}
@ -37,7 +37,7 @@
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import PanelArea from "../panel-system/PanelArea.vue";
import Workspace from "../workspace/Workspace.vue";
import TitleBar from "./title-bar/TitleBar.vue";
import StatusBar from "./status-bar/StatusBar.vue";
@ -53,7 +53,7 @@ export default defineComponent({
LayoutRow,
LayoutCol,
TitleBar,
PanelArea,
Workspace,
StatusBar,
},
data() {

60
client/web/src/components/workspace/Workspace.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<LayoutRow class="workspace-grid-subdivision">
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
<WorkspacePanel
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
:tabActiveIndex="0"
/>
</LayoutCol>
<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
<LayoutRow class="workspace-grid-subdivision">
<WorkspacePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
<LayoutRow class="workspace-grid-subdivision">
<WorkspacePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
<WorkspacePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
</template>
<style lang="scss">
.workspace-grid-subdivision {
min-height: 28px;
}
.workspace-grid-resize-gutter {
flex: 0 0 4px;
&.layout-row {
cursor: ns-resize;
}
&.layout-col {
cursor: ew-resize;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import WorkspacePanel from "./WorkspacePanel.vue";
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
WorkspacePanel,
},
});
</script>

8
client/web/src/components/panel-system/DockablePanel.vue → client/web/src/components/workspace/WorkspacePanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="panel">
<div class="workspace-panel">
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
<div class="tab-group">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
@ -11,14 +11,14 @@
</div>
<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis" />
</div>
<div class="panel-content">
<div class="panel-body">
<component :is="panelType" />
</div>
</div>
</template>
<style lang="scss">
.panel {
.workspace-panel {
background: #111;
border-radius: 8px;
flex-grow: 1;
@ -120,7 +120,7 @@
}
}
.panel-content {
.panel-body {
background: #333;
flex-grow: 1;
}