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

Minor UI design style revamp

Browse Source
This commit is contained in:
Keavon Chambers
2023-04-27 02:05:45 -07:00
parent a4793fb284
commit 1f5bfdc2e5
43 changed files with 164 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/IconButton.svelte
+1 -6
View File
@@ -57,12 +57,7 @@
}
&:hover {
background: var(--color-6-lowergray);
color: var(--color-f-white);
svg {
fill: var(--color-f-white);
}
background: var(--color-5-dullgray);
}
&.disabled {
frontend/src/components/widgets/buttons/PopoverButton.svelte
+1 -2
View File
@@ -49,8 +49,7 @@
&:hover,
&.open {
background: var(--color-6-lowergray);
fill: var(--color-f-white);
background: var(--color-5-dullgray);
}
&.disabled {
frontend/src/components/widgets/inputs/ColorInput.svelte
+4 -2
View File
@@ -13,8 +13,10 @@
let open = false;
export let value: Color;
// export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
// export let disabled = false; // TODO: Design and implement
// TODO: Implement
// export let allowTransparency = false;
// export let allowNone = false;
// export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
frontend/src/components/widgets/inputs/DropdownInput.svelte
+2 -5
View File
@@ -114,6 +114,7 @@
.dropdown-icon {
margin: 4px;
margin-left: 8px;
flex: 0 0 auto;
& + .dropdown-label {
@@ -122,7 +123,7 @@
}
.dropdown-arrow {
margin: 6px 2px;
margin: 4px;
flex: 0 0 auto;
}
@@ -139,10 +140,6 @@
}
}
&.open {
border-radius: 2px 2px 0 0;
}
&.disabled {
background: var(--color-2-mildblack);
frontend/src/components/widgets/inputs/FieldInput.svelte
-1
View File
@@ -117,7 +117,6 @@
position: relative;
border-radius: 2px;
background: var(--color-1-nearblack);
overflow: hidden;
flex-direction: row-reverse;
label {
frontend/src/components/widgets/inputs/LayerReferenceInput.svelte
+3 -7
View File
@@ -43,10 +43,6 @@
dispatch("value", layerPath);
}
}
function getLayerTypeData(layerType: LayerType): LayerTypeData {
return layerTypeData(layerType) || { name: "Error", icon: "Info" };
}
</script>
<LayoutRow
@@ -62,8 +58,8 @@
<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
{:else}
{#if layerName !== undefined && layerType}
<IconLabel icon={getLayerTypeData(layerType).icon} class="layer-icon" />
<TextLabel italic={layerName === ""} class="layer-name">{layerName || getLayerTypeData(layerType).name}</TextLabel>
<IconLabel icon={layerTypeData(layerType).icon} class="layer-icon" />
<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerTypeData(layerType).name}`}</TextLabel>
{:else}
<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
{/if}
@@ -81,7 +77,7 @@
.drop-zone {
pointer-events: none;
border: 1px dashed var(--color-5-dullgray);
border: 1px dashed var(--color-4-dimgray);
border-radius: 1px;
position: absolute;
top: 2px;
frontend/src/components/widgets/inputs/MenuBarInput.svelte
+2 -13
View File
@@ -128,22 +128,11 @@
background: none;
border: 0;
margin: 0;
svg {
fill: var(--color-e-nearwhite);
}
border-radius: 2px;
&:hover,
&.open {
background: var(--color-6-lowergray);
svg {
fill: var(--color-f-white);
}
span {
color: var(--color-f-white);
}
background: var(--color-5-dullgray);
}
}
}
frontend/src/components/widgets/inputs/NumberInput.svelte
+2 -9
View File
@@ -317,18 +317,11 @@
margin: 0;
padding: 9px 0;
border: none;
border-radius: 2px;
background: rgba(var(--color-1-nearblack-rgb), 0.75);
&:hover {
background: var(--color-6-lowergray);
&.right::before {
border-color: transparent transparent transparent var(--color-f-white);
}
&.left::after {
border-color: transparent var(--color-f-white) transparent transparent;
}
background: var(--color-5-dullgray);
}
&.right {
frontend/src/components/widgets/labels/UserInputLabel.svelte
+50 -41
View File
@@ -36,6 +36,7 @@
export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
export let mouseMotion: MouseMotion | undefined = undefined;
export let requiresLock = false;
export let textOnly = false;
$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
@@ -117,7 +118,7 @@
{#if displayKeyboardLockNotice}
<IconLabel class="user-input-label keyboard-lock-notice" icon="Info" tooltip={keyboardLockInfoMessage} />
{:else}
<LayoutRow class="user-input-label">
<LayoutRow class="user-input-label" classes={{ "text-only": textOnly }}>
{#each keysWithLabelsGroups as keysWithLabels, groupIndex (groupIndex)}
{#if groupIndex > 0}
<Separator type="Related" />
@@ -152,56 +153,64 @@
align-items: center;
white-space: nowrap;
.input-key,
.input-mouse {
& + .input-key,
& + .input-mouse {
margin-left: 2px;
&.text-only {
.input-key + .input-key::before {
content: "+";
}
}
.input-key {
display: flex;
justify-content: center;
align-items: center;
font-family: "Inconsolata", monospace;
font-weight: 400;
text-align: center;
height: 16px;
box-sizing: border-box;
border: 1px solid;
border-radius: 4px;
border-color: var(--color-5-dullgray);
color: var(--color-e-nearwhite);
.text-label {
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
// so moving it up 1 pixel by using 15px makes them agree.
line-height: 15px;
&:not(.text-only) {
.input-key,
.input-mouse {
& + .input-key,
& + .input-mouse {
margin-left: 2px;
}
}
&.width-1 {
width: 16px;
}
.input-key {
display: flex;
justify-content: center;
align-items: center;
font-family: "Inconsolata", monospace;
font-weight: 400;
text-align: center;
height: 16px;
box-sizing: border-box;
border: 1px solid;
border-radius: 4px;
border-color: var(--color-5-dullgray);
color: var(--color-e-nearwhite);
&.width-2 {
width: 24px;
}
.text-label {
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
// so moving it up 1 pixel by using 15px makes them agree.
line-height: 15px;
}
&.width-3 {
width: 32px;
}
&.width-1 {
width: 16px;
}
&.width-4 {
width: 40px;
}
&.width-2 {
width: 24px;
}
&.width-5 {
width: 48px;
}
&.width-3 {
width: 32px;
}
.icon-label {
margin: 1px;
&.width-4 {
width: 40px;
}
&.width-5 {
width: 48px;
}
.icon-label {
margin: 1px;
}
}
}