From 4e128eb21c2f7f3223a62d1254d7786dc3694087 Mon Sep 17 00:00:00 2001 From: Arnav Rajurkar Date: Sat, 22 Jun 2024 10:57:34 +0530 Subject: [PATCH 1/4] Added a sliding animation to sidebar --- package-lock.json | 25 ++++++++ package.json | 1 + src/App.css | 13 ++-- src/components/Sidebar.jsx | 61 +++++++++++-------- .../StreaksWatchView/StreaksWatchView.jsx | 3 +- src/views/TasksView/Navbar.jsx | 2 +- 6 files changed, 72 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index bfe7ad6..9469472 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@tauri-apps/api": "^1", "anychart": "^8.12.1", "bootstrap": "^5.3.3", + "framer-motion": "^11.2.10", "github-contributions-canvas": "^0.7.0", "nanoid": "^5.0.7", "react": "^18.2.0", @@ -2149,6 +2150,30 @@ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, + "node_modules/framer-motion": { + "version": "11.2.10", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz", + "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", diff --git a/package.json b/package.json index acce4b8..ac8981f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@tauri-apps/api": "^1", "anychart": "^8.12.1", "bootstrap": "^5.3.3", + "framer-motion": "^11.2.10", "github-contributions-canvas": "^0.7.0", "nanoid": "^5.0.7", "react": "^18.2.0", diff --git a/src/App.css b/src/App.css index 8c132ca..6af296e 100644 --- a/src/App.css +++ b/src/App.css @@ -77,8 +77,10 @@ body, .toggle-sidebar-btn { position: absolute; - bottom: 10px; /* this is a jugaad just because I don't want it to get in the way for now.*/ - left: 20px; + top: 0; + left: 0; + margin: 10px; + z-index: 1; height: 40px; width: 40px; padding: 0; @@ -189,6 +191,7 @@ body, background-color: var(--bg-color); } + /* -------------------------------------------------------------------------- */ /* -----------------------------TASK VIEW STYLES----------------------------- */ /* -------------------------------------------------------------------------- */ @@ -218,8 +221,10 @@ body, } .page-title { - margin: 20px 0 20px 0; - font-size: 2rem; + font-size: 1.5rem; + font-weight: bold; + margin: 0 auto; + text-align: center; } /* ---- */ diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 1349530..42a7a81 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -1,32 +1,41 @@ -import React from "react"; +import React, { useState } from "react"; +import { motion } from "framer-motion"; -/* - In props, I pass: - -> the names of all the tabs in an array {tabs} - -> the active tab that the user is currently viewing {activeTab} - -> the function to change the active tab {toggleTab} -*/ const Sidebar = (props) => { + const [isVisible, setIsVisible] = useState(true); + + const toggleSidebarVisibility = () => { + setIsVisible(!isVisible); + }; + return ( -
- -
+ <> + + + + + ); }; diff --git a/src/views/StreaksWatchView/StreaksWatchView.jsx b/src/views/StreaksWatchView/StreaksWatchView.jsx index c430b3f..8e4c910 100644 --- a/src/views/StreaksWatchView/StreaksWatchView.jsx +++ b/src/views/StreaksWatchView/StreaksWatchView.jsx @@ -7,12 +7,11 @@ const StreaksWatchView = () => { { date: '2023-01-02', count: 2 }, { date: '2023-01-01', count: 1 }, { date: '2023-04-02', count: 9 }, - ]; return (
-

GitHub Contributions Graph

+

Streaks Calender

); diff --git a/src/views/TasksView/Navbar.jsx b/src/views/TasksView/Navbar.jsx index aae1168..a48f03f 100644 --- a/src/views/TasksView/Navbar.jsx +++ b/src/views/TasksView/Navbar.jsx @@ -10,7 +10,7 @@ import { faTrashAlt, faEdit, faCheckCircle } from '@fortawesome/free-solid-svg-i const Navbar = () => { return ( ) + } export default Navbar \ No newline at end of file diff --git a/src/views/TasksView/Task.jsx b/src/views/TasksView/Task.jsx index 24667ac..90f7a78 100644 --- a/src/views/TasksView/Task.jsx +++ b/src/views/TasksView/Task.jsx @@ -1,8 +1,8 @@ import React from "react"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { DragDropContext } from "./DragDropContext"; import { useContext } from "react"; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; const Task = (props) => { // Adds ID of dragged task to DragEvent datastore and changes state of the DragDropContext. @@ -21,6 +21,7 @@ const Task = (props) => { }} > +
From 45cfc04c79a42bd2c05ae83abe920d569ce3cff3 Mon Sep 17 00:00:00 2001 From: Arnav Rajurkar Date: Wed, 26 Jun 2024 10:32:29 +0530 Subject: [PATCH 3/4] Temporary sidebar animation to fix bugs --- src/App.css | 31 ++++++++++++--- src/App.jsx | 32 ++++++++++++++-- src/components/Sidebar.jsx | 63 +++++-------------------------- src/views/TasksView/TaskGroup.jsx | 1 + 4 files changed, 66 insertions(+), 61 deletions(-) diff --git a/src/App.css b/src/App.css index 68a117d..55e0d3f 100644 --- a/src/App.css +++ b/src/App.css @@ -128,11 +128,32 @@ ul { /* ------------------------------SIDEBAR STYLES------------------------------ */ /* -------------------------------------------------------------------------- */ +.sidebar-button { + position: fixed; + top: 7px; + left: 0; + transform: translateY(-50%); + background: #3576bb; + color: white; + border: none; + padding: 7px; + font-size: 1.05rem; + cursor: pointer; + border-radius: 5px; + box-shadow: 10px 10px 10px #000; +} +.sidebar-button:hover { + filter: brightness(120%); + box-shadow: 10px 10px 10px #000; +} + +.sidebar-button:hover::after { + content: attr("Sidebar"); +} + .sidebar .sidebar-list { height: 100%; width: 100%; - /* Let's keep the border, it divides the screen better. */ - border-right: 1px solid black; margin: 0; padding: 0; display: flex; @@ -203,7 +224,6 @@ ul { background-color: var(--bg-color); } - /* -------------------------------------------------------------------------- */ /* ------------------------------MODAL STYLES-------------------------------- */ /* -------------------------------------------------------------------------- */ @@ -255,6 +275,7 @@ ul { background-color: var(--primary); color: var(--light); width: 100%; + height: 3rem; display: flex; justify-content: space-between; align-items: center; @@ -274,7 +295,7 @@ ul { .page-title { font-size: 1.5rem; font-weight: bold; - margin: 0 auto; + margin: 0 auto; text-align: center; } @@ -312,7 +333,7 @@ ul { .task-card input[type="checkbox"] + label { /* Create a custom checkbox */ display: inline-block; - position: relative; + position: relative; } .task-card input[type="checkbox"] + label:before { diff --git a/src/App.jsx b/src/App.jsx index 7811e0c..6ea43f9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,11 @@ // Non-UI stuff. import { useState } from "react"; -import { invoke } from "@tauri-apps/api/tauri"; // External UI Components import AssignmentIcon from "@mui/icons-material/Assignment"; import DirectionsRunIcon from "@mui/icons-material/DirectionsRun"; import AutoGraphIcon from "@mui/icons-material/AutoGraph"; -import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; // My UI Components import Sidebar from "./components/Sidebar"; @@ -14,6 +13,7 @@ import "./App.css"; import TasksView from "./views/TasksView/TasksView"; import HabitsView from "./views/HabitsView/HabitsView"; import StreaksWatchView from "./views/StreaksWatchView/StreaksWatchView"; +import { motion } from "framer-motion"; // Constants. import { TASKS_VIEW, HABITS_VIEW, STREAKS_VIEW } from "./Constants"; @@ -32,11 +32,37 @@ function App() { setTab(newTab); } + function toggleSidebar() { + setSidebar(!showSidebar); + } + return ( <>
+ + + + + {showSidebar && ( - + )}
{tab === TASKS_VIEW && } diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 8391e7f..85b7f12 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { motion } from "framer-motion"; -import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; const Sidebar = (props) => { const [isVisible, setIsVisible] = useState(true); @@ -12,6 +12,9 @@ const Sidebar = (props) => { setIsVisible(!isVisible); setIsSpinning(false); }, 200); + + // props.toggleSidebar(); + }; return ( @@ -20,8 +23,8 @@ const Sidebar = (props) => { className="sidebar" initial={{ scale: 0, opacity: 0 }} animate={{ - scale: isVisible? 1 : 0, - opacity: isVisible? 1 : 0, + scale: isVisible ? 1 : 0, + opacity: isVisible ? 1 : 0, transition: { duration: 0.2, ease: "easeInOut", @@ -34,7 +37,7 @@ const Sidebar = (props) => {
  • { props.toggleTab(tab.name); }} @@ -46,57 +49,11 @@ const Sidebar = (props) => { })} - - {isVisible? : } - - + + ); }; -export default Sidebar; \ No newline at end of file +export default Sidebar; diff --git a/src/views/TasksView/TaskGroup.jsx b/src/views/TasksView/TaskGroup.jsx index 4e12bad..c26f030 100644 --- a/src/views/TasksView/TaskGroup.jsx +++ b/src/views/TasksView/TaskGroup.jsx @@ -4,6 +4,7 @@ import { ROOT, TASK, TASK_GROUP } from "../../Constants"; import Task from "./Task"; import { DragDropContext } from "./DragDropContext"; + const TaskGroup = ({ id, name, children, onDelete }) => { const { handleOnDrop } = useContext(DragDropContext); From 32aff64b5b700fc9b1992e67ce46aeb9ec173132 Mon Sep 17 00:00:00 2001 From: Arnav Rajurkar Date: Wed, 26 Jun 2024 10:49:22 +0530 Subject: [PATCH 4/4] Fixed the sidebar button glitch --- src/App.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.css b/src/App.css index 55e0d3f..d65a485 100644 --- a/src/App.css +++ b/src/App.css @@ -141,6 +141,7 @@ ul { cursor: pointer; border-radius: 5px; box-shadow: 10px 10px 10px #000; + z-index: 1; } .sidebar-button:hover { filter: brightness(120%); @@ -468,6 +469,7 @@ ul { box-shadow: 6px 6px 7px #000; display: flex; align-items: center; + padding: 12px; } .task-btn:hover {