mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-12-23 18:50:08 +00:00
Migrate ManageServersRowDropdown to tailwind
This commit is contained in:
Alejandro Celaya
parent
c2c1037c01
commit
76b7523d4a
14
package-lock.json
generated
14
package-lock.json
generated
@ -16,7 +16,7 @@
|
||||
"@json2csv/plainjs": "^7.0.6",
|
||||
"@reduxjs/toolkit": "^2.8.2",
|
||||
"@shlinkio/data-manipulation": "^1.0.3",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.9.8",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.9.10",
|
||||
"@shlinkio/shlink-js-sdk": "^2.1.0",
|
||||
"@shlinkio/shlink-web-component": "^0.14.1",
|
||||
"bootstrap": "5.2.3",
|
||||
@ -3509,9 +3509,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@shlinkio/shlink-frontend-kit": {
|
||||
"version": "0.9.8",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.8.tgz",
|
||||
"integrity": "sha512-DA2IYNZqvXusaTgC9jsnmgkXDEGwfh8oiChz8BSSsPvLoj+Tsre2V46pFvvS4jAPL4d6EvQ2bJnRrvYdVSq3Vw==",
|
||||
"version": "0.9.10",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.10.tgz",
|
||||
"integrity": "sha512-L1+z3imvoSXHYWaO+H39JXGg40eQW1ytY3hMIE8JUuqJYNmWWLrafmfj1MHenCWGZEhymbQnpGD1yyziy6a9Lw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.27.12",
|
||||
@ -14040,9 +14040,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@shlinkio/shlink-frontend-kit": {
|
||||
"version": "0.9.8",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.8.tgz",
|
||||
"integrity": "sha512-DA2IYNZqvXusaTgC9jsnmgkXDEGwfh8oiChz8BSSsPvLoj+Tsre2V46pFvvS4jAPL4d6EvQ2bJnRrvYdVSq3Vw==",
|
||||
"version": "0.9.10",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.10.tgz",
|
||||
"integrity": "sha512-L1+z3imvoSXHYWaO+H39JXGg40eQW1ytY3hMIE8JUuqJYNmWWLrafmfj1MHenCWGZEhymbQnpGD1yyziy6a9Lw==",
|
||||
"requires": {
|
||||
"@floating-ui/react": "^0.27.12",
|
||||
"clsx": "^2.1.1"
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"@json2csv/plainjs": "^7.0.6",
|
||||
"@reduxjs/toolkit": "^2.8.2",
|
||||
"@shlinkio/data-manipulation": "^1.0.3",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.9.8",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.9.10",
|
||||
"@shlinkio/shlink-js-sdk": "^2.1.0",
|
||||
"@shlinkio/shlink-web-component": "^0.14.1",
|
||||
"bootstrap": "5.2.3",
|
||||
|
||||
@ -6,10 +6,9 @@ import {
|
||||
faPlug as connectIcon,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
|
||||
import { useToggle } from '@shlinkio/shlink-frontend-kit';
|
||||
import { RowDropdown } from '@shlinkio/shlink-frontend-kit/tailwind';
|
||||
import type { FC } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { DropdownItem } from 'reactstrap';
|
||||
import type { FCWithDeps } from '../container/utils';
|
||||
import { componentFactory, useDependencies } from '../container/utils';
|
||||
import type { ServerWithId } from './data';
|
||||
@ -38,21 +37,21 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
|
||||
|
||||
return (
|
||||
<>
|
||||
<RowDropdownBtn minWidth={isAutoConnect ? 210 : 170}>
|
||||
<DropdownItem tag={Link} to={serverUrl}>
|
||||
<RowDropdown menuAlignment="right">
|
||||
<RowDropdown.Item to={serverUrl} className="tw:gap-1.5">
|
||||
<FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
|
||||
</DropdownItem>
|
||||
<DropdownItem tag={Link} to={`${serverUrl}/edit`}>
|
||||
</RowDropdown.Item>
|
||||
<RowDropdown.Item to={`${serverUrl}/edit`} className="tw:gap-1.5">
|
||||
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
|
||||
</RowDropdown.Item>
|
||||
<RowDropdown.Item onClick={() => setAutoConnect(server, !isAutoConnect)} className="tw:gap-1.5">
|
||||
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
|
||||
</DropdownItem>
|
||||
<DropdownItem divider tag="hr" />
|
||||
<DropdownItem className="tw:text-danger" onClick={showModal}>
|
||||
</RowDropdown.Item>
|
||||
<RowDropdown.Separator />
|
||||
<RowDropdown.Item className="tw:[&]:text-danger tw:gap-1.5" onClick={showModal}>
|
||||
<FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
|
||||
</DropdownItem>
|
||||
</RowDropdownBtn>
|
||||
</RowDropdown.Item>
|
||||
</RowDropdown>
|
||||
|
||||
<DeleteServerModal server={server} open={isModalOpen} onClose={hideModal} />
|
||||
</>
|
||||
|
||||
@ -3,18 +3,19 @@
|
||||
exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="dropdown"
|
||||
class="tw:relative tw:inline-block"
|
||||
>
|
||||
<button
|
||||
aria-controls="«r9»"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Options"
|
||||
class="dropdown-btn__toggle btn btn-primary btn-sm"
|
||||
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:cursor-pointer tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input tw:px-3 tw:py-1.5 tw:gap-x-2"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-ellipsis-vertical px-1"
|
||||
class="svg-inline--fa fa-ellipsis-vertical "
|
||||
data-icon="ellipsis-vertical"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
@ -28,14 +29,6 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="w-100 dropdown-menu dropdown-menu-end"
|
||||
data-bs-popper="static"
|
||||
role="menu"
|
||||
style="min-width: 210px;"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
DeleteServerModal
|
||||
@ -47,18 +40,19 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
|
||||
exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="dropdown"
|
||||
class="tw:relative tw:inline-block"
|
||||
>
|
||||
<button
|
||||
aria-controls="«rb»"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Options"
|
||||
class="dropdown-btn__toggle btn btn-primary btn-sm"
|
||||
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:cursor-pointer tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input tw:px-3 tw:py-1.5 tw:gap-x-2"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-ellipsis-vertical px-1"
|
||||
class="svg-inline--fa fa-ellipsis-vertical "
|
||||
data-icon="ellipsis-vertical"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
@ -72,14 +66,6 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="w-100 dropdown-menu dropdown-menu-end"
|
||||
data-bs-popper="static"
|
||||
role="menu"
|
||||
style="min-width: 170px;"
|
||||
tabindex="-1"
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
DeleteServerModal
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user