tabs for settings
This commit is contained in:
Henry Jameson
parent
8e560676f1
commit
b48a3210a3
3 changed files with 95 additions and 78 deletions
|
|
@ -1,4 +1,5 @@
|
|||
/* eslint-env browser */
|
||||
import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
|
||||
import StyleSwitcher from '../style_switcher/style_switcher.vue'
|
||||
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
|
||||
import { filter, trim } from 'lodash'
|
||||
|
|
@ -29,6 +30,7 @@ const settings = {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
TabSwitcher,
|
||||
StyleSwitcher,
|
||||
InterfaceLanguageSwitcher
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,90 +4,99 @@
|
|||
{{$t('settings.settings')}}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.theme')}}</h2>
|
||||
<style-switcher></style-switcher>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.filtering')}}</h2>
|
||||
<p>{{$t('settings.filtering_explanation')}}</p>
|
||||
<textarea id="muteWords" v-model="muteWordsString"></textarea>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('nav.timeline')}}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
|
||||
<label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
||||
<label for="streaming">{{$t('settings.streaming')}}</label>
|
||||
<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
|
||||
<tab-switcher>
|
||||
<div :title="$t('settings.general')" >
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.interfaceLanguage') }}</h2>
|
||||
<interface-language-switcher />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('nav.timeline')}}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
|
||||
<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
|
||||
<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
|
||||
<label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
||||
<label for="streaming">{{$t('settings.streaming')}}</label>
|
||||
<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
|
||||
<li>
|
||||
<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
|
||||
<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="autoload" v-model="autoLoadLocal">
|
||||
<label for="autoload">{{$t('settings.autoload')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
|
||||
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="replyVisibility" class="select">
|
||||
<select id="replyVisibility" v-model="replyVisibilityLocal">
|
||||
<option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
|
||||
<option value="following">{{$t('settings.reply_visibility_following')}}</option>
|
||||
<option value="self">{{$t('settings.reply_visibility_self')}}</option>
|
||||
</select>
|
||||
<i class="icon-down-open"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="autoload" v-model="autoLoadLocal">
|
||||
<label for="autoload">{{$t('settings.autoload')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
|
||||
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="replyVisibility" class="select">
|
||||
<select id="replyVisibility" v-model="replyVisibilityLocal">
|
||||
<option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
|
||||
<option value="following">{{$t('settings.reply_visibility_following')}}</option>
|
||||
<option value="self">{{$t('settings.reply_visibility_self')}}</option>
|
||||
</select>
|
||||
<i class="icon-down-open"/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.attachments')}}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
|
||||
<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
|
||||
<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
|
||||
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="stopGifs" v-model="stopGifs">
|
||||
<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
|
||||
<label for="loopVideo">{{$t('settings.loop_video')}}</label>
|
||||
<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.attachments')}}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
|
||||
<label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
|
||||
<div v-if="!loopSilentAvailable" class="unavailable">
|
||||
<i class="icon-globe"/>! {{$t('settings.limited_availability')}}
|
||||
</div>
|
||||
<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
|
||||
<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
|
||||
<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
|
||||
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="stopGifs" v-model="stopGifs">
|
||||
<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
|
||||
<label for="loopVideo">{{$t('settings.loop_video')}}</label>
|
||||
<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
|
||||
<li>
|
||||
<input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
|
||||
<label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
|
||||
<div v-if="!loopSilentAvailable" class="unavailable">
|
||||
<i class="icon-globe"/>! {{$t('settings.limited_availability')}}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.interfaceLanguage') }}</h2>
|
||||
<interface-language-switcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :title="$t('settings.theme')" >
|
||||
<div class="setting-item">
|
||||
<style-switcher></style-switcher>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :title="$t('settings.filtering')" >
|
||||
<div class="setting-item">
|
||||
<p>{{$t('settings.filtering_explanation')}}</p>
|
||||
<textarea id="muteWords" v-model="muteWordsString"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</tab-switcher>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -103,6 +112,10 @@
|
|||
margin: 1em 1em 1.4em;
|
||||
padding-bottom: 1.4em;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -277,6 +277,7 @@ const en = {
|
|||
no_retweet_hint: 'Post is marked as followers-only or direct and cannot be repeated'
|
||||
},
|
||||
settings: {
|
||||
general: 'General',
|
||||
user_settings: 'User Settings',
|
||||
name_bio: 'Name & Bio',
|
||||
name: 'Name',
|
||||
|
|
@ -1625,6 +1626,7 @@ const ru = {
|
|||
no_retweet_hint: 'Пост помечен как "только для подписчиков" или "личное" и поэтому не может быть повторён'
|
||||
},
|
||||
settings: {
|
||||
general: 'Общие',
|
||||
user_settings: 'Настройки пользователя',
|
||||
name_bio: 'Имя и описание',
|
||||
name: 'Имя',
|
||||
|
|
|
|||
Loading…
Reference in a new issue