From 47bd4e593201981d65cef5dc650f950017af0ac9 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:31:15 +0530 Subject: [PATCH 1/7] Add files via upload --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e743af8..058b6c5 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map - [X] Search bar to search places - [X] Go to current location - [X] Dark Mode - +- [X] Auto Hide sidebar ## Installation clone repo and install using - ```sh From 0044c4091d2c13c407bda4f9f5e26ba2f933f136 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:32:31 +0530 Subject: [PATCH 2/7] Add files via upload --- src/sass/style.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/sass/style.css diff --git a/src/sass/style.css b/src/sass/style.css new file mode 100644 index 0000000..ea2aa6e --- /dev/null +++ b/src/sass/style.css @@ -0,0 +1,23 @@ +#open,#close +{ + position: absolute; + color:#091B29; + padding:4px 10px; + background-color:white ; + font-size: 24px; + border-radius:50% ; + cursor: pointer; +} +.hide{ + transform: translateX(-110%); + transition: all 8s ease-in-out; +} +#close{ + top:25px; + left:280px; +} +#open +{ +top:25px; +left:25px; +} From c18b9ec5e369de48d277800c11fd6ce81507ac5d Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:34:25 +0530 Subject: [PATCH 3/7] changes in sidebar element Added two element for manipulation of side bar "open" and "close". --- src/components/main-app/sidebar.js | 32 +++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index f7821c7..bbca0e2 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -21,22 +21,48 @@ export default function Sidebar({ setTheme, theme }) { const [opacity] = useQueryParam(URL_OPACITY, StringParam); const [text, setText] = useState(''); const [colorFormat, setColorFormat] = useState('rgba'); - +let i=1; useEffect(() => { const colorArray = getColorsArray(colors); + const sidebar=document.querySelector(".sidebar"); + const open=document.getElementById("open"); + const close=document.getElementById("close"); + open.addEventListener("click",()=>{ + if(sidebar.classList.contains("hide")) + sidebar.classList.remove("hide"); + }) + close.addEventListener("click",()=>{ + sidebar.classList.add("hide"); + }) + sidebar.onmouseover=()=>{ + i=0; + } + const timer=setInterval(()=>{ + i++; + if(i>10&&!sidebar.classList.contains("hide")) + { + sidebar.classList.add("hide"); + console.log('timer'); + i=0; + } + },1000); + setText( JSON.stringify(copyColor(colorArray, opacity, colorFormat), undefined, 4) ); - }, [colors, opacity, colorFormat]); + i++; + console.log(i); + }, [colors, opacity, colorFormat,i]); const handleColorFormatChange = event => { setColorFormat(event.target.value); }; - return ( +
+

RasterPlayground From 359289d205e3e9ec84298d1ea64647e7643f7750 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:36:22 +0530 Subject: [PATCH 4/7] added a css file From 1186607c4d6f295d26ef601ebdceb09e201cdcd3 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:46:17 +0530 Subject: [PATCH 5/7] changes in sidebar elements. Added some component to manipulate sidebar. --- src/components/main-app/sidebar.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index bbca0e2..64fc084 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -42,7 +42,6 @@ let i=1; if(i>10&&!sidebar.classList.contains("hide")) { sidebar.classList.add("hide"); - console.log('timer'); i=0; } },1000); @@ -50,8 +49,6 @@ let i=1; setText( JSON.stringify(copyColor(colorArray, opacity, colorFormat), undefined, 4) ); - i++; - console.log(i); }, [colors, opacity, colorFormat,i]); const handleColorFormatChange = event => { From f3427a6fccbb6056a06219b2fdd8b64794e7bc41 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Tue, 9 Feb 2021 20:48:57 +0530 Subject: [PATCH 6/7] added auto hide feature hide sidebar after 10 second on inactivtiy. --- src/components/main-app/sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/main-app/sidebar.js b/src/components/main-app/sidebar.js index 64fc084..5f2558b 100644 --- a/src/components/main-app/sidebar.js +++ b/src/components/main-app/sidebar.js @@ -21,7 +21,7 @@ export default function Sidebar({ setTheme, theme }) { const [opacity] = useQueryParam(URL_OPACITY, StringParam); const [text, setText] = useState(''); const [colorFormat, setColorFormat] = useState('rgba'); -let i=1; + let i=1; useEffect(() => { const colorArray = getColorsArray(colors); const sidebar=document.querySelector(".sidebar"); From f872b10cfc150454b86a0f3b6472de96edbf67e6 Mon Sep 17 00:00:00 2001 From: Shubham Kumar <69460704+Shubhamkumarweb@users.noreply.github.com> Date: Wed, 10 Feb 2021 21:54:19 +0530 Subject: [PATCH 7/7] imported css --- src/app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app.js b/src/app.js index d3c17d1..85c359b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,6 +1,7 @@ import React from 'react'; import 'sass/index.sass'; import Router from './router'; +import 'sass/style.css'; export default function App() { return (