Leafus/puppyoma-fe
1
0
Fork 0
forked from mirrors/amputoma-fe
Code Pull requests Activity

Timeline Animations Toggle

Browse source
This commit is contained in:
Leafy :3 2025-02-11 23:52:28 +01:00
parent 358e7ea049
commit 854f37a8c5
6 changed files with 140 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/App.js
View file

@ -120,6 +120,11 @@ export default {
}, },
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
rootAttributes() {
return {
'data-enable-animations': this.$store.state.interface.enableTimelineAnimations ? 'true' : 'false'
}
},
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
@ -127,5 +132,15 @@ export default {
this.$store.dispatch('setLayoutWidth', windowWidth()) this.$store.dispatch('setLayoutWidth', windowWidth())
this.$store.dispatch('setLayoutHeight', windowHeight()) this.$store.dispatch('setLayoutHeight', windowHeight())
} }
},
watch: {
'rootAttributes': {
immediate: true,
handler(newAttrs) {
// Apply attributes directly to HTML element
document.documentElement.dataset.enableAnimations =
this.$store.state.interface.enableTimelineAnimations ? 'true' : 'false'
}
}
} }
} }

3
src/App.vue
View file

@ -2,6 +2,7 @@
<div <div
id="app-loaded" id="app-loaded"
:style="bgStyle" :style="bgStyle"
v-bind="rootAttributes"
> >
<div <div
id="app_bg_wrapper" id="app_bg_wrapper"
@ -78,4 +79,4 @@
</template> </template>
<script src="./App.js"></script> <script src="./App.js"></script>
<style lang="scss" src="./App.scss"></style> <style lang="scss" src="./App.scss"></style>

20
src/components/settings_modal/tabs/general_tab.js
View file

@ -25,6 +25,7 @@ const GeneralTab = {
}, },
data () { data () {
return { return {
animationsEnabled: localStorage.getItem('timelineAnimationsEnabled') !== 'false',
subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({ subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
key: mode, key: mode,
value: mode, value: mode,
@ -67,6 +68,10 @@ const GeneralTab = {
} }
}, },
mounted() {
console.log('Initial animation state:', this.animationsEnabled)
document.documentElement.dataset.enableAnimations = this.timelineAnimations
},
components: { components: {
BooleanSetting, BooleanSetting,
ChoiceSetting, ChoiceSetting,
@ -130,9 +135,24 @@ const GeneralTab = {
this.$store.dispatch('setOption', { name: 'postLanguage', value: val }) this.$store.dispatch('setOption', { name: 'postLanguage', value: val })
} }
}, },
timelineAnimations: {
get() {
return this.$store.getters.mergedConfig.timelineAnimations !== false
},
set(value) {
this.$store.dispatch('setOption', { name: 'timelineAnimations', value })
document.documentElement.dataset.enableAnimations = value
}
},
...SharedComputedObject() ...SharedComputedObject()
}, },
methods: { methods: {
toggleAnimations(value) {
console.log('Toggling animations:', value)
this.animationsEnabled = value
localStorage.setItem('timelineAnimationsEnabled', value)
document.documentElement.dataset.enableAnimations = value
},
changeDefaultScope (value) { changeDefaultScope (value) {
this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value }) this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
}, },

354
src/components/settings_modal/tabs/general_tab.vue
View file

