move background to appearance tab

src/components/settings_modal/tabs/appearance_tab.js

@@ -16,6 +16,7 @@ import {
 } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
+import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -72,7 +73,10 @@ const AppearanceTab = {
         key: mode,
         value: mode,
         label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
-      }))
+      })),
+      backgroundUploading: false,
+      background: null,
+      backgroundPreview: null,
     }
   },
   components: {
@@ -420,7 +424,55 @@ const AppearanceTab = {
       ].join(''))
       sheet.ready = true
       adoptStyleSheets()
-    }
+    },
+    uploadFile (slot, e) {
+      const file = e.target.files[0]
+      if (!file) { return }
+      if (file.size > this.$store.state.instance[slot + 'limit']) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
+        useInterfaceStore().pushGlobalNotice({
+          messageKey: 'upload.error.message',
+          messageArgs: [
+            this.$t('upload.error.file_too_big', {
+              filesize: filesize.num,
+              filesizeunit: filesize.unit,
+              allowedsize: allowedsize.num,
+              allowedsizeunit: allowedsize.unit
+            })
+          ],
+          level: 'error'
+        })
+        return
+      }
+
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const img = target.result
+        this[slot + 'Preview'] = img
+        this[slot] = file
+      }
+      reader.readAsDataURL(file)
+    },
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
+    submitBackground (background) {
+      if (!this.backgroundPreview && background !== '') { return }
+
+      this.backgroundUploading = true
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
+          this.backgroundPreview = null
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
+    },
   }
 }
 

src/components/settings_modal/tabs/appearance_tab.scss

@@ -24,6 +24,46 @@
     margin: 0.5em 0;
   }
 
