diff options
Diffstat (limited to 'src/components/settings_modal/tabs')
12 files changed, 166 insertions, 42 deletions
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js index 168f89e1..f4b736d2 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.js +++ b/src/components/settings_modal/tabs/data_import_export_tab.js @@ -1,6 +1,7 @@ import Importer from 'src/components/importer/importer.vue' import Exporter from 'src/components/exporter/exporter.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' +import { mapState } from 'vuex' const DataImportExportTab = { data () { @@ -18,21 +19,26 @@ const DataImportExportTab = { Checkbox }, computed: { - user () { - return this.$store.state.users.currentUser - } + ...mapState({ + backendInteractor: (state) => state.api.backendInteractor, + user: (state) => state.users.currentUser + }) }, methods: { getFollowsContent () { - return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id }) + return this.backendInteractor.exportFriends({ id: this.user.id }) .then(this.generateExportableUsersContent) }, getBlocksContent () { - return this.$store.state.api.backendInteractor.fetchBlocks() + return this.backendInteractor.fetchBlocks() + .then(this.generateExportableUsersContent) + }, + getMutesContent () { + return this.backendInteractor.fetchMutes() .then(this.generateExportableUsersContent) }, importFollows (file) { - return this.$store.state.api.backendInteractor.importFollows({ file }) + return this.backendInteractor.importFollows({ file }) .then((status) => { if (!status) { throw new Error('failed') @@ -40,7 +46,15 @@ const DataImportExportTab = { }) }, importBlocks (file) { - return this.$store.state.api.backendInteractor.importBlocks({ file }) + return this.backendInteractor.importBlocks({ file }) + .then((status) => { + if (!status) { + throw new Error('failed') + } + }) + }, + importMutes (file) { + return this.backendInteractor.importMutes({ file }) .then((status) => { if (!status) { throw new Error('failed') diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue index b5d0f5ed..a406077d 100644 --- a/src/components/settings_modal/tabs/data_import_export_tab.vue +++ b/src/components/settings_modal/tabs/data_import_export_tab.vue @@ -36,6 +36,23 @@ :export-button-label="$t('settings.block_export_button')" /> </div> + <div class="setting-item"> + <h2>{{ $t('settings.mute_import') }}</h2> + <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p> + <Importer + :submit-handler="importMutes" + :success-message="$t('settings.mutes_imported')" + :error-message="$t('settings.mute_import_error')" + /> + </div> + <div class="setting-item"> + <h2>{{ $t('settings.mute_export') }}</h2> + <Exporter + :get-content="getMutesContent" + filename="mutes.csv" + :export-button-label="$t('settings.mute_export_button')" + /> + </div> </div> </template> diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js index 3b2df556..5f38a5ae 100644 --- a/src/components/settings_modal/tabs/filtering_tab.js +++ b/src/components/settings_modal/tabs/filtering_tab.js @@ -2,6 +2,14 @@ import { filter, trim } from 'lodash' import Checkbox from 'src/components/checkbox/checkbox.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faChevronDown +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faChevronDown +) const FilteringTab = { data () { diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue index eea41514..813dc4cd 100644 --- a/src/components/settings_modal/tabs/filtering_tab.vue +++ b/src/components/settings_modal/tabs/filtering_tab.vue @@ -53,7 +53,10 @@ <option value="following">{{ $t('settings.reply_visibility_following') }}</option> <option value="self">{{ $t('settings.reply_visibility_self') }}</option> </select> - <i class="icon-down-open" /> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> </label> </div> <div> diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 0eb37e44..df592a10 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -2,6 +2,16 @@ import Checkbox from 'src/components/checkbox/checkbox.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faChevronDown, + faGlobe +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faChevronDown, + faGlobe +) const GeneralTab = { data () { diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 7f06d0bd..c1d0d0ec 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -58,6 +58,11 @@ {{ $t('settings.emoji_reactions_on_timeline') }} </Checkbox> </li> + <li> + <Checkbox v-model="virtualScrolling"> + {{ $t('settings.virtual_scrolling') }} + </Checkbox> + </li> </ul> </div> @@ -98,7 +103,10 @@ {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }} </option> </select> - <i class="icon-down-open" /> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> </label> </div> </li> @@ -122,7 +130,10 @@ {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }} </option> </select> - <i class="icon-down-open" /> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> </label> </div> </li> @@ -217,7 +228,7 @@ v-if="!loopSilentAvailable" class="unavailable" > - <i class="icon-globe" />! {{ $t('settings.limited_availability') }} + <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }} </div> </li> </ul> diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index bd6bef6a..a3e4feaf 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -8,6 +8,18 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue' import suggestor from 'src/components/emoji_input/suggestor.js' import Autosuggest from 'src/components/autosuggest/autosuggest.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faTimes, + faPlus, + faCircleNotch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faTimes, + faPlus, + faCircleNotch +) const ProfileTab = { data () { diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index e14cf054..e821f952 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -119,10 +119,8 @@ &>.icon-container { width: 20px; - - &>.icon-cancel { - vertical-align: sub; - } + align-self: center; + margin: 0 .2em .5em; } } } diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index cf88c4e4..d62bc392 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -127,9 +127,9 @@ <div class="icon-container" > - <i + <FAIcon v-show="newFields.length > 1" - class="icon-cancel" + icon="times" @click="deleteField(i)" /> </div> @@ -139,7 +139,7 @@ class="add-field faint" @click="addField" > - <i class="icon-plus" /> + <FAIcon icon="plus" /> {{ $t("settings.profile_fields.add_field") }} </a> </div> @@ -166,10 +166,11 @@ :src="user.profile_image_url_original" class="current-avatar" > - <i + <FAIcon v-if="!isDefaultAvatar && pickAvatarBtnVisible" :title="$t('settings.reset_avatar')" - class="reset-button icon-cancel" + class="reset-button" + icon="times" type="button" @click="resetAvatar" /> @@ -194,10 +195,11 @@ <h2>{{ $t('settings.profile_banner') }}</h2> <div class="banner-background-preview"> <img :src="user.cover_photo"> - <i + <FAIcon v-if="!isDefaultBanner" :title="$t('settings.reset_profile_banner')" - class="reset-button icon-cancel" + class="reset-button" + icon="times" type="button" @click="resetBanner" /> @@ -214,9 +216,11 @@ @change="uploadFile('banner', $event)" > </div> - <i + <FAIcon v-if="bannerUploading" - class=" icon-spin4 animate-spin uploading" + class="uploading" + spin + icon="circle-notch" /> <button v-else-if="bannerPreview" @@ -230,8 +234,9 @@ class="alert error" > Error: {{ bannerUploadError }} - <i - class="button-icon icon-cancel" + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="times" @click="clearUploadError('banner')" /> </div> @@ -240,10 +245,11 @@ <h2>{{ $t('settings.profile_background') }}</h2> <div class="banner-background-preview"> <img :src="user.background_image"> - <i + <FAIcon v-if="!isDefaultBackground" :title="$t('settings.reset_profile_background')" - class="reset-button icon-cancel" + class="reset-button" + icon="times" type="button" @click="resetBackground" /> @@ -260,9 +266,11 @@ @change="uploadFile('background', $event)" > </div> - <i + <FAIcon v-if="backgroundUploading" - class=" icon-spin4 animate-spin uploading" + class="uploading" + spin + icon="circle-notch" /> <button v-else-if="backgroundPreview" @@ -276,8 +284,10 @@ class="alert error" > Error: {{ backgroundUploadError }} - <i - class="button-icon icon-cancel" + <FAIcon + size="lg" + class="fa-scale-110 fa-old-padding" + icon="times" @click="clearUploadError('background')" /> </div> diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue index 9d984659..02fea0b6 100644 --- a/src/components/settings_modal/tabs/theme_tab/preview.vue +++ b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -39,21 +39,29 @@ </i18n> <div class="icons"> - <i + <FAIcon + fixed-width style="color: var(--cBlue)" - class="button-icon icon-reply" + class="fa-scale-110 fa-old-padding" + icon="reply" /> - <i + <FAIcon + fixed-width style="color: var(--cGreen)" - class="button-icon icon-retweet" + class="fa-scale-110 fa-old-padding" + icon="retweet" /> - <i + <FAIcon + fixed-width style="color: var(--cOrange)" - class="button-icon icon-star" + class="fa-scale-110 fa-old-padding" + icon="star" /> - <i + <FAIcon + fixed-width style="color: var(--cRed)" - class="button-icon icon-cancel" + class="fa-scale-110 fa-old-padding" + icon="times" /> </div> </div> @@ -103,6 +111,25 @@ </div> </template> +<script> +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faTimes, + faStar, + faRetweet, + faReply +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faTimes, + faStar, + faRetweet, + faReply +) + +export default {} +</script> + <style lang="scss"> .preview-container { position: relative; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index e3c5e80a..6cf75fe7 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' import Preview from './preview.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faChevronDown +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faChevronDown +) // List of color values used in v1 const v1OnlyNames = [ diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index 5328c350..280e1955 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -80,7 +80,10 @@ {{ style[0] || style.name }} </option> </select> - <i class="icon-down-open" /> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> </label> </div> </template> @@ -907,7 +910,10 @@ {{ $t('settings.style.shadows.components.' + shadow) }} </option> </select> - <i class="icon-down-open" /> + <FAIcon + class="select-down-icon" + icon="chevron-down" + /> </label> </div> <div class="override"> |