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

Add DialogModal and use it for close confirmations and "coming soon" features (#322)

Browse Source 
Closes #269
Closes #196

* Add DialogModal and use it for close confirmations and "coming soon" features

* Code cleanup; add Enter key to accept emphasized dialog button
This commit is contained in:
Keavon Chambers
2021-07-31 14:30:31 -07:00
parent e1698c2783
commit 170cda7357
20 changed files with 375 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/floating-menus/DialogModal.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<div class="dialog-modal">
<FloatingMenu :type="MenuType.Dialog" :direction="MenuDirection.Center">
<LayoutRow>
<LayoutCol :class="'icon-column'">
<!-- `dialog.icon` class exists to provide special sizing in CSS to specific icons -->
<IconLabel :icon="dialog.icon" :class="dialog.icon.toLowerCase()" />
</LayoutCol>
<LayoutCol :class="'main-column'">
<TextLabel :bold="true" :class="'heading'">{{ dialog.heading }}</TextLabel>
<TextLabel :class="'details'">{{ dialog.details }}</TextLabel>
<LayoutRow :class="'buttons-row'">
<TextButton v-for="(button, index) in dialog.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
</FloatingMenu>
</div>
</template>
<style lang="scss">
.dialog-modal {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
.dialog {
width: 100%;
height: 100%;
}
.floating-menu-container .floating-menu-content {
pointer-events: auto;
padding: 24px;
}
.icon-column {
margin-right: 24px;
.icon-label {
width: 80px;
height: 80px;
&.file,
&.copy {
width: 60px;
svg {
width: 80px;
height: 80px;
margin: 0 -10px;
}
}
}
}
.main-column {
.heading {
white-space: pre;
margin-bottom: 4px;
}
.details {
white-space: pre;
}
.buttons-row {
margin-top: 16px;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { dismissDialog } from "@/utilities/dialog";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
export default defineComponent({
inject: ["dialog"],
components: {
LayoutRow,
LayoutCol,
FloatingMenu,
IconLabel,
TextLabel,
TextButton,
},
methods: {
dismiss() {
dismissDialog();
},
},
data() {
return {
MenuDirection,
MenuType,
};
},
});
</script>