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

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

@ -129,6 +129,7 @@ export default function InputBox ({
} }
return ( return (
<section className='inputControls'>
<input {...inputHandlers[inputType]} <input {...inputHandlers[inputType]}
className='inputBox' className='inputBox'
ref={inputEl} ref={inputEl}
@ -138,5 +139,13 @@ export default function InputBox ({
onDblClick={onFullscreenRequest} onDblClick={onFullscreenRequest}
onInput={({ target: { value } }) => setInputText(value)} onInput={({ target: { value } }) => setInputText(value)}
type='text' /> 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 {