mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-16 23:08:05 +08:00
54590d594a
Major CSS improvements to layout at small screen sizes. By adding min-width: 0 and min-height: 0 on the nested display: flex structure, widgets no longer coerce the whole layout into large-scale resizing. Scrollbars are now used to allow correct overflowing of the tab bar (fixes #177), Document Panel options bar, and tool shelf. Improvements to responsive resizing are also included for viewing the UI correctly on mobile now. Additional small fixes to styling of widget colors and corner roundness. The ruler has been darkened one shade to improve text contrast and aesthetics.
91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<LayoutRow class="workspace-grid-subdivision">
|
|
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
|
|
<Panel
|
|
:panelType="'Document'"
|
|
:tabCloseButtons="true"
|
|
:tabMinWidths="true"
|
|
:tabLabels="documents.documents.map((doc) => doc.displayName)"
|
|
:tabActiveIndex="documents.activeDocumentIndex"
|
|
ref="documentsPanel"
|
|
/>
|
|
</LayoutCol>
|
|
<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
|
|
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
|
|
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
|
|
<Panel :panelType="'Properties'" :tabLabels="['Properties']" :tabActiveIndex="0" />
|
|
</LayoutRow>
|
|
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
|
|
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
|
|
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
|
|
</LayoutRow>
|
|
<!-- <LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
|
|
<LayoutRow class="workspace-grid-subdivision folded">
|
|
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
|
|
</LayoutRow> -->
|
|
</LayoutCol>
|
|
</LayoutRow>
|
|
<DialogModal v-if="dialog.visible" />
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.workspace-grid-subdivision {
|
|
min-height: 28px;
|
|
flex: 1 1 0;
|
|
|
|
&.folded {
|
|
flex-grow: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.workspace-grid-resize-gutter {
|
|
flex: 0 0 4px;
|
|
|
|
&.layout-row {
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
&.layout-col {
|
|
cursor: ew-resize;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
import Panel from "@/components/workspace/Panel.vue";
|
|
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
|
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
|
import DialogModal from "@/components/widgets/floating-menus/DialogModal.vue";
|
|
|
|
export default defineComponent({
|
|
inject: ["documents", "dialog"],
|
|
components: {
|
|
LayoutRow,
|
|
LayoutCol,
|
|
Panel,
|
|
DialogModal,
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
activeDocumentIndex() {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
return (this as any).documents.activeDocumentIndex;
|
|
},
|
|
},
|
|
watch: {
|
|
activeDocumentIndex(newIndex: number) {
|
|
this.$nextTick(() => {
|
|
const documentsPanel = this.$refs.documentsPanel as typeof Panel;
|
|
const newActiveTab = documentsPanel.$el.querySelectorAll(".tab-bar .tab-group .tab")[newIndex];
|
|
newActiveTab.scrollIntoView();
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|