paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

navbar: Add Ionic search icon and use for navbar search.

Browse Source 
This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.
This commit is contained in:
YashRE42
2022-05-30 06:10:21 +05:30
committed by Tim Abbott
parent e029fe6249
commit e3ad9c10bb
6 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/THIRDPARTY
View File

@@ -114,6 +114,10 @@ Source: https://github.com/ionic-team/ionicons/blob/v5.5.2/src/svg/earth.svg, mo
Copyright: 2015-present Ionic (http://ionic.io/) Copyright: 2015-present Ionic (http://ionic.io/)
License: Expat License: Expat
Files: web/images/icons/search.svg
Copyright: 2015-present Ionic (http://ionic.io/)
License: Expat
Files: tools/check-thirdparty Files: tools/check-thirdparty
Copyright: 2020 Kandra Labs, Inc. Copyright: 2020 Kandra Labs, Inc.
License: GPL-2.0+ License: GPL-2.0+

1
web/images/icons/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Search</title><path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

4
web/styles/search.css
View File

@@ -37,7 +37,7 @@
width: max-content; width: max-content;
min-width: 100%; min-width: 100%;
.fa-search { .zulip-icon-search {
padding: 0; padding: 0;
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
@@ -50,7 +50,7 @@
} }
} }
.fa-search:not(.deactivated) { .zulip-icon-search:not(.deactivated) {
cursor: pointer; cursor: pointer;
} }
} }

10
web/styles/zulip.css
View File

@@ -2652,7 +2652,7 @@ select.invite-as {
width: calc(100% - 84px); width: calc(100% - 84px);
} }
.search_closed .fa-search { .search_closed .zulip-icon-search {
right: 115px; right: 115px;
} }
} }
@@ -2725,7 +2725,7 @@ select.invite-as {
width: calc(100% - 108px); width: calc(100% - 108px);
} }
.search_closed .fa-search { .search_closed .zulip-icon-search {
right: 115px; right: 115px;
} }
} }
@@ -2750,8 +2750,10 @@ select.invite-as {
} }
} }
.search_closed .fa-search { /* Usually the styling is applied directly to the icon, but here
top: 5px; the icon is `position: static`, so we can't. */
.search_closed {
top: 4px;
} }
#streamlist-toggle, #streamlist-toggle,

2
web/templates/message_view_header.hbs
View File

@@ -18,4 +18,4 @@
{{> navbar_icon_and_title }} {{> navbar_icon_and_title }}
</span> </span>
{{/if}} {{/if}}
<span class="search_icon search_closed" role="button"><i class="fa fa-search" aria-hidden="true"></i></span> <span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search" aria-hidden="true"></i></span>

4
web/templates/navbar.hbs
View File

@@ -19,7 +19,7 @@
<div id="searchbox"> <div id="searchbox">
<form id="searchbox_form" class="navbar-search"> <form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="pill-container input-append"> <div id="search_arrows" class="pill-container input-append">
<span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span> <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
<div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}" <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"> autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
</div> </div>
@@ -33,7 +33,7 @@
<div id="searchbox_legacy"> <div id="searchbox_legacy">
<form id="searchbox_form" class="navbar-search"> <form id="searchbox_form" class="navbar-search">
<div id="search_arrows" class="input-append"> <div id="search_arrows" class="input-append">
<span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span> <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
<input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}" <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/> autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
<button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button> <button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>