From 22a2a49d786fcc198c028f5757b4cdce3a2fff47 Mon Sep 17 00:00:00 2001 From: Hanumanth P <48819979+vildar@users.noreply.github.com> Date: Thu, 21 Jan 2021 17:19:34 +0530 Subject: [PATCH 1/4] Added functionality to hide sidebar --- src/components/main-app/index.js | 8 +++++--- src/components/main-app/ol-init.js | 7 ++++++- src/components/main-app/sidebar.js | 3 ++- src/utils/collapsible.js | 0 4 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 src/utils/collapsible.js diff --git a/src/components/main-app/index.js b/src/components/main-app/index.js index c2718ba..9e0de05 100644 --- a/src/components/main-app/index.js +++ b/src/components/main-app/index.js @@ -1,12 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import OlInit from './ol-init'; import Sidebar from './sidebar'; export default function MainApp({ setTheme, theme }) { + const [showSidebar, setShowSidebar] = useState(false) + return ( <> - - + + {showSidebar ? : false} ); } diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js index 6528e05..a27a70a 100644 --- a/src/components/main-app/ol-init.js +++ b/src/components/main-app/ol-init.js @@ -9,7 +9,7 @@ import { faCompass } from '@fortawesome/free-solid-svg-icons'; import { handleLocationButton } from 'utils'; import { setSource } from '../../api/map-data'; -export default function OlInit() { +export default function OlInit({ setShowSidebar }) { const [shape] = useQueryParam(URL_SHAPE, StringParam); const [tiles] = useQueryParam(URL_TILES, StringParam); const [colors] = useQueryParam(URL_COLORS, StringParam); @@ -56,6 +56,11 @@ export default function OlInit() { +
+ +
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index efdf97c..3984a6b 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -13,7 +13,7 @@ import { GlobalStyles } from './themes/global-styles'; import { lightTheme, darkTheme } from './themes/themes'; import '../../sass/index.sass'; -export default function Sidebar({ setTheme, theme }) { +export default function Sidebar({ setShowSidebar, setTheme, theme }) { const [colors] = useQueryParam(URL_COLORS, StringParam); const [opacity] = useQueryParam(URL_OPACITY, StringParam); const [text, setText] = useState(''); @@ -28,6 +28,7 @@ export default function Sidebar({ setTheme, theme }) {
+

RasterPlayground

diff --git a/src/utils/collapsible.js b/src/utils/collapsible.js new file mode 100644 index 0000000..e69de29 From 50973df44fa31ecc2c6e79f8b414a97b9b93fdb2 Mon Sep 17 00:00:00 2001 From: Hanumanth P <48819979+vildar@users.noreply.github.com> Date: Thu, 21 Jan 2021 17:36:32 +0530 Subject: [PATCH 2/4] Icons to minimize and maximize sidebar --- src/components/main-app/ol-init.js | 4 ++-- src/components/main-app/sidebar.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js index a27a70a..0221707 100644 --- a/src/components/main-app/ol-init.js +++ b/src/components/main-app/ol-init.js @@ -5,7 +5,7 @@ import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config'; import { useQueryParam, StringParam } from 'use-query-params'; import { usePrevious } from 'react-use'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCompass } from '@fortawesome/free-solid-svg-icons'; +import { faCompass, faBars } from '@fortawesome/free-solid-svg-icons'; import { handleLocationButton } from 'utils'; import { setSource } from '../../api/map-data'; @@ -58,7 +58,7 @@ export default function OlInit({ setShowSidebar }) {
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index 4e11aed..681493e 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -15,6 +15,8 @@ import '../../sass/index.sass'; import JSONPretty from 'react-json-pretty'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import * as JSONPrettyMon from 'react-json-pretty/dist/acai'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons'; export default function Sidebar({ setShowSidebar, setTheme, theme }) { const [colors] = useQueryParam(URL_COLORS, StringParam); @@ -38,7 +40,9 @@ export default function Sidebar({ setShowSidebar, setTheme, theme }) {
- +

RasterPlayground

From c10d105d1e93281ad7602e6036add97be8ca1a94 Mon Sep 17 00:00:00 2001 From: Hanumanth P <48819979+vildar@users.noreply.github.com> Date: Thu, 21 Jan 2021 18:53:48 +0530 Subject: [PATCH 3/4] added collapsible component [build deploy] --- src/components/main-app/index.js | 14 ++- src/components/main-app/ol-init.js | 7 +- .../main-app/sidebar-wrapper/alpha-input.js | 26 +++-- .../main-app/sidebar-wrapper/colors-input.js | 106 ++++++++++-------- .../main-app/sidebar-wrapper/colors-output.js | 48 ++++++++ .../main-app/sidebar-wrapper/index.js | 1 + .../main-app/sidebar-wrapper/shape-input.js | 26 +++-- .../main-app/sidebar-wrapper/tiles-input.js | 26 +++-- src/components/main-app/sidebar.js | 36 ++---- .../main-app/themes/global-styles.js | 8 +- src/sass/_app.sass | 37 +++++- src/utils/collapsible.js | 17 +++ src/utils/index.js | 1 + 13 files changed, 248 insertions(+), 105 deletions(-) create mode 100644 src/components/main-app/sidebar-wrapper/colors-output.js diff --git a/src/components/main-app/index.js b/src/components/main-app/index.js index 9e0de05..2e4c5d1 100644 --- a/src/components/main-app/index.js +++ b/src/components/main-app/index.js @@ -3,12 +3,20 @@ import OlInit from './ol-init'; import Sidebar from './sidebar'; export default function MainApp({ setTheme, theme }) { - const [showSidebar, setShowSidebar] = useState(false) + const [showSidebar, setShowSidebar] = useState(false); return ( <> - - {showSidebar ? : false} + + {showSidebar ? ( + + ) : ( + false + )} ); } diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js index 0221707..a472070 100644 --- a/src/components/main-app/ol-init.js +++ b/src/components/main-app/ol-init.js @@ -56,8 +56,11 @@ export default function OlInit({ setShowSidebar }) {
-
-
diff --git a/src/components/main-app/sidebar-wrapper/alpha-input.js b/src/components/main-app/sidebar-wrapper/alpha-input.js index adb7b58..6027164 100644 --- a/src/components/main-app/sidebar-wrapper/alpha-input.js +++ b/src/components/main-app/sidebar-wrapper/alpha-input.js @@ -1,20 +1,30 @@ -import React from 'react'; +import React, { useState } from 'react'; import { URL_OPACITY, URL_UPDATE_PUSH } from 'config'; import { StringParam, useQueryParam } from 'use-query-params'; +import { Collapse } from 'utils'; export default function AlphaInput() { const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam); + const [toggleCollapse, setToggleCollapse] = useState(true); return ( <> -

Alpha Value (0-1)

- onChangeOpacity(e.target.value, URL_UPDATE_PUSH)} + + {toggleCollapse ? ( + true + ) : ( + onChangeOpacity(e.target.value, URL_UPDATE_PUSH)} + /> + )} ); } diff --git a/src/components/main-app/sidebar-wrapper/colors-input.js b/src/components/main-app/sidebar-wrapper/colors-input.js index 35cbd43..9c5cdf6 100644 --- a/src/components/main-app/sidebar-wrapper/colors-input.js +++ b/src/components/main-app/sidebar-wrapper/colors-input.js @@ -4,6 +4,7 @@ import { URL_COLORS, URL_UPDATE_PUSH } from 'config'; import { ReactComponent as CloseSVG } from 'assets/svg/close.svg'; import { getColorsArray, getColorsString } from 'utils'; import { ChromePicker } from 'react-color'; +import { Collapse } from 'utils'; const popover = { position: 'absolute', @@ -29,6 +30,7 @@ export default function ColorsInput() { const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam); const [itemColorStatus, setItemColorStatus] = useState(null); const colorsArray = getColorsArray(colors); + const [toggleCollapse, setToggleCollapse] = useState(true); const changeItemColor = color => { setItemColorStatus({ color: color.hex, key: itemColorStatus.key }); @@ -47,54 +49,68 @@ export default function ColorsInput() { return ( <> -
- {colorsArray.map((color, key) => ( - <> -
+ {toggleCollapse ? ( + true + ) : ( + <> +
+ {colorsArray.map((color, key) => ( + <> +
+
deleteColor(key, colorsArray, onChangeColor)} + > + +
+
setItemColorStatus({ color, key })} + >
+
+ + ))} +
+ {itemColorStatus ? ( +
deleteColor(key, colorsArray, onChangeColor)} - > - -
-
setItemColorStatus({ color, key })} - >
+ style={cover} + onClick={() => { + setItemColorStatus(false); + }} + /> +
- - ))} -
- {itemColorStatus ? ( -
-
{ - setItemColorStatus(false); - }} - /> - -
- ) : null} + ) : null} + + )} ); } diff --git a/src/components/main-app/sidebar-wrapper/colors-output.js b/src/components/main-app/sidebar-wrapper/colors-output.js new file mode 100644 index 0000000..e986e1b --- /dev/null +++ b/src/components/main-app/sidebar-wrapper/colors-output.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import JSONPretty from 'react-json-pretty'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import * as JSONPrettyMon from 'react-json-pretty/dist/acai'; +import { Collapse } from 'utils'; + +export default function ColorsOutput({ text, setColorFormat }) { + const [toggleCollapse, setToggleCollapse] = useState(true); + + const handleColorFormatChange = event => { + setColorFormat(event.target.value); + }; + + return ( + <> + + {toggleCollapse ? ( + true + ) : ( + <> +
+ + + + +
+ + + )} + + ); +} diff --git a/src/components/main-app/sidebar-wrapper/index.js b/src/components/main-app/sidebar-wrapper/index.js index 85523ca..7ef9dc0 100644 --- a/src/components/main-app/sidebar-wrapper/index.js +++ b/src/components/main-app/sidebar-wrapper/index.js @@ -2,3 +2,4 @@ export { default as TilesInput } from './tiles-input'; export { default as ShapeInput } from './shape-input'; export { default as ColorsInput } from './colors-input'; export { default as AlphaInput } from './alpha-input'; +export { default as ColorsOutput } from './colors-output'; diff --git a/src/components/main-app/sidebar-wrapper/shape-input.js b/src/components/main-app/sidebar-wrapper/shape-input.js index 348a43b..75550be 100644 --- a/src/components/main-app/sidebar-wrapper/shape-input.js +++ b/src/components/main-app/sidebar-wrapper/shape-input.js @@ -1,20 +1,30 @@ -import React from 'react'; +import React, { useState } from 'react'; import { URL_SHAPE, URL_UPDATE_PUSH } from 'config'; import { StringParam, useQueryParam } from 'use-query-params'; +import { Collapse } from 'utils'; export default function ShapeInput() { const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam); + const [toggleCollapse, setToggleCollapse] = useState(true); return ( <> -

Shape URL (Only Topo JSON)

- onChangeShape(e.target.value, URL_UPDATE_PUSH)} + + {toggleCollapse ? ( + true + ) : ( + onChangeShape(e.target.value, URL_UPDATE_PUSH)} + /> + )} ); } diff --git a/src/components/main-app/sidebar-wrapper/tiles-input.js b/src/components/main-app/sidebar-wrapper/tiles-input.js index 9da0d05..5ce3a33 100644 --- a/src/components/main-app/sidebar-wrapper/tiles-input.js +++ b/src/components/main-app/sidebar-wrapper/tiles-input.js @@ -1,20 +1,30 @@ -import React from 'react'; +import React, { useState } from 'react'; import { URL_TILES, URL_UPDATE_PUSH } from 'config'; import { StringParam, useQueryParam } from 'use-query-params'; +import { Collapse } from 'utils'; export default function TilesInput() { const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam); + const [toggleCollapse, setToggleCollapse] = useState(true); return ( <> -

Tiles URL (XYZ Format)

- onChangeTiles(e.target.value, URL_UPDATE_PUSH)} + + {toggleCollapse ? ( + true + ) : ( + onChangeTiles(e.target.value, URL_UPDATE_PUSH)} + /> + )} ); } diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index 681493e..5b5beec 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -6,15 +6,12 @@ import { TilesInput, ShapeInput, ColorsInput, + ColorsOutput, AlphaInput, } from './sidebar-wrapper'; import { ThemeProvider } from 'styled-components'; import { GlobalStyles } from './themes/global-styles'; import { lightTheme, darkTheme } from './themes/themes'; -import '../../sass/index.sass'; -import JSONPretty from 'react-json-pretty'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; -import * as JSONPrettyMon from 'react-json-pretty/dist/acai'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons'; @@ -31,17 +28,16 @@ export default function Sidebar({ setShowSidebar, setTheme, theme }) { ); }, [colors, opacity, colorFormat]); - const handleColorFormatChange = event => { - setColorFormat(event.target.value); - }; - return (
-

