forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-28 16:16:24 +00:00
Code Issues Packages Projects Releases 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
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 React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap'; import { Modal, ModalBody } from 'reactstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import './MapModal.scss'; import './MapModal.scss';
@@ -27,8 +27,11 @@ const OpenStreetMapTile = () => (
const MapModal = ({ toggle, isOpen, title, locations }) => ( const MapModal = ({ toggle, isOpen, title, locations }) => (
<Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content"> <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"> <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"> <Map center={[ 0, 0 ]} zoom="3">
<OpenStreetMapTile /> <OpenStreetMapTile />
{locations.map(({ cityName, latLong, count }, index) => ( {locations.map(({ cityName, latLong, count }, index) => (

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

@@ -19,6 +19,16 @@
height: 100%; 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 { .map-modal__modal-body {
padding: 0; padding: 0;
display: flex; display: flex;
@@ -27,5 +37,9 @@
.map-modal__modal .leaflet-container { .map-modal__modal .leaflet-container {
flex: 1 1 auto; 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 React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { Modal, ModalHeader } from 'reactstrap'; import { Modal } from 'reactstrap';
import { Marker, Popup } from 'react-leaflet'; import { Marker, Popup } from 'react-leaflet';
import MapModal from '../../../src/visits/helpers/MapModal'; import MapModal from '../../../src/visits/helpers/MapModal';
@@ -34,12 +34,12 @@ describe('<MapModal />', () => {
it('renders modal with provided props', () => { it('renders modal with provided props', () => {
const modal = wrapper.find(Modal); 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('toggle')).toEqual(toggle);
expect(modal.prop('isOpen')).toEqual(isOpen); expect(modal.prop('isOpen')).toEqual(isOpen);
expect(headerheader.prop('toggle')).toEqual(toggle); expect(headerheader.find('.close').prop('onClick')).toEqual(toggle);
expect(headerheader.prop('children')).toEqual(title); expect(headerheader.text()).toContain(title);
}); });
it('renders open street map tile', () => { it('renders open street map tile', () => {