settings.vue 15.4 KB
Newer Older
lain's avatar
lain committed
1
<template>
HJ's avatar
HJ committed
2 3 4 5 6
  <div class="settings panel panel-default">
    <div class="panel-heading">
      <div class="title">
        {{ $t('settings.settings') }}
      </div>
HJ's avatar
HJ committed
7

HJ's avatar
HJ committed
8 9 10 11 12 13 14 15 16
      <transition name="fade">
        <template v-if="currentSaveStateNotice">
          <div
            v-if="currentSaveStateNotice.error"
            class="alert error"
            @click.prevent
          >
            {{ $t('settings.saving_err') }}
          </div>
HJ's avatar
HJ committed
17

HJ's avatar
HJ committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
          <div
            v-if="!currentSaveStateNotice.error"
            class="alert transparent"
            @click.prevent
          >
            {{ $t('settings.saving_ok') }}
          </div>
        </template>
      </transition>
    </div>
    <div class="panel-body">
      <keep-alive>
        <tab-switcher>
          <div :label="$t('settings.general')">
            <div class="setting-item">
              <h2>{{ $t('settings.interface') }}</h2>
              <ul class="setting-list">
HJ's avatar
HJ committed
35
                <li>
HJ's avatar
HJ committed
36 37 38
                  <interface-language-switcher />
                </li>
                <li v-if="instanceSpecificPanelPresent">
39 40 41
                  <Checkbox v-model="hideISP">
                    {{ $t('settings.hide_isp') }}
                  </Checkbox>
HJ's avatar
HJ committed
42 43
                </li>
              </ul>
HJ's avatar
HJ committed
44 45 46 47 48
            </div>
            <div class="setting-item">
              <h2>{{ $t('nav.timeline') }}</h2>
              <ul class="setting-list">
                <li>
