settings.vue (16262B)
1 <template>
2 <div class="settings panel panel-default">
3 <div class="panel-heading">
4 <div class="title">
5 {{ $t('settings.settings') }}
6 </div>
7
8 <transition name="fade">
9 <template v-if="currentSaveStateNotice">
10 <div
11 v-if="currentSaveStateNotice.error"
12 class="alert error"
13 @click.prevent
14 >
15 {{ $t('settings.saving_err') }}
16 </div>
17
18 <div
19 v-if="!currentSaveStateNotice.error"
20 class="alert transparent"
21 @click.prevent
22 >
23 {{ $t('settings.saving_ok') }}
24 </div>
25 </template>
26 </transition>
27 </div>
28 <div class="panel-body">
29 <keep-alive>
30 <tab-switcher>
31 <div :label="$t('settings.general')">
32 <div class="setting-item">
33 <h2>{{ $t('settings.interface') }}</h2>
34 <ul class="setting-list">
35 <li>
36 <interface-language-switcher />
37 </li>
38 <li v-if="instanceSpecificPanelPresent">
39 <Checkbox v-model="hideISP">
40 {{ $t('settings.hide_isp') }}
41 </Checkbox>
42 </li>
43 </ul>
44 </div>
45 <div class="setting-item">
46 <h2>{{ $t('nav.timeline') }}</h2>
47 <ul class="setting-list">
48 <li>
49 <Checkbox v-model="hideMutedPosts">
50 {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
51 </Checkbox>
52 </li>
53 <li>
54 <Checkbox v-model="collapseMessageWithSubject">
55 {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
56 </Checkbox>
57 </li>
58 <li>
59 <Checkbox v-model="streaming">
60 {{ $t('settings.streaming') }}
61 </Checkbox>
62 <ul
63 class="setting-list suboptions"
64 :class="[{disabled: !streaming}]"
65 >
66 <li>
67 <Checkbox
68 v-model="pauseOnUnfocused"
69 :disabled="!streaming"
70 >
71 {{ $t('settings.pause_on_unfocused') }}
72 </Checkbox>
73 </li>
74 </ul>
75 </li>
76 <li>
77 <Checkbox v-model="useStreamingApi">
78 {{ $t('settings.useStreamingApi') }}
79 <br>
80 <small>
81 {{ $t('settings.useStreamingApiWarning') }}
82 </small>
83 </Checkbox>
84 </li>
85 <li>
86 <Checkbox v-model="autoLoad">
87 {{ $t('settings.autoload') }}
88 </Checkbox>
89 </li>
90 <li>
91 <Checkbox v-model="hoverPreview">
92 {{ $t('settings.reply_link_preview') }}
93 </Checkbox>
94 </li>
95 <li>
96 <Checkbox v-model="emojiReactionsOnTimeline">
97 {{ $t('settings.emoji_reactions_on_timeline') }}
98 </Checkbox>
99 </li>
100 </ul>
101 </div>
102
103 <div class="setting-item">
104 <h2>{{ $t('settings.composing') }}</h2>
105 <ul class="setting-list">
106 <li>
107 <Checkbox v-model="scopeCopy">
108 {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
109 </Checkbox>
110 </li>
111 <li>
112 <Checkbox v-model="alwaysShowSubjectInput">
113 {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
114 </Checkbox>
115 </li>
116 <li>
117 <div>
118 {{ $t('settings.subject_line_behavior') }}
119 <label
120 for="subjectLineBehavior"
121 class="select"
122 >
123 <select
124 id="subjectLineBehavior"
125 v-model="subjectLineBehavior"
126 >
127 <option value="email">
128 {{ $t('settings.subject_line_email') }}
129 {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
130 </option>
131 <option value="masto">
132 {{ $t('settings.subject_line_mastodon') }}
133 {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
134 </option>
135 <option value="noop">
136 {{ $t('settings.subject_line_noop') }}
137 {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
138 </option>
139 </select>
140 <i class="icon-down-open" />
141 </label>
142 </div>
143 </li>
144 <li v-if="postFormats.length > 0">
145 <div>
146 {{ $t('settings.post_status_content_type') }}
147 <label
148 for="postContentType"
149 class="select"
150 >
151 <select
152 id="postContentType"
153 v-model="postContentType"
154 >
155 <option
156 v-for="postFormat in postFormats"
157 :key="postFormat"
158 :value="postFormat"
159 >
160 {{ $t(`post_status.content_type["${postFormat}"]`) }}
161 {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
162 </option>
163 </select>
164 <i class="icon-down-open" />
165 </label>
166 </div>
167 </li>
168 <li>
169 <Checkbox v-model="minimalScopesMode">
170 {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
171 </Checkbox>
172 </li>
173 <li>
174 <Checkbox v-model="autohideFloatingPostButton">
175 {{ $t('settings.autohide_floating_post_button') }}
176 </Checkbox>
177 </li>
178 <li>
179 <Checkbox v-model="padEmoji">
180 {{ $t('settings.pad_emoji') }}
181 </Checkbox>
182 </li>
183 </ul>
184 </div>
185
186 <div class="setting-item">
187 <h2>{{ $t('settings.attachments') }}</h2>
188 <ul class="setting-list">
189 <li>
190 <Checkbox v-model="hideAttachments">
191 {{ $t('settings.hide_attachments_in_tl') }}
192 </Checkbox>
193 </li>
194 <li>
195 <Checkbox v-model="hideAttachmentsInConv">
196 {{ $t('settings.hide_attachments_in_convo') }}
197 </Checkbox>
198 </li>
199 <li>
200 <label for="maxThumbnails">
201 {{ $t('settings.max_thumbnails') }}
202 </label>
203 <input
204 id="maxThumbnails"
205 v-model.number="maxThumbnails"
206 class="number-input"
207 type="number"
208 min="0"
209 step="1"
210 >
211 </li>
212 <li>
213 <Checkbox v-model="hideNsfw">
214 {{ $t('settings.nsfw_clickthrough') }}
215 </Checkbox>
216 </li>
217 <ul class="setting-list suboptions">
218 <li>
219 <Checkbox
220 v-model="preloadImage"
221 :disabled="!hideNsfw"
222 >
223 {{ $t('settings.preload_images') }}
224 </Checkbox>
225 </li>
226 <li>
227 <Checkbox
228 v-model="useOneClickNsfw"
229 :disabled="!hideNsfw"
230 >
231 {{ $t('settings.use_one_click_nsfw') }}
232 </Checkbox>
233 </li>
234 </ul>
235 <li>
236 <Checkbox v-model="stopGifs">
237 {{ $t('settings.stop_gifs') }}
238 </Checkbox>
239 </li>
240 <li>
241 <Checkbox v-model="loopVideo">
242 {{ $t('settings.loop_video') }}
243 </Checkbox>
244 <ul
245 class="setting-list suboptions"
246 :class="[{disabled: !streaming}]"
247 >
248 <li>
249 <Checkbox
250 v-model="loopVideoSilentOnly"
251 :disabled="!loopVideo || !loopSilentAvailable"
252 >
253 {{ $t('settings.loop_video_silent_only') }}
254 </Checkbox>
255 <div
256 v-if="!loopSilentAvailable"
257 class="unavailable"
258 >
259 <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
260 </div>
261 </li>
262 </ul>
263 </li>
264 <li>
265 <Checkbox v-model="playVideosInModal">
266 {{ $t('settings.play_videos_in_modal') }}
267 </Checkbox>
268 </li>
269 <li>
270 <Checkbox v-model="useContainFit">
271 {{ $t('settings.use_contain_fit') }}
272 </Checkbox>
273 </li>
274 </ul>
275 </div>
276
277 <div class="setting-item">
278 <h2>{{ $t('settings.notifications') }}</h2>
279 <ul class="setting-list">
280 <li>
281 <Checkbox v-model="webPushNotifications">
282 {{ $t('settings.enable_web_push_notifications') }}
283 </Checkbox>
284 </li>
285 </ul>
286 </div>
287
288 <div class="setting-item">
289 <h2>{{ $t('settings.fun') }}</h2>
290 <ul class="setting-list">
291 <li>
292 <Checkbox v-model="greentext">
293 {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
294 </Checkbox>
295 </li>
296 </ul>
297 </div>
298 </div>
299
300 <div :label="$t('settings.theme')">
301 <div class="setting-item">
302 <style-switcher />
303 </div>
304 </div>
305
306 <div :label="$t('settings.filtering')">
307 <div class="setting-item">
308 <div class="select-multiple">
309 <span class="label">{{ $t('settings.notification_visibility') }}</span>
310 <ul class="option-list">
311 <li>
312 <Checkbox v-model="notificationVisibility.likes">
313 {{ $t('settings.notification_visibility_likes') }}
314 </Checkbox>
315 </li>
316 <li>
317 <Checkbox v-model="notificationVisibility.repeats">
318 {{ $t('settings.notification_visibility_repeats') }}
319 </Checkbox>
320 </li>
321 <li>
322 <Checkbox v-model="notificationVisibility.follows">
323 {{ $t('settings.notification_visibility_follows') }}
324 </Checkbox>
325 </li>
326 <li>
327 <Checkbox v-model="notificationVisibility.mentions">
328 {{ $t('settings.notification_visibility_mentions') }}
329 </Checkbox>
330 </li>
331 <li>
332 <Checkbox v-model="notificationVisibility.moves">
333 {{ $t('settings.notification_visibility_moves') }}
334 </Checkbox>
335 </li>
336 <li>
337 <Checkbox v-model="notificationVisibility.emojiReactions">
338 {{ $t('settings.notification_visibility_emoji_reactions') }}
339 </Checkbox>
340 </li>
341 </ul>
342 </div>
343 <div>
344 {{ $t('settings.replies_in_timeline') }}
345 <label
346 for="replyVisibility"
347 class="select"
348 >
349 <select
350 id="replyVisibility"
351 v-model="replyVisibility"
352 >
353 <option
354 value="all"
355 selected
356 >{{ $t('settings.reply_visibility_all') }}</option>
357 <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
358 <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
359 </select>
360 <i class="icon-down-open" />
361 </label>
362 </div>
363 <div>
364 <Checkbox v-model="hidePostStats">
365 {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
366 </Checkbox>
367 </div>
368 <div>
369 <Checkbox v-model="hideUserStats">
370 {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
371 </Checkbox>
372 </div>
373 </div>
374 <div class="setting-item">
375 <div>
376 <p>{{ $t('settings.filtering_explanation') }}</p>
377 <textarea
378 id="muteWords"
379 v-model="muteWordsString"
380 />
381 </div>
382 <div>
383 <Checkbox v-model="hideFilteredStatuses">
384 {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
385 </Checkbox>
386 </div>
387 </div>
388 </div>
389 <div :label="$t('settings.version.title')">
390 <div class="setting-item">
391 <ul class="setting-list">
392 <li>
393 <p>{{ $t('settings.version.backend_version') }}</p>
394 <ul class="option-list">
395 <li>
396 <a
397 :href="backendVersionLink"
398 target="_blank"
399 >{{ backendVersion }}</a>
400 </li>
401 </ul>
402 </li>
403 <li>
404 <p>{{ $t('settings.version.frontend_version') }}</p>
405 <ul class="option-list">
406 <li>
407 <a
408 :href="frontendVersionLink"
409 target="_blank"
410 >{{ frontendVersion }}</a>
411 </li>
412 </ul>
413 </li>
414 </ul>
415 </div>
416 </div>
417 </tab-switcher>
418 </keep-alive>
419 </div>
420 </div>
421 </template>
422
423 <script src="./settings.js">
424 </script>