avatar upload works

src/App.scss

@@ -782,12 +782,6 @@ option {
   color: var(--text);
 }
 
-.visibility-notice {
-  padding: 0.5em;
-  border: 1px solid var(--textFaint);
-  border-radius: var(--roundness);
-}
-
 .notice-dismissible {
   padding-right: 4rem;
   position: relative;

src/components/image_cropper/image_cropper.js

@@ -10,14 +10,6 @@ library.add(
 
 const ImageCropper = {
   props: {
-    trigger: {
-      type: [String, window.Element],
-      required: true
-    },
-    submitHandler: {
-      type: Function,
-      required: true
-    },
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
@@ -39,17 +31,7 @@ const ImageCropper = {
       submitting: false
     }
   },
-  computed: {
+  emits: ['submit'],
-    saveText () {
-      return this.saveButtonLabel || this.$t('image_cropper.save')
-    },
-    saveWithoutCroppingText () {
-      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
-    },
-    cancelText () {
-      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    }
-  },
   methods: {
     destroy () {
       this.$refs.input.value = ''
@@ -65,20 +47,15 @@ const ImageCropper = {
       } else {
         cropperPromise = Promise.resolve()
       }
+
       cropperPromise.then(canvas => {
-        this.submitHandler(canvas, this.file)
+        this.$emit('submit', { canvas, file: this.file })
-            .then(() => this.destroy())
-            .finally(() => {
         this.submitting = false
       })
-      })
     },
     pickImage () {
       this.$refs.input.click()
     },
-    getTriggerDOM () {
-      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
-    },
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
@@ -117,23 +94,11 @@ const ImageCropper = {
     }
   },
   mounted () {
-    // listen for click event on trigger
-    const trigger = this.getTriggerDOM()
-    if (!trigger) {
-      this.$emit('error', 'No image make trigger found.', 'user')
-    } else {
-      trigger.addEventListener('click', this.pickImage)
-    }
     // listen for input file changes
     const fileInput = this.$refs.input
     fileInput.addEventListener('change', this.readFile)
   },
   beforeUnmount: function () {
-    // remove the event listeners
-    const trigger = this.getTriggerDOM()
-    if (trigger) {
-      trigger.removeEventListener('click', this.pickImage)
-    }
     const fileInput = this.$refs.input
     fileInput.removeEventListener('change', this.readFile)
   }

src/components/image_cropper/image_cropper.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="image-cropper">
-    <div v-if="dataUrl">
+    <div class="image">
       <cropper-canvas
         ref="cropperCanvas"
         background
         class="image-cropper-canvas"
-        height="25em"
+        height="100%"
       >
         <cropper-image
+          v-if="dataUrl"
           ref="cropperImage"
           :src="dataUrl"
           alt="Picture"
@@ -47,41 +48,13 @@
           <cropper-handle action="sw-resize" />
         </cropper-selection>
       </cropper-canvas>
-      <div class="image-cropper-buttons-wrapper">
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit()"
-          v-text="saveText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="destroy"
-          v-text="cancelText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit(false)"
-          v-text="saveWithoutCroppingText"
-        />
-        <FAIcon
-          v-if="submitting"
-          spin
-          icon="circle-notch"
-        />
-      </div>
     </div>
     <input
       ref="input"
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    >
+    />
   </div>
 </template>
 
@@ -89,13 +62,15 @@
 
 <style lang="scss">
 .image-cropper {
-  &-img-input {
+  display: flex;
-    display: none;
+  flex-direction: column;
+
+  &-canvas, .image {
+    height: 100%;
   }
 
-  &-canvas {
+  & &-img-input {
-    height: 25em;
+    display: none;
-    width: 25em;
   }
 
   &-buttons-wrapper {

src/components/settings_modal/tabs/profile_tab.js

@@ -42,7 +42,6 @@ const ProfileTab = {
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
       actorType: this.$store.state.users.currentUser.actor_type,
-      pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
       banner: null,
@@ -88,29 +87,6 @@ const ProfileTab = {
     userSuggestor () {
       return suggestor({ store: this.$store })
     },
-    defaultAvatar () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
-    },
-    defaultBanner () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
-    },
-    isDefaultAvatar () {
-      const baseAvatar = this.$store.state.instance.defaultAvatar
-      return !(this.$store.state.users.currentUser.profile_image_url) ||
-      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
-    },
-    isDefaultBanner () {
-      const baseBanner = this.$store.state.instance.defaultBanner
-      return !(this.$store.state.users.currentUser.cover_photo) ||
-      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
-    },
-    isDefaultBackground () {
-      return !(this.$store.state.users.currentUser.background_image)
-    },
-    avatarImgSrc () {
-      const src = this.$store.state.users.currentUser.profile_image_url_original
-      return (!src) ? this.defaultAvatar : src
-    },
     bannerImgSrc () {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
@@ -153,16 +129,6 @@ const ProfileTab = {
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
-    addField () {
-      if (this.newFields.length < this.maxFields) {
-        this.newFields.push({ name: '', value: '' })
-        return true
-      }
-      return false
-    },
-    deleteField (index) {
-      this.newFields.splice(index, 1)
-    },
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
@@ -192,73 +158,6 @@ const ProfileTab = {
       }
       reader.readAsDataURL(file)
     },
-    resetAvatar () {
-      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
-      if (confirmed) {
-        this.submitAvatar(undefined, '')
-      }
-    },
-    resetBanner () {
-      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
-      if (confirmed) {
-        this.submitBanner('')
-      }
-    },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
-      if (confirmed) {
-        this.submitBackground('')
-      }
-    },
-    submitAvatar (canvas, file) {
-      const that = this
-      return new Promise((resolve, reject) => {
-        function updateAvatar (avatar, avatarName) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
-            .then((user) => {
-              that.$store.commit('addNewUsers', [user])
-              that.$store.commit('setCurrentUser', user)
-              resolve()
-            })
-            .catch((error) => {
-              that.displayUploadError(error)
-              reject(error)
-            })
-        }
-
-        if (canvas) {
-          canvas.toBlob((data) => updateAvatar(data, file.name), file.type)
-        } else {
-          updateAvatar(file, file.name)
-        }
-      })
-    },
-    submitBanner (banner) {
-      if (!this.bannerPreview && banner !== '') { return }
-
-      this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ banner })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-          this.bannerPreview = null
-        })
-        .catch(this.displayUploadError)
-        .finally(() => { this.bannerUploading = false })
-    },
-    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 })
-    },
     displayUploadError (error) {
       useInterfaceStore().pushGlobalNotice({
         messageKey: 'upload.error.message',

src/components/settings_modal/tabs/profile_tab.scss

@@ -3,10 +3,6 @@
     margin: 0;
   }
 
-  .visibility-tray {
-    padding-top: 5px;
-  }
-
   input[type="file"] {
     padding: 5px;
     height: auto;

src/components/settings_modal/tabs/profile_tab.vue

@@ -7,6 +7,7 @@
         :switcher="false"
         rounded="top"
       />
+      <p>{{ $t('settings.name') }}</p>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">

src/components/user_card/user_card.js

@@ -15,6 +15,8 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+import Modal from 'src/components/modal/modal.vue'
+import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 
 import localeService from 'src/services/locale/locale.service.js'
 import suggestor from 'src/components/emoji_input/suggestor.js'
@@ -34,7 +36,8 @@ import {
   faTimes,
   faExpandAlt,
   faBirthdayCake,
-  faSave
+  faSave,
+  faChevronRight
 } from '@fortawesome/free-solid-svg-icons'
 
 import { useMediaViewerStore } from '../../stores/media_viewer'
@@ -49,7 +52,8 @@ library.add(
   faEdit,
   faTimes,
   faExpandAlt,
-  faBirthdayCake
+  faBirthdayCake,
+  faChevronRight
 )
 
 export default {
@@ -66,6 +70,7 @@ export default {
     'hasNoteEditor'
   ],
   components: {
+    Modal,
     UserAvatar,
     Checkbox,
     RemoteFollow,
@@ -79,7 +84,8 @@ export default {
     UserNote,
     UserTimedFilterModal,
     ColorInput,
-    EmojiInput
+    EmojiInput,
+    ImageCropper
   },
   data () {
     const user = this.$store.state.users.currentUser
@@ -93,6 +99,7 @@ export default {
       newName: user.name_unescaped,
       editingName: false,
       newActorType: user.actor_type,
+      editImage: false,
       newBio: unescape(user.description),
       editingBio: false,
       newBirthday: user.birthday,
@@ -223,6 +230,29 @@ export default {
     },
 
     // Editable stuff
+    defaultAvatar () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+    },
+    defaultBanner () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+    },
+    isDefaultAvatar () {
+      const baseAvatar = this.$store.state.instance.defaultAvatar
+      return !(this.$store.state.users.currentUser.profile_image_url) ||
+      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
+    },
+    isDefaultBanner () {
+      const baseBanner = this.$store.state.instance.defaultBanner
+      return !(this.$store.state.users.currentUser.cover_photo) ||
+      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
+    },
+    isDefaultBackground () {
+      return !(this.$store.state.users.currentUser.background_image)
+    },
+    avatarImgSrc () {
+      const src = this.$store.state.users.currentUser.profile_image_url_original
+      return (!src) ? this.defaultAvatar : src
+    },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits
     },
@@ -303,6 +333,52 @@ export default {
     },
 
     // Editable stuff
+    changeAvatar () {
+      this.editImage = 'avatar'
+    },
+    changeBanner () {
+      this.editImage = 'banner'
+    },
+    resetAvatar () {
+      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
+      if (confirmed) {
+        this.submitAvatar(undefined, '')
+      }
+    },
+    resetBanner () {
+      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
+      if (confirmed) {
+        this.submitBanner('')
+      }
+    },
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
+    submitImage ({ canvas, file }) {
+      const reqData = {}
+      if (this.editImage === 'avatar') {
+        if (canvas) {
+          return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
+        }
+        reqData.avatar = file
+        reqData.avatarName = file.name
+      } else {
+        reqData.banner = file
+      }
+
+      return this.$store.state.api.backendInteractor.updateProfileImages(reqData)
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+          this.editImage = false
+        })
+        .catch((error) => {
+          this.displayUploadError(error)
+        })
+    },
     addField () {
       if (this.newFields.length < this.maxFields) {
         this.newFields.push({ name: '', value: '' })
@@ -316,6 +392,9 @@ export default {
     propsToNative (props) {
       return propsToNative(props)
     },
+    cancelImageText () {
+      return
+    },
     updateProfile () {
       const params = {
         note: this.newBio,

src/components/user_card/user_card.scss

@@ -21,6 +21,22 @@
     padding-bottom: 0;
   }
 
+  &-bio {
+    text-align: center;
+    color: var(--lightText);
+    display: block;
+    line-height: 1.3;
+    padding: 0.6em;
+    margin: 0 0.6em;
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+    }
+  }
+
   .user-card-bio {
     margin: 0.6em;
 
@@ -101,22 +117,6 @@
     z-index: -2;
   }
 
-  &-bio {
-    text-align: center;
-    color: var(--lightText);
-    display: block;
-    line-height: 1.3;
-    padding: 0.6em;
-    margin: 0 0.6em;
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
   &.-rounded-t {
     border-top-left-radius: var(--roundness);
     border-top-right-radius: var(--roundness);
@@ -535,3 +535,44 @@
     }
   }
 }
+
+.edit-image {
+  .panel-body {
+    text-align: center;
+  }
+
+  .current-avatar {
+    object-fit: contain;
+  }
+
+  .images-container {
+    display: grid;
+    margin: 1em;
+    grid-template-columns: 1fr 5em 1fr;
+    grid-template-rows: 20em;
+    gap: 0.5em;
+
+    .new-image {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cropper {
+      flex: 1;
+    }
+
+    > * {
+      flex: 1 0 10em;
+      max-height: 100%;
+      aspect-ratio: 1;
+    }
+
+    .separator {
+      min-width: 1.1em;
+      font-size: 500%;
+      align-self: center;
+      flex: 0 1 5em;
+      aspect-ratio: unset;
+    }
+  }
+}

src/components/user_card/user_card.vue

@@ -31,7 +31,7 @@
             v-else-if="editable"
             class="user-info-avatar button-unstyled -link"
             :class="{ '-editable': editable }"
-            @click="editAvatar"
+            @click="changeAvatar"
           >
             <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
@@ -63,7 +63,7 @@
                   v-if="editable"
                   :disabled="newName && newName.length === 0"
                   class="btn button-unstyled edit-banner-button"
-                  @click="updateProfile"
+                  @click="changeBanner"
                 >
                   {{ $t('settings.change_banner') }}
                   <FAIcon
@@ -591,6 +591,85 @@
         :is-mute="true"
       />
     </teleport>
+    <teleport to="#modal">
+      <Modal
+        v-if="editImage"
+        :is-mute="true"
+        class="edit-image"
+        @backdrop-clicked="editImage = false"
+      >
+        <div class="panel">
+          <div class="panel-heading">
+            <h1 class="title">
+              {{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
+            </h1>
+          </div>
+          <div class="panel-body">
+            <div class="images-container">
+              <img
+                :src="editImage === 'avatar' ? user.profile_image_url_original : newBanner"
+                class="current-avatar"
+              />
+              <FAIcon
+                class="separator"
+                icon="chevron-right"
+              />
+              <image-cropper
+                ref="cropper"
+                class="cropper"
+                @submit="submitImage"
+              />
+            </div>
+            <button
+              id="pick-image"
+              class="button-default btn"
+              type="button"
+              @click="() => this.$refs.cropper.pickImage()"
+            >
+              {{ $t('settings.upload_picture') }}
+            </button>
+            <p class="visibility-notice">
+              {{ $t('settings.avatar_size_instruction') }}
+            </p>
+            <button
+              :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
+              class="button-unstyled reset-button"
+              @click="resetImage"
+            >
+            </button>
+            <div class="panel-footer">
+              <div/>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="destroy"
+              >
+                {{ this.$t('image_cropper.cancel') }}
+              </button>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="this.$refs.cropper.submit(true)"
+              >
+                {{ $t('image_cropper.save') }}
+              </button>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="this.$refs.cropper.submit(false)"
+              >
+                {{ $t('image_cropper.save_without_cropping') }}
+              </button>
+              <FAIcon
+                v-if="submitting"
+                spin
+                icon="circle-notch"
+              />
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </teleport>
   </div>
 </template>
 

src/i18n/en.json

@@ -396,6 +396,7 @@
     "security": "Security",
     "toggle_edit": "Toggle edit",
     "change_banner": "Change banner",
+    "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
@@ -726,6 +727,7 @@
     "set_new_profile_background": "Set new profile background",
     "set_new_profile_banner": "Set new profile banner",
     "reset_avatar": "Reset avatar",
+    "reset_banner": "Reset banner",
     "reset_profile_background": "Reset profile background",
     "reset_profile_banner": "Reset profile banner",
     "reset_avatar_confirm": "Do you really want to reset the avatar?",
@@ -778,6 +780,7 @@
     "tooltipRadius": "Tooltips/alerts",
     "type_domains_to_mute": "Search domains to mute",
     "upload_a_photo": "Upload a photo",
+    "upload_picture": "Upload picture",
     "user_settings": "User Settings",
     "values": {
       "false": "no",