nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(design) Control Key Icon

Browse source
This commit is contained in:
Shipow 2020-06-05 10:05:55 +02:00
parent 6ce9fa91be
commit 63a4b4a555
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/DocSearchButton.tsx
View file

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { SearchIcon } from './icons/SearchIcon';
import { ControlKeyIcon } from './icons/ControlKeyIcon';
const ACTION_KEY_DEFAULT = 'Ctrl';
const ACTION_KEY_APPLE = '⌘';
@ -9,7 +10,6 @@ function isAppleDevice() {
if (typeof navigator === 'undefined') {
return ACTION_KEY_DEFAULT;
}
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
}
@ -33,7 +33,11 @@ export function DocSearchButton(
<button type="button" className="DocSearch-SearchButton" {...props}>
<SearchIcon />
<span className="DocSearch-SearchButton-Placeholder">Search</span>
<span className="DocSearch-SearchButton-Key">{key}</span>
<span className="DocSearch-SearchButton-Key">
{key === 'Ctrl' && <ControlKeyIcon />}
{key !== 'Ctrl' && key}
</span>
<span className="DocSearch-SearchButton-Key">K</span>
</button>
);

15
src/icons/ControlKeyIcon.tsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
export function ControlKeyIcon() {
return (
<svg width="15" height="15" className="DocSearch-Control-Key-Icon">
<path
d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
strokeWidth="1.2"
stroke="currentColor"
fill="none"
strokeLinecap="square"
/>
</svg>
);
}