+  input[type="file"] {
+    padding: 0.25em;
+    height: auto;
+  }
+
+  .banner-background-preview {
+    max-width: 100%;
+    width: 300px;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .reset-button {
+    position: absolute;
+    top: 0.2em;
+    right: 0.2em;
+    border-radius: var(--roundness);
+    background-color: rgb(0 0 0 / 60%);
+    opacity: 0.7;
+    width: 1.5em;
+    height: 1.5em;
+    text-align: center;
+    line-height: 1.5em;
+    font-size: 1.5em;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      color: white;
+    }
+  }
+
+
+
   .palettes-container {
     height: 15em;
     overflow: hidden auto;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -151,6 +151,49 @@
         </div>
       </div>
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.background') }}</h2>
+      <div class="banner-background-preview">
+        <img :src="user.background_image">
+        <button
+          v-if="!isDefaultBackground"
+          class="button-unstyled reset-button"
+          :title="$t('settings.reset_profile_background')"
+          @click="resetBackground"
+        >
+          <FAIcon
+            icon="times"
+            type="button"
+          />
+        </button>
+      </div>
+      <p>{{ $t('settings.set_new_background') }}</p>
+      <img
+        v-if="backgroundPreview"
+        class="banner-background-preview"
+        :src="backgroundPreview"
+      >
+      <div>
+        <input
+          type="file"
+          class="input"
+          @change="uploadFile('background', $event)"
+        >
+      </div>
+      <FAIcon
+        v-if="backgroundUploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
+      />
+      <button
+        v-else-if="backgroundPreview"
+        class="btn button-default"
+        @click="submitBackground(background)"
+      >
+        {{ $t('settings.save') }}
+      </button>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <div class="alert neutral theme-notice">

src/components/settings_modal/tabs/profile_tab.js

@@ -1,7 +1,6 @@
 import UserCard from 'src/components/user_card/user_card.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
-import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
@@ -20,7 +19,6 @@ import {
   faPlus,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes,
@@ -32,10 +30,6 @@ const ProfileTab = {
   data () {
     return {
       locked: this.$store.state.users.currentUser.locked,
-      backgroundUploading: false,
-      background: null,
-      backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -84,54 +78,6 @@ const ProfileTab = {
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
-    uploadFile (slot, e) {
-      const file = e.target.files[0]
-      if (!file) { return }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
-        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        useInterfaceStore().pushGlobalNotice({
-          messageKey: 'upload.error.message',
-          messageArgs: [
-            this.$t('upload.error.file_too_big', {
-              filesize: filesize.num,
-              filesizeunit: filesize.unit,
-              allowedsize: allowedsize.num,
-              allowedsizeunit: allowedsize.unit
-            })
-          ],
-          level: 'error'
-        })
-        return
-      }
-
-      const reader = new FileReader()
-      reader.onload = ({ target }) => {
-        const img = target.result
-        this[slot + 'Preview'] = img
-        this[slot] = file
-      }
-      reader.readAsDataURL(file)
-    },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
-      if (confirmed) {
-        this.submitBackground('')
-      }
-    },
-    submitBackground (background) {
-      if (!this.backgroundPreview && background !== '') { return }
-
-      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background })
-        .then((data) => {
-          this.$store.commit('addNewUsers', [data])
-          this.$store.commit('setCurrentUser', data)
-          this.backgroundPreview = null
-        })
-        .catch(this.displayUploadError)
-        .finally(() => { this.backgroundUploading = false })
-    },
     updateProfile () {
       const params = {
         locked: this.locked

src/components/settings_modal/tabs/profile_tab.scss

@@ -3,122 +3,12 @@
     margin: 0;
   }
 
-  input[type="file"] {
-    padding: 5px;
-    height: auto;
-  }
-
-  .banner-background-preview {
-    max-width: 100%;
-    width: 300px;
-    position: relative;
-
-    img {
-      width: 100%;
-    }
-  }
-
   .uploading {
     font-size: 1.5em;
     margin: 0.25em;
   }
 
-  .name-changer {
-    width: 100%;
-  }
-
-  .current-avatar-container {
-    position: relative;
-    width: 150px;
-    height: 150px;
-  }
-
-  .current-avatar {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--roundness);
-  }
-
-  .reset-button {
-    position: absolute;
-    top: 0.2em;
-    right: 0.2em;
-    border-radius: var(--roundness);
-    background-color: rgb(0 0 0 / 60%);
-    opacity: 0.7;
-    width: 1.5em;
-    height: 1.5em;
-    text-align: center;
-    line-height: 1.5em;
-    font-size: 1.5em;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    svg {
-      color: white;
-    }
-  }
-
-  .oauth-tokens {
-    width: 100%;
-
-    th {
-      text-align: left;
-    }
-
-    .actions {
-      text-align: right;
-    }
-  }
-
-  &-usersearch-wrapper {
-    padding: 1em;
-  }
-
-  &-bulk-actions {
-    text-align: right;
-    padding: 0 1em;
-    min-height: 2em;
-
-    button {
-      width: 10em;
-    }
-  }
-
-  &-domain-mute-form {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-
-    button {
-      align-self: flex-end;
-      margin-top: 1em;
-      width: 10em;
-    }
-  }
-
   .setting-subitem {
     margin-left: 1.75em;
   }
-
-  .profile-fields {
-    display: flex;
-
-    & > .emoji-input {
-      flex: 1 1 auto;
-      margin: 0 0.2em 0.5em;
-      min-width: 0;
-    }
-
-    .delete-field {
-      width: 20px;
-      align-self: center;
-      margin: 0 0.2em 0.5em;
-      padding: 0 0.5em;
-    }
-  }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -7,49 +7,6 @@
       rounded="top"
       >
     </UserCard>
-    <div class="setting-item">
-      <h2>{{ $t('settings.profile_background') }}</h2>
-      <div class="banner-background-preview">
-        <img :src="user.background_image">
-        <button
-          v-if="!isDefaultBackground"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_background')"
-          @click="resetBackground"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_profile_background') }}</p>
-      <img
-        v-if="backgroundPreview"
-        class="banner-background-preview"
-        :src="backgroundPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('background', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="backgroundUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="backgroundPreview"
-        class="btn button-default"
-        @click="submitBackground(background)"
-      >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">

src/i18n/en.json

@@ -727,6 +727,7 @@
     "minimal_scopes_mode": "Minimize post scope selection options",
     "set_new_avatar": "Set new avatar",
     "set_new_profile_background": "Set new profile background",
+    "set_new_background": "Set new background",
     "set_new_profile_banner": "Set new profile banner",
     "reset_avatar": "Reset avatar",
     "reset_banner": "Reset banner",