Merge pull request #356 from shesha-io/fix/ps/date-and-icon-spacing-o…

…n-timeline Fix/ps/date and icon spacing on timeline
shesha-io · Jul 4, 2023 · 188ac50 · 188ac50
2 parents 1b51a3f + 1f39670
commit 188ac50
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/shesha-reactjs/src/components/timeline/index.tsx b/shesha-reactjs/src/components/timeline/index.tsx
@@ -6,6 +6,8 @@ import { EntitiesGetAllQueryParams, useEntitiesGetAll } from 'apis/entities';
 import { useGlobalState } from 'providers';
 import { ITimelineProps } from './models';
 import { TimelineItem } from './timelineItem';
+import './styles/styles.less';
+
 import moment from 'moment';
 
 export const ShaTimeline: FC<ITimelineProps> = ({ properties, ownerId, entityType, customApiUrl, apiSource }) => {
@@ -62,7 +64,7 @@ export const ShaTimeline: FC<ITimelineProps> = ({ properties, ownerId, entityTyp
   return (
     <Spin spinning={isFetchingEntities}>
       {(!sortedTimelineData?.length && <Empty description="Empty timeline" />) || (
-        <Timeline>
+        <Timeline className="sha-timeline">
           {sortedTimelineData?.map(({ title, body, fromPerson, actionDate, channel }) => {
             return (
               <TimelineItem

diff --git a/shesha-reactjs/src/components/timeline/styles/styles.less b/shesha-reactjs/src/components/timeline/styles/styles.less
@@ -0,0 +1,20 @@
+.sha-timeline {
+    height: 50vh;
+    overflow-y: scroll;
+
+    .sha-timeline-item {
+        margin-left: 10px;
+        margin-top: 10px;
+    }
+
+    .sha-timeline-extra {
+        color : gray
+    }
+
+}
+
+.ant-col-13 {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
diff --git a/shesha-reactjs/src/components/timeline/timelineItem/index.tsx b/shesha-reactjs/src/components/timeline/timelineItem/index.tsx
@@ -5,14 +5,15 @@ import { getTimelineIcon } from '../../../utils/timelineIcon';
 import { ITimelineItemProps } from '../models';
 import { getTimelineTitle } from 'utils/timelinetitle';
 
+import '../styles/styles.less';
+
 export const TimelineItem: FC<ITimelineItemProps> = ({ title, channel, toPerson, body, actionDate }) => {
   return (
-    <Timeline.Item dot={getTimelineIcon(channel)}>
+    <Timeline.Item className="sha-timeline-item" dot={getTimelineIcon(channel)}>
       <Card
         extra={
-          <small style={{ color: 'gray' }}>
-            <ClockCircleOutlined />
-            {actionDate}
+          <small className="sha-timeline-extra">
+            <ClockCircleOutlined /> {' ' + actionDate}
           </small>
         }
         title={