diff --git a/changelog.d/themesv3-on-safari.fix b/changelog.d/themesv3-on-safari.fix
new file mode 100644
index 000000000..af767b3aa
--- /dev/null
+++ b/changelog.d/themesv3-on-safari.fix
@@ -0,0 +1 @@
+Fix Themes v3 on Safari not working
diff --git a/index.html b/index.html
index e790fb57a..6d9c4ce5c 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@
+
+
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index bcab7a663..b93e28a36 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -353,18 +353,20 @@ const afterStoreSetup = async ({ store, i18n }) => {
await setConfig({ store })
- const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+ const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
const { theme } = store.state.instance
const customThemePresent = customThemeSource || customTheme
- if (!forceThemeRecompilation && tryLoadCache()) {
+ console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
+
+ if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
store.commit('setThemeApplied')
} else {
if (customThemePresent) {
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
- applyTheme(customThemeSource)
+ applyTheme(customThemeSource, () => {}, themeDebug)
} else {
- applyTheme(customTheme)
+ applyTheme(customTheme, () => {}, themeDebug)
}
store.commit('setThemeApplied')
} else if (theme) {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index eb665c406..862f6aa4f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,9 @@ const EmojiPicker = {
}
},
inject: ['popoversZLayer'],
+ mounted () {
+ this.updateEmojiSize()
+ },
data () {
return {
keyword: '',
@@ -120,6 +123,7 @@ const EmojiPicker = {
groupRefs: {},
emojiRefs: {},
filteredEmojiGroups: [],
+ emojiSize: 0,
width: 0
}
},
@@ -130,6 +134,23 @@ const EmojiPicker = {
Popover
},
methods: {
+ updateEmojiSize () {
+ const css = window.getComputedStyle(this.$refs.popover.$el)
+ const emojiSize = css.getPropertyValue('--emojiSize')
+ const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+ const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+ const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+ let emojiSizeReal
+ if (emojiSizeUnit.endsWith('em')) {
+ emojiSizeReal = emojiSizeValue * fontSize
+ } else {
+ emojiSizeReal = emojiSizeValue
+ }
+
+ const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+ this.emojiSize = fullEmojiSize
+ },
showPicker () {
this.$refs.popover.showPopover()
this.onShowing()
@@ -268,14 +289,25 @@ const EmojiPicker = {
minItemSize () {
return this.emojiHeight
},
+ // used to watch it
+ fontSize () {
+ this.$nextTick(() => {
+ this.updateEmojiSize()
+ })
+ return this.$store.getters.mergedConfig.fontSize
+ },
emojiHeight () {
- return 32 + 4
+ return this.emojiSize
},
emojiWidth () {
- return 32 + 4
+ return this.emojiSize
},
itemPerRow () {
- return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+ console.log(
+ this.emojiWidth,
+ this.width
+ )
+ return this.width ? Math.floor(this.width / this.emojiWidth) : 6
},
activeGroupView () {
return this.showingStickers ? '' : this.activeGroup
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5602a16b7..9e5ddbcea 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,9 +1,6 @@
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
.emoji-picker {
+ --__emoji-picker-header: 2.2em;
+
width: 25em;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex;
@@ -13,24 +10,26 @@ $emoji-picker-emoji-size: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
- width: $emoji-picker-header-picture-width;
- max-width: $emoji-picker-header-picture-width;
- height: $emoji-picker-header-picture-height;
- max-height: $emoji-picker-header-picture-height;
+ width: var(--__emoji-picker-header);
+ max-width: var(--__emoji-picker-header);
+ height: var(--__emoji-picker-header);
+ max-height: var(--__emoji-picker-header);
.still-image {
- max-width: 100%;
- max-height: 100%;
- height: 100%;
- width: 100%;
+ width: var(--__emoji-picker-header);
+ max-width: var(--__emoji-picker-header);
+ height: var(--__emoji-picker-header);
+ max-height: var(--__emoji-picker-header);
object-fit: contain;
+
+ --_still_image-label-scale: 0.5;
}
}
.keep-open,
.too-many-emoji,
.hide-custom-emoji {
- padding: 7px;
+ padding: 0.5em;
line-height: normal;
}
@@ -44,13 +43,13 @@ $emoji-picker-emoji-size: 32px;
}
.keep-open-label {
- padding: 0 7px;
+ padding: 0 0.5em;
display: flex;
}
.heading {
display: flex;
- padding: 10px 7px 5px;
+ padding: 0.7em 0.5em 0;
}
.content {
@@ -65,13 +64,14 @@ $emoji-picker-emoji-size: 32px;
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
+ overflow-y: hidden;
}
.additional-tabs {
display: flex;
border-left: 1px solid;
border-left-color: var(--border);
- padding-left: 7px;
+ padding-left: 0.5em;
flex: 0 0 auto;
}
@@ -80,25 +80,29 @@ $emoji-picker-emoji-size: 32px;
flex-basis: auto;
display: flex;
align-content: center;
+ scrollbar-width: thin;
&-item {
- padding: 0 7px;
+ padding: 0 0.5em;
cursor: pointer;
- font-size: 1.85em;
- width: $emoji-picker-header-picture-width;
- max-width: $emoji-picker-header-picture-width;
- height: $emoji-picker-header-picture-height;
- max-height: $emoji-picker-header-picture-height;
+ width: var(--__emoji-picker-header);
+ max-width: var(--__emoji-picker-header);
+ height: var(--__emoji-picker-header);
+ max-height: var(--__emoji-picker-header);
display: flex;
align-items: center;
+ .svg-inline--fa {
+ font-size: 1.85em;
+ }
+
&.disabled {
opacity: 0.5;
pointer-events: none;
}
&.toggled {
- border-bottom: 4px solid;
+ border-bottom: 0.2em solid;
}
}
}
@@ -125,7 +129,7 @@ $emoji-picker-emoji-size: 32px;
.emoji {
&-search {
- padding: 5px;
+ padding: 0.3em;
flex: 0 0 auto;
input {
@@ -139,6 +143,7 @@ $emoji-picker-emoji-size: 32px;
flex: 1 1 1px;
position: relative;
overflow: auto;
+ scrollbar-gutter: stable both-edges;
user-select: none;
mask:
linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@@ -165,13 +170,13 @@ $emoji-picker-emoji-size: 32px;
display: flex;
align-items: center;
flex-wrap: wrap;
- padding-left: 5px;
justify-content: left;
&-title {
font-size: 0.85em;
width: 100%;
margin: 0;
+ padding-left: 0.3em;
&.disabled {
display: none;
@@ -180,24 +185,28 @@ $emoji-picker-emoji-size: 32px;
}
&-item {
- width: $emoji-picker-emoji-size;
- height: $emoji-picker-emoji-size;
+ width: var(--emoji-size);
+ height: var(--emoji-size);
box-sizing: border-box;
display: flex;
- line-height: $emoji-picker-emoji-size;
+ line-height: var(--emoji-size);
align-items: center;
justify-content: center;
- margin: 4px;
+ margin: 0.2em;
cursor: pointer;
.emoji-picker-emoji.-custom {
object-fit: contain;
- max-width: 100%;
- max-height: 100%;
+ width: var(--emoji-size);
+ max-width: var(--emoji-size);
+ height: var(--emoji-size);
+ max-height: var(--emoji-size);
+
+ --_still_image-label-scale: 0.5;
}
.emoji-picker-emoji.-unicode {
- font-size: 24px;
+ font-size: 20.2em;
overflow: hidden;
}
}
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 542ab0c12..d9a0429ab 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -22,6 +22,11 @@ const AppearanceTab = {
key: mode,
value: mode,
label: this.$t(`settings.third_column_mode_${mode}`)
+ })),
+ forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+ key: mode,
+ value: i - 1,
+ label: this.$t(`settings.forced_roundness_mode_${mode}`)
}))
}
},
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 929853f4b..5356292ec 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -128,11 +128,36 @@
{{ $t('settings.visual_tweaks') }}
+ -
+
+ {{ $t('settings.force_interface_roundness') }}
+
+
-
{{ $t('settings.hide_wallpaper') }}
+ -
+
+ {{ $t('settings.force_theme_recompilation_debug') }}
+
+
+ -
+
+ {{ $t('settings.theme_debug') }}
+
+
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 496d0d563..4ece6cf41 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,14 +148,6 @@
{{ $t('settings.post_look_feel') }}
- -
-
- {{ $t('settings.force_theme_recompilation_debug') }}
-
-
-
{}, themeDebug)
break
+ }
+ case 'themeDebug': {
+ const { customTheme, customThemeSource } = state
+ applyTheme(customTheme || customThemeSource, () => {}, value)
+ break
+ }
case 'interfaceLanguage':
messages.setLanguage(this.getters.i18n, value)
dispatch('loadUnicodeEmojiData', value)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 30eaddf1f..6997e75d5 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -103,6 +103,7 @@ const defaultState = {
emojiSize: '2.2rem',
navbarSize: '3.5rem',
panelHeaderSize: '3.2rem',
+ forcedRoundness: -1,
virtualScrolling: true,
sensitiveByDefault: false,
conversationDisplay: 'linear',
@@ -382,16 +383,16 @@ const instance = {
.then(themeData => {
commit('setInstanceOption', { name: 'themeData', value: themeData })
// No need to apply theme if there's user theme already
- const { customTheme } = rootState.config
+ const { customTheme, themeDebug } = rootState.config
const { themeApplied } = rootState.interface
if (customTheme || themeApplied) return
// New theme presets don't have 'theme' property, they use 'source'
const themeSource = themeData.source
if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
- applyTheme(themeSource)
+ applyTheme(themeSource, null, themeDebug)
} else {
- applyTheme(themeData.theme)
+ applyTheme(themeData.theme, null, themeDebug)
}
commit('setThemeApplied')
})
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7cf4af118..9e068a1ec 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,46 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js'
import { chunk } from 'lodash'
-export const generateTheme = async (input, callbacks) => {
+// On platforms where this is not supported, it will return undefined
+// Otherwise it will return an array
+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+
+const createStyleSheet = (id) => {
+ if (supportsAdoptedStyleSheets) {
+ return {
+ el: null,
+ sheet: new CSSStyleSheet(),
+ rules: []
+ }
+ }
+
+ const el = document.getElementById(id)
+ // Clear all rules in it
+ for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
+ el.sheet.deleteRule(i)
+ }
+
+ return {
+ el,
+ sheet: el.sheet,
+ rules: []
+ }
+}
+
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+
+const adoptStyleSheets = (styles) => {
+ if (supportsAdoptedStyleSheets) {
+ document.adoptedStyleSheets = styles.map(s => s.sheet)
+ }
+ // Some older browsers do not support document.adoptedStyleSheets.
+ // In this case, we use the