Improve popup UI (#12)

* Improve popup UI

* Update PopupFooter css

.vscode/settings.json

@@ -27,6 +27,7 @@
     "Popover",
     "Toggler",
     "Unmount",
+    "borderless",
     "bundlewatch",
     "centered",
     "codeql",

src/components/ControlButtons/CloseControlButton/CloseControlButton.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import {
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
+import STYLES from '../ControlButton/ControlButton.module.scss';
+
+export const CloseControlButton: React.FunctionComponent<Omit<
+  ControlButtonProps,
+  'className' | 'buttonClassName'
+>> = memo((props) => (
+  <ControlButton
+    className={STYLES.ControlButton__close}
+    buttonClassName={STYLES['ControlButton__close-button']}
+    {...props}
+  >
+    <FaTimes />
+  </ControlButton>
+));

src/components/ButtonControl/ButtonControl.module.scss → src/components/ControlButtons/ControlButton/ControlButton.module.scss

@@ -1,4 +1,4 @@
-.ButtonControl {
+.ControlButton {
   display: block;
   margin: 1px;
   padding: 0;
@@ -22,6 +22,11 @@
     background-color: rgba(0, 60, 136, 0.7);
   }
 
+  &[disabled] {
+    background-color: rgba(0, 60, 136, 0.1);
+    cursor: default;
+  }
+
   &__container {
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 4px;

src/components/ButtonControl/ButtonControl.tsx → src/components/ControlButtons/ControlButton/ControlButton.tsx

@@ -2,19 +2,24 @@ import classNames from 'classnames/bind';
 import * as Popper from 'popper.js';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'reactstrap';
-import STYLES from './ButtonControl.module.scss';
+import STYLES from './ControlButton.module.scss';
 
 const c = classNames.bind(STYLES);
 
-export interface ButtonControlProps {
+type ButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export type ControlButtonProps = ButtonProps & {
   onClick: () => void;
   className?: string;
   buttonClassName?: string;
   tooltip?: string;
   tooltipPlacement?: Popper.Placement;
-}
+};
 
-export const ButtonControl: React.FunctionComponent<ButtonControlProps> = memo(
+export const ControlButton: React.FunctionComponent<ControlButtonProps> = memo(
   ({
     children,
     onClick,
@@ -40,9 +45,9 @@ export const ButtonControl: React.FunctionComponent<ButtonControlProps> = memo(
     };
 
     return (
-      <div className={c(STYLES.ButtonControl__container, className)}>
+      <div className={c(STYLES.ControlButton__container, className)}>
         <button
-          className={c(STYLES.ButtonControl, buttonClassName)}
+          className={c(STYLES.ControlButton, buttonClassName)}
           type="button"
           ref={buttonRef}
           {...rest}

src/components/ControlButtons/DownloadButtonControl/DownloadButtonControl.tsx → src/components/ControlButtons/DownloadControlButton/DownloadControlButton.tsx

@@ -23,12 +23,12 @@ import {
 } from '../../../util/download';
 import { PDFFormat } from '../../../util/pdf';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 import { INPUT_TYPES } from '../../Form/Form';
 
-export interface DownloadButtonControlProps {
+export interface DownloadControlButtonProps {
   map: Map;
   source: VectorSource;
 }
@@ -41,8 +41,8 @@ export interface DownloadOptions {
   pdfResolution: number;
 }
 
-export const DownloadButtonControl: React.FunctionComponent<
-  DownloadButtonControlProps & Omit<ButtonControlProps, 'onClick'>
+export const DownloadControlButton: React.FunctionComponent<
+  DownloadControlButtonProps & Omit<ControlButtonProps, 'onClick'>
 > = ({ map, source, ...rest }) => {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [downloadOptions, setDownloadOptions] = useState<DownloadOptions>({
@@ -104,9 +104,9 @@ export const DownloadButtonControl: React.FunctionComponent<
 
   return (
     <Fragment>
-      <ButtonControl {...rest} onClick={onButtonCLick} tooltipPlacement="right">
+      <ControlButton {...rest} onClick={onButtonCLick} tooltipPlacement="right">
         <IoMdDownload />
-      </ButtonControl>
+      </ControlButton>
       <Modal isOpen={modalOpen} toggle={toggle} centered>
         <ModalHeader toggle={toggle}>Download Options</ModalHeader>
         <ModalBody>

src/components/ControlButtons/FullScreenControlButton/FullScreenControlButton.tsx

@@ -0,0 +1,23 @@
+import Map from 'ol/Map';
+import React from 'react';
+import { MdZoomOutMap } from 'react-icons/md';
+import {
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
+
+export interface FullScreenControlButtonProps {
+  map: Map;
+}
+
+export const FullScreenControlButton: React.FunctionComponent<
+  FullScreenControlButtonProps & Omit<ControlButtonProps, 'onClick'>
+> = (props) => (
+  <ControlButton
+    {...props}
+    tooltipPlacement="right"
+    onClick={() => alert('fullscreen')}
+  >
+    <MdZoomOutMap />
+  </ControlButton>
+);

src/components/GetLinkButtonControl/GetLinkButtonControl.tsx → src/components/ControlButtons/GetLinkControlButton/GetLinkControlButton.tsx

@@ -5,19 +5,19 @@ import OSM from 'ol/source/OSM';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { MdLink } from 'react-icons/md';
-import { getLayerById } from '../../util/util';
+import { getLayerById } from '../../../util/util';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 
-export interface GetLinkButtonControlProps {
+export interface GetLinkControlButtonProps {
   map: Map;
 }
 
-export const GetLinkButtonControl: React.FunctionComponent<
-  GetLinkButtonControlProps &
-    Omit<ButtonControlProps, 'onClick' | 'tooltipPlacement'>
+export const GetLinkControlButton: React.FunctionComponent<
+  GetLinkControlButtonProps &
+    Omit<ControlButtonProps, 'onClick' | 'tooltipPlacement'>
 > = ({ map, ...rest }) => {
   const onButtonCLick = () => {
     const gpxSource = getLayerById<VectorLayer>(
@@ -47,14 +47,14 @@ export const GetLinkButtonControl: React.FunctionComponent<
   };
 
   return (
-    <ButtonControl {...rest} onClick={onButtonCLick} tooltipPlacement="right">
+    <ControlButton {...rest} onClick={onButtonCLick} tooltipPlacement="right">
       <MdLink />
-    </ButtonControl>
+    </ControlButton>
   );
 };
 
-GetLinkButtonControl.propTypes = {
+GetLinkControlButton.propTypes = {
   map: PropTypes.instanceOf(Map).isRequired,
 };
 
-export default GetLinkButtonControl;
+export default GetLinkControlButton;

src/components/Popup/Google360ButtonControl.tsx → src/components/ControlButtons/Google360ControlButton/Google360ControlButton.tsx

@@ -1,18 +1,18 @@
 import React, { Fragment, useState } from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 import { ReactComponent as Icon360 } from './360-24px.svg';
 
-export interface Google360ButtonControlProps {
+export interface Google360ControlButtonProps {
   pointName: string;
   embedUrl: string;
 }
 
-export const Google360ButtonControl: React.FunctionComponent<
-  Google360ButtonControlProps & Omit<ButtonControlProps, 'onClick'>
+export const Google360ControlButton: React.FunctionComponent<
+  Google360ControlButtonProps & Omit<ControlButtonProps, 'onClick'>
 > = ({ pointName, embedUrl, ...rest }) => {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
@@ -22,9 +22,9 @@ export const Google360ButtonControl: React.FunctionComponent<
 
   return (
     <Fragment>
-      <ButtonControl {...rest} onClick={toggle}>
+      <ControlButton {...rest} onClick={toggle}>
         <Icon360 />
-      </ButtonControl>
+      </ControlButton>
       <Modal
         isOpen={modalOpen}
         toggle={toggle}
@@ -48,4 +48,4 @@ export const Google360ButtonControl: React.FunctionComponent<
   );
 };
 
-export default Google360ButtonControl;
+export default Google360ControlButton;

src/components/ControlButtons/MyLocationButtonControl/MyLocationButtonControl.tsx → src/components/ControlButtons/MyLocationControlButton/MyLocationControlButton.tsx

@@ -12,21 +12,21 @@ import { useDispatch } from 'react-redux';
 import { hideSpinner, showSpinner } from '../../../features/spinner';
 import { getLayerById } from '../../../util/util';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 import marker from './baseline-my_location-24px-yellow.svg';
 
 const LAYER_ID = 'mylocation_layer';
 const FEATURE_ID = 'mylocation_feature';
 const ANIMATION_DURATION = 1000;
 
-export interface MyLocationButtonControlProps {
+export interface MyLocationControlButtonProps {
   map: Map;
 }
 
-export const MyLocationButtonControl: React.FunctionComponent<
-  MyLocationButtonControlProps & Omit<ButtonControlProps, 'onClick'>
+export const MyLocationControlButton: React.FunctionComponent<
+  MyLocationControlButtonProps & Omit<ControlButtonProps, 'onClick'>
 > = ({ map, ...rest }) => {
   const dispatch = useDispatch();
 
@@ -95,8 +95,8 @@ export const MyLocationButtonControl: React.FunctionComponent<
   };
 
   return (
-    <ButtonControl tooltipPlacement="right" onClick={onButtonCLick} {...rest}>
+    <ControlButton tooltipPlacement="right" onClick={onButtonCLick} {...rest}>
       <MdMyLocation />
-    </ButtonControl>
+    </ControlButton>
   );
 };

src/components/ControlButtons/NextPointControlButton/NextPointControlButton.tsx

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import {
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
+
+export const NextPointControlButton: React.FunctionComponent<ControlButtonProps> = memo(
+  (props) => (
+    <ControlButton {...props}>
+      <FaCaretRight />
+    </ControlButton>
+  )
+);

src/components/ControlButtons/PdfExportButtonControl/PdfExportButtonControl.tsx → src/components/ControlButtons/PdfExportControlButton/PdfExportControlButton.tsx

@@ -5,16 +5,16 @@ import { useDispatch } from 'react-redux';
 import { hideSpinner, showSpinner } from '../../../features/spinner';
 import { exportMapToPDF } from '../../../util/pdf';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 
-export interface PdfExportButtonControlProps {
+export interface PdfExportControlButtonProps {
   map: Map;
 }
 
-export const PdfExportButtonControl: React.FunctionComponent<
-  PdfExportButtonControlProps & Omit<ButtonControlProps, 'onClick'>
+export const PdfExportControlButton: React.FunctionComponent<
+  PdfExportControlButtonProps & Omit<ControlButtonProps, 'onClick'>
 > = ({ map, ...rest }) => {
   const dispatch = useDispatch();
 
@@ -26,8 +26,8 @@ export const PdfExportButtonControl: React.FunctionComponent<
   };
 
   return (
-    <ButtonControl tooltipPlacement="right" onClick={onButtonCLick} {...rest}>
+    <ControlButton tooltipPlacement="right" onClick={onButtonCLick} {...rest}>
       <FaFilePdf />
-    </ButtonControl>
+    </ControlButton>
   );
 };

src/components/ControlButtons/PrevPointControlButton/PrevPointControlButton.tsx

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { FaCaretLeft } from 'react-icons/fa';
+import {
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
+
+export const PrevPointControlButton: React.FunctionComponent<ControlButtonProps> = memo(
+  (props) => (
+    <ControlButton {...props}>
+      <FaCaretLeft />
+    </ControlButton>
+  )
+);

src/components/ControlButtons/RotateNorthControl/RotateNorthControl.js

@@ -1,6 +1,6 @@
-// import { ButtonControl } from '../ButtonControl/ButtonControl';
+// import { ControlButton } from '../ControlButton/ControlButton';
 
-// export class RotateNorthControl extends ButtonControl {
+// export class RotateNorthControl extends ControlButton {
 //   constructor(options) {
 //     super(options);
 //     this.element.firstChild.addEventListener(

src/components/Popup/ZoomInButtonControl.tsx → src/components/ControlButtons/ZoomInControlButton/ZoomInControlButton.tsx

@@ -4,19 +4,19 @@ import { fromLonLat } from 'ol/proj';
 import React, { memo } from 'react';
 import { MdZoomIn } from 'react-icons/md';
 import {
-  ButtonControl,
-  ButtonControlProps,
-} from '../ButtonControl/ButtonControl';
+  ControlButton,
+  ControlButtonProps,
+} from '../ControlButton/ControlButton';
 
 export const ANIMATION_DURATION = 800;
 
-export interface ZoomInButtonControlProps {
+export interface ZoomInControlButtonProps {
   lonLat: Coordinate;
   map: Map;
 }
 
-export const ZoomInButtonControl: React.FunctionComponent<
-  ZoomInButtonControlProps & Omit<ButtonControlProps, 'onClick'>
+export const ZoomInControlButton: React.FunctionComponent<
+  ZoomInControlButtonProps & Omit<ControlButtonProps, 'onClick'>
 > = memo(({ lonLat, map, ...rest }) => {
   const onClick = () => {
     map.getView().animate({
@@ -26,8 +26,8 @@ export const ZoomInButtonControl: React.FunctionComponent<
     });
   };
   return (
-    <ButtonControl {...rest} onClick={onClick}>
+    <ControlButton {...rest} onClick={onClick}>
       <MdZoomIn />
-    </ButtonControl>
+    </ControlButton>
   );
 });