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

Remake node type icons (closes #483); color picker cleanup

Browse Source
This commit is contained in:
Keavon Chambers
2022-03-04 22:48:22 -08:00
parent 8a05712dac
commit 788f8db127
12 changed files with 101 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/LayerTree.vue
+13 -6
View File
@@ -32,7 +32,7 @@
<LayoutRow></LayoutRow>
<LayoutRow>
<!-- TODO: Remember to make these tooltip input hints customized to macOS also -->
<IconButton :action="createEmptyFolder" :icon="'NewLayer'" title="New Folder (Ctrl+Shift+N)" :size="16" />
<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="16" />
<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="16" />
</LayoutRow>
</LayoutRow>
@@ -74,8 +74,9 @@
:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`"
>
<LayoutRow class="layer-type-icon">
<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />
<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" title="Folder" />
<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodePath'" title="Path" />
<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" title="Path" />
</LayoutRow>
<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
<input
@@ -142,7 +143,7 @@
flex: 0 0 auto;
align-items: center;
position: relative;
height: 36px;
height: 32px;
margin: 0 4px;
border-bottom: 1px solid var(--color-4-dimgray);
@@ -217,6 +218,12 @@
.layer-type-icon {
flex: 0 0 auto;
margin: 0 4px;
.icon-label {
border-radius: 2px;
background: var(--color-node-background);
fill: var(--color-node-icon);
}
}
.layer-name {
@@ -260,10 +267,10 @@
}
.thumbnail {
height: calc(100% - 4px);
width: 36px;
height: 24px;
margin: 2px 0;
margin-left: 4px;
width: 64px;
background: white;
border-radius: 2px;
flex: 0 0 auto;
frontend/src/components/panels/Properties.vue
+10
View File
@@ -21,10 +21,20 @@
.options-bar {
height: 32px;
flex: 0 0 auto;
.widget-row > .icon-label:first-of-type {
border-radius: 2px;
background: var(--color-node-background);
fill: var(--color-node-icon);
}
}
.sections {
flex: 1 1 100%;
.widget-section + .widget-section {
margin-top: 1px;
}
}
}
</style>