fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 05:08:13 +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
frontend/src/components/widgets/labels/TextLabel.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<span class="text-label" :class="{ disabled, bold, italic, multiline, 'table-align': tableAlign }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" :title="tooltip">
<span class="text-label" :class="{ disabled, bold, italic, multiline, 'table-align': tableAlign }" :style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }" :title="tooltip">
<slot></slot>
</span>
</template>
@@ -8,6 +8,8 @@
.text-label {
line-height: 18px;
white-space: nowrap;
// Force Safari to not draw a text cursor, even though this element has `user-select: none`
cursor: default;
&.disabled {
color: var(--color-8-uppergray);
frontend/src/components/widgets/labels/UserInputLabel.vue
+18 -14
View File
@@ -2,20 +2,20 @@
<IconLabel class="user-input-label keyboard-lock-notice" v-if="displayKeyboardLockNotice" :icon="'Info'" :title="keyboardLockInfoMessage" />
<LayoutRow class="user-input-label" v-else>
<template v-for="(keysWithLabels, i) in keysWithLabelsGroups" :key="i">
<span class="group-gap" v-if="i > 0"></span>
<Separator :type="'Related'" v-if="i > 0"></Separator>
<template v-for="(keyInfo, j) in keyTextOrIconList(keysWithLabels)" :key="j">
<span class="input-key" :class="keyInfo.width">
<div class="input-key" :class="keyInfo.width">
<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
<template v-else-if="keyInfo.label !== undefined">{{ keyInfo.label }}</template>
</span>
<TextLabel v-else-if="keyInfo.label !== undefined">{{ keyInfo.label }}</TextLabel>
</div>
</template>
</template>
<span class="input-mouse" v-if="mouseMotion">
<div class="input-mouse" v-if="mouseMotion">
<IconLabel :icon="mouseHintIcon(mouseMotion)" />
</span>
<span class="hint-text" v-if="hasSlotContent">
</div>
<div class="hint-text" v-if="hasSlotContent">
<slot></slot>
</span>
</div>
</LayoutRow>
</template>
@@ -26,10 +26,6 @@
align-items: center;
white-space: nowrap;
.group-gap {
width: 4px;
}
.input-key,
.input-mouse {
& + .input-key,
@@ -46,14 +42,18 @@
font-weight: 400;
text-align: center;
height: 16px;
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel by using 15px makes them agree
line-height: 15px;
box-sizing: border-box;
border: 1px solid;
border-radius: 4px;
border-color: var(--color-5-dullgray);
color: var(--color-e-nearwhite);
.text-label {
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
// so moving it up 1 pixel by using 15px makes them agree.
line-height: 15px;
}
&.width-1 {
width: 16px;
}
@@ -131,6 +131,8 @@ import { type KeyRaw, type KeysGroup, type Key, type MouseMotion } from "@/wasm-
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import Separator from "@/components/widgets/labels/Separator.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
type LabelData = { label?: string; icon?: IconName; width: string };
@@ -240,6 +242,8 @@ export default defineComponent({
components: {
IconLabel,
LayoutRow,
Separator,
TextLabel,
},
});
</script>