mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-16 23:08:05 +08:00
71e967d043
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.
62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
|
|
<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
|
|
<IconLabel :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.window-buttons-web {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
|
|
svg {
|
|
fill: var(--color-e-nearwhite);
|
|
}
|
|
|
|
.text-label {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-6-lowergray);
|
|
color: var(--color-f-white);
|
|
|
|
svg {
|
|
fill: var(--color-f-white);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
|
|
|
|
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
|
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
|
|
|
const canUseKeyboardLock = keyboardLockApiSupported();
|
|
|
|
export default defineComponent({
|
|
inject: ["fullscreen"],
|
|
methods: {
|
|
async handleClick() {
|
|
if (fullscreen.windowFullscreen) exitFullscreen();
|
|
else enterFullscreen();
|
|
},
|
|
},
|
|
computed: {
|
|
requestFullscreenHotkeys() {
|
|
return canUseKeyboardLock && !fullscreen.keyboardLocked;
|
|
},
|
|
},
|
|
components: {
|
|
IconLabel,
|
|
TextLabel,
|
|
},
|
|
});
|
|
</script>
|