49 50 51
                  <Checkbox v-model="hideMutedPosts">
                    {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
                  </Checkbox>
HJ's avatar
HJ committed
52 53
                </li>
                <li>
54 55 56
                  <Checkbox v-model="collapseMessageWithSubject">
                    {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
                  </Checkbox>
HJ's avatar
HJ committed
57 58
                </li>
                <li>
59 60 61
                  <Checkbox v-model="streaming">
                    {{ $t('settings.streaming') }}
                  </Checkbox>
HJ's avatar
HJ committed
62 63
                  <ul
                    class="setting-list suboptions"
64
                    :class="[{disabled: !streaming}]"
HJ's avatar
HJ committed
65 66
                  >
                    <li>
67
                      <Checkbox
68 69
                        v-model="pauseOnUnfocused"
                        :disabled="!streaming"
HJ's avatar
HJ committed
70
                      >
71 72
                        {{ $t('settings.pause_on_unfocused') }}
                      </Checkbox>
HJ's avatar
HJ committed
73 74 75
                    </li>
                  </ul>
                </li>
HJ's avatar
HJ committed
76 77 78 79 80 81 82 83 84
                <li>
                  <Checkbox v-model="useStreamingApi">
                    {{ $t('settings.useStreamingApi') }}
                    <br/>
                    <small>
                    {{ $t('settings.useStreamingApiWarning') }}
                    </small>
                  </Checkbox>
                </li>
HJ's avatar
HJ committed
85
                <li>
86 87 88
                  <Checkbox v-model="autoLoad">
                    {{ $t('settings.autoload') }}
                  </Checkbox>
HJ's avatar
HJ committed
89 90
                </li>
                <li>
91 92 93
                  <Checkbox v-model="hoverPreview">
                    {{ $t('settings.reply_link_preview') }}
                  </Checkbox>
HJ's avatar
HJ committed
94 95 96
                </li>
              </ul>
            </div>
HJ's avatar
HJ committed
97

HJ's avatar
HJ committed
98 99 100
            <div class="setting-item">
              <h2>{{ $t('settings.composing') }}</h2>
              <ul class="setting-list">
Shpuld Shpludson's avatar
Shpuld Shpludson committed
101
                <li>
102
                  <Checkbox v-model="scopeCopy">
103
                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
104
                  </Checkbox>
HJ's avatar
HJ committed
105 106
                </li>
                <li>
107
                  <Checkbox v-model="alwaysShowSubjectInput">
108
                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
109
                  </Checkbox>
HJ's avatar
HJ committed
110 111 112 113 114 115 116 117 118 119
                </li>
                <li>
                  <div>
                    {{ $t('settings.subject_line_behavior') }}
                    <label
                      for="subjectLineBehavior"
                      class="select"
                    >
                      <select
                        id="subjectLineBehavior"
120
                        v-model="subjectLineBehavior"
HJ's avatar
HJ committed
121 122 123
                      >
                        <option value="email">
                          {{ $t('settings.subject_line_email') }}
124
                          {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
HJ's avatar
HJ committed
125 126 127
                        </option>
                        <option value="masto">
                          {{ $t('settings.subject_line_mastodon') }}
128
                          {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
HJ's avatar
HJ committed
129 130 131
                        </option>
                        <option value="noop">
                          {{ $t('settings.subject_line_noop') }}
132
                          {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
HJ's avatar
HJ committed
133 134 135 136
                        </option>
                      </select>
                      <i class="icon-down-open" />
                    </label>
Shpuld Shpludson's avatar
Shpuld Shpludson committed
137 138
                  </div>
                </li>
HJ's avatar
HJ committed
139 140 141 142 143 144 145 146 147
                <li v-if="postFormats.length > 0">
                  <div>
                    {{ $t('settings.post_status_content_type') }}
                    <label
                      for="postContentType"
                      class="select"
                    >
                      <select
                        id="postContentType"
148
                        v-model="postContentType"
HJ's avatar
HJ committed
149 150 151 152 153 154 155
                      >
                        <option
                          v-for="postFormat in postFormats"
                          :key="postFormat"
                          :value="postFormat"
                        >
                          {{ $t(`post_status.content_type["${postFormat}"]`) }}
156
                          {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
HJ's avatar
HJ committed
157 158 159 160 161 162 163
                        </option>
                      </select>
                      <i class="icon-down-open" />
                    </label>
                  </div>
                </li>
                <li>
164
                  <Checkbox v-model="minimalScopesMode">
165
                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
166
                  </Checkbox>
HJ's avatar
HJ committed
167 168
                </li>
                <li>
169 170 171
                  <Checkbox v-model="autohideFloatingPostButton">
                    {{ $t('settings.autohide_floating_post_button') }}
                  </Checkbox>
HJ's avatar
HJ committed
172
                </li>
173
                <li>
174 175 176
                  <Checkbox v-model="padEmoji">
                    {{ $t('settings.pad_emoji') }}
                  </Checkbox>
177
                </li>
Shpuld Shpludson's avatar
Shpuld Shpludson committed
178
              </ul>
HJ's avatar
HJ committed
179
            </div>
minibikini's avatar
minibikini committed
180

HJ's avatar
HJ committed
181 182 183 184
            <div class="setting-item">
              <h2>{{ $t('settings.attachments') }}</h2>
              <ul class="setting-list">
                <li>
185 186 187
                  <Checkbox v-model="hideAttachments">
                    {{ $t('settings.hide_attachments_in_tl') }}
                  </Checkbox>
HJ's avatar
HJ committed
188 189
                </li>
                <li>
190 191 192
                  <Checkbox v-model="hideAttachmentsInConv">
                    {{ $t('settings.hide_attachments_in_convo') }}
                  </Checkbox>
HJ's avatar
HJ committed
193 194
                </li>
                <li>
195 196 197
                  <label for="maxThumbnails">
                    {{ $t('settings.max_thumbnails') }}
                  </label>
HJ's avatar
HJ committed
198 199 200 201 202 203 204 205 206 207
                  <input
                    id="maxThumbnails"
                    v-model.number="maxThumbnails"
                    class="number-input"
                    type="number"
                    min="0"
                    step="1"
                  >
                </li>
                <li>
208 209 210
                  <Checkbox v-model="hideNsfw">
                    {{ $t('settings.nsfw_clickthrough') }}
                  </Checkbox>
HJ's avatar
HJ committed
211 212 213
                </li>
                <ul class="setting-list suboptions">
                  <li>
214
                    <Checkbox
HJ's avatar
HJ committed
215
                      v-model="preloadImage"
216
                      :disabled="!hideNsfw"
HJ's avatar
HJ committed
217
                    >
218 219
                      {{ $t('settings.preload_images') }}
                    </Checkbox>
HJ's avatar
HJ committed
220 221
                  </li>
                  <li>
222
                    <Checkbox
HJ's avatar
HJ committed
223
                      v-model="useOneClickNsfw"
224
                      :disabled="!hideNsfw"
HJ's avatar
HJ committed
225
                    >
226 227
                      {{ $t('settings.use_one_click_nsfw') }}
                    </Checkbox>
HJ's avatar
HJ committed
228 229 230
                  </li>
                </ul>
                <li>
231 232 233
                  <Checkbox v-model="stopGifs">
                    {{ $t('settings.stop_gifs') }}
                  </Checkbox>
HJ's avatar
HJ committed
234 235
                </li>
                <li>
236 237 238
                  <Checkbox v-model="loopVideo">
                    {{ $t('settings.loop_video') }}
                  </Checkbox>
HJ's avatar
HJ committed
239 240
                  <ul
                    class="setting-list suboptions"
241
                    :class="[{disabled: !streaming}]"
HJ's avatar
HJ committed
242 243
                  >
                    <li>
244
                      <Checkbox
245 246
                        v-model="loopVideoSilentOnly"
                        :disabled="!loopVideo || !loopSilentAvailable"
HJ's avatar
HJ committed
247
                      >
248 249
                        {{ $t('settings.loop_video_silent_only') }}
                      </Checkbox>
HJ's avatar
HJ committed
250 251 252 253 254 255 256 257 258 259
                      <div
                        v-if="!loopSilentAvailable"
                        class="unavailable"
                      >
                        <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
                      </div>
                    </li>
                  </ul>
                </li>
                <li>
260 261 262
                  <Checkbox v-model="playVideosInModal">
                    {{ $t('settings.play_videos_in_modal') }}
                  </Checkbox>
HJ's avatar
HJ committed
263 264
                </li>
                <li>
265 266 267
                  <Checkbox v-model="useContainFit">
                    {{ $t('settings.use_contain_fit') }}
                  </Checkbox>
HJ's avatar
HJ committed
268 269 270
                </li>
              </ul>
            </div>
HJ's avatar
HJ committed
271

HJ's avatar
HJ committed
272 273 274 275
            <div class="setting-item">
              <h2>{{ $t('settings.notifications') }}</h2>
              <ul class="setting-list">
                <li>
276
                  <Checkbox v-model="webPushNotifications">
HJ's avatar
HJ committed
277
                    {{ $t('settings.enable_web_push_notifications') }}
278
                  </Checkbox>
HJ's avatar
HJ committed
279 280 281
                </li>
              </ul>
            </div>
HJ's avatar
HJ committed
282 283 284 285 286 287 288 289 290 291 292

            <div class="setting-item">
              <h2>{{ $t('settings.fun') }}</h2>
              <ul class="setting-list">
                <li>
                  <Checkbox v-model="greentext">
                    {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
                  </Checkbox>
                </li>
              </ul>
            </div>
HJ's avatar
HJ committed
293
          </div>
HJ's avatar
HJ committed
294

HJ's avatar
HJ committed
295 296 297 298 299 300 301 302 303 304 305 306
          <div :label="$t('settings.theme')">
            <div class="setting-item">
              <style-switcher />
            </div>
          </div>

          <div :label="$t('settings.filtering')">
            <div class="setting-item">
              <div class="select-multiple">
                <span class="label">{{ $t('settings.notification_visibility') }}</span>
                <ul class="option-list">
                  <li>
307
                    <Checkbox v-model="notificationVisibility.likes">
HJ's avatar
HJ committed
308
                      {{ $t('settings.notification_visibility_likes') }}
309
                    </Checkbox>
HJ's avatar
HJ committed
310 311
                  </li>
                  <li>
312
                    <Checkbox v-model="notificationVisibility.repeats">
HJ's avatar
HJ committed
313
                      {{ $t('settings.notification_visibility_repeats') }}
314
                    </Checkbox>
HJ's avatar
HJ committed
315 316
                  </li>
                  <li>
317
                    <Checkbox v-model="notificationVisibility.follows">
HJ's avatar
HJ committed
318
                      {{ $t('settings.notification_visibility_follows') }}
319
                    </Checkbox>
HJ's avatar
HJ committed
320 321
                  </li>
                  <li>
322
                    <Checkbox v-model="notificationVisibility.mentions">
HJ's avatar
HJ committed
323
                      {{ $t('settings.notification_visibility_mentions') }}
324
                    </Checkbox>
HJ's avatar
HJ committed
325
                  </li>
kPherox's avatar
kPherox committed
326 327 328 329 330
                  <li>
                    <Checkbox v-model="notificationVisibility.moves">
                      {{ $t('settings.notification_visibility_moves') }}
                    </Checkbox>
                  </li>
HJ's avatar
HJ committed
331 332 333 334 335 336 337 338 339 340
                </ul>
              </div>
              <div>
                {{ $t('settings.replies_in_timeline') }}
                <label
                  for="replyVisibility"
                  class="select"
                >
                  <select
                    id="replyVisibility"
341
                    v-model="replyVisibility"
HJ's avatar
HJ committed
342 343 344 345 346 347 348 349 350
                  >
                    <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" />
351
                </label>
HJ's avatar
HJ committed
352 353
              </div>
              <div>
354
                <Checkbox v-model="hidePostStats">
355
                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
356
                </Checkbox>
HJ's avatar
HJ committed
357 358
              </div>
              <div>
359
                <Checkbox v-model="hideUserStats">
360
                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
361
                </Checkbox>
HJ's avatar
HJ committed
362 363 364 365 366 367 368 369 370 371 372
              </div>
            </div>
            <div class="setting-item">
              <div>
                <p>{{ $t('settings.filtering_explanation') }}</p>
                <textarea
                  id="muteWords"
                  v-model="muteWordsString"
                />
              </div>
              <div>
373
                <Checkbox v-model="hideFilteredStatuses">
374
                  {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
375
                </Checkbox>
HJ's avatar
HJ committed
376 377
              </div>
            </div>
jasper's avatar
jasper committed
378
          </div>
HJ's avatar
HJ committed
379 380 381
          <div :label="$t('settings.version.title')">
            <div class="setting-item">
              <ul class="setting-list">
382
                <li>
HJ's avatar
HJ committed
383 384 385 386 387 388 389 390 391
                  <p>{{ $t('settings.version.backend_version') }}</p>
                  <ul class="option-list">
                    <li>
                      <a
                        :href="backendVersionLink"
                        target="_blank"
                      >{{ backendVersion }}</a>
                    </li>
                  </ul>
392 393
                </li>
                <li>
HJ's avatar
HJ committed
394 395 396 397 398 399 400 401 402
                  <p>{{ $t('settings.version.frontend_version') }}</p>
                  <ul class="option-list">
                    <li>
                      <a
                        :href="frontendVersionLink"
                        target="_blank"
                      >{{ frontendVersion }}</a>
                    </li>
                  </ul>
403 404
                </li>
              </ul>
HJ's avatar
HJ committed
405 406 407 408 409
            </div>
          </div>
        </tab-switcher>
      </keep-alive>
    </div>
lain's avatar
lain committed
410 411 412 413
  </div>
</template>

<script src="./settings.js">
HJ's avatar
HJ committed
414
</script>