misc

src/components/user_card/user_card.js

@@ -91,12 +91,13 @@ export default {
 
       // Editable stuff
       newName: user.name_unescaped,
-      editingName: true,
+      editingName: false,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
+      newCoverPhoto: user.cover_photo,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
       newLocked: user.locked,
@@ -125,7 +126,7 @@ export default {
       return {
         backgroundImage: [
           'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
-          `url(${this.user.cover_photo})`
+          `url(${this.newCoverPhoto})`
         ].join(', ')
       }
     },

src/components/user_card/user_card.scss

@@ -200,7 +200,8 @@
       padding: 0.6em;
       margin: -0.6em;
 
-      &.save-profile-button {
+      &.save-profile-button,
+      &.edit-banner-button {
         width: auto;
       }
 
@@ -224,7 +225,6 @@
       inset: -0.6em;
       left: -0.6em;
       right: -1.2em;
-      background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -234,11 +234,21 @@
 
       svg {
         color: #fff;
+        margin: 0.5em;
       }
     }
 
     &:hover &.-overlay {
       opacity: 1;
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+
+  .user-info-avatar.-editable {
+    .-overlay {
+      opacity: 1;
+      place-items: start end;
+      justify-content: end;
     }
   }
 
@@ -455,11 +465,15 @@
   .user-profile-field-add,
   .user-profile-field {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     margin: 0.25em;
     border: 1px solid var(--border);
     border-radius: var(--roundness);
     line-height: 2em;
+
+    .label {
+      margin-left: 0.5em;
+    }
   }
 
   .user-profile-field-add {
@@ -468,10 +482,14 @@
   }
 
   .user-profile-field {
+
+    /* stylelint-disable no-descending-specificity */
+    // input is a generic class
     .input {
       text-align: inherit;
       flex: 1;
     }
+    /* stylelint-enable no-descending-specificity */
 
     .delete-field {
       display: inline-block;

src/components/user_card/user_card.vue

@@ -30,6 +30,7 @@
           <button
             v-else-if="editable"
             class="user-info-avatar button-unstyled -link"
+            :class="{ '-editable': editable }"
             @click="editAvatar"
           >
             <UserAvatar :user="user" />
@@ -61,6 +62,20 @@
                 <button
                   v-if="editable"
                   :disabled="newName && newName.length === 0"
+                  class="btn button-unstyled edit-banner-button"
+                  @click="updateProfile"
+                >
+                  {{ $t('settings.change_banner') }}
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="pencil"
+                    :title="$t('user_card.change_banner')"
+                  />
+                </button>
+                <button
+                  v-if="editable"
+                  :disabled="somethingToSave"
                   class="btn button-unstyled save-profile-button"
                   @click="updateProfile"
                 >
@@ -487,9 +502,10 @@
           class="user-profile-field-add add-field button-default -hover-highlight"
           @click="addField"
         >
-          <FAIcon icon="plus" />
+          <FAIcon icon="plus" class="icon" />
-          {{ ' ' }}
+          <span class="label">
-          {{ $t("settings.profile_fields.add_field") }}
+            {{ $t("settings.profile_fields.add_field") }}
+          </span>
         </button>
       </div>
     </template>

src/i18n/en.json

@@ -395,6 +395,7 @@
     "save": "Save changes",
     "security": "Security",
     "toggle_edit": "Toggle edit",
+    "change_banner": "Change banner",
     "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",