stream_settings: Convert name to pills.

Convert anchor tag to pills containing an image/avatar and username within both existing and new stream subscriber member lists and group member lists using the new user_display_only_pill.hbs template. If user has long username that breaks the UI, overflow is handled with ellipsis. add a context class (panel_subscriber_member_list) to add 'padding 5px'to 'pill_value' for stream subscriber member list and group member list. To retrieve an avatar of a user add a 'img_src: people.small_avatar_url_for_person(user/person)' field in 'stream_editsubscriber.js', 'user_group_edit_members.js', 'stream_create_subscribers.js' and 'user_group_create_members.js'. Fixes: #25724.
zulip · Mar 9, 2024 · 29ca4ba · 29ca4ba
1 parent 90cf911
commit 29ca4ba
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 6 deletions.
diff --git a/web/src/stream_create_subscribers.js b/web/src/stream_create_subscribers.js
@@ -97,6 +97,7 @@ export function build_widgets() {
                 full_name: user.full_name,
                 is_current_user: user.user_id === current_user_id,
                 disabled: stream_create_subscribers_data.must_be_subscribed(user.user_id),
+                img_src: people.small_avatar_url_for_person(user),
             };
             return render_new_stream_user(item);
         },

diff --git a/web/src/stream_edit_subscribers.js b/web/src/stream_edit_subscribers.js
@@ -34,6 +34,7 @@ function format_member_list_elem(person, user_can_remove_subscribers) {
         email: person.delivery_email,
         can_remove_subscribers: user_can_remove_subscribers,
         for_user_group_members: false,
+        img_src: people.small_avatar_url_for_person(person),
     });
 }
 

diff --git a/web/src/user_group_create_members.js b/web/src/user_group_create_members.js
@@ -105,6 +105,7 @@ export function build_widgets() {
                 user_id: user.user_id,
                 full_name: user.full_name,
                 is_current_user: user.user_id === current_user_id,
+                img_src: people.small_avatar_url_for_person(user),
             };
             return render_new_user_group_user(item);
         },

diff --git a/web/src/user_group_edit_members.js b/web/src/user_group_edit_members.js
@@ -57,6 +57,7 @@ function format_member_list_elem(person) {
         email: person.delivery_email,
         can_remove_subscribers: settings_data.can_edit_user_group(current_group_id),
         for_user_group_members: true,
+        img_src: people.small_avatar_url_for_person(person),
     });
 }
 

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
@@ -1182,6 +1182,19 @@
         }
     }
 
+    .panel_subscriber_member_list > .pill-container {
+        &:hover {
+            color: inherit;
+        }
+
+        > .pill {
+            &:focus,
+            &:hover {
+                color: inherit;
+            }
+        }
+    }
+
     /* Originally the icon inherits the color of label, but when the setting
     is disabled, the color of the label is changed and thus the icon becomes
     too light. So, we set the color explicitly to original color of label to

diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
@@ -156,6 +156,29 @@
     }
 }
 
+.panel_subscriber_member_list > .pill-container {
+    background-color: hsl(0deg 0% 0% / 7%);
+
+    &:hover {
+        color: inherit;
+    }
+
+    > .pill {
+        background-color: transparent;
+        border: none;
+        text-decoration: none;
+
+        &:focus {
+            color: inherit;
+        }
+
+        > .pill-value {
+            padding: 5px;
+            max-width: 165px;
+        }
+    }
+}
+
 @keyframes shake {
     10%,
     90% {

diff --git a/web/templates/stream_settings/new_stream_user.hbs b/web/templates/stream_settings/new_stream_user.hbs
@@ -1,7 +1,6 @@
 <tr>
-    <td>
-        <a data-user-id="{{user_id}}" class="view_user_profile" tabindex="0">{{full_name}}</a>
-        {{#if is_current_user}} <span class="my_user_status">{{t "(you)"}}</span>{{/if}}
+    <td class="panel_subscriber_member_list">
+        {{> ../user_display_only_pill display_value=full_name}}
     </td>
     {{#if email}}
         <td class="subscriber-email">{{email}}</td>

diff --git a/web/templates/stream_settings/stream_member_list_entry.hbs b/web/templates/stream_settings/stream_member_list_entry.hbs
@@ -1,7 +1,6 @@
 <tr data-subscriber-id="{{user_id}}">
-    <td class="subscriber-name">
-        <a data-user-id="{{user_id}}" class="view_user_profile" tabindex="0">{{name}}</a>
-        {{#if is_current_user}} <span class="my_user_status">{{t "(you)"}}</span>{{/if}}
+    <td class="subscriber-name panel_subscriber_member_list">
+        {{> ../user_display_only_pill display_value=name}}
     </td>
     {{#if email}}
     <td class="subscriber-email">{{email}}</td>

diff --git a/web/templates/user_display_only_pill.hbs b/web/templates/user_display_only_pill.hbs
@@ -0,0 +1,14 @@
+<span class="pill-container">
+    <a data-user-id="{{user_id}}" class="view_user_profile pill" tabindex="0">
+        {{#if img_src}}
+        <img class="pill-image" src="{{img_src}}" />
+        {{/if}}
+        <span class="pill-value">{{display_value}}</span>
+        {{#if is_current_user}} <span class="my_user_status">{{t "(you)"}}</span>{{/if}}
+        {{~#if should_add_guest_user_indicator}}&nbsp;<i>({{t 'guest'}})</i>{{~/if~}}
+        {{~#if deactivated}}&nbsp;({{t 'deactivated'}}){{~/if~}}
+        {{~#if has_status~}}
+        {{~> status_emoji status_emoji_info~}}
+        {{~/if~}}
+    </a>
+</span>