quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-17 05:58:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

use svg icons for search box

Browse source
This commit is contained in:
Labhansh Agrawal 2021-02-21 20:01:19 +05:30 committed by Benjamin Staneck
parent 4e5bc85591
commit 6749bdb7b0
2 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
assets/search-icons.svg Normal file
View file

@ -0,0 +1,29 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="left-arrow" viewBox="0 0 10 10">
<title>left arrow</title>
<g stroke-linecap="round">
<line x1="0.5" y1="5" x2="8.5" y2="5" stroke="#000" />
<line x1="0.5" y1="5" x2="3.5" y2="2" stroke="#000" />
<line x1="0.5" y1="5" x2="3.5" y2="8" stroke="#000" />
</g>
</symbol>
<symbol id="right-arrow" viewBox="0 0 10 10">
<title>right arrow</title>
<g stroke-linecap="round">
<line x1="1.5" y1="5" x2="9.5" y2="5" stroke="#000" />
<line x1="9.5" y1="5" x2="6.5" y2="2" stroke="#000" />
<line x1="9.5" y1="5" x2="6.5" y2="8" stroke="#000" />
</g>
</symbol>
<symbol id="cancel" viewBox="0 0 10 10">
<title>cancel</title>
<g stroke-linecap="round">
<line x1="5" y1="5" x2="8" y2="8" stroke="#000" />
<line x1="5" y1="5" x2="8" y2="2" stroke="#000" />
<line x1="5" y1="5" x2="2" y2="2" stroke="#000" />
<line x1="5" y1="5" x2="2" y2="8" stroke="#000" />
</g>
</symbol>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

22
lib/components/searchBox.tsx
View file

@ -32,15 +32,15 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
return ( return (
<div style={searchBoxStyling}> <div style={searchBoxStyling}>
<input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} /> <input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} />
<span className="search-button" onClick={() => this.props.prev(this.searchTerm)}> <svg className="search-button" onClick={() => this.props.prev(this.searchTerm)}>
{'←'} <use xlinkHref="./renderer/assets/search-icons.svg#left-arrow" />
</span> </svg>
<span className="search-button" onClick={() => this.props.next(this.searchTerm)}> <svg className="search-button" onClick={() => this.props.next(this.searchTerm)}>
{'→'} <use xlinkHref="./renderer/assets/search-icons.svg#right-arrow" />
</span> </svg>
<span className="search-button" onClick={() => this.props.close()}> <svg className="search-button" onClick={() => this.props.close()}>
{'✕'} <use xlinkHref="./renderer/assets/search-icons.svg#cancel" />
</span> </svg>
<style jsx> <style jsx>
{` {`
.search-box { .search-box {
@ -48,6 +48,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
padding: 3px 6px; padding: 3px 6px;
width: 152px; width: 152px;
border: none; border: none;
float: left;
} }
.search-box:focus { .search-box:focus {
@ -57,7 +58,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
.search-button { .search-button {
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
padding: 3px; padding: 7px 5.5px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -66,6 +67,7 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
cursor: pointer; cursor: pointer;
height: 27px; height: 27px;
width: 24px; width: 24px;
float: left;
} }
.search-button:hover { .search-button:hover {
background-color: #e7e7e7; background-color: #e7e7e7;