mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Moved short URL status to the last column in the table

Browse source
This commit is contained in:
Alejandro Celaya 2022-12-19 19:40:04 +01:00
parent d1a1b7426e
commit f8bcaed3ad
3 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/short-urls/ShortUrlsTable.tsx
View file

@ -65,7 +65,6 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
<th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}> <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
Created at {renderOrderIcon?.('dateCreated')} Created at {renderOrderIcon?.('dateCreated')}
</th> </th>
<th className="short-urls-table__header-cell" />
<th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}> <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
Short URL {renderOrderIcon?.('shortCode')} Short URL {renderOrderIcon?.('shortCode')}
</th> </th>
@ -82,7 +81,7 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
<th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}> <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
<span className="indivisible">Visits {renderOrderIcon?.('visits')}</span> <span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
</th> </th>
<th className="short-urls-table__header-cell">&nbsp;</th> <th className="short-urls-table__header-cell" colSpan={2} />
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

7
src/short-urls/helpers/ShortUrlStatus.tsx
View file

@ -15,7 +15,7 @@ interface ShortUrlStatusProps {
interface StatusResult { interface StatusResult {
icon: IconDefinition; icon: IconDefinition;
className: string; className: string;
description?: ReactNode; description: ReactNode;
} }
const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => { const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
@ -65,6 +65,7 @@ const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
return { return {
icon: faCheck, icon: faCheck,
className: 'text-primary', className: 'text-primary',
description: 'This short URL can be visited normally.',
}; };
}; };
@ -81,11 +82,9 @@ export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
> >
<FontAwesomeIcon icon={icon} /> <FontAwesomeIcon icon={icon} />
</span> </span>
{description && ( <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
<UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="right">
{description} {description}
</UncontrolledTooltip> </UncontrolledTooltip>
)}
</> </>
); );
}; };

6
src/short-urls/helpers/ShortUrlsRow.tsx
View file

@ -37,9 +37,6 @@ export const ShortUrlsRow = (
<td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at"> <td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
<Time date={shortUrl.dateCreated} /> <Time date={shortUrl.dateCreated} />
</td> </td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Status">
<ShortUrlStatus shortUrl={shortUrl} />
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL"> <td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
<span className="position-relative short-urls-row__cell--indivisible"> <span className="position-relative short-urls-row__cell--indivisible">
<span className="short-urls-row__short-url-wrapper"> <span className="short-urls-row__short-url-wrapper">
@ -73,6 +70,9 @@ export const ShortUrlsRow = (
active={active} active={active}
/> />
</td> </td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Status">
<ShortUrlStatus shortUrl={shortUrl} />
</td>
<td className="responsive-table__cell short-urls-row__cell"> <td className="responsive-table__cell short-urls-row__cell">
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} /> <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
</td> </td>