Merge branch 'appearance-tab' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
a4ab8e065a
17 changed files with 614 additions and 279 deletions
|
|
@ -20,6 +20,16 @@ export default {
|
|||
'Tab',
|
||||
'ListItem'
|
||||
],
|
||||
validInnerComponentsLite: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'Alert'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ export default {
|
|||
'Alert',
|
||||
'Button' // mobile post button
|
||||
],
|
||||
validInnerComponentsLite: [
|
||||
'Underlay',
|
||||
'Scrollbar',
|
||||
'ScrollbarElement'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,18 @@ import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue
|
|||
|
||||
import FontControl from 'src/components/font_control/font_control.vue'
|
||||
|
||||
import { normalizeThemeData } from 'src/modules/interface'
|
||||
|
||||
import {
|
||||
getThemes
|
||||
} from 'src/services/style_setter/style_setter.js'
|
||||
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
|
||||
import { init } from 'src/services/theme_data/theme_data_3.service.js'
|
||||
import {
|
||||
getCssRules,
|
||||
getScopedVersion
|
||||
} from 'src/services/theme_data/css_utils.js'
|
||||
|
||||
import SharedComputedObject from '../helpers/shared_computed_object.js'
|
||||
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
|
|
@ -13,6 +25,8 @@ import {
|
|||
faGlobe
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import Preview from './theme_tab/preview.vue'
|
||||
|
||||
library.add(
|
||||
faGlobe
|
||||
)
|
||||
|
|
@ -20,6 +34,8 @@ library.add(
|
|||
const AppearanceTab = {
|
||||
data () {
|
||||
return {
|
||||
availableStyles: [],
|
||||
intersectionObserver: null,
|
||||
thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
|
||||
key: mode,
|
||||
value: mode,
|
||||
|
|
@ -28,12 +44,12 @@ const AppearanceTab = {
|
|||
forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
|
||||
key: mode,
|
||||
value: i - 1,
|
||||
label: this.$t(`settings.forced_roundness_mode_${mode}`)
|
||||
label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
|
||||
})),
|
||||
underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
|
||||
key: mode,
|
||||
value: mode,
|
||||
label: this.$t(`settings.underlay_override_mode_${mode}`)
|
||||
label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
|
@ -44,9 +60,61 @@ const AppearanceTab = {
|
|||
FloatSetting,
|
||||
UnitSetting,
|
||||
ProfileSettingIndicator,
|
||||
FontControl
|
||||
FontControl,
|
||||
Preview
|
||||
},
|
||||
mounted () {
|
||||
getThemes()
|
||||
.then((promises) => {
|
||||
return Promise.all(
|
||||
Object.entries(promises)
|
||||
.map(([k, v]) => v.then(res => [k, res]))
|
||||
)
|
||||
})
|
||||
.then(themes => themes.reduce((acc, [k, v]) => {
|
||||
if (v) {
|
||||
return [
|
||||
...acc,
|
||||
{
|
||||
name: v.name || v[0],
|
||||
key: k,
|
||||
data: v
|
||||
}
|
||||
]
|
||||
} else {
|
||||
return acc
|
||||
}
|
||||
}, []))
|
||||
.then((themesComplete) => {
|
||||
this.availableStyles = themesComplete
|
||||
})
|
||||
|
||||
if (window.IntersectionObserver) {
|
||||
this.intersectionObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(({ target, isIntersecting }) => {
|
||||
if (!isIntersecting) return
|
||||
const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
|
||||
this.$nextTick(() => {
|
||||
if (theme) theme.ready = true
|
||||
})
|
||||
observer.unobserve(target)
|
||||
})
|
||||
}, {
|
||||
root: this.$refs.themeList
|
||||
})
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
|
||||
this.intersectionObserver.observe(node)
|
||||
})
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
noIntersectionObserver () {
|
||||
return !window.IntersectionObserver
|
||||
},
|
||||
horizontalUnits () {
|
||||
return defaultHorizontalUnits
|
||||
},
|
||||
|
|
@ -76,7 +144,39 @@ const AppearanceTab = {
|
|||
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
|
||||
}
|
||||
},
|
||||
isCustomThemeUsed () {
|
||||
const { theme } = this.mergedConfig
|
||||
return theme === 'custom' || theme === null
|
||||
},
|
||||
...SharedComputedObject()
|
||||
},
|
||||
methods: {
|
||||
isThemeActive (key) {
|
||||
const { theme } = this.mergedConfig
|
||||
console.log(key, theme)
|
||||
return key === theme
|
||||
},
|
||||
setTheme (name) {
|
||||
this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true })
|
||||
},
|
||||
previewTheme (key, input) {
|
||||
const style = normalizeThemeData(input)
|
||||
const x = 2
|
||||
if (x === 1) return
|
||||
const theme2 = convertTheme2To3(style)
|
||||
const theme3 = init({
|
||||
inputRuleset: theme2,
|
||||
ultimateBackgroundColor: '#000000',
|
||||
liteMode: true,
|
||||
debug: true,
|
||||
onlyNormalState: true
|
||||
})
|
||||
|
||||
return getScopedVersion(
|
||||
getCssRules(theme3.eager),
|
||||
'#theme-preview-' + key
|
||||
).join('\n')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,39 @@
|
|||
<template>
|
||||
<div :label="$t('settings.general')">
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.theme') }}</h2>
|
||||
<ul
|
||||
class="theme-list"
|
||||
ref="themeList"
|
||||
>
|
||||
<button
|
||||
v-if="isCustomThemeUsed"
|
||||
disabled
|
||||
class="button-default theme-preview"
|
||||
>
|
||||
<preview />
|
||||
<h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
|
||||
</button>
|
||||
<button
|
||||
v-for="style in availableStyles"
|
||||
:data-theme-key="style.key"
|
||||
:key="style.key"
|
||||
class="button-default theme-preview"
|
||||
:class="{ toggled: isThemeActive(style.key) }"
|
||||
@click="setTheme(style.key)"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<component
|
||||
:is="'style'"
|
||||
v-if="style.ready || noIntersectionObserver"
|
||||
v-html="previewTheme(style.key, style.data)"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
||||
<preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
|
||||
<h4 class="theme-name">{{ style.name }}</h4>
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.scale_and_layout') }}</h2>
|
||||
<ul class="setting-list">
|
||||
|
|
@ -179,7 +213,7 @@
|
|||
path="forcedRoundness"
|
||||
:options="forcedRoundnessOptions"
|
||||
>
|
||||
{{ $t('settings.force_interface_roundness') }}
|
||||
{{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -188,7 +222,7 @@
|
|||
path="theme3hacks.underlay"
|
||||
:options="underlayOverrideModes"
|
||||
>
|
||||
{{ $t('settings.underlay_overrides') }}
|
||||
{{ $t('settings.style.themes3.hacks.underlay_overrides') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li v-if="instanceWallpaperUsed">
|
||||
|
|
@ -231,4 +265,38 @@
|
|||
margin-bottom: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.theme-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -0.5em 0;
|
||||
height: 25em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
border-radius: var(--roundness);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0;
|
||||
|
||||
.theme-preview {
|
||||
width: 19rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0.5em;
|
||||
|
||||
&.placeholder {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
pointer-events: none;
|
||||
zoom: 0.5;
|
||||
border: none;
|
||||
border-radius: var(--roundness);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,15 +99,9 @@
|
|||
>
|
||||
|
||||
<div class="actions">
|
||||
<span class="checkbox">
|
||||
<input
|
||||
id="preview_checkbox"
|
||||
checked="very yes"
|
||||
type="checkbox"
|
||||
class="input"
|
||||
>
|
||||
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
|
||||
</span>
|
||||
<Checkbox>
|
||||
{{ $t('settings.style.preview.checkbox') }}
|
||||
</Checkbox>
|
||||
<button class="btn button-default">
|
||||
{{ $t('settings.style.preview.button') }}
|
||||
</button>
|
||||
|
|
@ -118,6 +112,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes,
|
||||
|
|
@ -133,12 +128,116 @@ library.add(
|
|||
faReply
|
||||
)
|
||||
|
||||
export default {}
|
||||
export default {
|
||||
components: {
|
||||
Checkbox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.preview-container {
|
||||
position: relative;
|
||||
border-top: 1px dashed;
|
||||
border-bottom: 1px dashed;
|
||||
border-color: var(--border);
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
background-color: var(--wallpaper);
|
||||
background-image: var(--body-background-image);
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
|
||||
.theme-preview-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dummy {
|
||||
.post {
|
||||
font-family: var(--postFont);
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 0.5em;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.after-post {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.avatar-alt {
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#b8e1fc 0%,
|
||||
#a9d2f3 10%,
|
||||
#90bae4 25%,
|
||||
#90bcea 37%,
|
||||
#90bff0 50%,
|
||||
#6ba8e5 51%,
|
||||
#a2daf5 83%,
|
||||
#bdf3fd 100%
|
||||
);
|
||||
color: black;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.avatar-alt {
|
||||
flex: 0 auto;
|
||||
margin-left: 28px;
|
||||
font-size: 12px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.checkbox {
|
||||
margin-right: 1em;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 1em;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.underlay-preview {
|
||||
|
|
@ -148,4 +247,4 @@ export default {}
|
|||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,10 @@ import {
|
|||
|
||||
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
|
||||
import { init } from 'src/services/theme_data/theme_data_3.service.js'
|
||||
import { getCssRules } from 'src/services/theme_data/css_utils.js'
|
||||
import {
|
||||
getCssRules,
|
||||
getScopedVersion
|
||||
} from 'src/services/theme_data/css_utils.js'
|
||||
|
||||
import ColorInput from 'src/components/color_input/color_input.vue'
|
||||
import RangeInput from 'src/components/range_input/range_input.vue'
|
||||
|
|
@ -499,18 +502,14 @@ export default {
|
|||
}
|
||||
},
|
||||
setCustomTheme () {
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
this.$store.dispatch('setThemeV2', {
|
||||
customTheme: {
|
||||
ignore: true,
|
||||
themeFileVersion: this.selectedVersion,
|
||||
themeEngineVersion: CURRENT_VERSION,
|
||||
...this.previewTheme
|
||||
}
|
||||
})
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customThemeSource',
|
||||
value: {
|
||||
},
|
||||
customThemeSource: {
|
||||
themeFileVersion: this.selectedVersion,
|
||||
themeEngineVersion: CURRENT_VERSION,
|
||||
shadows: this.shadowsLocal,
|
||||
|
|
@ -607,7 +606,7 @@ export default {
|
|||
normalizeLocalState (theme, version = 0, source, forceSource = false) {
|
||||
let input
|
||||
if (typeof source !== 'undefined') {
|
||||
if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
|
||||
if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
|
||||
input = source
|
||||
version = source.themeEngineVersion
|
||||
} else {
|
||||
|
|
@ -707,17 +706,10 @@ export default {
|
|||
liteMode: true
|
||||
})
|
||||
|
||||
this.themeV3Preview = getCssRules(theme3.eager)
|
||||
.map(x => {
|
||||
if (x.startsWith('html')) {
|
||||
return x.replace('html', '#theme-preview')
|
||||
} else if (x.startsWith('#content')) {
|
||||
return x.replace('#content', '#theme-preview')
|
||||
} else {
|
||||
return '#theme-preview > ' + x
|
||||
}
|
||||
})
|
||||
.join('\n')
|
||||
this.themeV3Preview = getScopedVersion(
|
||||
getCssRules(theme3.eager),
|
||||
'#theme-preview'
|
||||
).join('\n')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -161,107 +161,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
border-top: 1px dashed;
|
||||
border-bottom: 1px dashed;
|
||||
border-color: var(--border);
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
background-color: var(--wallpaper);
|
||||
background-image: var(--body-background-image);
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
|
||||
.dummy {
|
||||
.post {
|
||||
font-family: var(--postFont);
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 0.5em;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.after-post {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.avatar-alt {
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#b8e1fc 0%,
|
||||
#a9d2f3 10%,
|
||||
#90bae4 25%,
|
||||
#90bcea 37%,
|
||||
#90bff0 50%,
|
||||
#6ba8e5 51%,
|
||||
#a2daf5 83%,
|
||||
#bdf3fd 100%
|
||||
);
|
||||
color: black;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.avatar-alt {
|
||||
flex: 0 auto;
|
||||
margin-left: 28px;
|
||||
font-size: 12px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.checkbox {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
margin-right: 1em;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 1em;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radius-item {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
|
@ -314,10 +213,6 @@
|
|||
max-width: 50em;
|
||||
}
|
||||
|
||||
.theme-preview-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.theme-warning {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,15 @@ export default {
|
|||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
validInnerComponentsLite: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue