fix dock dnd

pennlabs · Feb 23, 2024 · f1ce7b0 · f1ce7b0
1 parent 535d0c7
commit f1ce7b0
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 40 deletions.
diff --git a/frontend/degree-plan/components/Dock/Dock.tsx b/frontend/degree-plan/components/Dock/Dock.tsx
@@ -26,6 +26,7 @@ const DockContainer = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
     width: 100%;
     display: flex;
     justify-content: left;
+    padding: 1rem 1rem;
 `
 
 const Divider = styled.div`
@@ -51,8 +52,11 @@ const DockedCoursesWrapper = styled.div`
 // border-color: grey;
 
 const DockedCourses = styled.div`
+    height: 100%;
     display: flex;
     flex-direction: row;
+    gap: 1rem;
+    padding: 0.1rem;
 `
 
 interface IDock {
@@ -88,18 +92,18 @@ const Dock = ({setSearchClosed, setReqId}: IDock) => {
                 <DockerElm>
                     <SearchIconContainer onClick={() => {setSearchClosed(false); setReqId(-1);}}>
                         <DarkGrayIcon>
-                        <i class="fas fa-search fa-lg"/>
+                        <i className="fas fa-search fa-lg"/>
                         </DarkGrayIcon>
                     </SearchIconContainer>
                 </DockerElm>
                 <Divider/>
-                    <DockedCoursesWrapper>
-                        <DockedCourses >
-                            {dockedCourses.map((full_code, i) => 
-                                <DockedCourse removeDockedCourse={removeDockedCourse} full_code={full_code}/>
-                            )}
-                        </DockedCourses>
-                    </DockedCoursesWrapper>
+                <DockedCoursesWrapper>
+                    <DockedCourses>
+                        {dockedCourses.map((full_code, i) => 
+                            <DockedCourse removeDockedCourse={removeDockedCourse} full_code={full_code}/>
+                        )}
+                    </DockedCourses>
+                </DockedCoursesWrapper>
             </DockContainer>
         </DockWrapper>
     )

diff --git a/frontend/degree-plan/components/Dock/DockedCourse.tsx b/frontend/degree-plan/components/Dock/DockedCourse.tsx
@@ -1,17 +1,53 @@
 
 
 import React from "react";
-import { BaseCourseContainer, RemoveCourseButton } from '../FourYearPlan/CoursePlanned';
 import { GrayIcon } from '@/components/common/bulma_derived_components';
 import { useDrag } from 'react-dnd';
 import styled from '@emotion/styled';
 import { ItemTypes } from '../dnd/constants';
 import { Draggable } from "../common/DnD";
+import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
+
+const BaseCourseContainer = styled.span<{ $isDragging?: boolean, $isDepressed: boolean, $isDisabled: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 70px;
+  background: #F2F3F4;
+  margin: 0px 6px;
+  border-radius: 0px;
+  padding: 0rem 2rem;
+  text-wrap: nowrap;
+  color: ${props => props.$isDisabled ? "rgba(0, 0, 0, .6)" : "#000"};
+  cursor: ${props => props.$isDisabled || props.$isDepressed ? "not-allowed" : "grab"};
+  opacity: ${props => props.$isDragging ? 0.5 : 1};
+  background-color: ${props => props.$isDragging ? "#4B9AE7" : props.$isDepressed ? "var(--primary-color)" : "#F2F3F4"};
+`;
+
+const DockedCourseContainer = styled(BaseCourseContainer)`
+    height: 100%;
+  position: relative;
+  opacity: ${props => props.$isDragging ? 0.5 : 1};
+
+  .close-button {
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: 0; 
+    bottom: 0; 
+    margin-top: auto; 
+    margin-bottom: auto;
+    height: 1.5rem;
+  }
+
+  &:hover {
+    .close-button {
+      display: unset;
+    }
+  }
+`;
+
 
