pinafore/routes/_pages/settings/general.html

70 lines
2.5 KiB
HTML

<SettingsLayout page='settings/general' label="General">
<h1>General Settings</h1>
<h2>UI Settings</h2>
<form class="ui-settings" aria-label="UI settings">
<div class="setting-group">
<input type="checkbox" id="choice-autoplay-gif"
bind:checked="$autoplayGifs" on:change="$save()">
<label for="choice-autoplay-gif">Autoplay GIFs</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-mark-media-sensitive"
bind:checked="$markMediaAsSensitive" on:change="$save()">
<label for="choice-mark-media-sensitive">Always mark media as sensitive</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="$save()">
<label for="choice-reduce-motion">Reduce motion in UI animations</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-omit-emoji-in-display-names"
bind:checked="$omitEmojiInDisplayNames" on:change="$save()">
<label for="choice-omit-emoji-in-display-names">Remove emoji from user display names</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-disable-custom-scrollbars"
bind:checked="$disableCustomScrollbars" on:change="$save()">
<label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
</div>
<div class="setting-group">
<input type="checkbox" id="choice-disable-long-aria-labels"
bind:checked="$disableLongAriaLabels" on:change="$save()">
<label for="choice-disable-long-aria-labels">Use short article ARIA labels</label>
</div>
</form>
<h2>{themeTitle}</h2>
<ThemeSettings instanceName={$currentInstance} />
</SettingsLayout>
<style>
.ui-settings {
background: var(--form-bg);
border: 1px solid var(--main-border);
border-radius: 4px;
padding: 20px;
line-height: 2em;
}
.setting-group {
padding: 5px 0;
}
</style>
<script>
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
import ThemeSettings from '../../_components/settings/instance/ThemeSettings.html'
import { store } from '../../_store/store'
export default {
components: {
SettingsLayout,
ThemeSettings
},
store: () => store,
computed: {
themeTitle: ({ $loggedInInstancesInOrder, $currentInstance }) => (
$loggedInInstancesInOrder.length > 1 ? `Theme for ${$currentInstance}` : 'Theme'
)
}
}
</script>