Merge remote-tracking branch 'origin/admin-ui-picard' into to-typescript

opencast · Sep 14, 2023 · c5e8de7 · c5e8de7
2 parents 14a65dd + 38d2aca
commit c5e8de7
Show file tree

Hide file tree

Showing 148 changed files with 303 additions and 4,266 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -13,6 +13,8 @@
     "@types/react-router-dom": "^5.3.3",
     "array-move": "^4.0.0",
     "axios": "^1.4.0",
+    "bourbon": "^7.3.0",
+    "bourbon-neat": "4.0.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "font-awesome": "^4.7.0",

diff --git a/app/src/actions/notificationActions.ts b/app/src/actions/notificationActions.ts
@@ -23,6 +23,12 @@ export const createNotification = (notification) => ({
 	payload: { notification, id: nextNotificationId++ },
 });
 
+// @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
+export const createNotificationWithId = (notification, id) => ({
+	type: CREATE_NOTIFICATION,
+	payload: { notification, id: id },
+});
+
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
 export const removeNotification = (id) => ({
 	type: REMOVE_NOTIFICATION,

diff --git a/app/src/components/shared/Notifications.tsx b/app/src/components/shared/Notifications.tsx
@@ -41,7 +41,7 @@ const Notifications : React.FC<{
 					onClick={() => closeNotification(notification.id)}
 					className="button-like-anchor fa fa-times close"
 				/>
-				<p>{t(notification.message)}</p>
+				<p>{t(notification.message, notification.parameter)}</p>
 			</div>
 		</li>
 	);

diff --git a/app/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/app/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -161,7 +161,7 @@
 		"SERIES_ADDED": "The series has been created",
 		"SERIES_NOT_SAVED": "The series could not be saved",
 		"EVENTS_CREATED": "The event has been created",
-		"EVENTS_UPLOAD_STARTED": "The event is being uploaded…",
+		"EVENTS_UPLOAD_STARTED": "The event is being uploaded… {{ progress }}%",
 		"EVENTS_NOT_CREATED": "The event could not be created",
 		"EVENTS_UPDATED_ALL": "All events have been successfully updated",
 		"EVENTS_NOT_UPDATED": "The event could not be saved",

diff --git a/app/src/reducers/notificationReducers.ts b/app/src/reducers/notificationReducers.ts
@@ -46,6 +46,21 @@ export const notifications = (state = initialState, action) => {
 	switch (type) {
 		case CREATE_NOTIFICATION: {
 			const { notification, id } = payload;
+      if (state.notifications.filter(e => e.id === id).length > 0) {
+        console.log("Notification with id: " + id + " already exists.")
+        return {
+          ...state,
+          notifications: state.notifications.map((oldNotification) => {
+            if (oldNotification.id === id) {
+              return {
+                id: id,
+                ...notification,
+              };
+            }
+            return oldNotification;
+          }),
+        };
+      }
 			return {
 				...state,
 				notifications: [

diff --git a/app/src/selectors/notificationSelector.ts b/app/src/selectors/notificationSelector.ts
@@ -1,7 +1,8 @@
 import { createSelector } from "reselect";
 
 export const getNotifications = (state: any) => state.notifications.notifications;
-export const getGlobalPositions = (state: any) => state.notifications.notificationPositionGlobal;
+export const getGlobalPositions = (state: any) =>
+  state.notifications.notificationPositionGlobal;
 
 // @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type.
 export const getNotificationById = (id) =>

diff --git a/app/src/styles/components/_alerts.scss b/app/src/styles/components/_alerts.scss
@@ -146,7 +146,7 @@
         right: 10px;
         font-size: 20px;
         margin-top: 9px;
-        @include transition($alert-transition);
+        transition: $alert-transition;
         text-decoration: none;
         color: inherit;
     }

diff --git a/app/src/styles/components/_cal.scss b/app/src/styles/components/_cal.scss
@@ -60,7 +60,7 @@
         text-align: center;
         margin: -1px -1px 0px -1px;
         border: $thin-border-stroke darken($l-blue, 10%);
-        @include linear-gradient(top, #388ed6, #2b77b9);
+        background: linear-gradient(to bottom, #388ed6, #2b77b9);
 
         a {
             display: block;

diff --git a/app/src/styles/components/_dropdowns.scss b/app/src/styles/components/_dropdowns.scss
@@ -32,10 +32,10 @@
     cursor: pointer;
     position: relative;
     vertical-align: middle;
-    @include user-select(none);
+    user-select: none;
 
     // Pulled from Button Mixin (keep in sync with those styles)
-    @include linear-gradient(#fff, #f7f7f7);
+    background: linear-gradient(#fff, #f7f7f7);
     border: $thin-border-stroke $main-border-color;
     box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05);
     outline: none;
@@ -44,7 +44,7 @@
 
     &:hover {
         border: $thin-border-stroke darken($main-border-color, 2%);
-        @include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
+        background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
         color: $medium-prim-color;
     }
 
@@ -86,7 +86,7 @@
 
     > ul {
         position: absolute;
-        @include transition(all 200ms);
+        transition: all 200ms;
         background: $off-white;
         list-style: none;
         @include border-bottom-radius($main-border-radius);
@@ -103,7 +103,7 @@
             text-shadow: 0 1px 0 $white;
             display: block;
             position: relative;
-            @include transition(all 200ms);
+            transition: all 200ms;
 
             button {
                 display: block;
@@ -154,7 +154,7 @@
         cursor: pointer;
         position: relative;
         vertical-align: middle;
-        @include user-select(none);
+        user-select: none;
         background-repeat: repeat-x;
 
         &:focus {
@@ -169,7 +169,7 @@
 
         > ul {
             position: absolute;
-            @include transition(all 200ms);
+            transition: all 200ms;
             background: $off-white;
             list-style: none;
             @include border-bottom-radius($main-border-radius);
@@ -188,7 +188,7 @@
                 cursor: default;
                 display: block;
                 position: relative;
-                @include transition(all 200ms);
+                transition: all 200ms;
 
                 span {
                     padding: 3px 15px 3px 45px;
@@ -245,7 +245,7 @@
         @include border-bottom-radius(0);
 
         &:after {
-            @include transform(rotate(180deg));
+            transform: rotate(180deg);
         }
 
         > ul {

diff --git a/app/src/styles/components/_footer.scss b/app/src/styles/components/_footer.scss
@@ -58,7 +58,7 @@ $footer-background-color: darken($body-background, 5%);
         right: 0;
 
         a {
-            @include transition(all .2s);
+            transition: all .2s;
             @include footer-component-padding();
             border-left: 1px solid $footer-border-color;
             text-align: center;

diff --git a/app/src/styles/components/_header.scss b/app/src/styles/components/_header.scss
@@ -30,7 +30,7 @@
     box-shadow: 0 1px 3px 1px rgba($black, 0.3);
     position: relative;
     border-bottom: 1px solid #1d3041;
-    @include linear-gradient(top, #388ed6, #2075b1);
+    background: linear-gradient(to bottom, #388ed6, #2075b1);
 
     .header-branding {
         float: left;
@@ -413,11 +413,11 @@
                 text-shadow: 0 1px 0 rgba($black, 0.2);
                 border: 1px solid $l-blue;
 
-                @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
+                background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
                 box-shadow: inset 0 1px 0 0 rgba($white, 0.2), 0 2px 3px 1px rgba($black, 0.05);
 
                 &:hover {
-                    @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
+                    background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
                 }
 
                 &:active {

diff --git a/app/src/styles/components/_inputs.scss b/app/src/styles/components/_inputs.scss
@@ -49,7 +49,7 @@ textarea {
     font-weight: 600;
     color: $medium-prim-color;
 
-    @include placeholder {
+    &::placeholder {
         color: $light-prim-color;
     }
 
@@ -71,29 +71,32 @@ textarea {
     // ----------------------------------------
 
     &#email {
-       @include retina-image("#{$img-path}user-input-icon", 23px 20px);
+       background-image: url("#{$img-path}user-input-icon.png");
+       background-size: 23px 20px;
        background-repeat: no-repeat;
        background-position: 14px center;
     }
 
     &#password {
-        @include retina-image("#{$img-path}key-icon", 16px 20px);
+        background-image: url("#{$img-path}key-icon.png");
+        background-size: 16px 20px;
         background-repeat: no-repeat;
         background-position: 19px center;
     }
 
     &.search,
     &#search {
-        @include appearance(none);
-        @include retina-image("#{$img-path}search", 13px 13px);
+        appearance: none;
+        background-image: url("#{$img-path}search.png");
+        background-size: 13px 13px;
         background-repeat: no-repeat;
         background-position: 14px center;
         vertical-align: top;
         padding: 0 20px 0 40px !important;
         height: 40px;
 
         &.expand {
-            @include transition(width 0.2s ease-in);
+            transition: width 0.2s ease-in;
 
             &:focus {
                 width: 200px;
@@ -142,7 +145,7 @@ input[type="radio"].ios {
     cursor: pointer;
     height: 28px;
     position: relative;
-    @include transition(border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration);
+    transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration;
     width: 44px;
     vertical-align: top;
 
@@ -158,20 +161,20 @@ input[type="radio"].ios {
         position: absolute;
         right: 16px;
         top: 0;
-        @include transition(border 250ms 150ms, left 250ms 100ms, right 150ms 175ms);
+        transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms;
     }
 
     &:checked {
         border-color: $green;
         box-shadow: inset 0 0 0 13px $green;
         padding-left: 18px;
-        @include transition(border 250ms, box-shadow 250ms, padding 250ms 150ms);
+        transition: border 250ms, box-shadow 250ms, padding 250ms 150ms;
 
         &:after {
             border-color: $green;
             left: 16px;
             right: 0;
-            @include transition(border 250ms, left 150ms 250ms, right 250ms 175ms);
+            transition: border 250ms, left 150ms 250ms, right 250ms 175ms;
         }
     }
 }

diff --git a/app/src/styles/components/_menu-dropdown.scss b/app/src/styles/components/_menu-dropdown.scss
@@ -54,9 +54,9 @@
         overflow: visible;
         display: block;
         padding: $link-padding;
-        @include transition-property($link-transition-property);
-        @include transition-duration(250ms);
-        @include transition-timing-function(ease-in);
+        transition-property: $link-transition-property;
+        transition-duration: 250ms;
+        transition-timing-function: ease-in;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-weight: $weight-semibold;

diff --git a/app/src/styles/components/_menu.scss b/app/src/styles/components/_menu.scss
@@ -62,7 +62,7 @@
             vertical-align: middle;
             position: relative;
             line-height: 50px;
-            @include transition(all .2s);
+            transition: all .2s;
             color: #c6c6c6;
         }
 

diff --git a/app/src/styles/components/_progress-bar.scss b/app/src/styles/components/_progress-bar.scss
@@ -44,9 +44,9 @@
     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
     text-align: center;
     background-color: $progress-bar-color;
-    @include linear-gradient(top, #388ed6, #2b77b9);
+    background: linear-gradient(to bottom, #388ed6, #2b77b9);
     border-right: 1px solid darken(#388ed6, 15%);
-    @include transition(width 600ms ease);
+    transition: width 600ms ease;
 
     &[aria-valuenow="1"],
     &[aria-valuenow="2"] {

diff --git a/app/src/styles/components/_statistics-graph.scss b/app/src/styles/components/_statistics-graph.scss
@@ -49,7 +49,7 @@
     > input[type="radio"]:checked + label {
       cursor: pointer;
       border: $thin-border-stroke darken($main-border-color, 2%);
-      @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
+      background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
       color: $medium-prim-color;
       box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1);
     }

diff --git a/app/src/styles/components/_steps.scss b/app/src/styles/components/_steps.scss
@@ -45,7 +45,7 @@
         width: 100%;
         height: 1px;
         background: $main-border-color;
-        @include linear-gradient(
+        background: linear-gradient(
             left,
             rgba($modal-nav-border-color, 0) 5%,
             rgba($modal-nav-border-color, 1) 25%,
@@ -59,7 +59,7 @@
         margin: 0 10px;
         position: relative;
         line-height: $height + 30;
-        @include user-select(none);
+        user-select: none;
 
         // Dot
         &:after {
@@ -76,12 +76,12 @@
 
         // First line
         &:first-child:before {
-            @include linear-gradient(left, $modal-nav-bg-color, $modal-nav-border-color);
+            background: linear-gradient(to right, $modal-nav-bg-color, $modal-nav-border-color);
         }
 
         // Last line
         &:last-child:before {
-            @include linear-gradient(left, $modal-nav-border-color, $modal-nav-bg-color);
+            background: linear-gradient(to right, $modal-nav-border-color, $modal-nav-bg-color);
         }
 
         // Active step