From 47b8b0fb411f306314341603f540e32987854d0d Mon Sep 17 00:00:00 2001
From: Elblinator <69210919+Elblinator@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:44:23 +0100
Subject: [PATCH] Speaking times card (#3208)

---
 .../speaking-times.component.html             |  4 +-
 .../speaking-times.component.scss             | 45 +++++++++++++------
 ...aking-structure-level-slide.component.html |  3 ++
 ...aking-structure-level-slide.component.scss | 13 ++++++
 ...-structure-level-list-slide.component.html | 26 ++++++-----
 ...-structure-level-list-slide.component.scss | 19 +++++---
 6 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html
index 030bf6e31b..99601d0ba4 100644
--- a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html
+++ b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html
@@ -9,7 +9,8 @@
 
 <div class="structure-level-list">
     <div class="structure-level" *ngFor="let structure_level of getStructureLevels()">
-        <div class="structure-level-info" [ngStyle]="{ 'border-top-color': structure_level.color }">
+        <div class="structure-level-content">
+            <hr class="structure-level-color" [ngStyle]="{ 'background-color': structure_level.color }" />
             <span class="structure-level-time">
                 <os-countdown-time [unstyled]="true" [countdown]="structure_level.countdown"></os-countdown-time>
             </span>
@@ -17,6 +18,7 @@
         </div>
         <ng-container *osPerms="permission.listOfSpeakersCanManage">
             <button
+                class="icon-less-space-to-left"
                 type="button"
                 mat-icon-button
                 [matMenuTriggerFor]="editAndDistributeMenu"
diff --git a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
index f7feabd332..d3f6c2f43d 100644
--- a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
+++ b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
@@ -5,20 +5,39 @@
     padding: 8px 25px 0 25px;
     .structure-level {
         width: 33%;
-        margin-bottom: 26px;
+        margin-bottom: 16px;
         display: flex;
         flex-direction: row;
-    }
-    .structure-level-info {
-        border-top-color: transparent;
-        border-top-width: 3px;
-        border-top-style: solid;
-    }
-    .structure-level-time {
-        font-size: 35px;
-        line-height: 1;
-    }
-    .structure-level-name {
-        line-height: 1;
+        justify-content: end;
+
+        .structure-level-content {
+            width: 100%;
+
+            .structure-level-color {
+                height: 3px;
+                background-color: transparent;
+                margin-left: 10%;
+                width: calc(100% - margin-left);
+                border-width: 0;
+                border-radius: 7px;
+            }
+
+            .structure-level-time {
+                font-size: 35px;
+                display: flex;
+                justify-content: end;
+                line-height: 0.95;
+            }
+
+            .structure-level-name {
+                line-height: 1;
+                text-align: right;
+            }
+        }
+
+        .icon-less-space-to-left {
+            width: 25px;
+            margin-top: 12px;
+        }
     }
 }
diff --git a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.html b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.html
index 56079bff38..99fb0b69c8 100644
--- a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.html
+++ b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.html
@@ -1,6 +1,9 @@
 <div id="structure-level-current" *ngIf="data && (data.data.current_start_time || data.data.remaining_time)">
     <span id="inner">
         <div id="inner-countdown">
+            <span class="align-right">
+                <hr class="structure-level-color" [ngStyle]="{ 'background-color': data.data.color }" />
+            </span>
             <os-countdown-time
                 [unstyled]="true"
                 [countdown]="{
diff --git a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.scss b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.scss
index 403bb7a62e..2998a8b00b 100644
--- a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.scss
+++ b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-speaking-structure-level-slide/components/current-speaking-structure-level-slide.component.scss
@@ -17,4 +17,17 @@
         font-size: 70px;
         opacity: 0.9;
     }
+
+    .structure-level-color {
+        height: 15px;
+        background-color: transparent;
+        width: 100%;
+        border-width: 0;
+        border-radius: 7px;
+    }
+
+    .align-right {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
diff --git a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.html b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.html
index 7f0d6f03a0..de65972bcc 100644
--- a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.html
+++ b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.html
@@ -14,18 +14,22 @@ <h2>
                 <ng-container *ngIf="getStructureLevel(i, j)">
                     <div class="ellipsis-overflow spacer-top-25">
                         <div class="level-time-list">
-                            <span class="color-line" [ngStyle]="{ 'border-top-color': getStructureLevel(i, j).color }">
-                                <os-countdown-time
-                                    [unstyled]="true"
-                                    [countdown]="{
-                                        running: !!getStructureLevel(i, j).current_start_time,
-                                        countdown_time: getStructureLevel(i, j).current_start_time
-                                            ? getStructureLevel(i, j).current_start_time +
-                                              getStructureLevel(i, j).remaining_time
-                                            : getStructureLevel(i, j).remaining_time
-                                    }"
-                                ></os-countdown-time>
+                            <span class="align-right">
+                                <hr
+                                    class="structure-level-color"
+                                    [ngStyle]="{ 'background-color': getStructureLevel(i, j).color }"
+                                />
                             </span>
+                            <os-countdown-time
+                                [unstyled]="true"
+                                [countdown]="{
+                                    running: !!getStructureLevel(i, j).current_start_time,
+                                    countdown_time: getStructureLevel(i, j).current_start_time
+                                        ? getStructureLevel(i, j).current_start_time +
+                                          getStructureLevel(i, j).remaining_time
+                                        : getStructureLevel(i, j).remaining_time
+                                }"
+                            ></os-countdown-time>
                         </div>
                         <div class="structure-level-name">
                             {{ getStructureLevel(i, j).name }}
diff --git a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.scss b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.scss
index f3efe94ab9..9c68be0673 100644
--- a/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.scss
+++ b/client/src/app/site/pages/meetings/modules/projector/modules/slides/components/current-structure-level-list-slide/components/current-structure-level-list-slide.component.scss
@@ -16,15 +16,22 @@ td {
 .level-time-list {
     font-size: 80px;
     text-align: right;
-    .color-line {
-        border-top-color: transparent;
-        border-top-width: 10px;
-        border-top-style: solid;
-        line-height: 1.25;
-    }
 }
 
 .structure-level-name {
     text-align: right;
     font-size: 30px;
 }
+
+.structure-level-color {
+    height: 5px;
+    background-color: transparent;
+    width: 90%;
+    border-width: 0;
+    border-radius: 7px;
+}
+
+.align-right {
+    display: flex;
+    justify-content: flex-end;
+}