From 2b7f12613ec04e3ce8be62b169457ad62aa83a65 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Tue, 1 Mar 2022 00:35:00 +0300
Subject: Add bot indication to user icon on statuses

---
 src/components/user_avatar/user_avatar.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components/user_avatar/user_avatar.vue')

diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 4040e263..29e03bcb 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -7,7 +7,9 @@
     :src="imgSrc(user.profile_image_url_original)"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
-  />
+  >
+    <FAIcon v-if="bot" icon="robot" class="bot-indicator" />
+  </StillImage>
   <div
     v-else
     class="Avatar -placeholder"
@@ -36,6 +38,12 @@
     height: 100%;
   }
 
+  & > .bot-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
   &.better-shadow {
     box-shadow: var(--_avatarShadowInset);
     filter: var(--_avatarShadowFilter);
-- 
cgit v1.2.3-70-g09d2


From 71c0b59866ce3ef0ac57ac8cfc397858ae7e362b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Mar 2022 09:35:29 +0200
Subject: lint

---
 src/components/settings_modal/helpers/integer_setting.vue | 8 ++++----
 src/components/settings_modal/tabs/filtering_tab.vue      | 2 +-
 src/components/still-image/still-image.vue                | 2 +-
 src/components/user_avatar/user_avatar.vue                | 6 +++++-
 4 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/components/user_avatar/user_avatar.vue')

diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index daf903f3..408b0925 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -1,8 +1,8 @@
 <template>
-<span
-  v-if="matchesExpertLevel"
-  class="IntegerSetting"
->
+  <span
+    v-if="matchesExpertLevel"
+    class="IntegerSetting"
+  >
     <label :for="path">
       <slot />
     </label>
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 61c13b66..dc48902f 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -83,7 +83,7 @@
             type="number"
             min="0"
             step="1"
-            />
+          >
         </li>
         <li>
           <IntegerSetting
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 4ea21506..e939b532 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -19,7 +19,7 @@
       @load="onLoad"
       @error="onError"
     >
-    <slot/>
+    <slot />
   </div>
 </template>
 
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 29e03bcb..847d654b 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -8,7 +8,11 @@
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
   >
-    <FAIcon v-if="bot" icon="robot" class="bot-indicator" />
+    <FAIcon
+      v-if="bot"
+      icon="robot"
+      class="bot-indicator"
+    />
   </StillImage>
   <div
     v-else
-- 
cgit v1.2.3-70-g09d2


From 9478a462a7e3e83af0c9580f016cdc9f3654e274 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 21 Mar 2022 20:59:25 +0200
Subject: improve the looks of bot indicator

---
 src/components/user_avatar/user_avatar.vue | 98 ++++++++++++++++++------------
 1 file changed, 60 insertions(+), 38 deletions(-)

(limited to 'src/components/user_avatar/user_avatar.vue')

diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 847d654b..b19ce89b 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -1,24 +1,28 @@
 <template>
-  <StillImage
-    v-if="user"
+  <span
     class="Avatar"
-    :alt="user.screen_name_ui"
-    :title="user.screen_name_ui"
-    :src="imgSrc(user.profile_image_url_original)"
-    :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
-    :image-load-error="imageLoadError"
-  >
+    :class="{ '-compact': compact }"
+    >
+    <StillImage
+      v-if="user"
+      class="avatar"
+      :alt="user.screen_name_ui"
+      :title="user.screen_name_ui"
+      :src="imgSrc(user.profile_image_url_original)"
+      :image-load-error="imageLoadError"
+      :class="{ '-compact': compact, '-better-shadow': betterShadow }"
+    />
+    <div
+      v-else
+      class="avatar -placeholder"
+      :class="{ '-compact': compact }"
+    />
     <FAIcon
       v-if="bot"
       icon="robot"
       class="bot-indicator"
     />
-  </StillImage>
-  <div
-    v-else
-    class="Avatar -placeholder"
-    :class="{ 'avatar-compact': compact }"
-  />
+  </span>
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -31,42 +35,60 @@
   --_avatarShadowInset: var(--avatarStatusShadowInset);
   --_still-image-label-visibility: hidden;
 
+  display: inline-block;
+  position: relative;
   width: 48px;
   height: 48px;
-  box-shadow: var(--_avatarShadowBox);
-  border-radius: $fallback--avatarRadius;
-  border-radius: var(--avatarRadius, $fallback--avatarRadius);
 
-  img {
+  &.-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+
+  .avatar {
     width: 100%;
     height: 100%;
-  }
+    box-shadow: var(--_avatarShadowBox);
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
 
-  & > .bot-indicator {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
+    &.-better-shadow {
+      box-shadow: var(--_avatarShadowInset);
+      filter: var(--_avatarShadowFilter);
+    }
 
-  &.better-shadow {
-    box-shadow: var(--_avatarShadowInset);
-    filter: var(--_avatarShadowFilter);
-  }
+    &.-animated::before {
+      display: none;
+    }
+
+    &.-compact {
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    }
 
-  &.animated::before {
-    display: none;
+    &.-placeholder {
+      background-color: $fallback--fg;
+      background-color: var(--fg, $fallback--fg);
+    }
   }
 
-  &.avatar-compact {
-    width: 32px;
-    height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  img {
+    width: 100%;
+    height: 100%;
   }
 
-  &.-placeholder {
-    background-color: $fallback--fg;
-    background-color: var(--fg, $fallback--fg);
+  .bot-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: -0.2em;
+    padding: 0.2em;
+    background: rgba(127, 127, 127, 0.5);
+    color: #fff;
+    border-radius: var(--tooltipRadius);
   }
+
 }
 </style>
-- 
cgit v1.2.3-70-g09d2