From 28aae259f0cdb774e72a2ecf79e3addfe0db990a Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 31 Jul 2020 00:57:22 +0800
Subject: Add sync state badge.

---
 Timeline/ClientApp/src/app/timeline/Timeline.tsx   |  5 +-
 .../src/app/timeline/TimelinePageTemplateUI.tsx    | 66 +++++++++++++++++++---
 .../ClientApp/src/app/timeline/timeline-ui.sass    | 18 ++++++
 Timeline/ClientApp/src/app/timeline/timeline.sass  |  6 ++
 4 files changed, 83 insertions(+), 12 deletions(-)

(limited to 'Timeline/ClientApp/src/app/timeline')

diff --git a/Timeline/ClientApp/src/app/timeline/Timeline.tsx b/Timeline/ClientApp/src/app/timeline/Timeline.tsx
index 849933cf..7c3a93fb 100644
--- a/Timeline/ClientApp/src/app/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/app/timeline/Timeline.tsx
@@ -53,10 +53,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   return (
     <div
       ref={props.containerRef}
-      className={clsx(
-        'container-fluid d-flex flex-column position-relative',
-        props.className
-      )}
+      className={clsx('container-fluid timeline', props.className)}
     >
       <div className="timeline-enter-animation-mask" />
       {(() => {
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 3c8e312c..0d8ad278 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -8,7 +8,7 @@ import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract
 import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';
 
 import { getAlertHost } from '../common/alert-service';
-import { useEventEmiiter } from '../common';
+import { useEventEmiiter, UiLogicError } from '../common';
 import {
   TimelineInfo,
   TimelinePostListState,
@@ -23,6 +23,53 @@ import Timeline, {
 import AppBar from '../common/AppBar';
 import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
 
+const TimelinePostSyncStateBadge: React.FC<{
+  state: 'syncing' | 'synced' | 'offline';
+}> = ({ state }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="timeline-sync-state-badge">
+      {(() => {
+        switch (state) {
+          case 'syncing': {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-warning" />
+                <span className="text-warning">
+                  {t('timeline.postSyncState.syncing')}
+                </span>
+              </>
+            );
+          }
+          case 'synced': {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-success" />
+                <span className="text-success">
+                  {t('timeline.postSyncState.synced')}
+                </span>
+              </>
+            );
+          }
+          case 'offline': {
+            return (
+              <>
+                <span className="timeline-sync-state-badge-pin bg-danger" />
+                <span className="text-danger">
+                  {t('timeline.postSyncState.offline')}
+                </span>
+              </>
+            );
+          }
+          default:
+            throw new UiLogicError('Unknown sync state.');
+        }
+      })()}
+    </div>
+  );
+};
+
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
   onManage?: (item: TManageItems | 'property') => void;
@@ -147,7 +194,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
   } else {
     if (timeline != null) {
       let timelineBody: React.ReactElement;
-      if (postListState != null) {
+      if (postListState != null && postListState.state !== 'loading') {
         if (postListState.state === 'forbid') {
           timelineBody = (
             <p className="text-danger">{t('timeline.messageCantSee')}</p>
@@ -165,12 +212,15 @@ export default function TimelinePageTemplateUI<TManageItems>(
           );
 
           timelineBody = (
-            <Timeline
-              containerRef={timelineRef}
-              posts={posts}
-              onDelete={props.onDelete}
-              onResize={triggerResizeEvent}
-            />
+            <div className="position-relative">
+              <TimelinePostSyncStateBadge state={postListState.state} />
+              <Timeline
+                containerRef={timelineRef}
+                posts={posts}
+                onDelete={props.onDelete}
+                onResize={triggerResizeEvent}
+              />
+            </div>
           );
           if (props.onPost != null) {
             timelineBody = (
diff --git a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
index b92327bd..952e4659 100644
--- a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
@@ -16,3 +16,21 @@
 .timeline-page-top-space
   transition: height 0.5s
 
+.timeline-sync-state-badge
+  position: absolute
+  top: 0
+  right: 0
+  z-index: 1
+  font-size: 0.8em
+  margin-top: 4px
+  padding: 3px 8px
+  border-radius: 5px
+  background: #e8fbff
+
+.timeline-sync-state-badge-pin
+  display: inline-block
+  width: 0.4em
+  height: 0.4em
+  border-radius: 50%
+  vertical-align: middle
+  margin-right: 0.6em
diff --git a/Timeline/ClientApp/src/app/timeline/timeline.sass b/Timeline/ClientApp/src/app/timeline/timeline.sass
index 4f69295b..b224e973 100644
--- a/Timeline/ClientApp/src/app/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline.sass
@@ -1,5 +1,11 @@
 @use 'sass:color'
 
+.timeline
+  display: flex
+  flex-direction: column
+  z-index: 0
+  position: relative
+
 @keyframes timeline-enter-animation-mask-animation
   to
     height: 0
-- 
cgit v1.2.3