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

Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended

Browse Source
This commit is contained in:
Keavon Chambers
2022-01-23 20:24:50 -08:00
parent 12ef88f261
commit c215719598
34 changed files with 385 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/floating-menus/DialogModal.vue
+15 -22
View File
@@ -1,21 +1,19 @@
<template>
<div class="dialog-modal">
<FloatingMenu :type="'Dialog'" :direction="'Center'">
<LayoutRow>
<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 && button.callback()" v-bind="button.props" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
</FloatingMenu>
</div>
<FloatingMenu class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
<LayoutRow>
<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 && button.callback()" v-bind="button.props" />
</LayoutRow>
</LayoutCol>
</LayoutRow>
</FloatingMenu>
</template>
<style lang="scss">
@@ -25,11 +23,6 @@
width: 100%;
height: 100%;
.dialog {
width: 100%;
height: 100%;
}
.floating-menu-container .floating-menu-content {
pointer-events: auto;
padding: 24px;