fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 02:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix several CSS compatibility issues in Safari (#841)

Browse Source 
* Fix button margin default for Safari compatibility

* Add Safari vendor prefixes that are somehow still necessary

* Add workaround for Safari not rendering text selection

* Replace <h3> and <p> placeholder labels in floating menus with <TextLabel>

* Replace <span> elements with <TextLabel> and set its cursor for Safari
This commit is contained in:
Keavon Chambers
2022-11-06 00:50:45 -07:00
parent 3f98d1c896
commit 4c16efb33d
25 changed files with 92 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/widgets/inputs/ColorInput.vue
View File

@@ -25,8 +25,8 @@
position: relative;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 1px;

20
frontend/src/components/widgets/inputs/DropdownInput.vue
View File

@@ -12,7 +12,7 @@
data-floating-menu-spawner
>
<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span>
<TextLabel class="dropdown-label">{{ activeEntry.label }}</TextLabel>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow>
<MenuList
@@ -40,19 +40,19 @@
height: 24px;
border-radius: 2px;
.dropdown-icon {
margin: 4px;
flex: 0 0 auto;
}
span {
.dropdown-label {
margin: 0;
margin-left: 8px;
flex: 1 1 100%;
}
.dropdown-icon + span {
margin-left: 0;
.dropdown-icon {
margin: 4px;
flex: 0 0 auto;
& + .dropdown-label {
margin-left: 0;
}
}
.dropdown-arrow {
@@ -104,6 +104,7 @@ import { type MenuListEntry } from "@/wasm-communication/messages";
import MenuList from "@/components/floating-menus/MenuList.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
const DASH_ENTRY = { label: "-" };
@@ -167,6 +168,7 @@ export default defineComponent({
IconLabel,
LayoutRow,
MenuList,
TextLabel,
},
});
</script>

11
frontend/src/components/widgets/inputs/FieldInput.vue
View File

@@ -80,7 +80,16 @@
caret-color: var(--color-e-nearwhite);
&::selection {
background: var(--color-5-dullgray);
background-color: var(--color-5-dullgray);
// Target only Safari
@supports (background: -webkit-named-image(i)) {
& {
// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
// https://stackoverflow.com/a/71753552/775283
background-color: rgba(var(--color-5-dullgray-rgb), calc(254 / 255));
}
}
}
}

6
frontend/src/components/widgets/inputs/FontInput.vue
View File

@@ -12,7 +12,7 @@
@keydown="keydown"
data-floating-menu-spawner
>
<span>{{ activeEntry?.value || "" }}</span>
<TextLabel class="dropdown-label">{{ activeEntry?.value || "" }}</TextLabel>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow>
<MenuList
@@ -39,7 +39,7 @@
height: 24px;
border-radius: 2px;
span {
.dropdown-label {
margin: 0;
margin-left: 8px;
flex: 1 1 100%;
@@ -87,6 +87,7 @@ import { type MenuListEntry } from "@/wasm-communication/messages";
import MenuList from "@/components/floating-menus/MenuList.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
export default defineComponent({
inject: ["fonts"],
@@ -186,6 +187,7 @@ export default defineComponent({
IconLabel,
LayoutRow,
MenuList,
TextLabel,
},
});
</script>

4
frontend/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -11,7 +11,7 @@
:data-floating-menu-spawner="entry.children && entry.children.length > 0 ? '' : 'no-hover-transfer'"
>
<IconLabel v-if="entry.icon" :icon="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
</div>
<MenuList
v-if="entry.children && entry.children.length > 0"
@@ -72,6 +72,7 @@ import { type KeyRaw, type KeysGroup, type MenuBarEntry, type MenuListEntry, Upd
import MenuList from "@/components/floating-menus/MenuList.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type MenuListInstance = InstanceType<typeof MenuList>;
@@ -147,6 +148,7 @@ export default defineComponent({
components: {
IconLabel,
MenuList,
TextLabel,
},
});
</script>

5
frontend/src/components/widgets/inputs/NumberInput.vue
View File

@@ -59,6 +59,7 @@
.arrow {
position: absolute;
top: 0;
margin: 0;
padding: 9px 0;
border: none;
background: rgba(var(--color-1-nearblack-rgb), 0.75);
@@ -131,7 +132,7 @@
height: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none; // TODO: Prefix necessary? Test on Safari
-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
appearance: none;
background: none;
cursor: default;
@@ -147,7 +148,7 @@
// Chromium and Safari
&::-webkit-slider-thumb {
-webkit-appearance: none; // TODO: Prefix necessary? Test on Safari
-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
appearance: none;
border-radius: 2px;
width: 4px;

1
frontend/src/components/widgets/inputs/RadioInput.vue
View File

@@ -21,6 +21,7 @@
background: var(--color-5-dullgray);
fill: var(--color-e-nearwhite);
height: 24px;
margin: 0;
padding: 0 4px;
border: none;
display: flex;

4
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -1,11 +1,11 @@
<template>
<LayoutCol class="swatch-pair">
<LayoutRow class="primary swatch">
<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<button @click="() => clickPrimarySwatch()" :style="{ '--swatch-color': primary.toRgbaCSS() }" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
<LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<button @click="() => clickSecondarySwatch()" :style="{ '--swatch-color': secondary.toRgbaCSS() }" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
</LayoutCol>

2
frontend/src/components/widgets/inputs/TextInput.vue
View File

@@ -7,7 +7,7 @@
:spellcheck="true"
:disabled="disabled"
:tooltip="tooltip"
:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
:sharpRightCorners="sharpRightCorners"
@textFocused="() => onTextFocused()"
@textChanged="() => onTextChanged()"