@ -3,97 +3,55 @@
<div class="setting-item"> <div class="setting-item">
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<interface-language-switcher <interface-language-switcher :prompt-text="$t('settings.interfaceLanguage')" :language="language"
:prompt-text="$t('settings.interfaceLanguage')" :set-language="val => language = val" />
:language="language"
:set-language="val => language = val"
/>
</li> </li>
<li <li v-if="user && (settingsProfiles.length > 0)">
v-if="user && (settingsProfiles.length > 0)"
>
<h2>{{ $t('settings.settings_profile') }}</h2> <h2>{{ $t('settings.settings_profile') }}</h2>
<p> <p>
{{ $t('settings.settings_profile_currently', { name: settingsProfile, version: settingsVersion }) }} {{ $t('settings.settings_profile_currently', { name: settingsProfile, version: settingsVersion }) }}
<button <button class="btn button-default" @click="forceSync()">
class="btn button-default"
@click="forceSync()"
>
{{ $t('settings.settings_profile_force_sync') }} {{ $t('settings.settings_profile_force_sync') }}
</button> </button>
</p> </p>
<div <div @click="toggleExpandedSettings">
@click="toggleExpandedSettings" <template v-if="profilesExpanded">
>
<template
v-if="profilesExpanded"
>
<button class="btn button-default"> <button class="btn button-default">
{{ $t('settings.settings_profiles_unshow') }} {{ $t('settings.settings_profiles_unshow') }}
</button> </button>
</template> </template>
<template <template v-else>
v-else
>
<button class="btn button-default"> <button class="btn button-default">
{{ $t('settings.settings_profiles_show') }} {{ $t('settings.settings_profiles_show') }}
</button> </button>
</template> </template>
</div> </div>
<br> <br>
<template <template v-if="profilesExpanded">
v-if="profilesExpanded" <div v-for="profile in settingsProfiles" :key="profile.id" class="settings-profile">
>
<div
v-for="profile in settingsProfiles"
:key="profile.id"
class="settings-profile"
>
<h4>{{ profile.name }} ({{ profile.version }})</h4> <h4>{{ profile.name }} ({{ profile.version }})</h4>
<template <template v-if="settingsProfile === profile.name">
v-if="settingsProfile === profile.name"
>
{{ $t('settings.settings_profile_in_use') }} {{ $t('settings.settings_profile_in_use') }}
</template> </template>
<template <template v-else>
v-else <button class="btn button-default" @click="loadSettingsProfile(profile.name)">
>
<button
class="btn button-default"
@click="loadSettingsProfile(profile.name)"
>
{{ $t('settings.settings_profile_use') }} {{ $t('settings.settings_profile_use') }}
</button> </button>
<button <button class="btn button-default" @click="deleteSettingsProfile(profile.name)">
class="btn button-default"
@click="deleteSettingsProfile(profile.name)"
>
{{ $t('settings.settings_profile_delete') }} {{ $t('settings.settings_profile_delete') }}
</button> </button>
</template> </template>
</div> </div>
<button <button class="btn button-default" @click="refreshProfiles()">
class="btn button-default"
@click="refreshProfiles()"
>
{{ $t('settings.settings_profiles_refresh') }} {{ $t('settings.settings_profiles_refresh') }}
<FAIcon <FAIcon icon="sync" @click="refreshProfiles()" />
icon="sync"
@click="refreshProfiles()"
/>
</button> </button>
<h3>{{ $t('settings.settings_profile_creation') }}</h3> <h3>{{ $t('settings.settings_profile_creation') }}</h3>
<label for="settings-profile-new-name"> <label for="settings-profile-new-name">
{{ $t('settings.settings_profile_creation_new_name_label') }} {{ $t('settings.settings_profile_creation_new_name_label') }}
</label> </label>
<input <input id="settings-profile-new-name" v-model="newProfileName">
id="settings-profile-new-name" <button class="btn button-default" @click="createSettingsProfile">
v-model="newProfileName"
>
<button
class="btn button-default"
@click="createSettingsProfile"
>
{{ $t('settings.settings_profile_creation_submit') }} {{ $t('settings.settings_profile_creation_submit') }}
</button> </button>
</template> </template>
@ -115,49 +73,37 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="timelineAnimations">
path="hideSiteFavicon" Enable Timeline Animations
expert="1" </BooleanSetting>
> </li>
<li>
<BooleanSetting path="hideSiteFavicon" expert="1">
{{ $t('settings.hide_site_favicon') }} {{ $t('settings.hide_site_favicon') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="hideSiteName" expert="1">
path="hideSiteName"
expert="1"
>
{{ $t('settings.hide_site_name') }} {{ $t('settings.hide_site_name') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="showNavShortcuts" expert="1">
path="showNavShortcuts"
expert="1"
>
{{ $t('settings.show_nav_shortcuts') }} {{ $t('settings.show_nav_shortcuts') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="showPanelNavShortcuts" expert="1">
path="showPanelNavShortcuts"
expert="1"
>
{{ $t('settings.show_panel_nav_shortcuts') }} {{ $t('settings.show_panel_nav_shortcuts') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="federatedTimelineVisible">
path="federatedTimelineVisible"
>
{{ $t('settings.show_federated_timeline') }} {{ $t('settings.show_federated_timeline') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="showWiderShortcuts" expert="1">
path="showWiderShortcuts"
expert="1"
>
{{ $t('settings.show_wider_shortcuts') }} {{ $t('settings.show_wider_shortcuts') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -185,33 +131,21 @@
<BooleanSetting path="streaming"> <BooleanSetting path="streaming">
{{ $t('settings.streaming') }} {{ $t('settings.streaming') }}
</BooleanSetting> </BooleanSetting>
<ul <ul class="setting-list suboptions" :class="[{ disabled: !streaming }]">
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li> <li>
<BooleanSetting <BooleanSetting path="pauseOnUnfocused" :disabled="!streaming">
path="pauseOnUnfocused"
:disabled="!streaming"
>
{{ $t('settings.pause_on_unfocused') }} {{ $t('settings.pause_on_unfocused') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="useStreamingApi" expert="1">
path="useStreamingApi"
expert="1"
>
{{ $t('settings.useStreamingApi') }} {{ $t('settings.useStreamingApi') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="virtualScrolling" expert="1">
path="virtualScrolling"
expert="1"
>
{{ $t('settings.virtual_scrolling') }} {{ $t('settings.virtual_scrolling') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -220,51 +154,33 @@
<BooleanSetting path="renderMisskeyMarkdown"> <BooleanSetting path="renderMisskeyMarkdown">
{{ $t('settings.render_mfm') }} {{ $t('settings.render_mfm') }}
</BooleanSetting> </BooleanSetting>
<ul <ul class="setting-list suboptions">
class="setting-list suboptions"
>
<li> <li>
<BooleanSetting <BooleanSetting path="renderMfmOnHover" :disabled="!renderMisskeyMarkdown">
path="renderMfmOnHover"
:disabled="!renderMisskeyMarkdown"
>
{{ $t('settings.render_mfm_on_hover') }} {{ $t('settings.render_mfm_on_hover') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting id="userProfileDefaultTab" path="userProfileDefaultTab"
id="userProfileDefaultTab" :options="userProfileDefaultTabOptions">
path="userProfileDefaultTab"
:options="userProfileDefaultTabOptions"
>
{{ $t('settings.user_profile_default_tab') }} {{ $t('settings.user_profile_default_tab') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting v-if="user && (translationLanguages.length > 0)" id="translationLanguage"
v-if="user && (translationLanguages.length > 0)" path="translationLanguage" :options="translationLanguages">
id="translationLanguage"
path="translationLanguage"
:options="translationLanguages"
>
{{ $t('settings.translation_language') }} {{ $t('settings.translation_language') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="alwaysShowNewPostButton" expert="1">
path="alwaysShowNewPostButton"
expert="1"
>
{{ $t('settings.always_show_post_button') }} {{ $t('settings.always_show_post_button') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="autohideFloatingPostButton" expert="1">
path="autohideFloatingPostButton"
expert="1"
>
{{ $t('settings.autohide_floating_post_button') }} {{ $t('settings.autohide_floating_post_button') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -287,12 +203,7 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting v-if="user" id="thirdColumnMode" path="thirdColumnMode" :options="thirdColumnModeOptions">
v-if="user"
id="thirdColumnMode"
path="thirdColumnMode"
:options="thirdColumnModeOptions"
>
{{ $t('settings.third_column_mode') }} {{ $t('settings.third_column_mode') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
@ -345,47 +256,29 @@
<h2>{{ $t('settings.post_look_feel') }}</h2> <h2>{{ $t('settings.post_look_feel') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<ChoiceSetting <ChoiceSetting id="conversationDisplay" path="conversationDisplay" :options="conversationDisplayOptions">
id="conversationDisplay"
path="conversationDisplay"
:options="conversationDisplayOptions"
>
{{ $t('settings.conversation_display') }} {{ $t('settings.conversation_display') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<ul <ul v-if="conversationDisplay !== 'linear'" class="setting-list suboptions">
v-if="conversationDisplay !== 'linear'"
class="setting-list suboptions"
>
<li> <li>
<BooleanSetting path="conversationTreeAdvanced"> <BooleanSetting path="conversationTreeAdvanced">
{{ $t('settings.tree_advanced') }} {{ $t('settings.tree_advanced') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="conversationTreeFadeAncestors" :expert="1">
path="conversationTreeFadeAncestors"
:expert="1"
>
{{ $t('settings.tree_fade_ancestors') }} {{ $t('settings.tree_fade_ancestors') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<IntegerSetting <IntegerSetting path="maxDepthInThread" :min="3" :expert="1">
path="maxDepthInThread"
:min="3"
:expert="1"
>
{{ $t('settings.max_depth_in_thread') }} {{ $t('settings.max_depth_in_thread') }}
</IntegerSetting> </IntegerSetting>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting id="conversationOtherRepliesButton" path="conversationOtherRepliesButton"
id="conversationOtherRepliesButton" :options="conversationOtherRepliesButtonOptions" :expert="1">
path="conversationOtherRepliesButton"
:options="conversationOtherRepliesButtonOptions"
:expert="1"
>
{{ $t('settings.conversation_other_replies_button') }} {{ $t('settings.conversation_other_replies_button') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
@ -396,28 +289,18 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="emojiReactionsOnTimeline" expert="1">
path="emojiReactionsOnTimeline"
expert="1"
>
{{ $t('settings.emoji_reactions_on_timeline') }} {{ $t('settings.emoji_reactions_on_timeline') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting v-if="user" path="serverSide_stripRichContent" expert="1">
v-if="user"
path="serverSide_stripRichContent"
expert="1"
>
{{ $t('settings.no_rich_text_description') }} {{ $t('settings.no_rich_text_description') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<h3>{{ $t('settings.attachments') }}</h3> <h3>{{ $t('settings.attachments') }}</h3>
<li> <li>
<BooleanSetting <BooleanSetting path="useContainFit" expert="1">
path="useContainFit"
expert="1"
>
{{ $t('settings.use_contain_fit') }} {{ $t('settings.use_contain_fit') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -428,87 +311,50 @@
</li> </li>
<ul class="setting-list suboptions"> <ul class="setting-list suboptions">
<li> <li>
<BooleanSetting <BooleanSetting path="preloadImage" expert="1" :disabled="!hideNsfw">
path="preloadImage"
expert="1"
:disabled="!hideNsfw"
>
{{ $t('settings.preload_images') }} {{ $t('settings.preload_images') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="useBlurhash" expert="1" :disabled="!hideNsfw">
path="useBlurhash"
expert="1"
:disabled="!hideNsfw"
>
{{ $t('settings.use_blurhash') }} {{ $t('settings.use_blurhash') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="useOneClickNsfw" expert="1" :disabled="!hideNsfw">
path="useOneClickNsfw"
expert="1"
:disabled="!hideNsfw"
>
{{ $t('settings.use_one_click_nsfw') }} {{ $t('settings.use_one_click_nsfw') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
</ul> </ul>
<li> <li>
<BooleanSetting <BooleanSetting path="loopVideo" expert="1">
path="loopVideo"
expert="1"
>
{{ $t('settings.loop_video') }} {{ $t('settings.loop_video') }}
</BooleanSetting> </BooleanSetting>
<ul <ul class="setting-list suboptions" :class="[{ disabled: !streaming }]">
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li> <li>
<BooleanSetting <BooleanSetting path="loopVideoSilentOnly" expert="1" :disabled="!loopVideo || !loopSilentAvailable">
path="loopVideoSilentOnly"
expert="1"
:disabled="!loopVideo || !loopSilentAvailable"
>
{{ $t('settings.loop_video_silent_only') }} {{ $t('settings.loop_video_silent_only') }}
</BooleanSetting> </BooleanSetting>
<div <div v-if="!loopSilentAvailable" class="unavailable">
v-if="!loopSilentAvailable"
class="unavailable"
>
<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }} <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
</div> </div>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="playVideosInModal" expert="1">
path="playVideosInModal"
expert="1"
>
{{ $t('settings.play_videos_in_modal') }} {{ $t('settings.play_videos_in_modal') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<h3>{{ $t('settings.mention_links') }}</h3> <h3>{{ $t('settings.mention_links') }}</h3>
<li> <li>
<ChoiceSetting <ChoiceSetting id="mentionLinkDisplay" path="mentionLinkDisplay" :options="mentionLinkDisplayOptions">
id="mentionLinkDisplay"
path="mentionLinkDisplay"
:options="mentionLinkDisplayOptions"
>
{{ $t('settings.mention_link_display') }} {{ $t('settings.mention_link_display') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<ul <ul class="setting-list suboptions">
class="setting-list suboptions"
>
<li v-if="mentionLinkDisplay === 'short'"> <li v-if="mentionLinkDisplay === 'short'">
<BooleanSetting <BooleanSetting path="mentionLinkShowTooltip" expert="1">
path="mentionLinkShowTooltip"
expert="1"
>
{{ $t('settings.mention_link_show_tooltip') }} {{ $t('settings.mention_link_show_tooltip') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -519,18 +365,12 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="mentionLinkFadeDomain" expert="1">
path="mentionLinkFadeDomain"
expert="1"
>
{{ $t('settings.mention_link_fade_domain') }} {{ $t('settings.mention_link_fade_domain') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li v-if="user"> <li v-if="user">
<BooleanSetting <BooleanSetting path="mentionLinkBoldenYou" expert="1">
path="mentionLinkBoldenYou"
expert="1"
>
{{ $t('settings.mention_link_bolden_you') }} {{ $t('settings.mention_link_bolden_you') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -538,39 +378,27 @@
{{ $t('settings.fun') }} {{ $t('settings.fun') }}
</h3> </h3>
<li> <li>
<BooleanSetting <BooleanSetting path="greentext" expert="1">
path="greentext"
expert="1"
>
{{ $t('settings.greentext') }} {{ $t('settings.greentext') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li v-if="user"> <li v-if="user">
<BooleanSetting <BooleanSetting path="mentionLinkShowYous" expert="1">
path="mentionLinkShowYous"
expert="1"
>
{{ $t('settings.show_yous') }} {{ $t('settings.show_yous') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
</ul> </ul>
</div> </div>
<div <div v-if="user" class="setting-item">
v-if="user"
class="setting-item"
>
<h2>{{ $t('settings.composing') }}</h2> <h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<label for="default-vis"> <label for="default-vis">
{{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" /> {{ $t('settings.default_vis') }}
<ScopeSelector <ServerSideIndicator :server-side="true" />
class="scope-selector" <ScopeSelector class="scope-selector" :user-default="serverSide_defaultScope"
:user-default="serverSide_defaultScope" :initial-scope="serverSide_defaultScope" :on-scope-change="changeDefaultScope" />
:initial-scope="serverSide_defaultScope"
:on-scope-change="changeDefaultScope"
/>
</label> </label>
</li> </li>
<li> <li>
@ -584,62 +412,37 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="alwaysShowSubjectInput" expert="1">
path="alwaysShowSubjectInput"
expert="1"
>
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.subject_input_always_show') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting id="subjectLineBehavior" path="subjectLineBehavior" :options="subjectLineOptions" expert="1">
id="subjectLineBehavior"
path="subjectLineBehavior"
:options="subjectLineOptions"
expert="1"
>
{{ $t('settings.subject_line_behavior') }} {{ $t('settings.subject_line_behavior') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li v-if="postFormats.length > 0"> <li v-if="postFormats.length > 0">
<ChoiceSetting <ChoiceSetting id="postContentType" path="postContentType" :options="postContentOptions">
id="postContentType"
path="postContentType"
:options="postContentOptions"
>
{{ $t('settings.post_status_content_type') }} {{ $t('settings.post_status_content_type') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li> <li>
<ChoiceSetting <ChoiceSetting id="postLanguage" path="postLanguage" :options="postLanguageOptions">
id="postLanguage"
path="postLanguage"
:options="postLanguageOptions"
>
{{ $t('settings.post_language') }} {{ $t('settings.post_language') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="alwaysShowNewPostButton" expert="1">
path="alwaysShowNewPostButton"
expert="1"
>
{{ $t('settings.always_show_post_button') }} {{ $t('settings.always_show_post_button') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="autohideFloatingPostButton" expert="1">
path="autohideFloatingPostButton"
expert="1"
>
{{ $t('settings.autohide_floating_post_button') }} {{ $t('settings.autohide_floating_post_button') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="padEmoji" expert="1">
path="padEmoji"
expert="1"
>
{{ $t('settings.pad_emoji') }} {{ $t('settings.pad_emoji') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
@ -648,7 +451,8 @@
</div> </div>
</template> </template>
<script src="./general_tab.js"></script>
<script src="./general_tab.js"/>
<style lang="scss"> <style lang="scss">
.settings-profile { .settings-profile {
margin-bottom: 1em; margin-bottom: 1em;

35
src/components/timeline/timeline.scss
View file

@ -35,16 +35,27 @@
.timeline-post { .timeline-post {
transform-origin: center; transform-origin: center;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.01);
}
} }
.status-fadein { :root[data-enable-animations="true"] {
animation: statusAppear 0.3s ease-out; .timeline-post {
animation-fill-mode: both; transition: transform 0.2s ease;
&:hover {
transform: scale(1.01);
}
@for $i from 0 through 20 {
&:nth-child(#{$i}) {
animation-delay: #{$i * 0.05}s;
}
}
}
.status-fadein {
animation: statusAppear 0.3s ease-out;
animation-fill-mode: both;
}
} }
@keyframes statusAppear { @keyframes statusAppear {
@ -57,11 +68,3 @@
transform: translateY(0); transform: translateY(0);
} }
} }
.timeline-post {
@for $i from 0 through 20 {
&:nth-child(#{$i}) {
animation-delay: #{$i * 0.05}s;
}
}
}

6
src/modules/interface.js
View file

@ -19,7 +19,8 @@ const defaultState = {
layoutType: 'normal', layoutType: 'normal',
globalNotices: [], globalNotices: [],
layoutHeight: 0, layoutHeight: 0,
lastTimeline: null lastTimeline: null,
enableTimelineAnimations: true
} }
const interfaceMod = { const interfaceMod = {
@ -104,6 +105,9 @@ const interfaceMod = {
}, },
setLastTimeline (state, value) { setLastTimeline (state, value) {
state.lastTimeline = value state.lastTimeline = value
},
setOption (state, { name, value }) {
state[name] = value
} }
}, },
actions: { actions: {