-const DockedCourseContainer = styled.div`
-    margin: 1px;
-    position: relative;
-`
 const DockedCourse = ({removeDockedCourse, full_code}: any) => {
     const [mouseOver, setMouseOver] = React.useState(false);
 
@@ -26,20 +62,21 @@ const DockedCourse = ({removeDockedCourse, full_code}: any) => {
     }))
 
     return (
-        <Draggable isDragging={isDragging}>
-            <DockedCourseContainer
-                key={full_code}     
-                ref={drag}
-                onMouseOver={() => setMouseOver(true)} 
-                onMouseLeave={() => setMouseOver(false)}>
-                <BaseCourseContainer>
-                    <span>{full_code.replace(/-/g, " ")}</span>
-                    <RemoveCourseButton hidden={!mouseOver} onClick={() => removeDockedCourse(full_code)}>
-                        <GrayIcon><i className="fas fa-times"></i></GrayIcon>
-                    </RemoveCourseButton>
-                </BaseCourseContainer>
-            </DockedCourseContainer>
-        </Draggable>
+        <DockedCourseContainer
+        $isDragging={isDragging}
+        $isDepressed={false}
+        $isDisabled={false}
+        ref={drag} 
+        >
+            <Draggable isDragging={isDragging} >
+                <ReviewPanelTrigger full_code={full_code}>
+                <div> {full_code.replace(/-/g, " ")}</div>
+                </ReviewPanelTrigger>
+            </Draggable>
+            <GrayIcon className="close-button" onClick={() => removeDockedCourse(full_code)}>
+                <i className="fas fa-times"></i>
+            </GrayIcon>
+        </DockedCourseContainer>
     )
 }
 

diff --git a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
@@ -70,7 +70,7 @@ const CoursePlanned = ({ fulfillment, semester, removeCourse } : CoursePlannedPr
       >
       <Draggable isDragging={isDragging} >
           <ReviewPanelTrigger full_code={fulfillment.full_code}>
-            <div> {fulfillment.full_code}</div>
+            <div> {fulfillment.full_code}</div> 
           </ReviewPanelTrigger>
       </Draggable>
       <GrayIcon className="close-button" onClick={() => {removeCourse(fulfillment.full_code);}}>

diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -12,11 +12,14 @@ import { Draggable } from "../common/DnD";
 import { useSWRCrud } from "@/hooks/swrcrud";
 import useSWR from "swr";
 
-const interpolate = <T,>(arr: T[], separator: T) => arr.flatMap(
-    (elem, index) => index < arr.length - 1 ? 
-    [elem, separator] 
-    : [elem]
-)
+const interpolate = <T,>(arr: T[], separator: T) => 
+    <QObjectWrapper>
+    {arr.flatMap(
+        (elem, index) => index < arr.length - 1 ? 
+        [elem, separator] 
+        : [elem]
+    )}
+    </QObjectWrapper>
 
 
 type ConditionKey = "full_code" | "semester" | "attributes__code__in" | "department__code" | "full_code__startswith" | "code__gte" | "code__lte" | "department__code__in" 
@@ -199,10 +202,11 @@ const SearchCondition = ({ q, fulfillments, ruleIsSatisfied, ruleId, setSearchCl
 }
 
 const CourseOptionsSeparator = styled.div`
-    font-size: .8rem;
+    font-size: 1rem;
     text-transform: uppercase;
     color: #575757;
     font-weight: 500;
+    margin: 8px 0px;
 `;
 
 const transformCourseClauses = (q: ParsedQObj): ParsedQObj => {
@@ -306,7 +310,9 @@ const QObject = ({ q, fulfillments, rule, satisfied, handleSearch }: QObjectProp
 }
 
 const QObjectWrapper = styled.div`
-
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
 `
 
 interface RuleLeafProps { 
@@ -327,10 +333,7 @@ const RuleLeaf = ({ q, activeDegreePlanId, fulfillmentsForRule, rule, satisfied,
     const t2 = transformCourseClauses(t1);
     const t3 = transformSearchConditions(t2)
     parsed = t3 as TransformedQObject;
-    return (
-        <QObjectWrapper>
-            <QObject q={parsed} fulfillments={fulfillmentsForRule} rule={rule} satisfied={satisfied} handleSearch={handleSearch}/>
-        </QObjectWrapper>
+    return (<QObject q={parsed} fulfillments={fulfillmentsForRule} rule={rule} satisfied={satisfied} handleSearch={handleSearch}/>
     )
 
 }

diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
@@ -23,7 +23,7 @@
   --selected-color: #967BB6;
 
   /* Requirement */
-  --req-item-radius: 4px;
+  --req-item-radius: 5px;
 
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,