mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-07-07 15:55:00 +00:00
Update some UI components to polish the frontend
This commit is contained in:
Keavon Chambers
parent
0004bbb14b
commit
2c88bee0ee
12 changed files with 40 additions and 23 deletions
|
|
@ -1,5 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<polygon ="15 12.5 12 10 12 12 4 12 4 4 6 4 3.5 1 1 4 3 4 3 13 12 13 12 15 15 12.5" />
|
||||
<path d="M13.5,5l-2.5,3h2c0,2.76-2.24,5-5,5v1c3.31,0,6-2.69,6-6h2l-2.5-3z" />
|
||||
<path d="M9,4v-1c-3.31,0-6,2.69-6,6H1l2.5,3,2.5-3h-2c0-2.76,2.24-5,5-5z" />
|
||||
<circle cx="8.5" cy="8.5" r="1.25" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 263 B |
|
|
@ -235,11 +235,11 @@
|
|||
.scrollable-y {
|
||||
overflow: hidden;
|
||||
|
||||
// Firefox (standardized in CSS, but less capable)
|
||||
scrollbar-width: thin;
|
||||
// Not supported in Safari
|
||||
scrollbar-color: var(--color-5-dullgray) transparent;
|
||||
|
||||
// WebKit (only in Chromium/Safari but more capable)
|
||||
// Safari (more capable, removed from recent versions of Chromium, possibly still supported in Safari but not tested)
|
||||
&::-webkit-scrollbar {
|
||||
width: calc(2px + 6px + 2px);
|
||||
height: calc(2px + 6px + 2px);
|
||||
|
|
|
|||
|
|
@ -614,23 +614,24 @@
|
|||
.tool-shelf {
|
||||
flex: 0 0 auto;
|
||||
justify-content: space-between;
|
||||
// A precaution in case the variables above somehow fail
|
||||
max-width: var(--columns-width-max);
|
||||
|
||||
.tools {
|
||||
flex: 0 1 auto;
|
||||
|
||||
// Disabled because Firefox appears to have switched to using overlay scrollbars which float atop the content and don't affect the layout (as of FF 135 on Windows).
|
||||
// We'll keep this here in case it's needed in the future.
|
||||
//
|
||||
// Firefox-specific workaround for this bug causing the scrollbar to cover up the toolbar instead of widening to accommodate the scrollbar:
|
||||
// <https://bugzilla.mozilla.org/show_bug.cgi?id=764076>
|
||||
// <https://stackoverflow.com/questions/63278303/firefox-does-not-take-vertical-scrollbar-width-into-account-when-calculating-par>
|
||||
// Remove this when the Firefox bug is fixed.
|
||||
@-moz-document url-prefix() {
|
||||
--available-height-plus-1: calc(var(--available-height) + 1px);
|
||||
--3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--separator-height));
|
||||
--overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
|
||||
--firefox-scrollbar-width-space-occupied: 8; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
|
||||
padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
|
||||
}
|
||||
// @-moz-document url-prefix() {
|
||||
// --available-height-plus-1: calc(var(--available-height) + 1px);
|
||||
// --3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--height-of-separator));
|
||||
// --overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
|
||||
// --firefox-scrollbar-width-space-occupied: 2; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
|
||||
// padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
|
||||
// }
|
||||
|
||||
.widget-span {
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -146,11 +146,12 @@
|
|||
}
|
||||
|
||||
&.flush {
|
||||
background: none;
|
||||
--button-background-color: none;
|
||||
--button-text-color: var(--color-e-nearwhite);
|
||||
|
||||
&:hover,
|
||||
&.open {
|
||||
background: var(--color-5-dullgray);
|
||||
--button-background-color: var(--color-5-dullgray);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@
|
|||
|
||||
.dropdown-arrow {
|
||||
margin: 4px;
|
||||
margin-right: 2px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
dispatch("fontFamily", newName);
|
||||
|
||||
family = newName;
|
||||
style = "Normal (400)";
|
||||
style = "Regular (400)";
|
||||
}
|
||||
|
||||
const fontFileUrl = await fonts.getFontFileUrl(family, style);
|
||||
|
|
|
|||
|
|
@ -739,10 +739,6 @@
|
|||
// An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-4-dimgray);
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
padding-left: 7px;
|
||||
|
|
@ -774,6 +770,18 @@
|
|||
border-color: transparent var(--color-e-nearwhite) transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-4-dimgray);
|
||||
|
||||
&::before {
|
||||
border-color: transparent transparent transparent var(--color-f-white);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent var(--color-f-white) transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
&.section {
|
||||
// If changing this, update `--separator-height` in `Document.svelte`
|
||||
// If changing this, update `--height-of-separator` in `Document.svelte`
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const weightNameMapping = new Map([
|
|||
[100, "Thin"],
|
||||
[200, "Extra Light"],
|
||||
[300, "Light"],
|
||||
[400, "Normal"],
|
||||
[400, "Regular"],
|
||||
[500, "Medium"],
|
||||
[600, "Semi Bold"],
|
||||
[700, "Bold"],
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ pub const LAYER_OUTLINE_STROKE_WEIGHT: f64 = 1.;
|
|||
|
||||
// Fonts
|
||||
pub const DEFAULT_FONT_FAMILY: &str = "Cabin";
|
||||
pub const DEFAULT_FONT_STYLE: &str = "Normal (400)";
|
||||
pub const DEFAULT_FONT_STYLE: &str = "Regular (400)";
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ use std::collections::HashMap;
|
|||
pub struct Font {
|
||||
#[serde(rename = "fontFamily")]
|
||||
pub font_family: String,
|
||||
#[serde(rename = "fontStyle")]
|
||||
#[serde(rename = "fontStyle", deserialize_with = "migrate_font_style")]
|
||||
pub font_style: String,
|
||||
}
|
||||
impl Font {
|
||||
|
|
@ -73,3 +73,9 @@ impl core::hash::Hash for FontCache {
|
|||
self.font_file_data.keys().for_each(|font| font.hash(state));
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Eventually remove this migration document upgrade code
|
||||
fn migrate_font_style<'de, D: serde::Deserializer<'de>>(deserializer: D) -> Result<String, D::Error> {
|
||||
use serde::Deserialize;
|
||||
String::deserialize(deserializer).map(|name| if name == "Normal (400)" { "Regular (400)".to_string() } else { name })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -191,6 +191,7 @@ In addition to the detailed projects above, here are some loose ideas that may b
|
|||
- [Node equivalence rewriting](https://github.com/GraphiteEditor/Graphite/issues/2021)
|
||||
- Snapping system overhaul
|
||||
- Advanced vector editing tool modes (segment editing, mesh vector, and more)
|
||||
- Meticulous tooling polishing and gizmo additions
|
||||
|
||||
## Successful past projects
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue