fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-18 18:38:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rename and organize widget components to conform to design terminology (#132)

Browse Source
This commit is contained in:
Keavon Chambers
2021-05-21 13:10:32 -07:00
committed by GitHub
parent c8eea1e4b1
commit c97cb9905c
17 changed files with 251 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/web/src/components/workspace/WorkspacePanel.vue → client/web/src/components/workspace/Panel.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="workspace-panel">
<div class="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">
@@ -9,10 +9,10 @@
</IconButton>
</div>
</div>
<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis">
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
<h3>Panel Options</h3>
<p>More panel-related options will be here</p>
</DropdownButton>
</PopoverButton>
</div>
<div class="panel-body">
<component :is="panelType" />
@@ -21,7 +21,7 @@
</template>
<style lang="scss">
.workspace-panel {
.panel {
background: #111;
border-radius: 8px;
flex-grow: 1;
@@ -135,9 +135,9 @@ import Document from "../panels/Document.vue";
import Properties from "../panels/Properties.vue";
import LayerTree from "../panels/LayerTree.vue";
import Minimap from "../panels/Minimap.vue";
import IconButton from "../widgets/IconButton.vue";
import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
import { PopoverDirection } from "../widgets/PopoverMount.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
@@ -148,7 +148,7 @@ export default defineComponent({
LayerTree,
Minimap,
IconButton,
DropdownButton,
PopoverButton,
CloseX,
VerticalEllipsis,
},
@@ -161,7 +161,7 @@ export default defineComponent({
},
data() {
return {
DropdownButtonIcon,
PopoverButtonIcon,
PopoverDirection,
};
},

12
client/web/src/components/workspace/Workspace.vue
View File

@@ -1,7 +1,7 @@
<template>
<LayoutRow class="workspace-grid-subdivision">
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
<WorkspacePanel
<Panel
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
@@ -12,15 +12,15 @@
<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" />
<Panel :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" />
<Panel :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" />
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
@@ -48,13 +48,13 @@
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import WorkspacePanel from "./WorkspacePanel.vue";
import Panel from "./Panel.vue";
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
WorkspacePanel,
Panel,
},
});
</script>