Remake node type icons (closes #483); color picker cleanup
This commit is contained in:
Keavon Chambers
parent
8a05712dac
commit
788f8db127
|
|
@ -162,7 +162,7 @@ impl MessageHandler<PropertiesPanelMessage, &GrapheneDocument> for PropertiesPan
|
|||
ModifyStroke { color, weight } => {
|
||||
let path = self.active_path.clone().expect("Received update for properties panel with no active layer");
|
||||
let layer = graphene_document.layer(&path).unwrap();
|
||||
if let Some(color) = Color::from_rgba_str(&color).or(Color::from_rgb_str(&color)) {
|
||||
if let Some(color) = Color::from_rgba_str(&color).or_else(|| Color::from_rgb_str(&color)) {
|
||||
let stroke = Stroke::new(color, weight as f32);
|
||||
responses.push_back(Operation::SetLayerStroke { path, stroke }.into())
|
||||
} else {
|
||||
|
|
@ -214,15 +214,15 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque<Message>) {
|
|||
widgets: vec![
|
||||
match &layer.data {
|
||||
LayerDataType::Folder(_) => WidgetHolder::new(Widget::IconLabel(IconLabel {
|
||||
icon: "NodeTypeFolder".into(),
|
||||
icon: "NodeFolder".into(),
|
||||
gap_after: true,
|
||||
})),
|
||||
LayerDataType::Shape(_) => WidgetHolder::new(Widget::IconLabel(IconLabel {
|
||||
icon: "NodeTypePath".into(),
|
||||
icon: "NodePath".into(),
|
||||
gap_after: true,
|
||||
})),
|
||||
LayerDataType::Text(_) => WidgetHolder::new(Widget::IconLabel(IconLabel {
|
||||
icon: "NodeTypePath".into(),
|
||||
icon: "NodeText".into(),
|
||||
gap_after: true,
|
||||
})),
|
||||
},
|
||||
|
|
@ -258,7 +258,7 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque<Message>) {
|
|||
vec![]
|
||||
}
|
||||
LayerDataType::Shape(shape) => {
|
||||
if let Some(fill_layout) = node_section_fill(&shape.style.fill()) {
|
||||
if let Some(fill_layout) = node_section_fill(shape.style.fill()) {
|
||||
vec![node_section_transform(layer), fill_layout, node_section_stroke(&shape.style.stroke().unwrap_or_default())]
|
||||
} else {
|
||||
vec![node_section_transform(layer), node_section_stroke(&shape.style.stroke().unwrap_or_default())]
|
||||
|
|
@ -267,7 +267,7 @@ fn register_layer_properties(layer: &Layer, responses: &mut VecDeque<Message>) {
|
|||
LayerDataType::Text(text) => {
|
||||
vec![
|
||||
node_section_transform(layer),
|
||||
node_section_fill(&text.style.fill()).expect("Text should have fill"),
|
||||
node_section_fill(text.style.fill()).expect("Text should have fill"),
|
||||
node_section_stroke(&text.style.stroke().unwrap_or_default()),
|
||||
]
|
||||
}
|
||||
|
|
@ -421,13 +421,13 @@ fn node_section_fill(fill: &Fill) -> Option<LayoutRow> {
|
|||
..TextLabel::default()
|
||||
})),
|
||||
WidgetHolder::new(Widget::Separator(Separator {
|
||||
separator_type: SeparatorType::Related,
|
||||
separator_type: SeparatorType::Unrelated,
|
||||
direction: SeparatorDirection::Horizontal,
|
||||
})),
|
||||
WidgetHolder::new(Widget::ColorInput(ColorInput {
|
||||
value: color.rgba_hex(),
|
||||
on_update: WidgetCallback::new(|text_input: &ColorInput| {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) {
|
||||
let new_fill = Fill::Solid(color);
|
||||
PropertiesPanelMessage::ModifyFill { fill: new_fill }.into()
|
||||
} else {
|
||||
|
|
@ -452,13 +452,13 @@ fn node_section_fill(fill: &Fill) -> Option<LayoutRow> {
|
|||
..TextLabel::default()
|
||||
})),
|
||||
WidgetHolder::new(Widget::Separator(Separator {
|
||||
separator_type: SeparatorType::Related,
|
||||
separator_type: SeparatorType::Unrelated,
|
||||
direction: SeparatorDirection::Horizontal,
|
||||
})),
|
||||
WidgetHolder::new(Widget::ColorInput(ColorInput {
|
||||
value: gradient_1.positions[0].1.rgba_hex(),
|
||||
on_update: WidgetCallback::new(move |text_input: &ColorInput| {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) {
|
||||
let mut new_gradient = (*gradient_1).clone();
|
||||
new_gradient.positions[0].1 = color;
|
||||
PropertiesPanelMessage::ModifyFill {
|
||||
|
|
@ -480,13 +480,13 @@ fn node_section_fill(fill: &Fill) -> Option<LayoutRow> {
|
|||
..TextLabel::default()
|
||||
})),
|
||||
WidgetHolder::new(Widget::Separator(Separator {
|
||||
separator_type: SeparatorType::Related,
|
||||
separator_type: SeparatorType::Unrelated,
|
||||
direction: SeparatorDirection::Horizontal,
|
||||
})),
|
||||
WidgetHolder::new(Widget::ColorInput(ColorInput {
|
||||
value: gradient_2.positions[1].1.rgba_hex(),
|
||||
on_update: WidgetCallback::new(move |text_input: &ColorInput| {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or(Color::from_rgb_str(&text_input.value)) {
|
||||
if let Some(color) = Color::from_rgba_str(&text_input.value).or_else(|| Color::from_rgb_str(&text_input.value)) {
|
||||
let mut new_gradient = (*gradient_2).clone();
|
||||
new_gradient.positions[1].1 = color;
|
||||
PropertiesPanelMessage::ModifyFill {
|
||||
|
|
@ -521,7 +521,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutRow {
|
|||
..TextLabel::default()
|
||||
})),
|
||||
WidgetHolder::new(Widget::Separator(Separator {
|
||||
separator_type: SeparatorType::Related,
|
||||
separator_type: SeparatorType::Unrelated,
|
||||
direction: SeparatorDirection::Horizontal,
|
||||
})),
|
||||
WidgetHolder::new(Widget::ColorInput(ColorInput {
|
||||
|
|
@ -544,7 +544,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutRow {
|
|||
..TextLabel::default()
|
||||
})),
|
||||
WidgetHolder::new(Widget::Separator(Separator {
|
||||
separator_type: SeparatorType::Related,
|
||||
separator_type: SeparatorType::Unrelated,
|
||||
direction: SeparatorDirection::Horizontal,
|
||||
})),
|
||||
WidgetHolder::new(Widget::NumberInput(NumberInput {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14,13H2c-0.55,0-1-0.45-1-1V6h5.42l1-1H15v7C15,12.55,14.55,13,14,13z" />
|
||||
<path d="M6,2H2C1.45,2,1,2.45,1,3v2h5l1-1h8c0-0.55-0.45-1-1-1H7L6,2z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 225 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.96,5.19c-0.16-0.53-0.72-0.83-1.25-0.66c-0.96,0.3-1.86,0.6-2.7,0.91V5H5v3.16c-2.36,1.31-3.56,2.32-3.65,2.4c-0.42,0.36-0.46,0.99-0.1,1.41c0.2,0.23,0.48,0.35,0.76,0.35c0.23,0,0.46-0.08,0.65-0.24c0.02-0.01,0.8-0.67,2.34-1.6V11h6V7.59c1.01-0.39,2.09-0.78,3.29-1.15C14.82,6.28,15.12,5.72,14.96,5.19z M9,9H7V7h2V9z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 394 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3,2v3h0.5c0,0,0-2,2.29-2H7v8.79C7,12.48,6.89,13,5,13v1h6v-1c-1.89,0-2-0.52-2-1.21V3h1.21c2.29,0,2.29,2,2.29,2H13V2H3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
|
|
@ -1,26 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g transform="translate(7 7)">
|
||||
<path fill="#ffffff" d="M15.22-2.74l-9-4c-0.78-0.34-1.66-0.34-2.44,0l-9,4C-6.3-2.26-7-1.19-7,0v10c0,1.19,0.7,2.26,1.78,2.74l9,4C4.17,16.91,4.58,17,5,17s0.83-0.09,1.22-0.26l9-4C16.3,12.26,17,11.19,17,10V0C17-1.19,16.3-2.26,15.22-2.74z" />
|
||||
<path fill="#dd83ff" d="M13.38,8.93L6,5.47c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,13.81c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,9.96,14.21,9.32,13.38,8.93z" />
|
||||
<path style="opacity:0.4; fill:url(#bottom)" d="M13.38,8.93L6,5.47c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,13.81c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,9.96,14.21,9.32,13.38,8.93z" />
|
||||
<path fill="#eac800" d="M13.38,4.29L6,0.83c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,9.17c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,5.32,14.21,4.68,13.38,4.29z" />
|
||||
<path style="opacity:0.4; fill:url(#middle)" d="M13.38,4.29L6,0.83c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,9.17c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,5.32,14.21,4.68,13.38,4.29z" />
|
||||
<path fill="#6eebff" d="M13.38-0.35L6-3.81c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,4.53c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,0.68,14.21,0.04,13.38-0.35z" />
|
||||
<path style="opacity:0.4; fill:url(#top)" d="M13.38-0.35L6-3.81c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,4.53c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,0.68,14.21,0.04,13.38-0.35z" />
|
||||
</g>
|
||||
<linearGradient id="top" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.454" x2="10.5551" y2="-25.454" gradientTransform="matrix(18.0005 0 0 -8.7219 -184.997 -226.0052)">
|
||||
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
|
||||
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
<linearGradient id="middle" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.459" x2="10.5551" y2="-25.459" gradientTransform="matrix(18.0005 0 0 -8.7209 -184.997 -221.3842)">
|
||||
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
|
||||
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
<linearGradient id="bottom" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.454" x2="10.5551" y2="-25.454" gradientTransform="matrix(18.0005 0 0 -8.7219 -184.997 -216.7282)">
|
||||
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
|
||||
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M23.34,4.06c0.14-0.94-0.18-1.88-0.85-2.55s-1.62-0.98-2.55-0.85c-5.27,0.77-10.61,0.77-15.88,0C3.12,0.53,2.18,0.84,1.51,1.51S0.53,3.13,0.66,4.06c0.77,5.27,0.77,10.61,0,15.88c-0.14,0.94,0.18,1.88,0.85,2.55s1.62,0.98,2.55,0.85c5.27-0.77,10.61-0.77,15.88,0c0.14,0.02,0.29,0.03,0.43,0.03c0.79,0,1.55-0.31,2.12-0.88c0.67-0.67,0.98-1.62,0.85-2.55C22.57,14.67,22.57,9.33,23.34,4.06z" />
|
||||
<path fill="#65bbe5" d="M19.89,9.01c-0.17,0.02-2.18,0.26-4.89,1.01V9H9v3.28c-1.6,0.79-3.2,1.75-4.64,2.95c-0.42,0.35-0.48,0.98-0.13,1.41C4.43,16.88,4.71,17,5,17c0.23,0,0.45-0.08,0.64-0.23C6.68,15.9,7.83,15.16,9,14.53V15h6v-2.9c2.88-0.84,5.07-1.1,5.11-1.11c0.55-0.06,0.94-0.56,0.88-1.11C20.93,9.34,20.43,8.95,19.89,9.01z M13,13h-2v-2h2V13z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 814 B |
|
|
@ -53,6 +53,7 @@
|
|||
--color-e-nearwhite-rgb: 238, 238, 238;
|
||||
--color-f-white: #fff;
|
||||
--color-f-white-rgb: 255, 255, 255;
|
||||
|
||||
--color-accent: #3194d6;
|
||||
--color-accent-rgb: 49, 148, 214;
|
||||
--color-accent-hover: #49a5e2;
|
||||
|
|
@ -62,6 +63,11 @@
|
|||
|
||||
--color-data-raster: #e4bb72;
|
||||
--color-data-raster-rgb: 228, 187, 114;
|
||||
|
||||
--color-node-background: #f1decd;
|
||||
--color-node-background-rgb: 241, 222, 205;
|
||||
--color-node-icon: #473a3a;
|
||||
--color-node-icon-rgb: 71, 58, 58;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<LayoutRow class="color-input">
|
||||
<TextInput :value="value" :label="label" :disabled="disabled" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
|
||||
<TextInput :value="displayValue" :label="label" :disabled="disabled" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
|
||||
<Separator :type="'Related'" />
|
||||
<LayoutRow class="swatch">
|
||||
<button class="swatch-button" @click="() => menuOpen()" :style="{ background: `#${value}` }"></button>
|
||||
<button class="swatch-button" @click="() => menuOpen()" :style="`--swatch-color: #${value}`"></button>
|
||||
<FloatingMenu :type="'Popover'" :direction="'Bottom'" horizontal ref="colorFloatingMenu">
|
||||
<ColorPicker @update:color="(color) => colorPickerUpdated(color)" :color="color" />
|
||||
</FloatingMenu>
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
position: relative;
|
||||
|
||||
.swatch-button {
|
||||
--swatch-color: #ffffff;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
bottom: 0;
|
||||
|
|
@ -30,6 +31,19 @@
|
|||
outline: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
|
||||
linear-gradient(#ffffff, #ffffff);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 8px 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--swatch-color);
|
||||
}
|
||||
}
|
||||
|
||||
.floating-menu {
|
||||
|
|
@ -67,6 +81,11 @@ export default defineComponent({
|
|||
const a = parseInt(this.value.slice(6, 8), 16);
|
||||
return { r, g, b, a: a / 255 };
|
||||
},
|
||||
displayValue() {
|
||||
const value = this.value.toLowerCase();
|
||||
const shortenedIfOpaque = value.slice(-2) === "ff" ? value.slice(0, 6) : value;
|
||||
return `#${shortenedIfOpaque}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
colorPickerUpdated(color: RGBA) {
|
||||
|
|
@ -76,9 +95,22 @@ export default defineComponent({
|
|||
this.$emit("update:value", newValue);
|
||||
},
|
||||
textInputUpdated(newValue: string) {
|
||||
if ((newValue.length !== 6 && newValue.length !== 8) || !newValue.match(/[A-F,a-f,0-9]*/)) return;
|
||||
const sanitizedMatch = newValue.match(/^\s*#?([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\s*$/);
|
||||
if (!sanitizedMatch) return;
|
||||
|
||||
this.$emit("update:value", newValue);
|
||||
let sanitized;
|
||||
const match = sanitizedMatch[1];
|
||||
if (match.length === 3) {
|
||||
sanitized = match
|
||||
.split("")
|
||||
.map((byte) => `${byte}${byte}`)
|
||||
.concat("ff")
|
||||
.join("");
|
||||
} else if (match.length === 6) sanitized = `${match}ff`;
|
||||
else if (match.length === 8) sanitized = match;
|
||||
else return;
|
||||
|
||||
this.$emit("update:value", sanitized);
|
||||
},
|
||||
menuOpen() {
|
||||
(this.$refs.colorFloatingMenu as typeof FloatingMenu).setOpen();
|
||||
|
|
|
|||
|
|
@ -369,7 +369,7 @@ export class LayerMetadata {
|
|||
selected!: boolean;
|
||||
}
|
||||
|
||||
export type LayerType = "Folder" | "Shape" | "Circle" | "Rect" | "Line" | "PolyLine" | "Ellipse";
|
||||
export type LayerType = "Folder" | "Shape" | "Text";
|
||||
|
||||
export class IndexedDbDocumentDetails extends DocumentDetails {
|
||||
@Transform(({ value }: { value: BigInt }) => value.toString())
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// 12px Solid
|
||||
import Checkmark from "@/../assets/12px-solid/checkmark.svg";
|
||||
import CloseX from "@/../assets/12px-solid/close-x.svg";
|
||||
import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
|
||||
|
|
@ -28,6 +29,7 @@ import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-ma
|
|||
import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
|
||||
import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
|
||||
|
||||
// 16px Solid
|
||||
import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
|
||||
import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
|
||||
import AlignLeft from "@/../assets/16px-solid/align-left.svg";
|
||||
|
|
@ -47,6 +49,9 @@ import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
|
|||
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
|
||||
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
|
||||
import NewLayer from "@/../assets/16px-solid/new-layer.svg";
|
||||
import NodeFolder from "@/../assets/16px-solid/node-folder.svg";
|
||||
import NodePath from "@/../assets/16px-solid/node-path.svg";
|
||||
import NodeText from "@/../assets/16px-solid/node-text.svg";
|
||||
import Paste from "@/../assets/16px-solid/paste.svg";
|
||||
import Trash from "@/../assets/16px-solid/trash.svg";
|
||||
import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
|
||||
|
|
@ -59,6 +64,7 @@ import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
|
|||
import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
|
||||
import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
|
||||
|
||||
// 16px Two-Tone
|
||||
import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
|
||||
import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
|
||||
import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
|
||||
|
|
@ -70,9 +76,7 @@ import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
|
|||
import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
|
||||
import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
|
||||
|
||||
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
|
||||
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
|
||||
|
||||
// 24px Two-Tone
|
||||
import GeneralCropTool from "@/../assets/24px-two-tone/general-crop-tool.svg";
|
||||
import GeneralEyedropperTool from "@/../assets/24px-two-tone/general-eyedropper-tool.svg";
|
||||
import GeneralFillTool from "@/../assets/24px-two-tone/general-fill-tool.svg";
|
||||
|
|
@ -96,12 +100,11 @@ import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
|
|||
import VectorTextTool from "@/../assets/24px-two-tone/vector-text-tool.svg";
|
||||
|
||||
export type IconName = keyof typeof ICON_LIST;
|
||||
export type IconSize = 12 | 16 | 24 | 32;
|
||||
export type IconSize = 12 | 16 | 24;
|
||||
|
||||
const size12: IconSize = 12;
|
||||
const size16: IconSize = 16;
|
||||
const size24: IconSize = 24;
|
||||
// const size32: IconSize = 32;
|
||||
|
||||
export const ICON_LIST = {
|
||||
Checkmark: { component: Checkmark, size: size12 },
|
||||
|
|
@ -154,6 +157,9 @@ export const ICON_LIST = {
|
|||
GraphiteLogo: { component: GraphiteLogo, size: size16 },
|
||||
NewLayer: { component: NewLayer, size: size16 },
|
||||
Paste: { component: Paste, size: size16 },
|
||||
NodeFolder: { component: NodeFolder, size: size16 },
|
||||
NodePath: { component: NodePath, size: size16 },
|
||||
NodeText: { component: NodeText, size: size16 },
|
||||
Trash: { component: Trash, size: size16 },
|
||||
ViewModeNormal: { component: ViewModeNormal, size: size16 },
|
||||
ViewModeOutline: { component: ViewModeOutline, size: size16 },
|
||||
|
|
@ -176,9 +182,6 @@ export const ICON_LIST = {
|
|||
MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
|
||||
MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
|
||||
|
||||
NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
|
||||
NodeTypePath: { component: NodeTypePath, size: size24 },
|
||||
|
||||
GeneralCropTool: { component: GeneralCropTool, size: size24 },
|
||||
GeneralEyedropperTool: { component: GeneralEyedropperTool, size: size24 },
|
||||
GeneralNavigateTool: { component: GeneralNavigateTool, size: size24 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue