Cleanup and improve avatars (kiwiirc#1841)

* Cleanup and improve avatars * Remove dead code * Emit event when user avatar is first requested * unify settings * Prevent background bleed when image is set * reorder attributes * fix config default * fix control input line-height * cleanup * Simplify avatar svg * clean up styles * cleanup App.vue
ItsOnlyBinary · Dec 17, 2023 · 341fcc3 · 341fcc3
1 parent 5acb05f
commit 341fcc3
Show file tree

Hide file tree

Showing 25 changed files with 384 additions and 270 deletions.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -56,6 +56,19 @@
                 <component :is="activeComponent" v-else v-bind="activeComponentProps" />
             </div>
         </template>
+        <svg
+            viewBox="0 0 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+            style="position: fixed; width: 0; height: 0;"
+        >
+            <clipPath id="kiwi-avatar-clip">
+                <circle r="50" cx="50" cy="50" />
+            </clipPath>
+            <mask id="kiwi-avatar-mask">
+                <rect width="100" height="100" fill="#fff" />
+                <circle r="14" cx="50" cy="0" transform="rotate(45 50 50)" />
+            </mask>
+        </svg>
     </div>
 </template>
 

diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
diff --git a/src/components/AwayStatusIndicator.vue b/src/components/AwayStatusIndicator.vue
@@ -63,11 +63,10 @@ export default {
 
 .kiwi-awaystatusindicator {
     display: inline-block;
-    width: 7px;
-    height: 7px;
+    width: 9px;
+    height: 9px;
     border-radius: 50%;
     margin: 0 4px 0 0;
-    border: 1px solid #fff;
     transition: background-color 0.5s;
 }
 

diff --git a/src/components/ControlInput.vue b/src/components/ControlInput.vue
@@ -824,7 +824,7 @@ export default {
     height: 100%;
 
     .kiwi-awaystatusindicator {
-        margin-top: 16px;
+        margin-top: 14px;
         margin-left: 10px;
         margin-right: -2px;
     }
@@ -836,7 +836,7 @@ export default {
     font-weight: bold;
     text-align: center;
     cursor: pointer;
-    line-height: 40px;
+    line-height: 38px;
     transition: width 0.2s 0.1s;
 
     > i {

diff --git a/src/components/MessageListAvatar.vue b/src/components/MessageListAvatar.vue
diff --git a/src/components/MessageListMessageModern.vue b/src/components/MessageListMessageModern.vue
@@ -40,17 +40,11 @@
         <div class="kiwi-messagelist-modern-left">
             <template v-if="props.m().displayAvatar(props.message)">
                 <component
-                    :is="injections.components.MessageAvatar"
-                    :message="props.message"
+                    :is="injections.components.UserAvatar"
                     :data-nick="props.message.nick"
                     :user="props.message.user"
-                />
-                <component
-                    :is="injections.components.AwayStatusIndicator"
                     :network="props.m().getNetwork()"
-                    :user="props.message.user"
-                    :toggle="false"
-                    class="kiwi-messagelist-awaystatus"
+                    :message="props.message"
                 />
             </template>
         </div>
@@ -146,8 +140,8 @@
 
 import { urlRegex } from '@/helpers/TextFormatting';
 import MessageInfo from './MessageInfo';
-import MessageListAvatar from './MessageListAvatar';
 import AwayStatusIndicator from './AwayStatusIndicator';
+import UserAvatar from './UserAvatar';
 import MediaViewer from './MediaViewer';
 
 const methods = {
@@ -248,7 +242,7 @@ export default {
     inject: {
         components: {
             default: {
-                MessageAvatar: MessageListAvatar,
+                UserAvatar,
                 MessageInfo,
                 AwayStatusIndicator,
                 MediaViewer,

diff --git a/src/components/NicklistUser.vue b/src/components/NicklistUser.vue
@@ -9,8 +9,12 @@
         @click.stop="nicklist.openUserbox(user)"
     >
         <div v-if="nicklist.shouldShowAvatars" class="kiwi-nicklist-avatar">
-            <Avatar :user="user" size="small" />
-            <AwayStatusIndicator :network="network" :user="user" :toggle="false" />
+            <UserAvatar
+                v-bind="nicklist.avatarProps"
+                :user="user"
+                :network="network"
+                size="small"
+            />
         </div>
         <AwayStatusIndicator
             v-else
@@ -60,13 +64,13 @@
 
 import AwayStatusIndicator from './AwayStatusIndicator';
 import TypingStatusIndicator from './TypingStatusIndicator';
-import Avatar from './Avatar';
+import UserAvatar from './UserAvatar';
 
 export default {
     components: {
         AwayStatusIndicator,
         TypingStatusIndicator,
-        Avatar,
+        UserAvatar,
     },
     props: ['network', 'user', 'nicklist'],
     computed: {
@@ -134,19 +138,10 @@ export default {
         width: 30px;
         height: 30px;
     }
-
-    .kiwi-awaystatusindicator {
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: 0;
-    }
 }
 
 .kiwi-nicklist-awaystatus {
     flex-shrink: 0;
-    width: 9px;
-    height: 9px;
     margin-right: 6px;
     border: none;
 }

diff --git a/src/components/StateBrowserUsermenu.vue b/src/components/StateBrowserUsermenu.vue
@@ -11,16 +11,12 @@
             class="kiwi-statebrowser-usermenu-avatar"
             @click="is_usermenu_open=!is_usermenu_open"
         >
-            <avatar
-                v-if="getUser"
+            <UserAvatar
                 :user="getUser"
-                size="large"
-            />
-            <away-status-indicator
-                v-if="network && network.state === 'connected'"
                 :network="network"
-                :user="getUser"
-                :toggle="false"
+                :allow-toggle="true"
+                :force-show-status="true"
+                size="large"
             />
         </div>
         <div v-if="is_usermenu_open" class="kiwi-statebrowser-usermenu-body">
@@ -41,14 +37,13 @@
 
 import * as TextFormatting from '@/helpers/TextFormatting';
 
-import UserState from '@/libs/state/UserState';
 import AwayStatusIndicator from './AwayStatusIndicator';
-import Avatar from './Avatar';
+import UserAvatar from './UserAvatar';
 
 export default {
     components: {
         AwayStatusIndicator,
-        Avatar,
+        UserAvatar,
     },
     props: ['network'],
     data() {
@@ -69,7 +64,7 @@ export default {
                 return this.network.currentUser();
             }
 
-            return new UserState({ nick: 'User' });
+            return null;
         },
         isConnected() {
             return this.network && this.network.state === 'connected';
@@ -129,19 +124,6 @@ export default {
     transition: background 0.2s;
 }
 
-.kiwi-statebrowser-usermenu-avatar .kiwi-avatar-inner {
-    border-width: 3px;
-}
-
-.kiwi-statebrowser-usermenu .kiwi-awaystatusindicator {
-    position: absolute;
-    top: 4px;
-    right: 0;
-    width: 14px;
-    height: 14px;
-    border: 1px solid;
-}
-
 .kiwi-statebrowser-usermenu-body {
     width: 100%;
     box-sizing: border-box;