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

Migrate dialogs to Rust and add a New File dialog (#623)

Browse Source 
* Migrate coming soon and about dialog to Rust

* Migrate confirm close and close all

* Migrate dialog error

* Improve keyboard navigation throughout UI

* Cleanup and fix panic dialog

* Reduce css spacing to better match old dialogs

* Add new document modal

* Fix crash when generating default name

* Populate rust about graphite data on startup

* Code review changes

* Move one more :focus CSS rule into App.vue

* Add a dialog message and move dialogs

* Split out keyboard input navigation from this branch

* Improvements including simplifying panic dialog code

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-05-07 01:59:52 -07:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 7729b6219e
commit f177f63217
44 changed files with 1017 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/floating-menus/DialogModal.vue
+11 -15
View File
@@ -1,15 +1,14 @@
<template>
<FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
<LayoutRow>
<LayoutRow ref="main">
<LayoutCol class="icon-column">
<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
</LayoutCol>
<LayoutCol class="main-column">
<TextLabel :bold="true" class="heading">{{ dialog.state.heading }}</TextLabel>
<TextLabel class="details">{{ dialog.state.details }}</TextLabel>
<LayoutRow class="buttons-row" v-if="dialog.state.buttons.length > 0">
<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback?.()" v-bind="button.props" />
<WidgetLayout v-if="dialog.state.widgets.layout.length > 0" :layout="dialog.state.widgets" class="details" />
<LayoutRow v-if="dialog.state.jsCallbackBasedButtons?.length > 0" class="panic-buttons-row">
<TextButton v-for="(button, index) in dialog.state.jsCallbackBasedButtons" :key="index" :action="() => button.callback?.()" v-bind="button.props" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
@@ -49,21 +48,18 @@
}
.main-column {
.heading {
user-select: text;
white-space: pre-wrap;
max-width: 400px;
margin-bottom: 4px;
}
margin: -4px 0;
.details {
user-select: text;
white-space: pre-wrap;
max-width: 400px;
height: auto;
}
.buttons-row {
margin-top: 16px;
.panic-buttons-row {
height: 32px;
align-items: center;
}
}
}
@@ -77,7 +73,7 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
export default defineComponent({
inject: ["dialog"],
@@ -86,8 +82,8 @@ export default defineComponent({
LayoutCol,
FloatingMenu,
IconLabel,
TextLabel,
TextButton,
WidgetLayout,
},
methods: {
dismiss() {
frontend/src/components/widgets/floating-menus/MenuList.vue
+5 -1
View File
@@ -224,6 +224,8 @@ const MenuList = defineComponent({
const floatingMenu = this.$refs.floatingMenu as typeof FloatingMenu;
if (!floatingMenu) return;
// Save open/closed state before forcing open, if necessary, for measurement
const initiallyOpen = floatingMenu.isOpen();
if (!initiallyOpen) floatingMenu.setOpen();
@@ -265,7 +267,9 @@ const MenuList = defineComponent({
},
},
data() {
return { keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER };
return {
keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
};
},
components: {
FloatingMenu,