Merge pull request #1709 from citizenos/development

Add site issues notification message

src/app/app.component.html

@@ -1,6 +1,7 @@
 <ngx-loading-bar></ngx-loading-bar>
 <div id="notification_wrap" [ngClass]="{'fixed': !(isDialog() | async)}">
   <notification></notification>
+  <site-notification></site-notification>
 </div>
 <!-- NAV -->
 <nav *ngIf="translate.currentLang"></nav>

src/app/app.component.ts

@@ -27,7 +27,7 @@ export class AppComponent {
   destroy$ = new Subject<boolean>();
 
   @ViewChild('content') content?: ElementRef;
-  private keysPressed = <string[]>[];
+  private readonly keysPressed = <string[]>[];
   @HostListener('window:keydown', ['$event'])
   handleKeyDownEvent(event: KeyboardEvent) {
     if (this.keysPressed.indexOf(event.key) === -1) this.keysPressed.push(event.key);
@@ -39,27 +39,25 @@ export class AppComponent {
   }
 
   constructor(
-    private router: Router,
-    @Inject(DOCUMENT) private document: Document,
-    private title: Title,
-    private Meta: Meta,
+    private readonly router: Router,
+    @Inject(DOCUMENT) private readonly document: Document,
+    private readonly title: Title,
+    private readonly Meta: Meta,
     public translate: TranslateService,
-    private config: ConfigService,
-    private renderer: Renderer2,
-    private changeDetection: ChangeDetectorRef,
-    private Location: LocationService,
-    private Notification: NotificationService,
-    private auth: AuthService,
-    private dialog: DialogService,
-    private translateDebug: NgxTranslateDebugService,
+    private readonly config: ConfigService,
+    private readonly renderer: Renderer2,
+    private readonly changeDetection: ChangeDetectorRef,
+    private readonly Location: LocationService,
+    private readonly Notification: NotificationService,
+    private readonly auth: AuthService,
+    private readonly dialog: DialogService,
+    private readonly translateDebug: NgxTranslateDebugService,
     public app: AppService) {
     const languageConf = config.get('language');
     translate.addLangs(Object.keys(languageConf.list));
     translate.setDefaultLang(languageConf.default);
     this.setDefaultMetaInfo();
-    this.router.events.pipe(takeUntil(this.destroy$)).subscribe
-      ((event: Event) => {
-        //console.log(event);
+    this.router.events.pipe(takeUntil(this.destroy$)).subscribe((event: Event) => {
         if (event && event instanceof NavigationStart) {
           app.tabletNav = false;
           app.darkNav = false;

src/app/shared/components/site-notification/site-notification.component.html

@@ -0,0 +1,26 @@
+<div class="notification_top warning" *ngIf="showNotification">
+  <div class="icon_notification">
+    <ng-container>
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="40" height="40" rx="20" fill="#F39129" />
+        <path
+          d="M19.0645 8C18.4876 8 18.0304 8.48668 18.0664 9.06238L18.9414 23.0624C18.9743 23.5894 19.4114 24 19.9395 24H20.0605C20.5886 24 21.0257 23.5894 21.0586 23.0624L21.9336 9.06238C21.9696 8.48668 21.5124 8 20.9355 8H19.0645Z"
+          fill="white" />
+        <path
+          d="M20 31C21.1046 31 22 30.1046 22 29C22 27.8954 21.1046 27 20 27C18.8954 27 18 27.8954 18 29C18 30.1046 18.8954 31 20 31Z"
+          fill="white" />
+      </svg>
+    </ng-container>
+  </div>
+  <div class="message">
+    <div class="title" translate>MSG_ISSUE_NOTIFICATION_TITLE</div>
+    <div class="content" translate>MSG_ISSUE_NOTIFICATION</div>
+  </div>
+  <button class="btn_medium_nav icon" (click)="close()">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289Z"
+        fill="#2C3B47" />
+    </svg>
+  </button>
+</div>

src/app/shared/components/site-notification/site-notification.component.scss

@@ -0,0 +1,89 @@
+@use "mixins";
+
+.notification_top {
+  box-shadow: 0px 8px 20px 0px rgba(220, 231, 240, 0.30), 0px 12px 16px 0px rgba(50, 85, 112, 0.10);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 12px 16px 16px 16px;
+  gap: 16px;
+  width: 100%;
+  min-height: 50px;
+  border-top: 4px solid;
+  z-index: 9999;
+  position: relative;
+  left: 0;
+  top: 0;
+  background-color: var(--color-surfaces);
+
+  &:last-child {
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+  }
+
+  &.narrow {
+    width: 560px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    position: fixed;
+  }
+  &.error {
+    border-color: var(--color-error-background);
+  }
+
+  &.info {
+    border-color: var(--color-info-background);
+  }
+
+  &.warning {
+    border-color: var(--color-warn-background);
+  }
+
+  &.success {
+    border-color: var(--color-success-background);
+  }
+
+  @include mixins.mobile {
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+  }
+
+  .btn_medium_nav {
+    position: absolute;
+    float: right;
+    right: 16px;
+    top: 16px;
+
+    @include mixins.mobile {
+      top: 4px;
+    }
+  }
+
+  .message {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+    padding-right: 40px;
+
+    @include mixins.mobile {
+      padding-right: 0;
+    }
+    .title {
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 700;
+    }
+  }
+  .icon_notification {
+    @include mixins.mobile {
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}

src/app/shared/components/site-notification/site-notification.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SiteNotificationComponent } from './site-notification.component';
+
+describe('SiteNotificationComponent', () => {
+  let component: SiteNotificationComponent;
+  let fixture: ComponentFixture<SiteNotificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SiteNotificationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SiteNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/site-notification/site-notification.component.ts

@@ -0,0 +1,30 @@
+import { CookieService } from 'ngx-cookie-service';
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import { ConfigService } from '@services/config.service';
+
+import { NotificationService } from '@services/notification.service';
+
+@Component({
+  selector: 'site-notification',
+  templateUrl: './site-notification.component.html',
+  styleUrl: './site-notification.component.scss'
+})
+export class SiteNotificationComponent {
+  public showNotification = false;
+  constructor(
+    private readonly config: ConfigService,
+    private readonly CookieService: CookieService,
+    private readonly translate: TranslateService,
+    private readonly Notification: NotificationService) {
+      if (this.config.get('showIssueNotification') && !this.CookieService.get('show-issue-notification')) {
+        this.showNotification = true;
+      }
+  }
+
+  close() {
+    this.showNotification = false;
+    this.CookieService.set('show-issue-notification', 'true', 36500);
+  }
+}

src/app/shared/shared.module.ts

@@ -58,6 +58,7 @@ import { ImageEditorComponent } from './components/image-editor/image-editor.com
 import { TopicVoteDeadlineComponent } from '../topic/components/topic-vote-deadline/topic-vote-deadline.component';
 
 import { NotificationComponent } from '../core/components/notification/notification.component';
+import { SiteNotificationComponent } from './components/site-notification/site-notification.component';
 
 @NgModule({
   declarations: [
@@ -112,7 +113,8 @@ import { NotificationComponent } from '../core/components/notification/notificat
     ImageEditorComponent,
     TopicVoteDeadlineComponent,
     NotificationComponent,
-    MarkdownLinkDialogComponent
+    MarkdownLinkDialogComponent,
+    SiteNotificationComponent
   ],
   imports: [
     RouterModule,
@@ -178,7 +180,8 @@ import { NotificationComponent } from '../core/components/notification/notificat
     ImageEditorComponent,
     DialogModule,
     NotificationComponent,
-    MarkdownLinkDialogComponent
+    MarkdownLinkDialogComponent,
+    SiteNotificationComponent
    ]
 })
 export class SharedModule { }

src/assets/config/config.json

@@ -1 +1 @@
-{"api":{"baseUrl":"https://dev.api.citizenos.com:3003"},"etherpad":{"baseUrl":"https://dev.p.citizenos.com:9001"},"language":{"default":"en","list":{"de":"Deutsch","en":"English","et":"Eesti","ru":"Pусский","fr":"Français","lt":"Lietuvių","uk":"Українська","aa":"Crowdin","id":"Bahasa Indonesia"},"debug":"dbg"},"links":{"help":{"en":"https://app.citizenos.com/en/topics/c6b6d06a-e8cf-4297-9654-8c1cf01b133b","et":"https://app.citizenos.com/en/topics/fd8c4e13-6c5f-4423-9408-cf97c30727d7","ru":"https://app.citizenos.com/en/topics/bd15b9e8-7de4-42c2-a394-78ed95a735cd"},"faq":{"en":"https://citizenos.com/faq/","et":"https://citizenos.com/et/kkk/"},"about":"https://citizenos.com/product","donate":{"en":"https://citizenos.com/donate/","et":"https://citizenos.com/et/toeta/","ru":"https://citizenos.com/ru/pomoch-proektu/"}},"legal":{"termsOfUse":"https://citizenos.com/legal/api/","privacyPolicy":"https://citizenos.com/legal/privacy/","version":"1"},"attachments":{"limit":10,"upload":{"allowedFileTypes":["application/vnd.etsi.asic-e+zip","text/plain","application/pdf","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/digidoc","application/vnd.etsi.asic-e+zip","application/vnd.oasis.opendocument.text","application/vnd.oasis.opendocument.spreadsheet","image/jpeg","image/png","application/rtf","application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","application/vnd.ms-powerpoint","application/vnd.openxmlformats-officedocument.presentationml.presentation","application/xlt"],"allowedFileSize":50000000},"dropbox":{"appKey":"lkk7j6f41sfpm5b"},"googleDrive":{"developerKey":"AIzaSyBuEp5_A9tMjIZbIWzZ3pyh9wzLVcikD6I","clientId":"11623449066-0pdp3p7mp4l4f3e7vm43pr7okjpmddmc.apps.googleusercontent.com"},"oneDrive":{"clientId":"deb735fe-1c3d-489c-93f4-0a8927101d09"}},"features":{"authentication":{"facebook":true,"google":true,"smartId":true,"mobiilId":true,"idCard":{"url":"https://id-test.citizenos.com/authorize"},"citizenos":true},"analytics":false},"moderation":{"codeOfConduct":"https://app.citizenos.com/topics/ac8b66a4-ca56-4d02-8406-5e19da73d7ce"},"feedbackForm":true,"helplink":"https://citizenos.com/help?app=true"}
+{"api":{"baseUrl":"https://dev.api.citizenos.com:3003"},"etherpad":{"baseUrl":"https://dev.p.citizenos.com:9001"},"language":{"default":"en","list":{"de":"Deutsch","en":"English","et":"Eesti","ru":"Pусский","fr":"Français","lt":"Lietuvių","uk":"Українська","aa":"Crowdin","id":"Bahasa Indonesia"},"debug":"dbg"},"links":{"help":{"en":"https://app.citizenos.com/en/topics/c6b6d06a-e8cf-4297-9654-8c1cf01b133b","et":"https://app.citizenos.com/en/topics/fd8c4e13-6c5f-4423-9408-cf97c30727d7","ru":"https://app.citizenos.com/en/topics/bd15b9e8-7de4-42c2-a394-78ed95a735cd"},"faq":{"en":"https://citizenos.com/faq/","et":"https://citizenos.com/et/kkk/"},"about":"https://citizenos.com/product","donate":{"en":"https://citizenos.com/donate/","et":"https://citizenos.com/et/toeta/","ru":"https://citizenos.com/ru/pomoch-proektu/"}},"legal":{"termsOfUse":"https://citizenos.com/legal/api/","privacyPolicy":"https://citizenos.com/legal/privacy/","version":"1"},"attachments":{"limit":10,"upload":{"allowedFileTypes":["application/vnd.etsi.asic-e+zip","text/plain","application/pdf","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/digidoc","application/vnd.etsi.asic-e+zip","application/vnd.oasis.opendocument.text","application/vnd.oasis.opendocument.spreadsheet","image/jpeg","image/png","application/rtf","application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","application/vnd.ms-powerpoint","application/vnd.openxmlformats-officedocument.presentationml.presentation","application/xlt"],"allowedFileSize":50000000},"dropbox":{"appKey":"lkk7j6f41sfpm5b"},"googleDrive":{"developerKey":"AIzaSyBuEp5_A9tMjIZbIWzZ3pyh9wzLVcikD6I","clientId":"11623449066-0pdp3p7mp4l4f3e7vm43pr7okjpmddmc.apps.googleusercontent.com"},"oneDrive":{"clientId":"deb735fe-1c3d-489c-93f4-0a8927101d09"}},"features":{"authentication":{"facebook":true,"google":true,"smartId":true,"mobiilId":true,"idCard":{"url":"https://id-test.citizenos.com/authorize"},"citizenos":true},"analytics":false},"moderation":{"codeOfConduct":"https://app.citizenos.com/topics/ac8b66a4-ca56-4d02-8406-5e19da73d7ce"},"showIssueNotification": true,"feedbackForm":true,"helplink":"https://citizenos.com/help?app=true"}

src/assets/config/custom-environment-variables.json

@@ -43,5 +43,6 @@
   "plausible": {
     "__name": "CITIZENOS_PLAUSIBLE",
     "__format": "json"
-  }
+  },
+  "showIssueNotification": "CITIZENOS_SHOW_ISSUE_NOTIFICATION"
 }

src/assets/config/development.json

@@ -83,5 +83,6 @@
   "moderation": {
     "codeOfConduct": "https://app.citizenos.com/topics/ac8b66a4-ca56-4d02-8406-5e19da73d7ce"
   },
-  "helplink": "https://citizenos.com/help?app=true"
+  "helplink": "https://citizenos.com/help?app=true",
+  "showIssueNotification": true
 }

src/assets/i18n/en.json

@@ -1,4 +1,6 @@
 {
+  "MSG_ISSUE_NOTIFICATION_TITLE": "Temporary Disruption on Citizen OS Platform",
+  "MSG_ISSUE_NOTIFICATION": "We will post an update as soon as the issue is resolved.",
   "MSG_REDESIGN_TITLE": "We’re redesigning our platform!",
   "MSG_REDESIGN_CONTENT": "In the coming months, we’ll be starting to roll out a new and improved Citizen OS! Any questions, concerns, or to offer your help as a beta tester, contact Sara on <a href=\"mailto:[email protected]\">[email protected]</a>",
   "MSG_REDESIGN_BTN_CLOSE": "OK, got it",