RasterPlayground @@ -70,27 +66,11 @@ export default function Sidebar({ setShowSidebar, setTheme, theme }) {

-
+
- - - -
- +

diff --git a/src/components/main-app/themes/global-styles.js b/src/components/main-app/themes/global-styles.js index 3acc370..e5fb953 100644 --- a/src/components/main-app/themes/global-styles.js +++ b/src/components/main-app/themes/global-styles.js @@ -7,9 +7,13 @@ export const GlobalStyles = createGlobalStyle` transition: all 0.5s linear; } + .sidebar::-webkit-scrollbar-thumb{ + background-color: ${({ theme }) => theme.btnBgColor}; + } + #json-pretty > pre::-webkit-scrollbar-thumb{ background-color: ${({ theme }) => theme.scroll}; - } + } #json-pretty > pre{ background-color: ${({ theme }) => theme.background} !important; @@ -33,7 +37,7 @@ export const GlobalStyles = createGlobalStyle` color: ${({ theme }) => theme.text}; } - .fa.iconButton, #color-format, .copy-btn{ + .fa.iconButton, #color-format, .copy-btn, .minimize-btn{ background-color: ${({ theme }) => theme.btnBgColor}; color: ${({ theme }) => theme.btnColor}; } diff --git a/src/sass/_app.sass b/src/sass/_app.sass index 988356b..9ec3ca3 100644 --- a/src/sass/_app.sass +++ b/src/sass/_app.sass @@ -22,7 +22,14 @@ margin-bottom: 10px span font-weight: 300 - + +.sidebar::-webkit-scrollbar + width: 9px + +.sidebar::-webkit-scrollbar-thumb + border-radius: 10px + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) + .theme-toggle .switch display: flex @@ -159,6 +166,9 @@ border-radius: 10px -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) +.color-output-btns + margin-top: 0.6rem + #color-format border: none border-radius: 6px @@ -190,6 +200,31 @@ align-items: center margin-top: 2% +.collapsible-title + cursor: pointer + +.minimize-btn + border: none + border-radius: 2px + position: absolute + top: 0.5rem + left: 0.5rem + text-align: center + line-height: 0.4rem + +.minimize-btn:active + opacity: 0.5 + +.max-btn-container + z-index: 1 + top: 1rem + left: 1rem + +.maximize-btn + border: none + height: 1.5rem + width: 3rem + @media only screen and (max-width: 1440px) .sidebar width: 400px diff --git a/src/utils/collapsible.js b/src/utils/collapsible.js index e69de29..677c00e 100644 --- a/src/utils/collapsible.js +++ b/src/utils/collapsible.js @@ -0,0 +1,17 @@ +import React from 'react'; + +export default function Collapse({ title, toggleCollapse, setToggleCollapse }) { + return ( + <> +

