urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-18 15:55:00 +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

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

@ -41,36 +41,33 @@ 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'}
{vat?.arak.rail?.paused && ( {loading && 'Installing'}
<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" /> {hung && 'Errored'}
)} </span>
<TileMenu </>
desk={desk} )}
active={active} </div>
menuColor={active ? menuColor : suspendMenuColor} {vat?.arak.rail?.paused && (
lightText={lightText} <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" />
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"
/>
</>
)} )}
<TileMenu
desk={desk}
active={active}
menuColor={active ? menuColor : suspendMenuColor}
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"
/>
<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="" />