2020-11-29 22:13:27 +00:00
|
|
|
<SettingsLayout page='settings/general' label="{intl.general}">
|
|
|
|
<h1>{intl.generalSettings}</h1>
|
2018-03-14 00:14:57 +00:00
|
|
|
|
2021-03-01 00:36:47 +00:00
|
|
|
<h2>{intl.media}</h2>
|
2019-01-26 20:58:11 +00:00
|
|
|
<form class="ui-settings">
|
2019-08-18 20:29:36 +01:00
|
|
|
<label class="setting-group">
|
2018-12-01 22:09:08 +00:00
|
|
|
<input type="checkbox" id="choice-never-mark-media-sensitive"
|
|
|
|
bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.showSensitive}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
2023-01-09 06:54:39 +00:00
|
|
|
<label class="setting-group">
|
|
|
|
<input type="checkbox" id="choice-show-all-spoilers"
|
|
|
|
bind:checked="$showAllSpoilers" on:change="onChange(event)">
|
|
|
|
{intl.showAllSpoilers}
|
|
|
|
</label>
|
2019-08-18 20:29:36 +01:00
|
|
|
<label class="setting-group">
|
|
|
|
<input type="checkbox" id="choice-use-blurhash"
|
|
|
|
bind:checked="$ignoreBlurhash" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.showPlain}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2019-05-25 21:20:52 +01:00
|
|
|
<input type="checkbox" id="choice-mark-media-sensitive"
|
|
|
|
bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.allSensitive}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2018-12-08 17:44:12 +00:00
|
|
|
<input type="checkbox" id="choice-large-inline-media"
|
|
|
|
bind:checked="$largeInlineMedia" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.largeMedia}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2019-01-26 20:58:11 +00:00
|
|
|
<input type="checkbox" id="choice-autoplay-gif"
|
|
|
|
bind:checked="$autoplayGifs" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.autoplayGifs}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
2019-01-26 20:58:11 +00:00
|
|
|
</form>
|
|
|
|
|
|
|
|
<h2>UI</h2>
|
|
|
|
<form class="ui-settings">
|
2019-08-18 20:29:36 +01:00
|
|
|
<label class="setting-group">
|
2018-12-01 22:09:08 +00:00
|
|
|
<input type="checkbox" id="choice-disable-custom-scrollbars"
|
|
|
|
bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.disableCustomScrollbars}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2019-05-29 06:46:01 +01:00
|
|
|
<input type="checkbox" id="choice-disable-infinite-scroll"
|
|
|
|
bind:checked="$disableInfiniteScroll" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.disableInfiniteScrollPre}
|
2019-05-29 06:46:01 +01:00
|
|
|
<Tooltip
|
2020-11-29 22:13:27 +00:00
|
|
|
text="{intl.disableInfiniteScrollText}"
|
|
|
|
tooltipText="{intl.disableInfiniteScrollDescription}"
|
2019-05-29 06:46:01 +01:00
|
|
|
/>
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.disableInfiniteScrollPost}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2019-04-20 17:12:42 +01:00
|
|
|
<input type="checkbox" id="choice-hide-cards"
|
|
|
|
bind:checked="$hideCards" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.hideCards}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2019-01-26 20:58:11 +00:00
|
|
|
<input type="checkbox" id="choice-underline-links"
|
|
|
|
bind:checked="$underlineLinks" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.underlineLinks}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
2022-04-26 02:36:29 +01:00
|
|
|
<label class="setting-group">
|
|
|
|
<input type="checkbox" id="choice-center-nav"
|
|
|
|
bind:checked="$centerNav" on:change="onChange(event)">
|
|
|
|
{intl.centerNav}
|
|
|
|
</label>
|
2022-11-19 18:13:57 +00:00
|
|
|
<label class="setting-group">
|
|
|
|
<input type="checkbox" id="choice-bottom-nav"
|
|
|
|
bind:checked="$bottomNav" on:change="onChange(event)">
|
|
|
|
{intl.bottomNav}
|
|
|
|
</label>
|
2018-12-01 22:09:08 +00:00
|
|
|
</form>
|
|
|
|
|
2020-11-29 22:13:27 +00:00
|
|
|
<h2>{intl.accessibility}</h2>
|
2019-01-26 20:58:11 +00:00
|
|
|
<form class="ui-settings">
|
2019-08-18 20:29:36 +01:00
|
|
|
<label class="setting-group">
|
2018-03-23 03:23:00 +00:00
|
|
|
<input type="checkbox" id="choice-reduce-motion"
|
2018-12-01 22:09:08 +00:00
|
|
|
bind:checked="$reduceMotion" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.reduceMotion}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
2020-05-16 21:36:08 +01:00
|
|
|
<label class="setting-group">
|
|
|
|
<input type="checkbox" id="choice-always-show-focus-ring"
|
|
|
|
bind:checked="$alwaysShowFocusRing" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.showRingPre}
|
2020-05-16 21:36:08 +01:00
|
|
|
<Tooltip
|
2020-11-29 22:13:27 +00:00
|
|
|
text="{intl.showRingText}"
|
|
|
|
tooltipText="{intl.showRingDescription}"
|
2020-05-16 21:36:08 +01:00
|
|
|
/>
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.showRingPost}
|
2020-05-16 21:36:08 +01:00
|
|
|
</label>
|
2019-08-18 20:29:36 +01:00
|
|
|
<label class="setting-group">
|
2018-12-03 05:12:58 +00:00
|
|
|
<input type="checkbox" id="choice-disable-tap-on-status"
|
|
|
|
bind:checked="$disableTapOnStatus" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.disableTappable}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2018-08-20 02:03:26 +01:00
|
|
|
<input type="checkbox" id="choice-omit-emoji-in-display-names"
|
2018-12-01 22:09:08 +00:00
|
|
|
bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.removeEmoji}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
|
|
|
<label class="setting-group">
|
2018-12-01 19:53:20 +00:00
|
|
|
<input type="checkbox" id="choice-disable-long-aria-labels"
|
2018-12-01 22:09:08 +00:00
|
|
|
bind:checked="$disableLongAriaLabels" on:change="onChange(event)">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.shortAria}
|
2019-08-18 20:29:36 +01:00
|
|
|
</label>
|
2018-03-14 00:14:57 +00:00
|
|
|
</form>
|
2018-11-04 23:57:05 +00:00
|
|
|
|
2019-02-12 05:04:00 +00:00
|
|
|
{#if $isUserLoggedIn }
|
|
|
|
<h2>{themeTitle}</h2>
|
|
|
|
<ThemeSettings instanceName={$currentInstance} />
|
|
|
|
{/if}
|
2018-03-14 00:14:57 +00:00
|
|
|
</SettingsLayout>
|
2019-10-10 15:06:04 +01:00
|
|
|
<UISettingsStyles />
|
2018-03-14 00:14:57 +00:00
|
|
|
<script>
|
|
|
|
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
|
2018-12-01 20:57:00 +00:00
|
|
|
import ThemeSettings from '../../_components/settings/instance/ThemeSettings.html'
|
2021-07-05 04:19:04 +01:00
|
|
|
import { store } from '../../_store/store.js'
|
2019-05-29 06:46:01 +01:00
|
|
|
import Tooltip from '../../_components/Tooltip.html'
|
2019-10-10 15:06:04 +01:00
|
|
|
import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
|
2021-07-05 04:19:04 +01:00
|
|
|
import { formatIntl } from '../../_utils/formatIntl.js'
|
2018-03-14 00:14:57 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2018-12-01 20:57:00 +00:00
|
|
|
SettingsLayout,
|
2019-05-29 06:46:01 +01:00
|
|
|
ThemeSettings,
|
2019-10-10 15:06:04 +01:00
|
|
|
Tooltip,
|
|
|
|
UISettingsStyles
|
2018-03-14 00:14:57 +00:00
|
|
|
},
|
2018-12-01 22:09:08 +00:00
|
|
|
methods: {
|
|
|
|
onChange (event) {
|
|
|
|
// these two are mutually exclusive
|
2019-08-03 21:49:37 +01:00
|
|
|
const { markMediaAsSensitive, neverMarkMediaAsSensitive } = this.store.get()
|
2018-12-01 22:09:08 +00:00
|
|
|
if (markMediaAsSensitive && neverMarkMediaAsSensitive) {
|
|
|
|
if (event.target.id === 'choice-mark-media-sensitive') {
|
|
|
|
this.store.set({ neverMarkMediaAsSensitive: false })
|
|
|
|
} else {
|
|
|
|
this.store.set({ markMediaAsSensitive: false })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.store.save()
|
|
|
|
}
|
|
|
|
},
|
2018-12-01 20:57:00 +00:00
|
|
|
store: () => store,
|
|
|
|
computed: {
|
|
|
|
themeTitle: ({ $loggedInInstancesInOrder, $currentInstance }) => (
|
2020-11-29 22:13:27 +00:00
|
|
|
$loggedInInstancesInOrder.length > 1
|
|
|
|
? formatIntl('intl.themeForInstance', { instance: $currentInstance })
|
|
|
|
: 'intl.theme'
|
2018-12-01 20:57:00 +00:00
|
|
|
)
|
|
|
|
}
|
2018-04-20 05:38:01 +01:00
|
|
|
}
|
2018-12-03 05:12:58 +00:00
|
|
|
</script>
|