Skip to content

Commit 1cdd440

Browse files
hahn-kevgoogle-labs-jules[bot]myieye
authored
create feedback dialog (#1918)
* create feedback dialog * Move dialogs out of sidebar * update feedback url to use new bug report form --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: Tim Haasdyk <[email protected]>
1 parent 142b156 commit 1cdd440

File tree

16 files changed

+244
-19
lines changed

16 files changed

+244
-19
lines changed

‎backend/FwLite/FwLiteShared/FwLiteConfig.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ public class FwLiteConfig
1313
PlatformID.MacOSX => FwLitePlatform.Mac,
1414
_ => FwLitePlatform.Other
1515
};
16-
public string FeedbackUrl => $"https://docs.google.com/forms/d/e/1FAIpQLSdUdNufT3sdoBscY7vixguYnvtgpaw-hjX-z54BKi9KlYv4vw/viewform?usp=pp_url&entry.2102942583={AppVersion}&entry.1772086822={Os}";
16+
public string FeedbackUrl => $"https://docs.google.com/forms/d/e/1FAIpQLSetM5LIjrwZ8ibmxz9gHwYDqTqpEzsr3ILzrf_dW1rOoRf9rw/viewform?usp=pp_url&entry.1159558932={AppVersion}&entry.866582270={Os}";
1717

1818
private string? _updateUrl;
1919

