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

Fixed block and inline dropdown buttons

Browse source
This commit is contained in:
Alejandro Celaya 2023-05-27 09:40:49 +02:00
parent 3da2b56426
commit afc574aceb
5 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/short-urls/helpers/ShortUrlsFilterDropdown.tsx
View file

@ -17,7 +17,7 @@ export const ShortUrlsFilterDropdown = (
const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
return (
<DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
<DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
<DropdownItem header>Visits:</DropdownItem>
<DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>

6
src/utils/DropdownBtn.scss
View file

@ -2,13 +2,17 @@
@import '../utils/mixins/vertical-align';
.dropdown-btn__toggle.dropdown-btn__toggle {
text-align: left;
padding-right: 1.75rem;
}
.dropdown-btn__toggle.dropdown-btn__toggle,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
text-align: left;
color: var(--input-text-color);
background-color: var(--primary-color);
border-color: var(--input-border-color);

6
src/utils/DropdownBtn.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import type { FC, PropsWithChildren } from 'react';
import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
import { useToggle } from './helpers/hooks';
@ -9,14 +10,15 @@ export type DropdownBtnProps = PropsWithChildren<{
className?: string;
dropdownClassName?: string;
right?: boolean;
inline?: boolean;
minWidth?: number;
}>;
export const DropdownBtn: FC<DropdownBtnProps> = (
{ text, disabled = false, className = '', children, dropdownClassName, right = false, minWidth },
{ text, disabled = false, className, children, dropdownClassName, right = false, minWidth, inline },
) => {
const [isOpen, toggle] = useToggle();
const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
const toggleClasses = classNames('dropdown-btn__toggle', className, { 'btn-block': !inline });
const style = { minWidth: minWidth && `${minWidth}px` };
return (

4
src/utils/ExportBtn.tsx
View file

@ -5,10 +5,10 @@ import type { ButtonProps } from 'reactstrap';
import { Button } from 'reactstrap';
import { prettify } from './helpers/numbers';
interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabled'> {
type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
amount?: number;
loading?: boolean;
}
};
export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
<Button {...rest} outline color="primary" disabled={loading}>

2
src/visits/helpers/VisitsFilterDropdown.tsx
View file

@ -22,7 +22,7 @@ export const VisitsFilterDropdown = (
const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
return (
<DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
<DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
<DropdownItem header>Bots:</DropdownItem>
<DropdownItem active={excludeBots} onClick={onBotsClick}>Exclude potential bots</DropdownItem>