SAK-44682 Re add storybook data, styles and i18n (sakaiproject#8821)

https://jira.sakaiproject.org/browse/SAK-44682
chengjingfeng · Nov 25, 2020 · 298f9f1 · 298f9f1
1 parent ee2f558
commit 298f9f1
Show file tree

Hide file tree

Showing 43 changed files with 3,133 additions and 140 deletions.
diff --git a/library/src/morpheus-master/sass/themes/_light.scss b/library/src/morpheus-master/sass/themes/_light.scss
@@ -478,8 +478,11 @@
     --sakai-calendar-button-bg-color: var(--button-background);
     --sakai-calendar-button-color: var(--button-text-color);
     --sakai-calendar-button-disabled-bg-color: var(--button-disabled-background);
-
-
+    --sakai-calendar-today-bg: yellow;
+    --sakai-calendar-today-fg: black;
+    --sakai-calendar-has-events-fg: white;
+    --sakai-calendar-has-events-bg: green;
+    --sakai-calendar-has-events-fg: white;
 }
 
 // Tables

diff --git a/webcomponents/tool/src/main/frontend/.gitignore b/webcomponents/tool/src/main/frontend/.gitignore
@@ -3,5 +3,8 @@
 !src/**/*.js
 !conf/*.js
 !stories/*.js
+!stories/i18n/*.js
+!stories/data/*.js
+!stories/styles/*.js
 !.storybook/*.js
 !test/*
diff --git a/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar-create-event.js b/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar-create-event.js
@@ -10,14 +10,14 @@ class SakaiCalendarCreateEvent extends SakaiDialogContent {
 
   static get styles() {
 
-    return css`
-      ${SakaiDialogContent.styles}
+    return [SakaiDialogContent.styles,
+      css`
 
         .frequency-options {
           margin-top: 10px;
           margin-left: 20px;
         }
-    `;
+    `];
   }
 
   constructor() {
@@ -40,7 +40,7 @@ class SakaiCalendarCreateEvent extends SakaiDialogContent {
   }
 
   shouldUpdate(changed) {
-    return this.i18n;
+    return this.i18n && super.shouldUpdate(changed);
   }
 
   add() {

diff --git a/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar.js b/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar.js
@@ -31,6 +31,10 @@ export class SakaiCalendar extends LionCalendar {
     loadProperties("calendar").then(r => this.i18n = r);
     this.daysEvents = [];
 
+    this.events = [];
+
+    this.readOnly = true;
+
     this.addEventListener("user-selected-date-changed", e => {
 
       let time = e.detail.selectedDate.getTime();
@@ -73,13 +77,13 @@ export class SakaiCalendar extends LionCalendar {
 
     this.shadowRoot.querySelectorAll(".calendar__day-button").forEach(c => {
 
-      c.classList.remove("has-event");
+      c.classList.remove("has-events");
       c.classList.remove("deadline");
 
       let time = c.date.getTime();
       let e = this.events.find(e => e.start > time && e.start < (time + 24*60*60*1000));
       if (e) {
-        c.classList.add("has-event");
+        c.classList.add("has-events");
         if (e.type === "deadline") {
           c.classList.add("deadline");
         }
@@ -159,11 +163,6 @@ export class SakaiCalendar extends LionCalendar {
       .sakai-event {
         font-size: 14px;
       }
-      .has-event {
-        background-color: var(--sakai-color-green--darker-3);
-        color: var(--sakai-color-green--lighter-7);
-        border-radius: 50%;
-      }
 
       .deadline {
         background-color: var(--sakai-calendar-deadline-bg-color);
@@ -181,14 +180,23 @@ export class SakaiCalendar extends LionCalendar {
       }
 
       .calendar__day-button[today] {
+        background-color: var(--sakai-calendar-today-bg);
+        color: var(--sakai-calendar-today-fg);
         font-weight: bold;
+        border-radius: 50%;
       }
       .calendar__previous-month-button,
       .calendar__next-month-button,
       .calendar__day-button {
         background-color: var(--sakai-calendar-button-bg-color, #fff);
       }
 
+      .has-events {
+        background-color: var(--sakai-calendar-has-events-bg);
+        color: var(--sakai-calendar-has-events-fg);
+        border-radius: 50%;
+      }
+
       .calendar__day-button[previous-month],
       .calendar__day-button[next-month] {
         color: var(--sakai-calendar-button-color, rgb(115, 115, 115));

diff --git a/webcomponents/tool/src/main/frontend/js/imageeditor/sakai-image-editor.js b/webcomponents/tool/src/main/frontend/js/imageeditor/sakai-image-editor.js
@@ -15,7 +15,7 @@ export class SakaiImageEditor extends SakaiDialogContent {
   constructor() {
 
     super();
-    this.loadProperties({bundle: "image-editor", debug: true}).then(r => this.i18n = r);
+    this.loadProperties("image-editor").then(r => this.i18n = r);
   }
 
   title() {

diff --git a/webcomponents/tool/src/main/frontend/js/sakai-options-menu.js b/webcomponents/tool/src/main/frontend/js/sakai-options-menu.js
@@ -96,15 +96,15 @@ export class SakaiOptionsMenu extends LitElement {
     return css`
       ::slotted(div) {
         visibility: hidden;
-        background-color: var(--sakai-options-menu-background-color, white);
+        background-color: var(--sakai-options-menu-background-color, yellow);
         border-width: var(--sakai-options-menu-border-width, 1px);
         border-style: var(--sakai-options-menu-border-style, solid);
         border-color: var(--sakai-options-menu-border-color, black);
         font-family: var(--sakai-font-family, roboto, arial, sans-serif);
         padding: 5px;
       }
       #invoker {
-        color: var(--sakai-options-menu-invoker-color, white);
+        color: var(--sakai-options-menu-invoker-color, black);
       }
     `;
   }

diff --git a/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks-create-task.js b/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks-create-task.js
@@ -111,7 +111,7 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
   }
 
   shouldUpdate(changed) {
-    return this.task && this.i18n;
+    return this.task && this.i18n && super.shouldUpdate(changed);
   }
 
   getEditorTag() {
@@ -142,7 +142,6 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
     super.connectedCallback();
 
     if (typeof CKEDITOR !== "undefined") {
-      console.log("hserer");
       return this.getEditorTag().attachEditor();
     }
   }
@@ -212,29 +211,28 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
 
   static get styles() {
 
-    return css`
-      ${SakaiDialogContent.styles}
-
-      #due-and-priority-block {
-        display: flex;
-        justify-content: space-between;
-      }
-        #due-block {
-          flex: 1;
-        }
-        #spacer {
-          flex: 2;
+    return [SakaiDialogContent.styles,
+      css`
+        #due-and-priority-block {
+          display: flex;
+          justify-content: space-between;
         }
-        #priority-block {
-          flex: 1;
+          #due-block {
+            flex: 1;
+          }
+          #spacer {
+            flex: 2;
+          }
+          #priority-block {
+            flex: 1;
+          }
+        #complete-block {
+          margin-bottom: 10px;
         }
-      #complete-block {
-        margin-bottom: 10px;
-      }
-        #complete-block input {
-          margin-left: 10px;
-        }
-    `;
+          #complete-block input {
+            margin-left: 10px;
+          }
+    `];
   }
 }
 

diff --git a/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks.js b/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks.js
@@ -26,7 +26,7 @@ export class SakaiTasks extends LitElement {
     super();
     this.tasks = [];
     this.currentFilter = "none";
-    loadProperties("tasks").then(r => this.i18n = r);;
+    loadProperties("tasks").then(r => this.i18n = r);
   }
 
   set tasks(value) {
@@ -74,7 +74,7 @@ export class SakaiTasks extends LitElement {
         if (r.ok) {
           return r.json();
         } else {
-          throw new Error(`Failed to get tasks.json from ${url}`);
+          throw new Error(`Failed to get tasks from ${url}`);
         }
       })
       .then(data => {
@@ -253,8 +253,6 @@ export class SakaiTasks extends LitElement {
 
   taskCreated(e) {
 
-    //e.detail.task.due = e.detail.task.due * 1000;
-
     let existingIndex = this.tasks.findIndex(t => t.taskId == e.detail.task.taskId);
 
     if (existingIndex === -1) {
@@ -402,7 +400,7 @@ export class SakaiTasks extends LitElement {
     return css`
 
       #container {
-        font-family: var(--sakai-font-family);
+        /*font-family: var(--sakai-font-family);*/
         background-color: var(--sakai-dashboard-widget-bg-color, white);
         padding: 8px;
       }

