Merge pull request #353 from acelaya-forks/feature/more-ui-improvements

Feature/more UI improvements
This commit is contained in:
Alejandro Celaya 2020-12-15 19:04:04 +01:00 committed by GitHub
commit 623deec973
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 52 additions and 42 deletions

View file

@ -39,6 +39,8 @@ jobs:
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
fetch-depth: 0 # needed so that the main branch is also fetched
- name: Use node.js 14.15
uses: actions/setup-node@v1
with:

View file

@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* Charts are now grouped in tabs, so that only one part of the components is rendered at a time.
* Amount of highlighted visits is now displayed.
* Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers.
* Only the visits for last 30 days are loaded by default. You can change that at any moment if required.
### Changed
* [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.

View file

@ -1,9 +1,8 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align';
$asideMenuMobileWidth: 280px;
.aside-menu {
width: $asideMenuWidth;
background-color: white;
box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
position: fixed !important;
@ -23,7 +22,6 @@ $asideMenuMobileWidth: 280px;
}
@media (max-width: $smMax) {
width: $asideMenuMobileWidth !important;
transition: left 300ms;
top: $headerHeight - 3px;
box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
@ -32,7 +30,7 @@ $asideMenuMobileWidth: 280px;
.aside-menu--hidden {
@media (max-width: $smMax) {
left: -($asideMenuMobileWidth + 35px);
left: -($asideMenuWidth + 35px);
}
}
@ -45,6 +43,10 @@ $asideMenuMobileWidth: 280px;
margin: 0 -15px;
text-decoration: none !important;
cursor: pointer;
@media (max-width: $smMax) {
margin: 0;
}
}
.aside-menu__item:hover {

View file

@ -22,7 +22,6 @@ export interface AsideMenuProps {
interface AsideMenuItemProps extends NavLinkProps {
to: string;
className?: string;
}
const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
@ -37,10 +36,10 @@ const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...res
);
const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
{ selectedServer, className, showOnMobile = false }: AsideMenuProps,
{ selectedServer, showOnMobile = false }: AsideMenuProps,
) => {
const serverId = selectedServer ? selectedServer.id : '';
const asideClass = classNames('aside-menu', className, {
const asideClass = classNames('aside-menu', {
'aside-menu--hidden': !showOnMobile,
});
const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;

View file

@ -33,11 +33,11 @@
color: white;
}
.menu-layout__container {
.menu-layout__container.menu-layout__container {
padding: 20px 0 0;
min-height: 100%;
@media (min-width: $mdMin) {
padding: 30px 15px 0;
padding: 30px 0 0 $asideMenuWidth;
}
}

View file

@ -56,10 +56,10 @@ const MenuLayout = (
<FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
<div {...swipeableProps} className="menu-layout__swipeable">
<div className="row menu-layout__swipeable-inner">
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
<div className="menu-layout__container container-xl">
<div className="menu-layout__swipeable-inner">
<AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
<div className="menu-layout__container" onClick={() => hideSidebar()}>
<div className="container-xl">
<Switch>
<Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
<Route exact path="/server/:serverId/overview" component={Overview} />

View file

@ -0,0 +1,9 @@
@import '../utils/base';
.shlink-versions-container--with-server {
margin-left: 0;
@media (min-width: $mdMin) {
margin-left: $asideMenuWidth;
}
}

View file

@ -1,23 +1,20 @@
import classNames from 'classnames';
import { isReachableServer, SelectedServer } from '../servers/data';
import ShlinkVersions from './ShlinkVersions';
import './ShlinkVersionsContainer.scss';
export interface ShlinkVersionsContainerProps {
selectedServer: SelectedServer;
}
const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
const serverIsReachable = isReachableServer(selectedServer);
const colClasses = classNames('text-center', {
'col-12': !serverIsReachable,
'col-lg-10 offset-lg-2 col-md-9 offset-md-3': serverIsReachable,
const classes = classNames('text-center', {
'shlink-versions-container--with-server': isReachableServer(selectedServer),
});
return (
<div className="row">
<div className={colClasses}>
<ShlinkVersions selectedServer={selectedServer} />
</div>
<div className={classes}>
<ShlinkVersions selectedServer={selectedServer} />
</div>
);
};

View file

@ -50,7 +50,7 @@ export const Overview = (
return (
<>
<div className="row mb-3">
<div className="col-sm-4">
<div className="col-md-6 col-lg-4">
<Card className="overview__card mb-2" body>
<CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
<CardText tag="h2">
@ -63,7 +63,7 @@ export const Overview = (
</CardText>
</Card>
</div>
<div className="col-sm-4">
<div className="col-md-6 col-lg-4">
<Card className="overview__card mb-2" body>
<CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
<CardText tag="h2">
@ -71,7 +71,7 @@ export const Overview = (
</CardText>
</Card>
</div>
<div className="col-sm-4">
<div className="col-md-12 col-lg-4">
<Card className="overview__card mb-2" body>
<CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
<CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>

View file

@ -17,6 +17,7 @@ $mediumGrey: #dee2e6;
// Misc
$headerHeight: 57px;
$asideMenuWidth: 260px;
$footer-height: 2.3rem;
$footer-margin: .8rem;

View file

@ -4,11 +4,11 @@ import { Button, Card, Nav, NavLink, Progress } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons';
import { IconDefinition } from '@fortawesome/fontawesome-common-types';
import moment from 'moment';
import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
import Message from '../utils/Message';
import { formatDate } from '../utils/helpers/date';
import { formatIsoDate } from '../utils/helpers/date';
import { ShlinkVisitsParams } from '../utils/services/types';
import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types';
import SortableBarGraph from './helpers/SortableBarGraph';
import GraphCard from './helpers/GraphCard';
import LineChartCard from './helpers/LineChartCard';
@ -46,12 +46,11 @@ const highlightedVisitsToStats = (
return acc;
}, {});
const format = formatDate();
let selectedBar: string | undefined;
const initialInterval: DateInterval = 'last30Days';
const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, cancelGetVisits }) => {
const [ startDate, setStartDate ] = useState<moment.Moment | null>(null);
const [ endDate, setEndDate ] = useState<moment.Moment | null>(null);
const [ dateRange, setDateRange ] = useState<DateRange>(intervalToDateRange(initialInterval));
const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
const [ highlightedLabel, setHighlightedLabel ] = useState<string | undefined>();
const [ activeSection, setActiveSection ] = useState<Section>('byTime');
@ -83,10 +82,12 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
}
};
useEffect(() => () => cancelGetVisits(), []);
useEffect(() => cancelGetVisits, []);
useEffect(() => {
getVisits({ startDate: format(startDate) ?? undefined, endDate: format(endDate) ?? undefined });
}, [ startDate, endDate ]);
const { startDate, endDate } = dateRange;
getVisits({ startDate: formatIsoDate(startDate) ?? undefined, endDate: formatIsoDate(endDate) ?? undefined });
}, [ dateRange ]);
const renderVisitsContent = () => {
if (loadingLarge) {
@ -227,11 +228,9 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
<div className="col-lg-7 col-xl-6">
<DateRangeSelector
disabled={loading}
initialDateRange={initialInterval}
defaultText="All visits"
onDatesChange={({ startDate: newStartDate, endDate: newEndDate }) => {
setStartDate(newStartDate ?? null);
setEndDate(newEndDate ?? null);
}}
onDatesChange={setDateRange}
/>
</div>
{visits.length > 0 && (

View file

@ -15,13 +15,13 @@ describe('<ShlinkVersionsContainer />', () => {
afterEach(() => wrapper?.unmount());
test.each([
[ null, 'col-12' ],
[ Mock.of<NotFoundServer>({ serverNotFound: true }), 'col-12' ],
[ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'col-12' ],
[ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'col-lg-10 offset-lg-2 col-md-9 offset-md-3' ],
[ null, 'text-center' ],
[ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ],
[ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ],
[ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'text-center shlink-versions-container--with-server' ],
])('renders proper col classes based on type of selected server', (selectedServer, expectedClasses) => {
const wrapper = createWrapper(selectedServer);
expect(wrapper.find('div').at(1).prop('className')).toEqual(`text-center ${expectedClasses}`);
expect(wrapper.find('div').prop('className')).toEqual(`${expectedClasses}`);
});
});

View file

@ -1,9 +1,9 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem } from 'reactstrap';
import moment from 'moment';
import { Mock } from 'ts-mockery';
import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
import { DateInterval } from '../../../src/utils/dates/types';
import { Mock } from 'ts-mockery';
describe('<DateRangeSelector />', () => {
let wrapper: ShallowWrapper;