paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

input_pill: Add semi-transparent border around avatar.

Browse Source 
Fixes #34499.
This commit is contained in:
Evy Kassirer
2025-05-13 16:13:12 -07:00
committed by Tim Abbott
parent 8f7aab05e7
commit 17ce7b90d3
6 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/app_variables.css
View File

@@ -569,7 +569,7 @@
preserve an apparent border around preserve an apparent border around
them, and a square aspect-ratio, even under them, and a square aspect-ratio, even under
`box-sizing: border-box` in the area. */ `box-sizing: border-box` in the area. */
--length-input-pill-image: calc(var(--height-input-pill) - 2px); --length-search-input-pill-image: calc(var(--height-input-pill) - 2px);
--length-input-pill-exit: 1.1429em; /* 16px at 14px/em */ --length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
--input-pill-side-padding: 0.3571em; /* 5px at 14px/em */ --input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
--vertical-spacing-input-pill: 2px; --vertical-spacing-input-pill: 2px;
@@ -1808,6 +1808,10 @@
hsl(240deg 70% 70% / 30%), hsl(240deg 70% 70% / 30%),
hsl(240deg 52% 60% / 45%) hsl(240deg 52% 60% / 45%)
); );
--color-border-input-pill-image: light-dark(
hsl(237deg 68% 94% / 50%),
hsl(240deg 65% 60% / 60%)
);
--color-focus-outline-input-pill: light-dark( --color-focus-outline-input-pill: light-dark(
hsl(240deg 50% 50%), hsl(240deg 50% 50%),
hsl(0deg 0% 100% / 60%) hsl(0deg 0% 100% / 60%)

15
web/styles/input_pill.css
View File

@@ -27,7 +27,6 @@
margin: 0; margin: 0;
color: inherit; color: inherit;
border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background-color: var(--color-background-input-pill); background-color: var(--color-background-input-pill);
@@ -39,11 +38,21 @@
} }
.pill-image { .pill-image {
height: var(--length-input-pill-image); height: var(--height-input-pill);
width: var(--length-input-pill-image); width: var(--height-input-pill);
border-radius: 4px; border-radius: 4px;
} }
.pill-image-border {
height: var(--height-input-pill);
width: var(--height-input-pill);
position: absolute;
box-sizing: border-box;
border: 1px solid;
border-radius: 4px;
border-color: var(--color-border-input-pill-image);
}
.zulip-icon { .zulip-icon {
padding-right: 2px; padding-right: 2px;
} }

12
web/styles/search.css
View File

@@ -266,6 +266,7 @@
can contain multiple user pills that wrap onto can contain multiple user pills that wrap onto
new lines. */ new lines. */
height: unset; height: unset;
border: 1px solid transparent;
> .pill-label { > .pill-label {
min-width: fit-content; min-width: fit-content;
@@ -294,12 +295,21 @@
min-width: 4.5em; min-width: 4.5em;
display: grid; display: grid;
grid-template-columns: grid-template-columns:
var(--length-input-pill-image) minmax(0, 1fr) var(--length-search-input-pill-image) minmax(0, 1fr)
var(--length-input-pill-exit); var(--length-input-pill-exit);
align-content: center; align-content: center;
/* Don't inherit large line-height for user pills themselves, either. */ /* Don't inherit large line-height for user pills themselves, either. */
line-height: 1.1; line-height: 1.1;
.pill-image {
height: var(--length-search-input-pill-image);
width: var(--length-search-input-pill-image);
}
.pill-image-border {
border: none;
}
&:not(.deactivated-pill) { &:not(.deactivated-pill) {
background-color: var(--color-background-user-pill); background-color: var(--color-background-user-pill);
} }

1
web/templates/input_pill.hbs
View File

@@ -1,6 +1,7 @@
<div class='pill {{#if deactivated}} deactivated-pill {{/if}}'{{#if user_id}}data-user-id="{{user_id}}"{{/if}}{{#if group_id}}data-user-group-id="{{group_id}}"{{/if}}{{#if stream_id}}data-stream-id="{{stream_id}}"{{/if}} tabindex=0> <div class='pill {{#if deactivated}} deactivated-pill {{/if}}'{{#if user_id}}data-user-id="{{user_id}}"{{/if}}{{#if group_id}}data-user-group-id="{{group_id}}"{{/if}}{{#if stream_id}}data-stream-id="{{stream_id}}"{{/if}} tabindex=0>
{{#if has_image}} {{#if has_image}}
<img class="pill-image" src="{{img_src}}" /> <img class="pill-image" src="{{img_src}}" />
<div class="pill-image-border"></div>
{{#if deactivated}} {{#if deactivated}}
<span class="fa fa-ban slashed-circle-icon"></span> <span class="fa fa-ban slashed-circle-icon"></span>
{{/if}} {{/if}}

1
web/templates/search_user_pill.hbs
View File

@@ -6,6 +6,7 @@
{{#each users}} {{#each users}}
<div class="pill{{#if deactivated}} deactivated-pill{{/if}}" data-user-id="{{this.user_id}}"> <div class="pill{{#if deactivated}} deactivated-pill{{/if}}" data-user-id="{{this.user_id}}">
<img class="pill-image" src="{{this.img_src}}" /> <img class="pill-image" src="{{this.img_src}}" />
<div class="pill-image-border"></div>
{{#if deactivated}} {{#if deactivated}}
<span class="fa fa-ban slashed-circle-icon"></span> <span class="fa fa-ban slashed-circle-icon"></span>
{{/if}} {{/if}}

6
web/tests/search.test.cjs
View File

@@ -209,13 +209,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
let expected_value = `<div class="search_list_item">\n <span>Search for zo</span>\n</div>\n`; let expected_value = `<div class="search_list_item">\n <span>Search for zo</span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[0]), expected_value); assert.equal(opts.highlighter_html(source[0]), expected_value);
expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[1]), expected_value); assert.equal(opts.highlighter_html(source[1]), expected_value);
expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[2]), expected_value); assert.equal(opts.highlighter_html(source[2]), expected_value);
expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`; expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">\n &lt;strong&gt;Zo&lt;/strong&gt;e\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter_html(source[3]), expected_value); assert.equal(opts.highlighter_html(source[3]), expected_value);
/* Test sorter */ /* Test sorter */