{ + setToggleCollapse(!toggleCollapse); + console.log(toggleCollapse); + }} + > + {title} +

+ + ); +} diff --git a/src/utils/index.js b/src/utils/index.js index 3cfb176..7a65ef5 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -5,3 +5,4 @@ export { default as copyColor } from './copy-color'; export { setMap, handleLocationButton } from './current-location'; export { default as addSearchControl } from './add-search-control'; export { default as themeToggler } from './theme-toggler'; +export { default as Collapse } from './collapsible'; From 6ede4a867ccfc55c50c177c747becbcdba81218e Mon Sep 17 00:00:00 2001 From: Hanumanth P <48819979+vildar@users.noreply.github.com> Date: Thu, 21 Jan 2021 19:45:16 +0530 Subject: [PATCH 4/4] hiding sidebar instead of unmounting [build deploy] --- src/components/main-app/index.js | 16 +++------------- src/components/main-app/ol-init.js | 6 ++++-- src/components/main-app/sidebar.js | 6 ++++-- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/components/main-app/index.js b/src/components/main-app/index.js index 2e4c5d1..c2718ba 100644 --- a/src/components/main-app/index.js +++ b/src/components/main-app/index.js @@ -1,22 +1,12 @@ -import React, { useState } from 'react'; +import React from 'react'; import OlInit from './ol-init'; import Sidebar from './sidebar'; export default function MainApp({ setTheme, theme }) { - const [showSidebar, setShowSidebar] = useState(false); - return ( <> - - {showSidebar ? ( - - ) : ( - false - )} + + ); } diff --git a/src/components/main-app/ol-init.js b/src/components/main-app/ol-init.js index a472070..1b2643c 100644 --- a/src/components/main-app/ol-init.js +++ b/src/components/main-app/ol-init.js @@ -9,7 +9,7 @@ import { faCompass, faBars } from '@fortawesome/free-solid-svg-icons'; import { handleLocationButton } from 'utils'; import { setSource } from '../../api/map-data'; -export default function OlInit({ setShowSidebar }) { +export default function OlInit() { const [shape] = useQueryParam(URL_SHAPE, StringParam); const [tiles] = useQueryParam(URL_TILES, StringParam); const [colors] = useQueryParam(URL_COLORS, StringParam); @@ -59,7 +59,9 @@ export default function OlInit({ setShowSidebar }) {
diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index 5b5beec..2cecab1 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -15,7 +15,7 @@ import { lightTheme, darkTheme } from './themes/themes'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons'; -export default function Sidebar({ setShowSidebar, setTheme, theme }) { +export default function Sidebar({ setTheme, theme }) { const [colors] = useQueryParam(URL_COLORS, StringParam); const [opacity] = useQueryParam(URL_OPACITY, StringParam); const [text, setText] = useState(''); @@ -35,7 +35,9 @@ export default function Sidebar({ setShowSidebar, setTheme, theme }) {