mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-21 18:28:12 +08:00
Keavon Chambers
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.
76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<div class="status-bar">
|
|
<UserInputLabel :inputMouse="'LMBDrag'">Drag Selected</UserInputLabel>
|
|
<Separator :type="SeparatorType.Section" />
|
|
<UserInputLabel :inputKeys="[['G']]">Grab Selected</UserInputLabel>
|
|
<UserInputLabel :inputKeys="[['R']]">Rotate Selected</UserInputLabel>
|
|
<UserInputLabel :inputKeys="[['S']]">Scale Selected</UserInputLabel>
|
|
<Separator :type="SeparatorType.Section" />
|
|
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
|
|
<span class="plus">+</span>
|
|
<UserInputLabel :inputKeys="[['Ctrl']]">Innermost</UserInputLabel>
|
|
<span class="plus">+</span>
|
|
<UserInputLabel :inputKeys="[['⇧']]">Grow/Shrink Selection</UserInputLabel>
|
|
<Separator :type="SeparatorType.Section" />
|
|
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
|
|
<span class="plus">+</span>
|
|
<UserInputLabel :inputKeys="[['⇧']]">Grow/Shrink Selection</UserInputLabel>
|
|
<Separator :type="SeparatorType.Section" />
|
|
<UserInputLabel :inputKeys="[['↑'], ['→'], ['↓'], ['←']]">Nudge Selected</UserInputLabel>
|
|
<span class="plus">+</span>
|
|
<UserInputLabel :inputKeys="[['⇧']]">Big Increment Nudge</UserInputLabel>
|
|
<Separator :type="SeparatorType.Section" />
|
|
<UserInputLabel :inputKeys="[['Alt']]" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
|
|
<UserInputLabel :inputKeys="[['Ctrl', 'D']]">Duplicate</UserInputLabel>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.status-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 -4px;
|
|
// TODO: Use CSS grid to solve issue that makes overflowed items have inconsistent left padding on second row when overflowed
|
|
|
|
> * {
|
|
height: 24px;
|
|
}
|
|
|
|
.separator.section {
|
|
height: 24px;
|
|
margin: 0;
|
|
}
|
|
|
|
.plus {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user-input-label + .user-input-label {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
import { SeparatorType } from "@/components/widgets/widgets";
|
|
|
|
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
|
|
import Separator from "@/components/widgets/separators/Separator.vue";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
UserInputLabel,
|
|
Separator,
|
|
},
|
|
data() {
|
|
return {
|
|
SeparatorType,
|
|
};
|
|
},
|
|
});
|
|
</script>
|