Merge branch 'profile-edit' into shigusegubu-themes3

src/components/emoji_input/emoji_input.vue

@@ -115,7 +115,6 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  display: flex;
 
   .emoji-picker-icon {
     position: absolute;

src/components/image_cropper/image_cropper.vue

@@ -54,7 +54,7 @@
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    />
+    >
   </div>
 </template>
 

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,4 +1,18 @@
 .profile-tab {
+  // overriding global for better look
+  div.profile-edit {
+    margin: 0;
+
+    h2 {
+      margin-left: 1rem;
+    }
+
+    .user-card {
+      padding: 1.2em;
+      overflow: hidden;
+    }
+  }
+
   .bio {
     margin: 0;
   }

src/components/settings_modal/tabs/profile_tab.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="profile-tab">
-    <UserCard
+    <div class="setting-item profile-edit">
-      :user-id="user.id"
+      <h2>{{ $t('settings.account_profile_edit') }}</h2>
-      :editable="true"
+      <UserCard
-      :switcher="false"
+        :user-id="user.id"
-      rounded="top"
+        :editable="true"
-      >
+        :switcher="false"
-    </UserCard>
+        rounded="top"
+      />
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">

src/components/user_card/user_card.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge'
+import isEqual from 'lodash/isEqual'
 import unescape from 'lodash/unescape'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
@@ -116,6 +117,7 @@ export default {
       newShowRole: user.show_role,
 
       newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
+
       editingFields: false,
     }
   },
@@ -123,6 +125,21 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    somethingToSave () {
+      if (this.newName !== this.user.name_unescaped) return true
+      if (this.newBio !== unescape(this.user.description)) return true
+      if (this.newAvatar !== null) return true
+      if (this.newBanner !== null) return true
+      if (this.newActorType !== this.user.actor_type) return true
+      if (this.newBirthday !== this.user.birthday) return true
+      if (this.newShowBirthday !== this.user.show_birthday) return true
+      if (this.newShowRole !== this.user.show_role) return true
+      if (!isEqual(
+        this.newFields,
+        this.user.fields?.map(field => ({ name: field.name, value: field.value }))
+      )) return true
+      return false
+    },
     groupActorAvailable () {
       return this.$store.state.instance.groupActorAvailable
     },

src/components/user_card/user_card.scss

@@ -1,15 +1,22 @@
 .user-card {
   position: relative;
   z-index: 1;
+  overflow: hidden;
 
   // editing headers
   h4 {
     line-height: 2;
     display: flex;
-    padding: 0 1.0em;
+  }
 
-    span {
+  h3 {
-      flex: 1;
+    padding-left: 0.6em;
+    margin-bottom: 0;
+
+    .button-default {
+      font-size: 1rem;
+      line-height: 2;
+      padding: 0 0.6em;
     }
   }
 
@@ -68,17 +75,6 @@
     --_still-image-label-visibility: hidden;
   }
 
-  .panel-heading {
-    text-align: center;
-    box-shadow: none;
-    background: transparent;
-    backdrop-filter: none;
-    flex-direction: column;
-    align-items: stretch;
-    // create new stacking context
-    position: relative;
-  }
-
   .personal-marks {
     margin: 0.6em;
     padding: 0.6em;
@@ -157,13 +153,19 @@
     border-style: solid;
     border-color: var(--border);
   }
+
+  .bottom-buttons {
+    display: flex;
+    gap: 0.5em;
+  }
 }
 
 .user-info {
   position: relative;
-  margin: 0.6em;
-  margin-bottom: 0;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 
   .user-identity {
     position: relative;
@@ -171,7 +173,6 @@
     min-height: 6em;
     display: flex;
     align-items: flex-end;
-    margin-bottom: 1em;
     container: user-card / inline-size;
 
     > * {
@@ -362,52 +363,6 @@
     }
   }
 
-  .highlighter {
-    margin: 5em;
-    align-items: baseline;
-    line-height: 22px;
-    flex-wrap: wrap;
-
-    .following {
-      flex: 1 0 auto;
-      margin: 0;
-      margin-bottom: 0.25em;
-      text-align: left;
-    }
-
-    .highlighter {
-      flex: 0 1 auto;
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: -0.5em;
-      align-self: start;
-
-      .userHighlightCl {
-        padding: 2px 10px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightText {
-        width: 70px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightCl,
-      .userHighlightText,
-      .userHighlightSel {
-        vertical-align: top;
-        margin-right: 0.5em;
-        margin-bottom: 0.25em;
-      }
-    }
-  }
-
   .user-interactions {
     position: relative;
     display: flex;
@@ -415,7 +370,7 @@
     gap: 0.6em;
 
     > * {
-      flex: 0 0 10%;
+      flex: 0 0 8em;
     }
 
     .popover-trigger-button, .moderation-tools-button {
@@ -476,6 +431,7 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
+  padding: 0 0.5em;
   display: flex;
   flex-direction: column;
 
@@ -484,8 +440,6 @@
   img {
     object-fit: contain;
     vertical-align: middle;
-    max-width: 100%;
-    max-height: 400px;
   }
 
   .user-profile-field-add,

src/components/user_card/user_card.vue

@@ -3,10 +3,7 @@
     class="user-card"
     :class="classes"
   >
-    <div
+    <div class="user-card-inner">
-      :class="onClose ? '' : 'panel-heading -flexible-height'"
-      class="user-card-inner"
-    >
       <div class="user-info">
         <div class="user-identity">
           <div
@@ -156,8 +153,8 @@
                 <button
                   v-if="editable"
                   class="button-unstyled edit-button"
-                  @click="editingName = !editingName"
                   :title="$t('settings.toggle_edit')"
+                  @click="editingName = !editingName"
                 >
                   <FAIcon
                     class="icon"
@@ -296,34 +293,6 @@
               :user="user"
             />
           </template>
-          <button
-            v-if="editable"
-            :disabled="somethingToSave"
-            class="btn button-default reset-profile-button"
-            @click="resetState"
-          >
-            {{ $t('settings.reset') }}
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="clock-rotate-left"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
-          <button
-            v-if="editable"
-            :disabled="somethingToSave"
-            class="btn button-default save-profile-button"
-            @click="updateProfile"
-          >
-            {{ $t('settings.save') }}
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="save"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -333,41 +302,6 @@
         </div>
       </div>
     </div>
-    <template v-if="editable">
-      <h4>{{ $t('settings.user_preferences') }}</h4>
-      <p
-        v-if="role === 'admin' || role === 'moderator'"
-        class="user-card-setting"
-      >
-        <Checkbox v-model="newShowRole">
-          <template v-if="role === 'admin'">
-            {{ $t('settings.show_admin_badge') }}
-          </template>
-          <template v-if="role === 'moderator'">
-            {{ $t('settings.show_moderator_badge') }}
-          </template>
-        </Checkbox>
-      </p>
-      <p class="user-card-setting">
-        <label>
-          {{ $t('settings.actor_type') }}
-          <Select v-model="newActorType">
-            <option
-              v-for="option in availableActorTypes"
-              :key="option"
-              :value="option"
-            >
-              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
-            </option>
-          </Select>
-          <div v-if="groupActorAvailable">
-            <small>
-              {{ $t('settings.actor_type_description') }}
-            </small>
-          </div>
-        </label>
-      </p>
-    </template>
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -413,10 +347,11 @@
         />
       </div>
     </div>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.bio') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingBio = !editingBio"
@@ -427,7 +362,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingBio">
       <RichContent
         v-if="!hideBio"
@@ -456,10 +391,11 @@
         </template>
       </EmojiInput>
     </template>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingFields = !editingFields"
@@ -470,7 +406,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingFields">
       <div
         v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
@@ -564,7 +500,10 @@
           class="user-profile-field-add add-field button-default -hover-highlight"
           @click="addField"
         >
-          <FAIcon icon="plus" class="icon" />
+          <FAIcon
+            icon="plus"
+            class="icon"
+          />
           <span class="label">
             {{ $t("settings.profile_fields.add_field") }}
           </span>
@@ -572,8 +511,8 @@
       </div>
     </template>
     <div
-      class="user-extras"
       v-if="!hideBio"
+      class="user-extras"
     >
       <span
         v-if="!editable && !mergedConfig.hideUserStats"
@@ -647,6 +586,71 @@
         </div>
       </template>
     </div>
+    <template v-if="editable">
+      <h3>{{ $t('settings.profile_other') }}</h3>
+      <p
+        v-if="role === 'admin' || role === 'moderator'"
+        class="user-card-setting"
+      >
+        <Checkbox v-model="newShowRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p class="user-card-setting">
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="newActorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+      <div class="bottom-buttons">
+        <button
+          v-if="editable"
+          :disabled="!somethingToSave"
+          class="btn button-default reset-profile-button"
+          @click="resetState"
+        >
+          {{ $t('settings.reset') }}
+          <FAIcon
+            fixed-width
+            class="icon"
+            icon="clock-rotate-left"
+            :title="$t('user_card.edit_profile')"
+          />
+        </button>
+        <button
+          v-if="editable"
+          :disabled="!somethingToSave"
+          class="btn button-default save-profile-button"
+          @click="updateProfile"
+        >
+          {{ $t('settings.save') }}
+          <FAIcon
+            fixed-width
+            class="icon"
+            icon="save"
+            :title="$t('user_card.edit_profile')"
+          />
+        </button>
+      </div>
+    </template>
     <teleport to="#modal">
       <UserTimedFilterModal
         ref="timedMuteDialog"
@@ -674,12 +678,12 @@
           id="pick-image"
           class="button-default btn"
           type="button"
-          @click="() => this.$refs.cropper.pickImage()"
+          @click="() => $refs.cropper.pickImage()"
         >
           {{ $t('settings.upload_picture') }}
         </button>
         <p class="visibility-notice">
-          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' )}}
+          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
         </p>
         <template #footer>
           <button
@@ -687,26 +691,26 @@
             type="button"
             @click="editImage = false"
           >
-            {{ this.$t('image_cropper.cancel') }}
+            {{ $t('image_cropper.cancel') }}
           </button>
           <button
             :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
             class="button-default btn reset-button"
             @click="resetImage"
           >
-            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' )}}
+            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' ) }}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="this.$refs.cropper.submit(false)"
+            @click="$refs.cropper.submit(false)"
           >
             {{ $t('image_cropper.save_without_cropping') }}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="this.$refs.cropper.submit(true)"
+            @click="$refs.cropper.submit(true)"
           >
             {{ $t('image_cropper.save') }}
           </button>

src/components/user_panel/user_panel.vue

@@ -29,6 +29,8 @@
   }
 
   .user-info {
+    margin: 0.6em;
+
     .Avatar {
       width: 5em;
       width: calc(min(5em, 20cqw));

src/components/user_popover/user_popover.vue

@@ -27,7 +27,11 @@
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover {
-  margin-bottom: 0.6em;
+  margin: 0;
+
+  .user-info {
+    margin: 1.2em;
+  }
 
   .user-identity {
     aspect-ratio: unset;
@@ -40,7 +44,6 @@
 
   &.popover {
     overflow: hidden;
-    padding: 0.6em;
   }
 }
 /* stylelint-enable block-no-empty */

src/components/user_profile/user_profile.vue

@@ -129,7 +129,6 @@
 <style lang="scss">
 .user-profile {
   flex: 2;
-  flex-basis: 500px;
 
   // No sticky header on user profile
   --currentPanelStack: 0;
@@ -140,6 +139,10 @@
     align-items: center;
     padding: 2em;
   }
+
+  .user-info {
+    margin: 1.2em;
+  }
 }
 
 .user-profile-placeholder {

src/i18n/en.json

@@ -396,7 +396,7 @@
     "save": "Save changes",
     "reset": "Reset changes",
     "security": "Security",
-    "toggle_edit": "Toggle edit",
+    "toggle_edit": "Edit",
     "change_banner": "Change banner",
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
@@ -493,7 +493,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "user_preferences": "Profile settings",
+    "profile_other": "Other",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
@@ -664,6 +664,7 @@
       "label": "Birthday",
       "show_birthday": "Show my birthday"
     },
+    "account_profile_edit": "Edit Profile",
     "account_privacy": "Privacy",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",