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

Update UI colors and alignment for consistency with the design mockup (#157)

Browse Source 
Closes #111
This commit is contained in:
Keavon Chambers
2021-05-23 19:01:13 -07:00
parent 4b19a459b7
commit 34efac990b
21 changed files with 286 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
client/web/src/components/workspace/Panel.vue
View File

@@ -22,7 +22,7 @@
<style lang="scss">
.panel {
background: #111;
background: var(--color-1-nearblack);
border-radius: 8px;
flex-grow: 1;
display: flex;
@@ -35,7 +35,7 @@
flex-direction: row;
&.min-widths .tab-group .tab {
min-width: 120px;
min-width: 124px;
max-width: 360px;
}
@@ -47,13 +47,13 @@
.tab {
height: 100%;
padding: 0 10px;
padding: 0 8px;
display: flex;
align-items: center;
position: relative;
&.active {
background: #333;
background: var(--color-3-darkgray);
border-radius: 8px 8px 0 0;
position: relative;
@@ -69,13 +69,13 @@
&:not(:first-child)::before {
left: -16px;
border-bottom-right-radius: 8px;
box-shadow: 8px 0 0 0 #333;
box-shadow: 8px 0 0 0 var(--color-3-darkgray);
}
&::after {
right: -16px;
border-bottom-left-radius: 8px;
box-shadow: -8px 0 0 0 #333;
box-shadow: -8px 0 0 0 var(--color-3-darkgray);
}
}
@@ -102,7 +102,7 @@
left: -1px;
width: 1px;
height: 16px;
background: #444;
background: var(--color-4-dimgray);
}
}
@@ -115,15 +115,19 @@
right: -1px;
width: 1px;
height: 16px;
background: #444;
background: var(--color-4-dimgray);
}
}
}
}
.popover-button {
margin: 2px 4px;
}
}
.panel-body {
background: #333;
background: var(--color-3-darkgray);
flex-grow: 1;
}
}

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

@@ -5,21 +5,21 @@
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
:tabLabels="['X-35B Over Death Valley*', 'Document 1', '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">
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
<Panel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
<LayoutRow class="workspace-grid-subdivision">
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
<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">
<LayoutRow class="workspace-grid-subdivision folded">
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
@@ -29,6 +29,12 @@
<style lang="scss">
.workspace-grid-subdivision {
min-height: 28px;
flex: 1 1 0;
&.folded {
flex-grow: 0;
height: 0;
}
}
.workspace-grid-resize-gutter {