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

CSS editor layout fixes and scrolling

Browse Source 
Major CSS improvements to layout at small screen sizes. By adding min-width: 0 and min-height: 0 on the nested display: flex structure, widgets no longer coerce the whole layout into large-scale resizing. Scrollbars are now used to allow correct overflowing of the tab bar (fixes #177), Document Panel options bar, and tool shelf. Improvements to responsive resizing are also included for viewing the UI correctly on mobile now. Additional small fixes to styling of widget colors and corner roundness. The ruler has been darkened one shade to improve text contrast and aesthetics.
This commit is contained in:
Keavon Chambers
2021-12-04 22:30:07 -08:00
parent 27da663d83
commit 71e967d043
16 changed files with 105 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+18 -4
View File
@@ -1,6 +1,6 @@
<template>
<LayoutCol :class="'document'">
<LayoutRow :class="'options-bar'">
<LayoutRow :class="'options-bar scrollable-x'">
<div class="left side">
<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
@@ -34,7 +34,7 @@
<Separator :type="SeparatorType.Unrelated" />
<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" />
<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" class="combined-after" />
<PopoverButton>
<h3>View Mode</h3>
<p>The contents of this popover menu are coming soon</p>
@@ -42,7 +42,7 @@
<Separator :type="SeparatorType.Section" />
<NumberInput @update:value="setRotation" v-model:value="documentRotation" :incrementFactor="15" :unit="`°`" ref="rotation" />
<NumberInput @update:value="setRotation" v-model:value="documentRotation" :incrementFactor="15" :unit="`°`" />
<Separator :type="SeparatorType.Section" />
@@ -68,7 +68,7 @@
</LayoutRow>
<LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'">
<div class="tools">
<div class="tools scrollable-y">
<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => comingSoon(289) && selectTool('Crop')" />
<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => comingSoon(155) && selectTool('Navigate')" />
@@ -163,6 +163,10 @@
align-items: center;
margin: 0 4px;
}
.spacer {
min-width: 40px;
}
}
.shelf-and-viewport {
@@ -171,7 +175,17 @@
display: flex;
flex-direction: column;
.tools {
flex: 0 1 auto;
}
.spacer {
flex: 1 0 auto;
min-height: 8px;
}
.working-colors .swap-and-reset {
flex: 0 0 auto;
display: flex;
}
}
frontend/src/components/panels/LayerTree.vue
+16
View File
@@ -132,6 +132,7 @@
.layer {
display: flex;
min-width: 0;
align-items: center;
border-radius: 2px;
background: var(--color-5-dullgray);
@@ -150,6 +151,7 @@
height: 100%;
background: white;
border-radius: 2px;
flex: 0 0 auto;
svg {
width: calc(100% - 4px);
@@ -161,6 +163,20 @@
.layer-type-icon {
margin-left: 8px;
margin-right: 4px;
flex: 0 0 auto;
}
.layer-name {
display: flex;
min-width: 0;
flex: 1 1 100%;
margin-right: 8px;
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}