Merge branch 'profile-edit' into shigusegubu-themes3

src/components/image_cropper/image_cropper.js

@@ -10,19 +10,12 @@ library.add(
 
 const ImageCropper = {
   props: {
+    // Mime-types to accept, i.e. which filetypes to accept (.gif, .png, etc.)
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
-    saveButtonLabel: {
+    // Fixed aspect-ratio for selection box
-      type: String
-    },
-    saveWithoutCroppingButtonlabel: {
-      type: String
-    },
-    cancelButtonLabel: {
-      type: String
-    },
     aspectRatio: {
       type: Number
     }
@@ -30,11 +23,13 @@ const ImageCropper = {
   data () {
     return {
       dataUrl: undefined,
-      filename: undefined,
+      filename: undefined
-      submitting: false
     }
   },
-  emits: ['submit'],
+  emits: [
+    'submit', // cropping complete or uncropped image returned
+    'close', // cropper is closed
+  ],
   methods: {
     destroy () {
       this.$refs.input.value = ''
@@ -42,8 +37,6 @@ const ImageCropper = {
       this.$emit('close')
     },
     submit (cropping = true) {
-      this.submitting = true
-
       let cropperPromise
       if (cropping) {
         cropperPromise = this.$refs.cropperSelection.$toCanvas()
@@ -53,7 +46,6 @@ const ImageCropper = {
 
       cropperPromise.then(canvas => {
         this.$emit('submit', { canvas, file: this.file })
-        this.submitting = false
       })
     },
     pickImage () {

src/components/interface_language_switcher/interface_language_switcher.js

@@ -0,0 +1,58 @@
+import localeService from '../../services/locale/locale.service.js'
+
+import Select from '../select/select.vue'
+import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
+
+export default {
+  components: {
+    Select,
+    ProfileSettingIndicator
+  },
+  props: {
+    // List of languages (or just one language)
+    modelValue: {
+      type: [Array, String],
+      required: true
+    },
+    // Is this setting stored in user profile (true) or elsewhere (false)
+    // Doesn't affect storage, just shows an icon if true
+    profile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    languages () {
+      return localeService.languages
+    },
+
+    controlledLanguage: {
+      get: function () {
+        return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
+      },
+      set: function (val) {
+        this.$emit('update:modelValue', val)
+      }
+    }
+  },
+
+  methods: {
+    getLanguageName (code) {
+      return localeService.getLanguageName(code)
+    },
+    addLanguage () {
+      this.controlledLanguage = [...this.controlledLanguage, '']
+    },
+    setLanguageAt (index, val) {
+      const lang = [...this.controlledLanguage]
+      lang[index] = val
+      this.controlledLanguage = lang
+    },
+    removeLanguageAt (index) {
+      const lang = [...this.controlledLanguage]
+      lang.splice(index, 1)
+      this.controlledLanguage = lang
+    }
+  }
+}

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="interface-language-switcher">
     <label>
-      {{ promptText }}
+      <slot />
       <ProfileSettingIndicator :is-profile="profile" />
     </label>
     <ul class="setting-list">
@@ -45,68 +45,7 @@
   </div>
 </template>
 
-<script>
+<script src="./interface_language_switcher.js"></script>
-import localeService from '../../services/locale/locale.service.js'
-
-import Select from '../select/select.vue'
-import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
-
-export default {
-  components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Select,
-    ProfileSettingIndicator
-  },
-  props: {
-    promptText: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: [Array, String],
-      required: true
-    },
-    profile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update'],
-  computed: {
-    languages () {
-      return localeService.languages
-    },
-
-    controlledLanguage: {
-      get: function () {
-        return Array.isArray(this.language) ? this.language : [this.language]
-      },
-      set: function (val) {
-        this.$emit('update', val)
-      }
-    }
-  },
-
-  methods: {
-    getLanguageName (code) {
-      return localeService.getLanguageName(code)
-    },
-    addLanguage () {
-      this.controlledLanguage = [...this.controlledLanguage, '']
-    },
-    setLanguageAt (index, val) {
-      const lang = [...this.controlledLanguage]
-      lang[index] = val
-      this.controlledLanguage = lang
-    },
-    removeLanguageAt (index) {
-      const lang = [...this.controlledLanguage]
-      lang.splice(index, 1)
-      this.controlledLanguage = lang
-    }
-  }
-}
-</script>
 
 <style lang="scss">
 .interface-language-switcher {

src/components/settings_modal/tabs/appearance_tab.js

@@ -191,6 +191,9 @@ const AppearanceTab = {
     }
   },
   computed: {
+    isDefaultBackground () {
+      return !(this.$store.state.users.currentUser.background_image)
+    },
     switchInProgress () {
       return useInterfaceStore().themeChangeInProgress
     },

src/components/settings_modal/tabs/general_tab.js

@@ -8,6 +8,7 @@ import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import Select from 'src/components/select/select.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -66,7 +67,8 @@ const GeneralTab = {
       // Chrome-likes
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
       // Future spec, still not supported in Nightly 63 as of 08/2018
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -76,6 +78,7 @@ const GeneralTab = {
     FloatSetting,
     UnitSetting,
     InterfaceLanguageSwitcher,
+    ProfileSettingIndicator,
     ScopeSelector,
     Select
   },

src/components/settings_modal/tabs/general_tab.vue

@@ -5,18 +5,20 @@
       <ul class="setting-list">
         <li>
           <interface-language-switcher
-            :prompt-text="$t('settings.interfaceLanguage')"
+            v-model="language"
-            :language="language"
             @update="val => language = val"
-          />
+          >
+            {{ $t('settings.interfaceLanguage') }}
+          </interface-language-switcher>
         </li>
         <li>
           <interface-language-switcher
-            :prompt-text="$t('settings.email_language')"
+            v-model="emailLanguage"
-            :language="emailLanguage"
             :profile="true"
-            @update="val => { emailLanguage = val; updateProfile() }"
+            @update:model-value="updateProfile()"
-          />
+          >
+            {{ $t('settings.email_language') }}
+          </interface-language-switcher>
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">

src/components/settings_modal/tabs/profile_tab.js

@@ -1,18 +1,9 @@
 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 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'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
-import Select from 'src/components/select/select.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 
-import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -29,55 +20,23 @@ library.add(
 const ProfileTab = {
   data () {
     return {
+      // Whether user is locked or not
       locked: this.$store.state.users.currentUser.locked,
     }
   },
   components: {
     UserCard,
-    ScopeSelector,
-    ImageCropper,
-    EmojiInput,
-    ProgressButton,
     Checkbox,
     BooleanSetting,
-    InterfaceLanguageSwitcher,
+    ProfileSettingIndicator
-    ProfileSettingIndicator,
-    Select
   },
   computed: {
     user () {
       return this.$store.state.users.currentUser
     },
-    ...SharedComputedObject(),
+    ...SharedComputedObject()
-    emojiUserSuggestor () {
-      return suggestor({
-        emoji: [
-          ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji
-        ],
-        store: this.$store
-      })
-    },
-    emojiSuggestor () {
-      return suggestor({
-        emoji: [
-          ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji
-        ]
-      })
-    },
-    userSuggestor () {
-      return suggestor({ store: this.$store })
-    },
-    bannerImgSrc () {
-      const src = this.$store.state.users.currentUser.cover_photo
-      return (!src) ? this.defaultBanner : src
-    },
   },
   methods: {
-    changeVis (visibility) {
-      this.newDefaultScope = visibility
-    },
     updateProfile () {
       const params = {
         locked: this.locked
@@ -92,9 +51,6 @@ const ProfileTab = {
         .catch((error) => {
           this.displayUploadError(error)
         })
-    },
-    propsToNative (props) {
-      return propsToNative(props)
     }
   },
   watch: {

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,6 +1,6 @@
 .profile-tab {
   // overriding global for better look
-  div.profile-edit {
+  .setting-item.profile-edit {
     margin: 0;
 
     h2 {
@@ -12,17 +12,4 @@
       overflow: hidden;
     }
   }
-
-  .bio {
-    margin: 0;
-  }
-
-  .uploading {
-    font-size: 1.5em;
-    margin: 0.25em;
-  }
-
-  .setting-subitem {
-    margin-left: 1.75em;
-  }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -6,7 +6,6 @@
         :user-id="user.id"
         :editable="true"
         :switcher="false"
-        rounded="top"
       />
     </div>
     <div class="setting-item">

src/components/user_avatar/user_avatar.js

@@ -14,12 +14,31 @@ library.add(
 )
 
 const UserAvatar = {
-  props: [
+  props: {
-    'user',
+    // User object to show avatar of
-    'compact',
+    user: {
-    'showActorTypeIndicator',
+      required: true,
-    'url'
+      type: Object
-  ],
+    },
+    // Use less space and use alternative roundness
+    compact: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show small icon indicating if account is a bot or group
+    showActorTypeIndicator : {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Override avatar image URL, useful for profile editing
+    url: {
+      required: false,
+      type: String,
+      default: null
+    }
+  },
   data () {
     return {
       showPlaceholder: false,

src/components/user_avatar/user_avatar.vue

@@ -40,12 +40,12 @@
 
   display: inline-block;
   position: relative;
-  width: 48px;
+  width: 3.5em;
   height: 48px;
 
   &.-compact {
-    width: 32px;
+    width: 2.2em;
-    height: 32px;
+    height: 2.2em;
     border-radius: var(--roundness);
   }
 

src/components/user_card/user_card.js

@@ -58,18 +58,49 @@ library.add(
 )
 
 export default {
-  props: [
+  props: {
-    'editable',
+    // Enables all the options for profile editing, used in settings -> profile tab
-    'userId',
+    editable: {
-    'switcher',
+      required: false,
-    'selected',
+      default: false,
-    'hideBio',
+      type: Boolean
-    'rounded',
+    },
-    'bordered',
+    // ID of user to show data of
-    'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
+    userId: {
-    'onClose',
+      required: true,
-    'hasNoteEditor'
+      type: String
-  ],
+    },
+    // Use a compact layout that hides bio, stats etc.
+    hideBio: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    // default - open profile, 'zoom' - zoom, function - call function
+    avatarAction: {
+      required: false,
+      type: String,
+      default: 'default'
+    },
+    // Show note editor if supported
+    hasNoteEditor: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show close icon (for popovers)
+    showClose: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show close icon (for popovers)
+    showExpand: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
   components: {
     DialogModal,
     UserAvatar,
@@ -155,14 +186,6 @@ export default {
     relationship () {
       return this.$store.getters.relationship(this.userId)
     },
-    classes () {
-      return [{
-        '-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        '-rounded': this.rounded === true, // set border-radius for all sides
-        '-bordered': this.bordered === true, // set border for all sides
-        '-popover': !!this.onClose // set popover rounding
-      }]
-    },
     style () {
       return {
         backgroundImage: [
@@ -291,9 +314,6 @@ export default {
       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)
-    },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits
     },
@@ -332,12 +352,6 @@ export default {
     unsubscribeUser () {
       return this.$store.dispatch('unsubscribeUser', this.user.id)
     },
-    setProfileView (v) {
-      if (this.switcher) {
-        const store = this.$store
-        store.commit('setProfileView', { v })
-      }
-    },
     linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
@@ -416,9 +430,7 @@ export default {
     addField () {
       if (this.newFields.length < this.maxFields) {
         this.newFields.push({ name: '', value: '' })
-        return true
       }
-      return false
     },
     deleteField (index) {
       this.newFields.splice(index, 1)
@@ -457,7 +469,7 @@ export default {
         fields_attributes: this.newFields.filter(el => el != null),
         show_role: !!this.newShowRole,
         birthday: this.newBirthday || '',
-        show_birthday: !!this.showBirthday,
+        show_birthday: !!this.newShowBirthday,
       }
 
       if (this.actorType) {
@@ -472,10 +484,6 @@ export default {
         params.header = this.newBannerFile
       }
 
-      if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
-      }
-
       this.$store.state.api.backendInteractor
         .updateProfile({ params })
         .then((user) => {

src/components/user_card/user_card.scss

@@ -2,6 +2,8 @@
   position: relative;
   z-index: 1;
   overflow: hidden;
+  border-top-left-radius: calc(var(--roundness) - 1px);
+  border-top-right-radius: calc(var(--roundness) - 1px);
 
   // editing headers
   h4 {
@@ -118,42 +120,12 @@
     padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
     background-size: cover;
-    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
-    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
-    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
-    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
+    border-top-left-radius: calc(var(--roundness) - 1px);
+    border-top-right-radius: calc(var(--roundness) - 1px);
     z-index: -2;
   }
 
-  &.-rounded-t {
-    border-top-left-radius: var(--roundness);
-    border-top-right-radius: var(--roundness);
-
-    --__roundnessTop: var(--roundness);
-    --__roundnessBottom: 0;
-  }
-
-  &.-rounded {
-    border-radius: var(--roundness);
-
-    --__roundnessTop: var(--roundness);
-    --__roundnessBottom: var(--roundness);
-  }
-
-  &.-popover {
-    border-radius: var(--roundness);
-
-    --__roundnessTop: var(--roundness);
-    --__roundnessBottom: var(--roundness);
-  }
-
-  &.-bordered {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--border);
-  }
-
   .bottom-buttons {
     display: flex;
     gap: 0.5em;

src/components/user_card/user_card.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="user-card">
-    class="user-card"
-    :class="classes"
-  >
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
@@ -70,7 +67,7 @@
                     fixed-width
                     class="icon"
                     icon="pencil"
-                    :title="$t('user_card.change_banner')"
+                    :title="$t('settings.change_banner')"
                   />
                 </button>
                 <button
@@ -102,10 +99,10 @@
                   :relationship="relationship"
                 />
                 <router-link
-                  v-if="onClose"
+                  v-if="showExpand"
                   :to="userProfileLink(user)"
                   class="button-unstyled external-link-button"
-                  @click="onClose"
+                  @click="$emit('close')"
                 >
                   <FAIcon
                     class="icon"
@@ -113,9 +110,9 @@
                   />
                 </router-link>
                 <button
-                  v-if="onClose"
+                  v-if="showClose"
                   class="button-unstyled external-link-button"
-                  @click="onClose"
+                  @click="$emit('close')"
                 >
                   <FAIcon
                     class="icon"
@@ -164,7 +161,7 @@
               </div>
             </div>
             <div class="bottom-line">
-              <user-link
+              <UserLink
                 class="user-screen-name"
                 :user="user"
               />
@@ -521,32 +518,22 @@
         <dl
           v-if="!mergedConfig.hideUserStats && !hideBio"
           class="user-count"
-          @click.prevent="setProfileView('statuses')"
         >
           <dd>{{ user.statuses_count }}</dd>
           {{ ' ' }}
           <dt>{{ $t('user_card.statuses') }}</dt>
         </dl>
-        <dl
+        <dl class="user-count">
-          class="user-count"
-          @click.prevent="setProfileView('statuses')"
-        >
           <dd>{{ dailyAvg }}</dd>
           {{ ' ' }}
           <dt>{{ $t('user_card.statuses_per_day') }}</dt>
         </dl>
-        <dl
+        <dl class="user-count">
-          class="user-count"
-          @click.prevent="setProfileView('friends')"
-        >
           <dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
           {{ ' ' }}
           <dt>{{ $t('user_card.followees') }}</dt>
         </dl>
-        <dl
+        <dl class="user-count">
-          class="user-count"
-          @click.prevent="setProfileView('followers')"
-        >
           <dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
           {{ ' ' }}
           <dt>{{ $t('user_card.followers') }}</dt>
@@ -568,7 +555,7 @@
           class="birthday"
         >
           <div>
-            <Checkbox v-model="showBirthday">
+            <Checkbox v-model="newShowBirthday">
               {{ $t('settings.birthday.show_birthday') }}
             </Checkbox>
           </div>

src/components/user_panel/user_panel.vue

@@ -8,7 +8,6 @@
       <UserCard
         :user-id="user.id"
         :hide-bio="true"
-        rounded="top"
       />
       <PostStatusForm />
     </div>

src/components/user_popover/user_popover.vue

@@ -12,10 +12,12 @@
     <template #content="{close}">
       <UserCard
         class="user-popover"
+        :show-close="true"
+        :show-expand="true"
         :user-id="userId"
         :hide-bio="true"
         :avatar-action="userPopoverAvatarAction == 'close' ? close : userPopoverAvatarAction"
-        :on-close="close"
+        @close="close"
       />
     </template>
   </Popover>

src/components/user_profile/user_profile.vue

@@ -4,13 +4,12 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <div class="panel-body">
+      <div class="panel-body card-wrapper">
         <UserCard
           :user-id="userId"
           :switcher="true"
           :selected="timeline.viewing"
           avatar-action="zoom"
-          rounded="top"
           :has-note-editor="true"
         />
       </div>
@@ -130,6 +129,16 @@
 .user-profile {
   flex: 2;
 
+  .card-wrapper {
+    border-top-left-radius: var(--roundness);
+    border-top-right-radius: var(--roundness);
+  }
+
+  .panel-footer {
+    border-bottom-left-radius: var(--roundness);
+    border-bottom-right-radius: var(--roundness);
+  }
+
   // No sticky header on user profile
   --currentPanelStack: 0;
 

src/modules/instance.js

@@ -139,7 +139,6 @@ const defaultState = {
 
   // Nasty stuff
   customEmoji: [],
-  rawCustomEmoji: [],
   customEmojiFetched: false,
   emoji: {},
   emojiFetched: false,