[Work in progress] A Reactjs-based web app to help with ricing: designing beautiful unix desktop environments.
git clone https://mcol.xyz/code/unix.sexy
Log | Files | Refs

commit 0a3463f6ed05106f2b76d9b6a36251c2462a1830
parent bb5953d657f00c7fd300f87ea91b3dddaa7486f2
Author: mcol <mcol@posteo.net>
Date:   Wed,  1 Jul 2020 21:26:06 +0100

style file input button for uploading wallpaper

Diffstat:
Msrc/features/background/index.css | 38+++++++++++++++++++++++++++++++++++++-
Msrc/features/background/panel.js | 33++++++++++++++++++---------------
2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/features/background/index.css b/src/features/background/index.css @@ -3,6 +3,42 @@ background-position: center center; width: 100%; height: 100%; - position:absolute; + position: absolute; } +.file-input { /* parent */ + position: relative; + box-sizing: border-box; + float: left; + width: 80px; + height: 26px; + max-height: 26px; + padding: 2px; + border-radius: 4px; + border: 2px solid rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); + margin-right: 10px; +} + +.file-input-text { /* child that is displayed */ + color: inherit; + text-align: center; + padding: 0; + border: 0; + width: 100%; +} + +.file-input input, /* children with identical shape/size */ +.file-input-text { + height: 100%; + top: 0; + left: 0; + cursor: pointer; + font-size: 1em; +} + +.file-input input { /* clickable child */ + position: absolute; + z-index: 1000; + opacity: 0; +} diff --git a/src/features/background/panel.js b/src/features/background/panel.js @@ -26,21 +26,24 @@ export function BackgroundCtl() { </div> <div> - <input - type="file" - accept="image/*" - multiple="false" - style={{width:"112px", marginLeft:"0"}} - onChange={e => { - if (e.target.files[0]) { - let reader = new FileReader(); - reader.onload = (e) => { - dispatch(setWallpaper(e.target.result)); - }; - reader.readAsDataURL(e.target.files[0]); - } - }} - /> + <div className="file-input"> + <div className="file-input-text">From file</div> + <input + type="file" + accept="image/*" + multiple="false" + style={{marginLeft: 0, padding: 0, border: 0, width: "100%"}} + onChange={e => { + if (e.target.files[0]) { + let reader = new FileReader(); + reader.onload = (e) => { + dispatch(setWallpaper(e.target.result)); + }; + reader.readAsDataURL(e.target.files[0]); + } + }} + /> + </div> <Button text="Remove" callback={removeWallpaper} /> </div>