Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

inbox: Add icon in search box to clear any text.

This commit is contained in:
Aman Agrawal 2023-10-05 13:22:07 +00:00 committed by Tim Abbott
parent b494424ffa
commit c2c1f1ac6d
5 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/images/icons/close-small.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 B

6
web/src/inbox_ui.js
View File

@ -1046,4 +1046,10 @@ export function initialize() {
unread_ops.mark_stream_as_read(stream_id);
}
});
$("body").on("click", "#inbox-clear-search", () => {
$("#inbox-search").val("");
search_and_update();
focus_inbox_search();
});
}

47
web/styles/inbox.css
View File

@ -61,9 +61,49 @@
position: absolute;
top: 23px;
left: 6px;
color: var(--color-icon-inbox-search);
color: var(--color-icons-inbox);
opacity: 0.4;
}
#inbox-clear-search {
border: 1px solid transparent;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2px;
cursor: pointer;
font-size: 16px;
color: var(--color-icons-inbox);
opacity: 0.4;
transition: all 140ms;
padding: 5px;
margin: 0;
/* = -Width of the button. */
margin-right: -28px;
position: relative;
top: 0;
right: 30px;
&:focus {
outline: none;
}
&:hover,
&:focus-visible {
opacity: 1;
background-color: var(--color-background-icon-close-hover);
}
&:active {
opacity: 1;
transform: scale(0.9);
}
}
}
#inbox-search:placeholder-shown + #inbox-clear-search {
display: none;
}
#inbox-search {
@ -72,7 +112,7 @@
overflow: hidden;
width: var(--width-inbox-search);
height: var(--height-inbox-search);
padding-right: 20px;
padding-right: 28px;
padding-left: 30px;
font-size: 14px;
font-style: normal;
@ -83,7 +123,8 @@
color: var(--color-inbox-search-text);
border: 1px solid var(--color-border-inbox-search);
&:not(:placeholder-shown), &:hover {
&:not(:placeholder-shown),
&:hover {
background-color: var(--color-background-inbox-search-hover);
border: 1px solid var(--color-border-inbox-search-hover);
}

4
web/styles/zulip.css
View File

@ -255,6 +255,8 @@ body {
--color-background-btn-inbox-selected: hsl(0deg 0% 0% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 80%);
--color-border-inbox: hsl(0deg 0% 84.31%);
--color-icons-inbox: hsl(0deg 0% 0%);
--color-background-icon-close-hover: hsl(0deg 0% 0% / 5%);
}
%dark-theme {
@ -348,6 +350,8 @@ body {
--color-background-btn-inbox-selected: hsl(0deg 0% 100% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 20%);
--color-border-inbox: hsl(0deg 0% 0% / 60%);
--color-icons-inbox: hsl(0deg 0% 100%);
--color-background-icon-close-hover: hsl(0deg 0% 100% / 5%);
}
@media screen {

3
web/templates/inbox_view/inbox_view.hbs
View File

@ -1,6 +1,9 @@
<div id="inbox-main" class="no-select">
<div class="search_group" id="inbox-filters" role="group">
<input type="text" id="{{INBOX_SEARCH_ID}}" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
<button id="inbox-clear-search">
<i class="zulip-icon zulip-icon-close-small"></i>
</button>
<i class="zulip-icon zulip-icon-search-inbox"></i>
<button data-filter="include_muted" id="{{MUTED_FILTER_ID}}" type="button" class="btn btn-default btn-inbox-filter {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false" tabindex="0">
<i id="inbox_filter_mute_toggle" class="fa fa-square-o"></i>