forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-13 02:53:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved design on domains dropdown

Browse Source
This commit is contained in:
Alejandro Celaya
2020-11-28 09:34:41 +01:00
parent 983e4db3b1
commit 369fcf2f6a
5 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/domains/DomainsDropdown.scss
View File

@@ -5,10 +5,16 @@
.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
text-align: left;
color: #6c757d;
border-color: #6c757d;
border-color: #ced4da;
background-color: white;
}
.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,
.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active {
color: #495057;
}
.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn::after {
right: .75rem;

7
src/domains/DomainsDropdown.tsx
View File

@@ -14,6 +14,7 @@ import {
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUndo } from '@fortawesome/free-solid-svg-icons';
import { isEmpty, pipe } from 'ramda';
import classNames from 'classnames';
import { useToggle } from '../utils/helpers/hooks';
import { DomainsList } from './reducers/domainsList';
import './DomainsDropdown.scss';
@@ -32,7 +33,6 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
const [ inputDisplayed,, showInput, hideInput ] = useToggle();
const [ isDropdownOpen, toggleDropdown ] = useToggle();
const { domains } = domainsList;
const defaultDomain = domains.find(({ isDefault }) => isDefault);
const valueIsEmpty = isEmpty(value);
const unselectDomain = () => onChange('');
@@ -58,8 +58,9 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
</InputGroup>
) : (
<Dropdown isOpen={isDropdownOpen} toggle={toggleDropdown}>
<DropdownToggle caret className="domains-dropdown__toggle-btn btn-block">
Domain: {valueIsEmpty ? defaultDomain?.domain : value}
<DropdownToggle caret className={classNames('domains-dropdown__toggle-btn btn-block', { 'domains-dropdown__toggle-btn--active': !valueIsEmpty })}>
{valueIsEmpty && <>Domain</>}
{!valueIsEmpty && <>Domain: {value}</>}
</DropdownToggle>
<DropdownMenu className="domains-dropdown__menu">
{domains.map(({ domain, isDefault }) => (