fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 10: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/WidgetRow.vue
+31 -18
View File
@@ -2,19 +2,7 @@
<div class="widget-row">
<template v-for="(component, index) in widgetData.widgets" :key="index">
<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
<PopoverButton v-if="component.kind === 'PopoverButton'">
<h3>{{ component.props.title }}</h3>
<p>{{ component.props.text }}</p>
</PopoverButton>
<NumberInput
v-if="component.kind === 'NumberInput'"
v-bind="component.props"
@update:value="(value: number) => updateLayout(component.widget_id, value)"
:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
/>
<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
<TextAreaInput v-if="component.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
<CheckboxInput v-if="component.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
<ColorInput v-if="component.kind === 'ColorInput'" v-bind="component.props" @update:value="(value: string) => updateLayout(component.widget_id, value)" />
<FontInput
v-if="component.kind === 'FontInput'"
@@ -22,26 +10,43 @@
@changeFont="(value: { name: string, style: string, file: string }) => updateLayout(component.widget_id, value)"
/>
<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
<NumberInput
v-if="component.kind === 'NumberInput'"
v-bind="component.props"
@update:value="(value: number) => updateLayout(component.widget_id, value)"
:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
/>
<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
<PopoverButton v-if="component.kind === 'PopoverButton'">
<h3>{{ component.props.title }}</h3>
<p>{{ component.props.text }}</p>
</PopoverButton>
<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
<Separator v-if="component.kind === 'Separator'" v-bind="component.props" />
<TextLabel v-if="component.kind === 'TextLabel'" v-bind="component.props">{{ component.props.value }}</TextLabel>
<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
<TextAreaInput v-if="component.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
<TextButton v-if="component.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
<TextLabel v-if="component.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ component.props.value }}</TextLabel>
</template>
</div>
</template>
<style lang="scss">
.widget-row {
min-height: 32px;
flex: 0 0 auto;
display: flex;
min-height: 32px;
> * {
--widget-height: 24px;
min-height: var(--widget-height);
line-height: var(--widget-height);
margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
min-height: var(--widget-height);
&:not(.multiline) {
line-height: var(--widget-height);
}
&.icon-label.size-12 {
--widget-height: 12px;
@@ -61,6 +66,8 @@ import { WidgetRow } from "@/dispatcher/js-messages";
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 CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import ColorInput from "@/components/widgets/inputs/ColorInput.vue";
import FontInput from "@/components/widgets/inputs/FontInput.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
@@ -82,10 +89,16 @@ export default defineComponent({
updateLayout(widgetId: BigInt, value: unknown) {
this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
},
withoutValue(props: Record<string, unknown>): Record<string, unknown> {
const { value: _, ...rest } = props;
return rest;
},
},
components: {
Separator,
PopoverButton,
TextButton,
CheckboxInput,
NumberInput,
TextInput,
IconButton,