urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 00:13:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

tile: moving status to predictable area

Browse Source
This commit is contained in:
Hunter Miller 2021-09-27 19:08:08 -05:00
parent 9f45dce312
commit 2358bb5408
1 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
pkg/grid/src/tiles/Tile.tsx
View File

@ -41,12 +41,18 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
onAuxClick={() => addRecentApp(desk)} onAuxClick={() => addRecentApp(desk)}
> >
<div> <div>
{loading ? ( <div className="absolute z-10 top-4 left-4 sm:top-8 sm:left-8 flex items-center">
<div className="absolute z-10 top-4 left-4 sm:top-8 sm:left-8 flex items-center justify-center"> {!active && (
<Spinner className="h-6 w-6" />
</div>
) : (
<> <>
{loading && <Spinner className="h-6 w-6 mr-4" />}
<span className="text-gray-500">
{suspended && 'Suspended'}
{loading && 'Installing'}
{hung && 'Errored'}
</span>
</>
)}
</div>
{vat?.arak.rail?.paused && ( {vat?.arak.rail?.paused && (
<Bullet className="absolute z-10 top-5 left-5 sm:top-6 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" /> <Bullet className="absolute z-10 top-5 left-5 sm:top-6 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" />
)} )}
@ -57,20 +63,11 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
lightText={lightText} lightText={lightText}
className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 pointer-coarse:opacity-100 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100" className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 pointer-coarse:opacity-100 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100"
/> />
</>
)}
<div <div
className="h4 absolute z-10 bottom-[8%] left-[5%] sm:bottom-7 sm:left-5 py-1 px-3 rounded-lg" className="h4 absolute z-10 bottom-[8%] left-[5%] sm:bottom-7 sm:left-5 py-1 px-3 rounded-lg"
style={{ backgroundColor }} style={{ backgroundColor }}
> >
<h3 className="mix-blend-hard-light">{title}</h3> <h3 className="mix-blend-hard-light">{title}</h3>
{!active && (
<span className={hung ? 'text-orange-500' : 'text-gray-400'}>
{suspended && 'Suspended'}
{loading && 'Installing'}
{hung && 'Errored'}
</span>
)}
</div> </div>
{image && !loading && ( {image && !loading && (
<img className="absolute top-0 left-0 h-full w-full object-contain" src={image} alt="" /> <img className="absolute top-0 left-0 h-full w-full object-contain" src={image} alt="" />