jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-18 00:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix drive selector modal padding

Browse Source 
Changelog-entry: Fix drive selector modal padding
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-05-13 13:16:39 +02:00
parent 9280113350
commit 943765bd4d
1 changed files with 94 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
lib/gui/app/components/drive-selector/DriveSelectorModal.tsx
View File

@ -141,118 +141,113 @@ export function DriveSelectorModal({ close }: { close: () => void }) {
return ( return (
<Modal <Modal
className="modal-drive-selector-modal" className="modal-drive-selector-modal"
title="Select a Drive" titleElement="Select a Drive"
done={close} done={close}
action="Continue" action="Continue"
style={{
padding: '20px 30px 11px 30px',
}}
primaryButtonProps={{ primaryButtonProps={{
primary: !hasStatus, primary: !hasStatus,
warning: hasStatus, warning: hasStatus,
}} }}
> >
<div> <ul
<ul style={{
style={{ height: '210px',
height: '250px', overflowX: 'hidden',
overflowX: 'hidden', overflowY: 'auto',
overflowY: 'auto', padding: '0px',
padding: '0', }}
}} >
> {_.map(drives, (drive, index) => {
{_.map(drives, (drive, index) => { return (
return ( <li
<li key={`item-${drive.displayName}`}
key={`item-${drive.displayName}`} className="list-group-item"
className="list-group-item" // @ts-ignore (FIXME: not a valid <li> attribute but used by css rule)
// @ts-ignore (FIXME: not a valid <li> attribute but used by css rule) disabled={!isDriveValid(drive, selectionState.getImage())}
disabled={!isDriveValid(drive, selectionState.getImage())} onDoubleClick={() => selectDriveAndClose(drive)}
onDoubleClick={() => selectDriveAndClose(drive)} onClick={() => toggleDrive(drive)}
onClick={() => toggleDrive(drive)} >
{drive.icon && (
<img
className="list-group-item-section"
alt="Drive device type logo"
src={`../assets/${drive.icon}.svg`}
width="25"
height="30"
/>
)}
<div
className="list-group-item-section list-group-item-section-expanded"
tabIndex={15 + index}
onKeyPress={(evt) => keyboardToggleDrive(drive, evt)}
> >
{drive.icon && ( <h6 className="list-group-item-heading">
<img {drive.description}
className="list-group-item-section" {drive.size && (
alt="Drive device type logo" <span className="word-keep">
src={`../assets/${drive.icon}.svg`} {' '}
width="25" - {bytesToClosestUnit(drive.size)}
height="30" </span>
/> )}
</h6>
{!drive.link && (
<p className="list-group-item-text">{drive.displayName}</p>
)} )}
<div {drive.link && (
className="list-group-item-section list-group-item-section-expanded" <p className="list-group-item-text">
tabIndex={15 + index} {drive.displayName} -{' '}
onKeyPress={(evt) => keyboardToggleDrive(drive, evt)} <b>
> <a onClick={() => installMissingDrivers(drive)}>
<h6 className="list-group-item-heading"> {drive.linkCTA}
{drive.description} </a>
{drive.size && ( </b>
<span className="word-keep"> </p>
{' '} )}
- {bytesToClosestUnit(drive.size)}
<footer className="list-group-item-footer">
{_.map(getDriveStatuses(drive), (status, idx) => {
const className = {
[COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
[COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger',
};
return (
<span
key={`${drive.displayName}-status-${idx}`}
className={`label ${className[status.type]}`}
>
{status.message}
</span> </span>
)} );
</h6> })}
{!drive.link && ( </footer>
<p className="list-group-item-text">{drive.displayName}</p> {Boolean(drive.progress) && (
)} <progress
{drive.link && ( className="drive-init-progress"
<p className="list-group-item-text"> value={drive.progress}
{drive.displayName} -{' '} max="100"
<b> ></progress>
<a onClick={() => installMissingDrivers(drive)}>
{drive.linkCTA}
</a>
</b>
</p>
)}
<footer className="list-group-item-footer">
{_.map(getDriveStatuses(drive), (status, idx) => {
const className = {
[COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
[COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger',
};
return (
<span
key={`${drive.displayName}-status-${idx}`}
className={`label ${className[status.type]}`}
>
{status.message}
</span>
);
})}
</footer>
{Boolean(drive.progress) && (
<progress
className="drive-init-progress"
value={drive.progress}
max="100"
></progress>
)}
</div>
{isDriveValid(drive, selectionState.getImage()) && (
<span
className="list-group-item-section tick tick--success"
// @ts-ignore (FIXME: not a valid <span> attribute but used by css rule)
disabled={!selectionState.isDriveSelected(drive.device)}
></span>
)} )}
</li>
);
})}
{!hasAvailableDrives() && (
<li className="list-group-item">
<div>
<b>Connect a drive!</b>
<div>No removable drive detected.</div>
</div> </div>
{isDriveValid(drive, selectionState.getImage()) && (
<span
className="list-group-item-section tick tick--success"
// @ts-ignore (FIXME: not a valid <span> attribute but used by css rule)
disabled={!selectionState.isDriveSelected(drive.device)}
></span>
)}
</li> </li>
)} );
</ul> })}
</div> {!hasAvailableDrives() && (
<li className="list-group-item">
<div>
<b>Connect a drive!</b>
<div>No removable drive detected.</div>
</div>
</li>
)}
</ul>
{missingDriversModal.drive !== undefined && ( {missingDriversModal.drive !== undefined && (
<Modal <Modal