‎frontend/viewer/src/home/HomeView.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import storybookIcon from '../stories/assets/storybook-icon.svg';
77
import DevContent, {isDev} from '$lib/layout/DevContent.svelte';
88
import {
9-
useFwLiteConfig,
109
useImportFwdataService,
1110
useProjectsService,
1211
useTroubleshootingService,
@@ -28,12 +27,12 @@
2827
import {cubicOut} from 'svelte/easing';
2928
import {transitionContext} from './transitions';
3029
import Anchor from '$lib/components/ui/anchor/anchor.svelte';
30+
import FeedbackDialog from '$lib/about/FeedbackDialog.svelte';
3131
import DeleteDialog from '$lib/entry-editor/DeleteDialog.svelte';
3232
import {SYNC_DIALOG_QUERY_PARAM} from '../project/SyncDialog.svelte';
3333
3434
const projectsService = useProjectsService();
3535
const importFwdataService = useImportFwdataService();
36-
const fwLiteConfig = useFwLiteConfig();
3736
const exampleProjectName = 'Example-Project';
3837
const [send, receive] = crossfade({
3938
duration: 500,
@@ -133,6 +132,9 @@
133132
clickTimeout = setTimeout(resetClickCounter, 500);
134133
}
135134
}
135+
136+
let feedbackOpen = $state(false);
137+
136138
let deleteDialog = $state<DeleteDialog>();
137139
</script>
138140

@@ -160,7 +162,7 @@
160162
<ResponsiveMenu.Root>
161163
<ResponsiveMenu.Trigger/>
162164
<ResponsiveMenu.Content>
163-
<ResponsiveMenu.Item href={fwLiteConfig.feedbackUrl} target="_blank" icon="i-mdi-chat-question">
165+
<ResponsiveMenu.Item onSelect={() => feedbackOpen = true} icon="i-mdi-chat-question">
164166
{$t`Feedback`}
165167
</ResponsiveMenu.Item>
166168
{#if supportsTroubleshooting}
@@ -172,6 +174,7 @@
172174
{/if}
173175
</ResponsiveMenu.Content>
174176
</ResponsiveMenu.Root>
177+
<FeedbackDialog bind:open={feedbackOpen}/>
175178
{#if supportsTroubleshooting}
176179
<TroubleshootDialog bind:this={troubleshootDialog}/>
177180
{/if}

‎frontend/viewer/src/lib/about/FeedbackDialog.svelte‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
import {t} from 'svelte-i18n-lingui';
3+
import {Icon} from '$lib/components/ui/icon';
4+
import {useFwLiteConfig} from '$lib/services/service-provider';
5+
import {Button} from '$lib/components/ui/button';
6+
import ResponsiveDialog from '$lib/components/responsive-dialog/responsive-dialog.svelte';
7+
8+
let {open = $bindable()}: { open: boolean } = $props();
9+
const config = useFwLiteConfig();
10+
11+
const appVersion = config.appVersion;
12+
const mailtoUrl = `mailto:[email protected]?subject=${encodeURIComponent('FW Lite Feedback')}&body=${encodeURIComponent(`App Version: ${appVersion} on ${config.os.toString()}`)}`;
13+
</script>
14+
15+
<ResponsiveDialog bind:open title={$t`Feedback`}>
16+
<div class="flex flex-col gap-4">
17+
<Button variant="ghost" href="https://lexbox.org/fw-lite/request-features" target="_blank" class="gap-4 p-4 h-auto text-base justify-start whitespace-normal">
18+
<Icon icon="i-mdi-lightbulb-on-outline" class="size-10"/>
19+
<div>
20+
<div class="font-semibold underline">{$t`Suggest your ideas`}</div>
21+
<div class="text-sm text-muted-foreground">
22+
{$t`Share your suggestions for new features or improvements.`}
23+
</div>
24+
</div>
25+
</Button>
26+
<Button variant="ghost" href={config.feedbackUrl} target="_blank" class="gap-4 p-4 h-auto text-base justify-start whitespace-normal">
27+
<Icon icon="i-mdi-bug-outline" class="size-10"/>
28+
<div>
29+
<div class="font-semibold underline">
30+
{$t`Report a technical problem`}
31+
</div>
32+
<div
33+
class="text-sm text-muted-foreground">
34+
{$t`Let us know about any bugs or technical issues you encounter.`}
35+
</div>
36+
</div>
37+
</Button>
38+
<Button variant="ghost" href={mailtoUrl} class="gap-4 p-4 h-auto text-base justify-start whitespace-normal">
39+
<Icon icon="i-mdi-email-outline" class="size-10"/>
40+
<div>
41+
<div class="font-semibold underline">
42+
{$t`Send us a message`}
43+
</div>
44+
<div class="text-sm text-muted-foreground">
45+
{$t`For any other inquiries, feel free to send us an email.`}
46+
</div>
47+
</div>
48+
</Button>
49+
</div>
50+
</ResponsiveDialog>

‎frontend/viewer/src/lib/admin-dialogs/GetProjectByCodeDialog.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555

5656

5757
<Dialog.Root bind:open={open}>
58-
<Dialog.DialogContent hideClose={loading} class="!max-h-none !min-h-0" interactOutsideBehavior="ignore" escapeKeydownBehavior="ignore">
58+
<Dialog.DialogContent hideClose={loading} interactOutsideBehavior="ignore" escapeKeydownBehavior="ignore">
5959
<Dialog.DialogHeader>
6060
<Dialog.DialogTitle>{$t`Download project by project code`}</Dialog.DialogTitle>
6161
</Dialog.DialogHeader>

‎frontend/viewer/src/lib/components/audio/AudioDialog.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138

139139

140140
<Dialog.Root bind:open>
141-
<Dialog.DialogContent class="grid-rows-[auto_1fr_auto]">
141+
<Dialog.DialogContent class="grid-rows-[auto_1fr_auto] sm:min-h-[min(calc(100%-16px),30rem)]">
142142
<Dialog.DialogHeader>
143143
<Dialog.DialogTitle>{$t`Add audio`}</Dialog.DialogTitle>
144144
</Dialog.DialogHeader>

‎frontend/viewer/src/lib/components/responsive-dialog/responsive-dialog.svelte‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang="ts">
2+
import { IsMobile } from '$lib/hooks/is-mobile.svelte';
3+
import * as Dialog from '$lib/components/ui/dialog';
4+
import * as Drawer from '$lib/components/ui/drawer';
5+
import { buttonVariants } from '$lib/components/ui/button';
6+
import type {PopoverTriggerProps, WithChildren} from 'bits-ui';
7+
import {Icon} from '../ui/icon';
8+
9+
type TriggerSnippet = PopoverTriggerProps['child'];
10+
11+
let { open = $bindable(false), children, title, trigger }: WithChildren<{ open?: boolean, title: string, trigger?: TriggerSnippet }> = $props();
12+
</script>
13+
14+
{#if !IsMobile.value}
15+
<Dialog.Root bind:open>
16+
<Dialog.Trigger child={trigger} />
17+
<Dialog.Content class="min-h-auto">
18+
<Dialog.Header>
19+
<Dialog.Title>{title}</Dialog.Title>
20+
</Dialog.Header>
21+
{@render children?.()}
22+
</Dialog.Content>
23+
</Dialog.Root>
24+
{:else}
25+
<Drawer.Root bind:open>
26+
<Drawer.Trigger child={trigger} />
27+
<Drawer.Content>
28+
<Drawer.Close class={buttonVariants({ variant: 'ghost', size: 'icon', class: 'absolute top-4 right-4 z-10' })}>
29+
<Icon icon="i-mdi-close" />
30+
</Drawer.Close>
31+
<div class="mx-auto w-full max-w-sm_ p-4">
32+
<Drawer.Header>
33+
<Drawer.Title>{title}</Drawer.Title>
34+
</Drawer.Header>
35+
{@render children?.()}
36+
</div>
37+
</Drawer.Content>
38+
</Drawer.Root>
39+
{/if}

‎frontend/viewer/src/lib/components/ui/dialog/dialog-content.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
{...mergeProps(state.contentProps, restProps)}
3131
class={cn(
3232
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
33-
'min-h-full min-w-full max-h-full max-w-full sm:min-h-[min(calc(100%-16px),30rem)] sm:min-w-[min(calc(100%-32px),50rem)] sm:max-h-[calc(100%-16px)] sm:max-w-[calc(100%-32px)]',
33+
'max-sm:min-h-full min-w-full max-h-full max-w-full sm:min-w-[min(calc(100%-32px),50rem)] sm:max-h-[calc(100%-16px)] sm:max-w-[calc(100%-32px)]',
3434
'overflow-y-auto',
3535
state.contentProps.class,
3636
className,

‎frontend/viewer/src/lib/entry-editor/EntryOrSensePicker.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132

133133
<Dialog.Root bind:open>
134134
<Dialog.Trigger child={trigger} />
135-
<Dialog.Content class="pb-0 @container" style="grid-template-rows: auto 1fr auto">
135+
<Dialog.Content class="pb-0 @container sm:min-h-[min(calc(100%-16px),30rem)]" style="grid-template-rows: auto 1fr auto">
136136
<Dialog.Header>
137137
<Dialog.Title class="mb-4">
138138
{title}

‎frontend/viewer/src/lib/entry-editor/NewEntryDialog.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595

9696
{#if open}
9797
<Dialog.Root bind:open={open}>
98-
<Dialog.DialogContent onkeydown={handleKeydown}>
98+
<Dialog.DialogContent onkeydown={handleKeydown} class="sm:min-h-[min(calc(100%-16px),30rem)]">
9999
<Dialog.DialogHeader>
100100
<Dialog.DialogTitle>{$t`New ${entryLabel}`}</Dialog.DialogTitle>
101101
</Dialog.DialogHeader>

‎frontend/viewer/src/lib/history/HistoryView.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</script>
5757

5858
<Dialog.Root bind:open>
59-
<Dialog.DialogContent interactOutsideBehavior={loading ? 'ignore' : 'close'} class="flex flex-col">
59+
<Dialog.DialogContent interactOutsideBehavior={loading ? 'ignore' : 'close'} class="flex flex-col sm:min-h-[min(calc(100%-16px),30rem)]">
6060
<Dialog.DialogHeader>
6161
<Dialog.DialogTitle>{$t`History`}</Dialog.DialogTitle>
6262
</Dialog.DialogHeader>

0 commit comments

Comments
 (0)