user-card cleanup

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'
 
@@ -77,6 +78,7 @@ const GeneralTab = {
     FloatSetting,
     UnitSetting,
     InterfaceLanguageSwitcher,
+    ProfileSettingIndicator,
     ScopeSelector,
     Select
   },

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: [
@@ -332,12 +355,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
@@ -457,7 +474,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) {

src/components/user_card/user_card.scss

@@ -3,6 +3,9 @@
   z-index: 1;
   overflow: hidden;
 
+  border-top-left-radius: calc(var(--roundness) - 1px);
+  border-top-right-radius: calc(var(--roundness) - 1px);
+
   // editing headers
   h4 {
     line-height: 2;
@@ -118,42 +121,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/panel.scss

@@ -4,6 +4,7 @@
   --__panel-backdrop-filter: var(--backdrop-filter);
   --_shadow: var(--shadow);
 
+
   .tab-switcher .tabs {
     background: var(--__panel-background);
     backdrop-filter: var(--__panel-backdrop-filter);