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

Extend welcome screen button click area to labels

Browse Source 
Closes #738
This commit is contained in:
Keavon Chambers
2022-08-08 01:29:23 -07:00
parent 45a1e144a8
commit 765b648704
10 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/window/status-bar/StatusBar.vue
View File

@@ -34,8 +34,12 @@
font-weight: 700;
}
.user-input-label + .user-input-label {
margin-left: 0;
.user-input-label {
margin: 0 8px;
& + .user-input-label {
margin-left: 0;
}
}
}
}

72
frontend/src/components/window/workspace/Panel.vue
View File

@@ -28,26 +28,24 @@
<IconLabel :icon="'GraphiteLogotypeSolid'" />
</LayoutRow>
<LayoutRow class="actions">
<LayoutCol>
<IconButton :action="() => newDocument()" :icon="'File'" :size="24" />
<IconButton :action="() => openDocument()" :icon="'Folder'" :size="24" />
</LayoutCol>
<LayoutCol>
<Separator :type="'Related'" />
<Separator :type="'Related'" />
</LayoutCol>
<LayoutCol>
<TextLabel>New Document:</TextLabel>
<TextLabel>Open Document:</TextLabel>
</LayoutCol>
<LayoutCol>
<Separator :type="'Unrelated'" />
<Separator :type="'Unrelated'" />
</LayoutCol>
<LayoutCol>
<UserInputLabel :inputKeys="[[controlOrCommandKey(), 'KeyN']]" />
<UserInputLabel :inputKeys="[[controlOrCommandKey(), 'KeyO']]" />
</LayoutCol>
<table>
<tr>
<td>
<TextButton :label="'New Document:'" :icon="'File'" :action="() => newDocument()" />
</td>
<td>
<UserInputLabel :inputKeys="[[...platformModifiers(true), 'KeyN']]" />
</td>
</tr>
<tr>
<td>
<TextButton :label="'Open Document:'" :icon="'Folder'" :action="() => openDocument()" />
</td>
<td>
<UserInputLabel :inputKeys="[[...platformModifiers(false), 'KeyO']]" />
</td>
</tr>
</table>
</LayoutRow>
</LayoutCol>
</LayoutCol>
@@ -191,19 +189,16 @@
}
.actions {
> div {
gap: 8px;
table {
border-spacing: 8px;
margin: -8px;
> * {
height: 24px;
td {
padding: 0;
}
.text-label {
line-height: 24px;
}
.user-input-label {
margin: 0;
.text-button:not(:hover) {
background: none;
}
}
}
@@ -226,18 +221,19 @@ import NodeGraph from "@/components/panels/NodeGraph.vue";
import Properties from "@/components/panels/Properties.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import Separator from "@/components/widgets/labels/Separator.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
const panelComponents = {
Document,
Properties,
IconButton,
LayerTree,
NodeGraph,
IconButton,
PopoverButton,
Properties,
TextButton,
};
type PanelTypes = keyof typeof panelComponents;
@@ -259,9 +255,14 @@ export default defineComponent({
openDocument() {
this.editor.instance.document_open();
},
controlOrCommandKey() {
platformModifiers(reservedKey: boolean) {
// TODO: Remove this by properly feeding these keys from a layout provided by the backend
return operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
if (operatingSystemIsMac()) {
return reservedKey ? ["KeyControl", "KeyCommand"] : ["KeyCommand"]; // TODO: Change Mac from Control+Command to Alt+Command when we can read Alt+letter modifiers
}
return reservedKey ? ["KeyControl", "KeyAlt"] : ["KeyControl"];
},
},
components: {
@@ -270,7 +271,6 @@ export default defineComponent({
IconLabel,
TextLabel,
UserInputLabel,
Separator,
...panelComponents,
},
});