Merge pull request #162 from crupest/front

Add timeline title to front end.

12 files changed, 47 insertions, 20 deletions

diff --git a/FrontEnd/src/app/http/timeline.ts b/FrontEnd/src/app/http/timeline.ts
index eb7d5065..71c49852 100644
--- a/FrontEnd/src/app/http/timeline.ts
+++ b/FrontEnd/src/app/http/timeline.ts
@@ -23,6 +23,7 @@ export type TimelineVisibility = typeof kTimelineVisibilities[number];
 
 export interface HttpTimelineInfo {
   uniqueId: string;
+  title: string;
   name: string;
   description: string;
   owner: HttpUser;
@@ -95,6 +96,7 @@ export interface HttpTimelinePostPostRequest {
 }
 
 export interface HttpTimelinePatchRequest {
+  title?: string;
   visibility?: TimelineVisibility;
   description?: string;
 }
@@ -121,6 +123,7 @@ export class HttpTimelineNameConflictError extends Error {
 
 interface RawTimelineInfo {
   uniqueId: string;
+  title: string;
   name: string;
   description: string;
   owner: HttpUser;
diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 8e87e4ac..0202e633 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -50,9 +50,9 @@ textarea
 .cru-card

   @extend .shadow

   @extend .border

-  @extend .border-primary

   @extend .rounded

   @extend .bg-light

+  border-color: $gray-200

 

 .full-viewport-center-child

   position: fixed

diff --git a/FrontEnd/src/app/locales/en/translation.ts b/FrontEnd/src/app/locales/en/translation.ts
index c7f33d1e..d88a3376 100644
--- a/FrontEnd/src/app/locales/en/translation.ts
+++ b/FrontEnd/src/app/locales/en/translation.ts
@@ -74,6 +74,7 @@ const translation: TranslationResource = {
     },
     dialogChangeProperty: {
       title: "Change Timeline Properties",
+      titleField: "Title",
       visibility: "Visibility",
       description: "Description",
     },
diff --git a/FrontEnd/src/app/locales/scheme.ts b/FrontEnd/src/app/locales/scheme.ts
index 9e3534ac..dcb478cc 100644
--- a/FrontEnd/src/app/locales/scheme.ts
+++ b/FrontEnd/src/app/locales/scheme.ts
@@ -65,6 +65,7 @@ export default interface TranslationResource {
     };
     dialogChangeProperty: {
       title: string;
+      titleField: string;
       visibility: string;
       description: string;
     };
diff --git a/FrontEnd/src/app/locales/zh/translation.ts b/FrontEnd/src/app/locales/zh/translation.ts
index df316366..71f0d9fc 100644
--- a/FrontEnd/src/app/locales/zh/translation.ts
+++ b/FrontEnd/src/app/locales/zh/translation.ts
@@ -70,6 +70,7 @@ const translation: TranslationResource = {
     },
     dialogChangeProperty: {
       title: "修改时间线属性",
+      titleField: "标题",
       visibility: "可见性",
       description: "描述",
     },
diff --git a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx b/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
index 29f6a69f..19b9fee5 100644
--- a/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
+++ b/FrontEnd/src/app/views/common/UserTimelineLogo.tsx
@@ -15,7 +15,7 @@ const UserTimelineLogo: React.FC<UserTimelineLogoProps> = (props) => {
         <circle cx="50" cy="50" r="22" />
         <line x1="50" x2="50" y1="75" y2="100" />
       </g>
-      <g fill={color}>
+      <g fill={coercedColor}>
         <circle cx="85" cy="75" r="10" />
         <path d="m70,100c0,0 15,-30 30,0.25" />
       </g>
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index a3d176e1..c2a7e5fe 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -48,20 +48,21 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
           );
         } else {
           return timelines.map((timeline) => {
-            const { name } = timeline;
+            const { name, title } = timeline;
             const isPersonal = name.startsWith("@");
             const url = isPersonal
               ? `/users/${timeline.owner.username}`
               : `/timelines/${name}`;
             return (
-              <div key={name} className="timeline-board-item">
+              <Link key={name} to={url} className="timeline-board-item">
                 {isPersonal ? (
                   <UserTimelineLogo className="icon" />
                 ) : (
                   <TimelineLogo className="icon" />
                 )}
-                <Link to={url}>{name}</Link>
-              </div>
+                {title}
+                <small className="ml-2 text-secondary">{name}</small>
+              </Link>
             );
           });
         }
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 28a2e5f3..0c01019b 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -1,13 +1,18 @@
-.timeline-board-item

-  font-size: 1.1em

-  @extend .my-2

-  .icon

-    height: 1.3em

-    @extend .mr-2

-

 .timeline-board

   @extend .cru-card

   @extend .d-flex

   @extend .flex-column

-  @extend .p-3

+  @extend .py-3

   min-height: 200px

+

+.timeline-board-item

+  font-size: 1.1em

+  @extend .px-3

+  @extend .py-2

+  transition: background 0.3s

+  .icon

+    height: 1.3em

+    color: black

+    @extend .mr-2

+  &:hover

+    background: $gray-300

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index d5c91622..0f792b53 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -76,6 +76,7 @@ export default function TimelinePageTemplate<TManageItem>(
         open
         close={closeDialog}
         oldInfo={{
+          title: timeline.title,
           visibility: timeline.visibility,
           description: timeline.description,
         }}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index 87638f31..223525f9 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -11,6 +11,7 @@ import OperationDialog, {
 } from "../common/OperationDialog";
 
 export interface TimelinePropertyInfo {
+  title: string;
   visibility: TimelineVisibility;
   description: string;
 }
@@ -37,6 +38,11 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
       titleColor="default"
       inputScheme={[
         {
+          type: "text",
+          label: "timeline.dialogChangeProperty.titleField",
+          initValue: props.oldInfo.title,
+        },
+        {
           type: "select",
           label: "timeline.dialogChangeProperty.visibility",
           options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(
@@ -55,8 +61,11 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
       ]}
       open={props.open}
       close={props.close}
-      onProcess={([newVisibility, newDescription]) => {
+      onProcess={([newTitle, newVisibility, newDescription]) => {
         const req: TimelineChangePropertyRequest = {};
+        if (newTitle !== props.oldInfo.title) {
+          req.title = newTitle as string;
+        }
         if (newVisibility !== props.oldInfo.visibility) {
           req.visibility = newVisibility as TimelineVisibility;
         }
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index 2d787709..abc3d0c9 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -37,10 +37,11 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
       toggleCollapse={toggleCollapse}
     >
       <h3 className="text-primary mx-3 d-inline-block align-middle">
-        {timeline.name}
+        {timeline.title}
+        <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
-      <div className="d-inline-block align-middle">
-        <BlobImage blob={avatar} className="avatar small rounded-circle" />
+      <div className="align-middle">
+        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{timeline.owner.username}
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index 888fb18a..e4edd80d 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -35,8 +35,12 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <div>
-        <BlobImage blob={avatar} className="avatar" />
+      <h3 className="text-primary mx-3 d-inline-block align-middle">
+        {timeline.title}
+        <small className="ml-3 text-secondary">{timeline.name}</small>
+      </h3>
+      <div className="align-middle">
+        <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
         <small className="ml-3 text-secondary">
           @{timeline.owner.username}