mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-20 03:18:06 +08:00
ef53577b20
* Clean up Vue initialization-related code * Rename folder: dispatcher -> interop * Rename folder: state -> providers * Comments and clarification * Rename JS dispatcher to subscription router * Assorted cleanup and renaming * Rename: js-messages.ts -> messages.ts * Comments * Remove unused Vue component injects * Clean up coming soon and add warning about freezing the app * Further cleanup * Dangerous changes * Simplify App.vue code * Move more disparate init code from components into managers * Rename folder: providers -> state-providers * Other * Move Document panel options bar separator to backend * Add destructors to managers to fix HMR * Comments and code style * Rename variable: font -> font_file_url * Fix async font loading; refactor janky floating menu openness and min-width measurement; fix Vetur errors * Fix misaligned canvas in viewport until panning on page (re)load * Add Vue bidirectional props documentation * More folder renaming for better terminology; add some documentation
88 lines
1.3 KiB
Vue
88 lines
1.3 KiB
Vue
<template>
|
|
<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
|
|
<div v-if="['Section', 'List'].includes(type)"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.separator {
|
|
&.vertical {
|
|
flex: 0 0 auto;
|
|
|
|
&.related {
|
|
height: 4px;
|
|
}
|
|
|
|
&.unrelated {
|
|
height: 8px;
|
|
}
|
|
|
|
&.section,
|
|
&.list {
|
|
width: 100%;
|
|
|
|
div {
|
|
height: 1px;
|
|
width: calc(100% - 8px);
|
|
margin: 0 4px;
|
|
background: var(--color-7-middlegray);
|
|
}
|
|
}
|
|
|
|
&.section {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
&.list {
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
flex: 0 0 auto;
|
|
|
|
&.related {
|
|
width: 4px;
|
|
}
|
|
|
|
&.unrelated {
|
|
width: 8px;
|
|
}
|
|
|
|
&.section,
|
|
&.list {
|
|
height: 100%;
|
|
|
|
div {
|
|
height: calc(100% - 8px);
|
|
width: 1px;
|
|
margin: 4px 0;
|
|
background: var(--color-7-middlegray);
|
|
}
|
|
}
|
|
|
|
&.section {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
&.list {
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from "vue";
|
|
|
|
export type SeparatorDirection = "Horizontal" | "Vertical";
|
|
export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
|
|
type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
|
|
},
|
|
});
|
|
</script>
|