File size: 4,827 Bytes
2409829 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<script lang="ts">
import { getContext, onMount } from "svelte";
import { githubUrl } from "@graphite/io-managers/panic";
import { wipeDocuments } from "@graphite/io-managers/persistence";
import type { DialogState } from "@graphite/state-providers/dialog";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
const dialog = getContext<DialogState>("dialog");
let self: FloatingMenu | undefined;
onMount(() => {
// Focus the button which is marked as emphasized, or otherwise the first button, in the popup
const emphasizedOrFirstButton = (self?.div?.()?.querySelector("[data-emphasized]") || self?.div?.()?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
emphasizedOrFirstButton?.focus();
});
</script>
<!-- TODO: Use https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog for improved accessibility -->
<FloatingMenu open={true} class="dialog" type="Dialog" direction="Center" bind:this={self} data-dialog>
<LayoutRow class="header-area">
<!-- `$dialog.icon` class exists to provide special sizing in CSS to specific icons -->
<IconLabel icon={$dialog.icon} class={$dialog.icon.toLowerCase()} />
<TextLabel>{$dialog.title}</TextLabel>
</LayoutRow>
<LayoutRow class={`content ${$dialog.title === "Demo Artwork" ? "center" : "" /* TODO: Replace this with a less hacky approach that's compatible with localization/translation */}`}>
<LayoutCol class="column-1">
{#if $dialog.column1.layout.length > 0}
<WidgetLayout layout={$dialog.column1} class="details" />
{/if}
{#if $dialog.panicDetails}
<div class="widget-layout details">
<div class="widget-span row"><TextLabel bold={true}>The editor crashed — sorry about that</TextLabel></div>
<div class="widget-span row"><TextLabel>Please report this by filing an issue on GitHub:</TextLabel></div>
<div class="widget-span row"><TextButton label="Report Bug" icon="Warning" flush={true} action={() => window.open(githubUrl($dialog.panicDetails), "_blank")} /></div>
<div class="widget-span row"><TextLabel multiline={true}>Reload the editor to continue. If this occurs<br />immediately on repeated reloads, clear storage:</TextLabel></div>
<div class="widget-span row">
<TextButton
label="Clear Saved Documents"
icon="Trash"
flush={true}
action={async () => {
await wipeDocuments();
window.location.reload();
}}
/>
</div>
</div>
{/if}
</LayoutCol>
{#if $dialog.column2.layout.length > 0}
<LayoutCol class="column-2">
<WidgetLayout layout={$dialog.column2} class="details" />
</LayoutCol>
{/if}
</LayoutRow>
<LayoutRow class="footer-area">
{#if $dialog.buttons.layout.length > 0}
<WidgetLayout layout={$dialog.buttons} class="details" />
{/if}
{#if $dialog.panicDetails}
<TextButton label="Copy Error Log" action={() => navigator.clipboard.writeText($dialog.panicDetails)} />
<TextButton label="Reload" emphasized={true} action={() => window.location.reload()} />
{/if}
</LayoutRow>
</FloatingMenu>
<style lang="scss" global>
.dialog {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
> .floating-menu-container > .floating-menu-content {
pointer-events: auto;
padding: 0;
}
.header-area,
.footer-area {
background: var(--color-1-nearblack);
}
.header-area,
.footer-area,
.content {
padding: 16px 24px;
}
.header-area {
border-radius: 4px 4px 0 0;
.icon-label {
width: 24px;
height: 24px;
}
.text-label {
margin-left: 12px;
line-height: 24px;
}
}
.content {
margin: -4px 0;
&.center .row {
justify-content: center;
}
.column-1 + .column-2 {
margin-left: 48px;
.text-button {
justify-content: left;
}
}
.details.text-label {
-webkit-user-select: text; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
user-select: text;
white-space: pre-wrap;
max-width: 400px;
height: auto;
}
.radio-input button {
flex-grow: 1;
}
// Used by the "Open Demo Artwork" dialog
.image-label {
border-radius: 2px;
}
}
.footer-area {
border-radius: 0 0 4px 4px;
justify-content: right;
.text-button {
min-width: 96px;
}
}
}
</style>
|