he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-04 17:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

InputControls: menu button scaffold

Browse source
This commit is contained in:
He4eT 2023-05-29 01:52:02 +03:00 • committed by Alexey
commit d5b176087e
2 changed files with 30 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/Player/InputBox.jsx
View file

@ -129,14 +129,23 @@ export default function InputBox ({
} }
return ( return (
<input {...inputHandlers[inputType]} <section className='inputControls'>
className='inputBox' <input {...inputHandlers[inputType]}
ref={inputEl} className='inputBox'
value={inputText} ref={inputEl}
autofocus value={inputText}
autocomplete='off' autofocus
onDblClick={onFullscreenRequest} autocomplete='off'
onInput={({ target: { value } }) => setInputText(value)} onDblClick={onFullscreenRequest}
type='text' /> onInput={({ target: { value } }) => setInputText(value)}
type='text' />
<button
aria-label='Menu'
className='menuButton'
onClick={() => setMenuOpen(true)}
>
=
</button>
</section>
) )
} }

15
src/components/Player/player.css
View file

@ -9,9 +9,18 @@
padding: var(--outer-padding); padding: var(--outer-padding);
} }
.ifplayer .inputBox { .ifplayer .inputControls {
flex: 0 1 auto; position: relative;
margin-top: var(--input-box-margin);
}
.ifplayer .inputControls .menuButton {
position: absolute;
right: 0;
height: 100%;
}
.ifplayer .inputBox {
font: inherit; font: inherit;
color: inherit; color: inherit;
outline: 0; outline: 0;
@ -21,7 +30,7 @@
border-top: var(--separator-width) solid var(--main-color); border-top: var(--separator-width) solid var(--main-color);
padding: var(--inner-padding); padding: var(--inner-padding);
margin: 0; margin: 0;
margin-top: var(--input-box-margin); width: 100%;
} }
.ifplayer .inputBox::placeholder { .ifplayer .inputBox::placeholder {