diff --git a/webcomponents/tool/src/main/frontend/stories/data/calendar-data.js b/webcomponents/tool/src/main/frontend/stories/data/calendar-data.js
@@ -0,0 +1,70 @@
+export var calendarData = `
+[
+  {
+    "id":"bc330d62-c6b0-434e-83d9-af7f1ece890a",
+    "siteId":"",
+    "siteTitle":"Playpen",
+    "creator":"8667b7bb-f0f8-41e4-bc91-35b76d4b199e",
+    "creatorDisplayName":"Adrian Fish",
+    "viewText":"Hi all",
+    "title":"The 16th",
+    "tool":"assignments",
+    "type":"Activity",
+    "assignmentId":"",
+    "start":1605560400000,
+    "duration":3600000,
+    "attachments":[],
+    "recurrence":{
+      "count":0,
+      "frequency":null,
+      "interval":0,
+      "until":0
+    },
+    "url":null
+  },
+  {
+    "id":"8a63cc48-c996-46d6-b0f8-8de297ce5c5f",
+    "siteId":"",
+    "siteTitle":"Playpen",
+    "creator":"8667b7bb-f0f8-41e4-bc91-35b76d4b199e",
+    "creatorDisplayName":"Adrian Fish",
+    "viewText":"Assignment Assessment for the 23rd is due on 23-Nov-2020 18:30.",
+    "title":"Due Assessment for the 23rd",
+    "tool":"assignments",
+    "type":"Deadline",
+    "assignmentId":"fa7eb892-5812-492e-9a03-3f0feb4aabfe",
+    "start":1606156200000,
+    "duration":0,
+    "attachments":[],
+    "recurrence": {
+      "count":0,
+      "frequency":null,
+      "interval":0,
+      "until":0
+    },
+    "url":"http://localhost/portal/directtool/8259c5d9-b837-410d-99d8-d499e4a4a345?assignmentId=/assignment/a/1ab62f69-25e6-417c-9f58-2e29c9814d55/fa7eb892-5812-492e-9a03-3f0feb4aabfe&panel=Main&sakai_action=doView_assignment"
+  },
+  {
+    "id":"77a09f11-06a6-41c5-8745-0ee8d7734048",
+    "siteId":"",
+    "siteTitle":"Playpen",
+    "creator":"8667b7bb-f0f8-41e4-bc91-35b76d4b199e",
+    "creatorDisplayName":"Adrian Fish",
+    "viewText":"Hulloballo",
+    "title":"The 25th",
+    "tool":"assignments",
+    "type":"Activity",
+    "assignmentId":"",
+    "start":1606309200000,
+    "duration":3600000,
+    "attachments":[],
+    "recurrence":{
+      "count":0,
+      "frequency":null,
+      "interval":0,
+      "until":0
+    },
+    "url":null
+  }
+]
+`;
diff --git a/webcomponents/tool/src/main/frontend/stories/data/course-announcements-data.js b/webcomponents/tool/src/main/frontend/stories/data/course-announcements-data.js
@@ -0,0 +1,28 @@
+export let announcementsData = `
+[
+  {
+    "id":"3a184da1-de7b-4587-870a-8fc65948d6cc",
+    "siteId":"1ab62f69-25e6-417c-9f58-2e29c9814d55",
+    "siteTitle":"Playpen",
+    "subject":"yoooooo",
+    "author":"Adrian Fish",
+    "url":"http://localhost/portal/directtool/a3b05fbc-e2e1-4103-b94b-b9f17e402630?itemReference=/announcement/msg/1ab62f69-25e6-417c-9f58-2e29c9814d55/main/3a184da1-de7b-4587-870a-8fc65948d6cc&sakai_action=doShowmetadata"
+  },
+  {
+    "id":"6cbe23ca-d9a4-40c7-a170-baf4a03e232f",
+    "siteId":"1ab62f69-25e6-417c-9f58-2e29c9814d55",
+    "siteTitle":"Playpen",
+    "subject":"fafsdfsdF",
+    "author":"Adrian Fish",
+    "url":"http://localhost/portal/directtool/a3b05fbc-e2e1-4103-b94b-b9f17e402630?itemReference=/announcement/msg/1ab62f69-25e6-417c-9f58-2e29c9814d55/main/6cbe23ca-d9a4-40c7-a170-baf4a03e232f&sakai_action=doShowmetadata"
+  },
+  {
+    "id":"ddb0155b-5ea5-4248-b8c9-88610d106f27",
+    "siteId":"1ab62f69-25e6-417c-9f58-2e29c9814d55",
+    "siteTitle":"Playpen",
+    "subject":"gssdfsdf",
+    "author":"Adrian Fish",
+    "url":"http://localhost/portal/directtool/a3b05fbc-e2e1-4103-b94b-b9f17e402630?itemReference=/announcement/msg/1ab62f69-25e6-417c-9f58-2e29c9814d55/main/ddb0155b-5ea5-4248-b8c9-88610d106f27&sakai_action=doShowmetadata"
+  }
+]
+`;
diff --git a/webcomponents/tool/src/main/frontend/stories/data/course-dashboard-data.js b/webcomponents/tool/src/main/frontend/stories/data/course-dashboard-data.js
@@ -0,0 +1,31 @@
+export let dashboardData = `
+{
+  "givenName":null,
+  "motd":null,
+  "title":"Playpen",
+  "worksiteSetupUrl":null,
+  "widgets":[
+    "tasks",
+    "announcements",
+    "calendar",
+    "forums",
+    "grades"
+  ],
+  "editable":true,
+  "layout":[
+    "calendar",
+    "forums",
+    "grades",
+    "announcements"
+  ],
+  "overview":"",
+  "programme":null,
+  "template":2,
+  "defaultWidgetLayouts":{
+    "1":["calendar","announcements","grades"],
+    "2":["calendar","forums","grades","announcements"],
+    "3":["calendar","announcements","grades","forums"]
+  },
+  "image":"/webcomponents/images/central_park_lamp.jpg"
+}
+`;
diff --git a/webcomponents/tool/src/main/frontend/stories/data/course-grades-data.js b/webcomponents/tool/src/main/frontend/stories/data/course-grades-data.js
@@ -0,0 +1,12 @@
+export let gradesData = `
+[
+  {
+    "id":5,
+    "name":"rubric",
+    "averageScore":6.3,
+    "ungraded":1,
+    "url":"/portal/directtool/7755f401-ea1e-4bbb-83e6-9d89e39726c2",
+    "siteTitle":"Playpen"
+  }
+]
+`;
diff --git a/webcomponents/tool/src/main/frontend/stories/data/forums-data.js b/webcomponents/tool/src/main/frontend/stories/data/forums-data.js
@@ -0,0 +1,11 @@
+export var forumsData = `
+[
+  {
+    "messageCount":0,
+    "siteTitle":"Playpen",
+    "siteId":"1ab62f69-25e6-417c-9f58-2e29c9814d55",
+    "forumUrl":"/portal/directtool/e7a244fa-664d-479a-bb6d-bf7e2ebc7bc1",
+    "forumCount":0
+  }
+]
+`;