Merge pull request #2300 from citizenos/#1537

#1537

Author: ilmartyrk

src/app/public-topics/components/topicbox/topicbox.component.html

@@ -106,13 +106,27 @@
   <div class="image">
     <div class="image_overlay"></div>
     <img *ngIf="topic.imageUrl" [src]="topic.imageUrl">
-    <div class="no_image" *ngIf="!topic.imageUrl">
-      <svg width="37" height="41" viewBox="0 0 37 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M29.307 5.5918C30.9953 5.5918 32.3766 7.08292 32.3766 8.90541V32.1007C32.3766 33.9232 30.9953 35.4143 29.307 35.4143H7.81962C6.13133 35.4143 4.75 33.9232 4.75 32.1007V8.90541C4.75 7.08292 6.13133 5.5918 7.81962 5.5918H29.307ZM17.0285 27.9752L13.1915 22.9882L7.81962 30.4439H29.307L22.4003 20.503L17.0285 27.9752Z"
-          fill="#4D5C6A" />
-      </svg>
-    </div>
+    <ng-container *ngIf="!topic.imageUrl">
+      <ng-container
+        *ngIf="['inProgress', 'voting', 'ideation', 'followUp'].includes(topic.status); else default_no_image">
+        <div class="no_image" [ngClass]="{
+        discussion: topic.status === 'inProgress',
+        voting: topic.status === 'voting',
+        ideation: topic.status === 'ideation',
+        follow_up: topic.status === 'followUp'
+      }">
+        </div>
+      </ng-container>
+      <ng-template #default_no_image>
+        <div class="no_image">
+          <svg width="37" height="41" viewBox="0 0 37 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M29.307 5.5918C30.9953 5.5918 32.3766 7.08292 32.3766 8.90541V32.1007C32.3766 33.9232 30.9953 35.4143 29.307 35.4143H7.81962C6.13133 35.4143 4.75 33.9232 4.75 32.1007V8.90541C4.75 7.08292 6.13133 5.5918 7.81962 5.5918H29.307ZM17.0285 27.9752L13.1915 22.9882L7.81962 30.4439H29.307L22.4003 20.503L17.0285 27.9752Z"
+              fill="#4D5C6A" />
+          </svg>
+        </div>
+      </ng-template>
+  </ng-container>
   </div>
   <div class="topic_content">
     <div class="icon_area">
@@ -162,7 +176,9 @@
       </div>
       <div class="last_edit">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.51592 10.5893C2.08608 8.1127 2.93461 4.94595 5.41116 3.51611C7.88771 2.08627 11.0545 2.9348 12.4843 5.41135C13.9141 7.8879 13.0656 11.0547 10.5891 12.4845C9.77102 12.9568 8.87985 13.18 8.00069 13.1792C7.58647 13.1788 7.25037 13.5143 7.24997 13.9285C7.24957 14.3427 7.58504 14.6788 7.99925 14.6792C9.13512 14.6803 10.2865 14.3912 11.3391 13.7835C14.533 11.9395 15.6274 7.85534 13.7833 4.66135C11.9393 1.46736 7.85515 0.373023 4.66116 2.21707C1.46717 4.06112 0.372828 8.14526 2.21688 11.3393C2.2329 11.367 2.25043 11.3933 2.2693 11.4182L0.511719 12.433L4.50545 13.5031L5.57556 9.50936L3.5581 10.6741C3.54599 10.6454 3.53194 10.617 3.51592 10.5893ZM8 4.25036C8.41421 4.25036 8.75 4.58614 8.75 5.00036V7.25036H10C10.4142 7.25036 10.75 7.58614 10.75 8.00036C10.75 8.41457 10.4142 8.75036 10 8.75036H7.25V5.00036C7.25 4.58614 7.58579 4.25036 8 4.25036Z" fill="#2C3B47"/>
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M3.51592 10.5893C2.08608 8.1127 2.93461 4.94595 5.41116 3.51611C7.88771 2.08627 11.0545 2.9348 12.4843 5.41135C13.9141 7.8879 13.0656 11.0547 10.5891 12.4845C9.77102 12.9568 8.87985 13.18 8.00069 13.1792C7.58647 13.1788 7.25037 13.5143 7.24997 13.9285C7.24957 14.3427 7.58504 14.6788 7.99925 14.6792C9.13512 14.6803 10.2865 14.3912 11.3391 13.7835C14.533 11.9395 15.6274 7.85534 13.7833 4.66135C11.9393 1.46736 7.85515 0.373023 4.66116 2.21707C1.46717 4.06112 0.372828 8.14526 2.21688 11.3393C2.2329 11.367 2.25043 11.3933 2.2693 11.4182L0.511719 12.433L4.50545 13.5031L5.57556 9.50936L3.5581 10.6741C3.54599 10.6454 3.53194 10.617 3.51592 10.5893ZM8 4.25036C8.41421 4.25036 8.75 4.58614 8.75 5.00036V7.25036H10C10.4142 7.25036 10.75 7.58614 10.75 8.00036C10.75 8.41457 10.4142 8.75036 10 8.75036H7.25V5.00036C7.25 4.58614 7.58579 4.25036 8 4.25036Z"
+            fill="#2C3B47" />
         </svg>
         <span>{{topic.lastActivity | amTimeAgo}}</span>
       </div>

src/app/public-topics/components/topicbox/topicbox.component.scss

@@ -135,6 +135,25 @@
       align-items: center;
       justify-content: center;
       background-color: var(--color-border);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+
+      &.discussion {
+        background-image: url("/assets/imgs/no_image_discussion.svg");
+      }
+
+      &.voting {
+        background-image: url("/assets/imgs/no_image_voting.svg");
+      }
+
+      &.ideation {
+        background-image: url("/assets/imgs/no_image_ideation.svg");
+      }
+
+      &.follow_up {
+        background-image: url("/assets/imgs/no_image_follow_up.svg");
+      }
     }
 
     .image_overlay {
@@ -268,11 +287,10 @@
   height: 100%;
   align-items: center;
   justify-content: center;
-  background-color: rgba(255,255,255, 0.5);
+  background-color: rgba(255, 255, 255, 0.5);
 
   button {
     z-index: 99;
     gap: 8px;
   }
 }
-