incorporting the new toolbar

prabhuignoto · Jan 31, 2024 · 820b791 · 820b791
1 parent fcf2dde
commit 820b791
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 15 deletions.
diff --git a/src/components/list/list.styles.ts b/src/components/list/list.styles.ts
@@ -7,25 +7,35 @@ export const ListStyle = styled.ul`
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 300px;
 `;
 
 export const ListItemStyle = styled.li`
   margin: 0;
-  padding: 1rem;
+  padding: 0.25rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 1rem;
+  width: 100%;
   &:last-child {
     margin-bottom: 0;
   }
+  border-radius: 4px;
+  background: #f5f5f5;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
 
   &:hover {
     cursor: pointer;
     background-color: #f5f5f5;
   }
 `;
 
-export const TitleStyle = styled.h1``;
+export const TitleStyle = styled.h1`
+  margin: 0.2rem 0;
+`;
 
-export const TitleDescriptionStyle = styled.p``;
+export const TitleDescriptionStyle = styled.p`
+  padding: 0.1rem;
+  margin: 0;
+`;
diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx
@@ -20,8 +20,8 @@ const ListItem: FunctionComponent<ListItemProps> = ({
 }) => {
   return (
     <ListItemStyle key={id}>
-      <TitleStyle></TitleStyle>
-      <TitleDescriptionStyle></TitleDescriptionStyle>
+      <TitleStyle>{title}</TitleStyle>
+      <TitleDescriptionStyle>{description} </TitleDescriptionStyle>
     </ListItemStyle>
   );
 };

diff --git a/src/components/popover/index.tsx b/src/components/popover/index.tsx
@@ -22,7 +22,6 @@ const PopOver: FunctionComponent<PopOverModel> = ({
   placeholder,
 }) => {
   const [open, setOpen] = useState(false);
-
   const toggleOpen = () => setOpen(!open);
 
   return (

diff --git a/src/components/popover/popover.styles.ts b/src/components/popover/popover.styles.ts
@@ -6,6 +6,13 @@ export const PopoverWrapper = styled.div``;
 export const PopoverHolder = styled.div<{ position: PopoverPosition }>`
   position: absolute;
   z-index: 100;
+  background: rgba(255, 255, 255, 1);
+  padding: 0.5rem;
+  box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  top: 3rem;
+  max-height: 300px;
+  overflow-y: auto;
 `;
 
 export const Selecter = styled.div`

diff --git a/src/components/timeline/timeline-toolbar.tsx b/src/components/timeline/timeline-toolbar.tsx
@@ -0,0 +1,107 @@
+import { TimelineModel, TimelineProps } from '@models/TimelineModel';
+import { FunctionComponent } from 'react';
+import { List } from '../list/list';
+import { PopOver } from '../popover';
+import TimelineControl from '../timeline-elements/timeline-control/timeline-control';
+import { Toolbar } from '../toolbar';
+
+export type TimelineToolbarProps = Pick<
+  TimelineModel,
+  | 'activeTimelineItem'
+  | 'slideShowEnabled'
+  | 'slideShowRunning'
+  | 'onRestartSlideshow'
+  | 'onNext'
+  | 'onPrevious'
+  | 'onPaused'
+  | 'onFirst'
+  | 'onLast'
+> & {
+  toggleDarkMode: () => void;
+  totalItems: number;
+  id: string;
+} & Pick<TimelineProps, 'darkMode' | 'flipLayout'>;
+
+const TimelineToolbar: FunctionComponent<TimelineToolbarProps> = ({
+  activeTimelineItem,
+  slideShowEnabled,
+  slideShowRunning,
+  darkMode,
+  flipLayout,
+  toggleDarkMode,
+  onPaused,
+  onFirst,
+  onLast,
+  onNext,
+  onPrevious,
+  onRestartSlideshow,
+  totalItems,
+  id,
+}) => {
+  return (
+    <Toolbar
+      items={[
+        {
+          name: 'timeline_control',
+          label: 'Timeline Controls',
+          content: (
+            <TimelineControl
+              disableLeft={
+                flipLayout
+                  ? activeTimelineItem === totalItems - 1
+                  : activeTimelineItem === 0
+              }
+              disableRight={
+                flipLayout
+                  ? activeTimelineItem === 0
+                  : activeTimelineItem === totalItems - 1
+              }
+              id={id}
+              onFirst={onFirst}
+              onLast={onLast}
+              onNext={onNext}
+              onPrevious={onPrevious}
+              onReplay={onRestartSlideshow}
+              slideShowEnabled={slideShowEnabled}
+              slideShowRunning={slideShowRunning}
+              isDark={darkMode}
+              onToggleDarkMode={toggleDarkMode}
+              onPaused={onPaused}
+            />
+          ),
+          onSelect: () => {},
+        },
+        {
+          name: 'popover',
+          label: 'timeline_popover',
+          content: (
+            <PopOver placeholder="Select a item" position="down">
+              <List
+                items={[
+                  {
+                    id: '1',
+                    title: 'test1',
+                    description: 'test1',
+                  },
+                  {
+                    id: '2',
+                    title: 'test2',
+                    description: 'test2',
+                  },
+                  {
+                    id: '3',
+                    title: 'test3',
+                    description: 'test3',
+                  },
+                ]}
+              />
+            </PopOver>
+          ),
+          onSelect: () => {},
+        },
+      ]}
+    />
+  );
+};
+
+export { TimelineToolbar };
diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx
@@ -14,12 +14,9 @@ import React, {
 import { GlobalContext } from '../GlobalContext';
 import { useMatchMedia } from '../effects/useMatchMedia';
 import useNewScrollPosition from '../effects/useNewScrollPosition';
-import { List } from '../list/list';
-import { PopOver } from '../popover';
-import TimelineControl from '../timeline-elements/timeline-control/timeline-control';
 import TimelineHorizontal from '../timeline-horizontal/timeline-horizontal';
 import TimelineVertical from '../timeline-vertical/timeline-vertical';
-import { Toolbar } from '../toolbar';
+import { TimelineToolbar } from './timeline-toolbar';
 import {
   Outline,
   TimelineContentRender,
@@ -364,11 +361,11 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
       }}
     >
       <ToolbarWrapper>
-        <Toolbar
+        {/* <Toolbar
           items={[
             {
-              name: 'test2',
-              label: 'test2',
+              name: 'timeline_control',
+              label: 'Timeline Controls',
               content: (
                 <TimelineControl
                   disableLeft={
@@ -397,8 +394,8 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
               onSelect: () => {},
             },
             {
-              name: 'test',
-              label: 'test',
+              name: 'popover',
+              label: 'timeline_popover',
               content: (
                 <PopOver placeholder="Select a item" position="down">
                   <List
@@ -425,6 +422,22 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
               onSelect: () => {},
             },
           ]}
+        /> */}
+        <TimelineToolbar
+          activeTimelineItem={activeTimelineItem}
+          totalItems={items.length}
+          slideShowEnabled={slideShowEnabled}
+          slideShowRunning={slideShowRunning}
+          onFirst={handleFirst}
+          onLast={handleLast}
+          onNext={handleNext}
+          onPrevious={handlePrevious}
+          onRestartSlideshow={onRestartSlideshow}
+          darkMode={darkMode}
+          toggleDarkMode={toggleDarkMode}
+          onPaused={onPaused}
+          id={id.current}
+          flipLayout={flipLayout}
         />
       </ToolbarWrapper>
       <TimelineMainWrapper