mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-03-14 02:08:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved map modal title

Browse source
This commit is contained in:
Alejandro Celaya 2019-01-09 20:30:59 +01:00
parent 150dcd2d5d
commit b12dac1e35
3 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/visits/helpers/MapModal.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import { Modal, ModalBody } from 'reactstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import * as PropTypes from 'prop-types';
import './MapModal.scss';
@ -27,8 +27,11 @@ const OpenStreetMapTile = () => (
const MapModal = ({ toggle, isOpen, title, locations }) => (
<Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
<ModalHeader toggle={toggle}>{title}</ModalHeader>
<ModalBody className="map-modal__modal-body">
<h3 className="map-modal__modal-title">
{title}
<button type="button" className="close" onClick={toggle}>&times;</button>
</h3>
<Map center={[ 0, 0 ]} zoom="3">
<OpenStreetMapTile />
{locations.map(({ cityName, latLong, count }, index) => (

16
src/visits/helpers/MapModal.scss
View file

@ -19,6 +19,16 @@
height: 100%;
}
.map-modal__modal-title {
position: absolute;
width: 100%;
z-index: 1001;
padding: .5rem 1rem 1rem;
margin: 0;
color: #fff;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.map-modal__modal-body {
padding: 0;
display: flex;
@ -27,5 +37,9 @@
.map-modal__modal .leaflet-container {
flex: 1 1 auto;
border-radius: 0 0 .3rem .3rem;
border-radius: .3rem;
}
.map-modal__modal .leaflet-top .leaflet-control {
margin-top: 60px;
}

8
test/visits/helpers/MapModal.test.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
import { Modal, ModalHeader } from 'reactstrap';
import { Modal } from 'reactstrap';
import { Marker, Popup } from 'react-leaflet';
import MapModal from '../../../src/visits/helpers/MapModal';
@ -34,12 +34,12 @@ describe('<MapModal />', () => {
it('renders modal with provided props', () => {
const modal = wrapper.find(Modal);
const headerheader = wrapper.find(ModalHeader);
const headerheader = wrapper.find('.map-modal__modal-title');
expect(modal.prop('toggle')).toEqual(toggle);
expect(modal.prop('isOpen')).toEqual(isOpen);
expect(headerheader.prop('toggle')).toEqual(toggle);
expect(headerheader.prop('children')).toEqual(title);
expect(headerheader.find('.close').prop('onClick')).toEqual(toggle);
expect(headerheader.text()).toContain(title);
});
it('renders open street map tile', () => {