new looks from clarity

vivganes · Nov 18, 2023 · f5b546b · f5b546b
1 parent a019b41
commit f5b546b
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 32,831 deletions.
diff --git a/angular.json b/angular.json
@@ -32,7 +32,7 @@
               "src/.well-known"
             ],
             "styles": [
-              "src/styles.scss"
+              "node_modules/@clr/ui/clr-ui.min.css", "src/styles.scss"
             ],
             "scripts": [],
             "serviceWorker": true,
@@ -99,7 +99,7 @@
               "src/.well-known"
             ],
             "styles": [
-              "src/styles.scss"
+              "node_modules/@clr/ui/clr-ui.min.css", "src/styles.scss"
             ],
             "scripts": []
           }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,9 +23,9 @@
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
     "@angular/service-worker": "^16.2.0",
-    "@cds/core": "^6.7.0",
-    "@clr/angular": "^15.12.4",
-    "@clr/ui": "^15.12.4",
+    "@cds/core": "6.8.0",
+    "@clr/angular": "16.0.3",
+    "@clr/ui": "16.0.3",
     "@fractalsoftware/random-avatar-generator": "^1.0.11",
     "@getalby/bitcoin-connect": "^2.3.1",
     "@ngx-translate/core": "^15.0.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,15 +6,15 @@
         <span class="title main-title-font">zapddit</span>
       </a>
     </div>
-    <div class="search_form">
-      <form *ngIf="isLoggedIn()" class="search"  onsubmit="return false;">
-        <label for="search_input">
-            <input id="search_input" type="text"  class="hashtag-search" placeholder="{{'# '+ ('Search hashtag'| translate) + ' ⏎'}}" (keyup.enter)="search()">
-        </label>
-      </form>
-    </div>
+
+    <form *ngIf="isLoggedIn() && !isMobileScreen" class="search" spellcheck="false"  onsubmit="return false;">
+      <label for="search_input">
+          <input id="search_input" type="text"  placeholder="{{'# '+ ('Search hashtag'| translate) + ' ⏎'}}" (keyup.enter)="search()">
+      </label>
+    </form>
+
     <div class="header-actions">
-      <a *ngIf="isLoggedIn()" href="javascript://" (click)="openWizard()" class="nav-link" aria-label="setup" title="{{'Onboarding Wizard' | translate}}">
+      <a *ngIf="isLoggedIn() && !isMobileScreen" href="javascript://" (click)="openWizard()" class="nav-link" aria-label="setup" title="{{'Onboarding Wizard' | translate}}">
         <cds-icon shape="wand" solid></cds-icon>
       </a>
       <a *ngIf="darkTheme" href="javascript://" (click)="switchTheme()" class="nav-link" aria-label="theme">
@@ -30,8 +30,14 @@
         </button>
         <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
             <a *ngIf="ndkProvider.isTryingZapddit" routerLink="/login" clrDropdownItem translate>Login</a>
+            <a href="javascript://" (click)="openWizard()" aria-label="setup" clrDropdownItem translate>
+              Onboarding Wizard
+            </a>
             <a *ngIf="!ndkProvider.isTryingZapddit" routerLink="/profile" clrDropdownItem translate>Profile</a>
             <a routerLink="/preferences" clrDropdownItem translate>Preferences</a>
+            <a href="javascript://" (click)="logout()" aria-label="logout" clrDropdownItem translate>
+              Logout
+            </a>
         </clr-dropdown-menu>
     </clr-dropdown>
     </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy} from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject} from '@angular/core';
 import {TranslateService} from "@ngx-translate/core";
 
 import '@cds/core/icon/register.js';
@@ -53,6 +53,7 @@ import {
   BreakpointState
 } from '@angular/cdk/layout';
 import { BtcConnectService } from './service/btc-connect.service';
+import { DOCUMENT } from '@angular/common';
 
 ClarityIcons.addIcons(
   connectIcon,
@@ -108,7 +109,8 @@ export class AppComponent implements OnInit, OnDestroy{
   currentLanguage:string;
 
   constructor(private translate: TranslateService, public ndkProvider: NdkproviderService, router: Router,
-    private breakpointObserver: BreakpointObserver, private communityService:CommunityService, private topicService:TopicService, private btcConnectService:BtcConnectService) {
+    private breakpointObserver: BreakpointObserver, private communityService:CommunityService, 
+    private topicService:TopicService, private btcConnectService:BtcConnectService, @Inject(DOCUMENT) private document: Document) {
     translate.setDefaultLang('en');
 
     var language = localStorage.getItem(Constants.LANGUAGE);
@@ -183,9 +185,7 @@ export class AppComponent implements OnInit, OnDestroy{
   }
 
   setTheme(dark:boolean){
-    if((document.getElementById('zapddit-theme'))){
-      (<any>document.getElementById('zapddit-theme')).href="/assets/clr-ui"+(dark?"-dark":"")+".css";
-    }
+    this.document.body.setAttribute('cds-theme',(dark?'dark':'light'))
     this.darkTheme = dark;
   }
 

diff --git a/src/app/component/event-card/event-card.component.html b/src/app/component/event-card/event-card.component.html
@@ -90,10 +90,10 @@
       </div>
     </div>
     <div class="{{(displayShowMoreButton?'shortened-content':'')}}" #cardBlock>
-    <div *ngIf="!isQuotedEvent" class="break-words-overflow pointer-cursor" [routerLink]="'/n/'+hexEventId">
+    <div *ngIf="!isQuotedEvent" class="break-words-overflow pointer-cursor card-text" [routerLink]="'/n/'+hexEventId">
       <ngx-dynamic-hooks *ngIf="linkifiedContent" [content]="linkifiedContent"></ngx-dynamic-hooks>
     </div>
-    <div *ngIf="isQuotedEvent" class="break-words-overflow pointer-cursor" (click)="openQuotedEvent($event)">
+    <div *ngIf="isQuotedEvent" class="break-words-overflow pointer-cursor card-text" (click)="openQuotedEvent($event)">
       <ngx-dynamic-hooks *ngIf="linkifiedContent" [content]="linkifiedContent"></ngx-dynamic-hooks>
     </div>
 
@@ -193,34 +193,33 @@
   <div *ngIf="!isQuotedEvent" class="card-footer">
     <button class="btn btn-sm btn-icon btn-link" *ngIf="!hideNonZapReactions" [disabled]="!ndkProvider.canWriteToNostr"
       (click)="publishLike()">
-      <cds-icon shape="arrow" solid="true"></cds-icon> {{ likes | shortNumber }} Upvote
+      <cds-icon shape="arrow" solid="true"></cds-icon> {{ likes | shortNumber }}{{isMobileScreen?'':' '+'Upvote'}}
     </button>
     <button class="btn btn-sm btn-icon btn-link" *ngIf="!hideNonZapReactions" [disabled]="!ndkProvider.canWriteToNostr"
       (click)="publishDislike()">
-      <cds-icon shape="arrow" solid="true" flip="vertical"></cds-icon> {{ dislikes | shortNumber }} Downvote
+      <cds-icon shape="arrow" solid="true" flip="vertical"></cds-icon> {{ dislikes | shortNumber }}{{isMobileScreen?'':' '+'Downvote'}}
     </button>
     <button class="btn btn-sm btn-icon btn-link" [clrLoading]="upzappingNow" [disabled]="!ndkProvider.canWriteToNostr"
       (click)="upZap()">
-      <cds-icon shape="bolt" direction="down"></cds-icon> {{ upZapTotalMilliSats/1000 | shortNumber }} Upzap
+      <cds-icon shape="bolt" direction="down"></cds-icon> {{ upZapTotalMilliSats/1000 | shortNumber }}{{isMobileScreen?'':' '+'Upzap'}}
     </button>
     <button class="btn btn-sm btn-icon btn-link" (click)="downZap()" [clrLoading]="downzappingNow"
       [disabled]="!ndkProvider.canWriteToNostr || !ndkProvider.appData.downzapRecipients" [title]="
         ndkProvider.appData.downzapRecipients
           ? 'This deposits your downzap amounts to the configured Downzap recipients'
           : 'Setup your downzap recipient in the preferences to downzap notes.'
       ">
-      <cds-icon shape="bolt" direction="up"></cds-icon> {{ downZapTotalMilliSats/1000 | shortNumber }} Downzap
+      <cds-icon shape="bolt" direction="up"></cds-icon> {{ downZapTotalMilliSats/1000 | shortNumber }}{{isMobileScreen?'':' '+'Downzap'}}
     </button>
     <button *ngIf="!showingComments" class="btn btn-sm btn-icon btn-link" title="Show Comments"
       (click)="showComments()">
-      <cds-icon shape="chat-bubble"></cds-icon> {{ replies.length>0 ? replies.length :'' }}
-      Comment{{replies.length>1?'s':''}}
+      <cds-icon shape="chat-bubble"></cds-icon> {{ replies.length>0 ? replies.length :'' }}{{isMobileScreen?'':' '+'Comment'}}{{isMobileScreen?'':replies.length>1?'s':''}}
     </button>
     <button *ngIf="showingComments" class="btn btn-sm btn-icon btn-link" title="Hide Comments" (click)="hideComments()">
-      <cds-icon shape="eye-hide"></cds-icon> {{ replies.length }} Comment{{replies.length==1?'':'s'}}
+      <cds-icon shape="eye-hide"></cds-icon> {{ replies.length }}{{isMobileScreen?'':' '+'Comment'}}{{isMobileScreen?'':replies.length>1?'s':''}}
     </button>
-    <button class="btn btn-sm btn-icon btn-link" (click)="share()">
-      <cds-icon shape="share"></cds-icon> Share
+    <button class="btn btn-sm btn-icon btn-link" (click)="share()" title="Share">
+      <cds-icon shape="share"></cds-icon>{{isMobileScreen?'':' '+'Share'}}
     </button>
     <clr-dropdown>
       <button class="btn btn-sm btn-outline-primary" clrDropdownTrigger>

diff --git a/src/app/component/event-card/event-card.component.ts b/src/app/component/event-card/event-card.component.ts
@@ -11,6 +11,10 @@ import { Clipboard } from '@angular/cdk/clipboard';
 import { LoginUtil } from 'src/app/util/LoginUtil';
 import { Subscription, BehaviorSubject } from 'rxjs';
 import { Community } from 'src/app/model/community';
+import {
+  BreakpointObserver,
+  BreakpointState
+} from '@angular/cdk/layout';
 
 const MENTION_REGEX = /(#\[(\d+)\])/gi;
 const NOSTR_NPUB_REGEX = /nostr:(npub[\S]*)/gi;
@@ -49,7 +53,7 @@ export class EventCardComponent implements OnInit, OnDestroy{
   hideCommunityHeader: boolean = false;
   loadingApproval:boolean = false;
   showingApprovers:boolean = false;
-
+  isMobileScreen:boolean = false;
   approvalEvents?:Set<NDKEvent>;
   approvedModHexIds:string[] = [];
   canModerate:boolean = false;
@@ -107,7 +111,8 @@ export class EventCardComponent implements OnInit, OnDestroy{
 
   constructor(ndkProvider: NdkproviderService, private renderer: Renderer2,
     private dbService: ZappeditdbService, private router:Router, public domSanitizer:DomSanitizer,
-      private clipboard: Clipboard, private changeDetector:ChangeDetectorRef) {
+      private clipboard: Clipboard, private changeDetector:ChangeDetectorRef,
+      private breakpointObserver: BreakpointObserver) {
     this.ndkProvider = ndkProvider;
     var mediaSettings = localStorage.getItem(Constants.SHOWMEDIA)
     if(mediaSettings!=null || mediaSettings!=undefined || mediaSettings!=''){
@@ -120,6 +125,18 @@ export class EventCardComponent implements OnInit, OnDestroy{
   }
 
   ngOnInit():void {
+    this.breakpointObserver
+    .observe(['(min-width: 800px)'])
+    .subscribe((state: BreakpointState) => {
+      if (state.matches) {
+        this.isMobileScreen = false;
+        console.log("larger than mobile")
+      } else {
+        this.isMobileScreen = true;
+        console.log("mobile")
+      }
+    });
+
     this.hexEventId = this.event?.id;
     this.originalKind = this.event?.kind;
     if(this.event?.kind === 4549){
@@ -144,6 +161,7 @@ export class EventCardComponent implements OnInit, OnDestroy{
     this.displayedContent = this.replaceNpubMentionsWithComponents(this.displayedContent)
     this.displayedContent = this.replaceNoteMentionsWithComponents(this.displayedContent)
     this.displayedContent = this.replaceNEventMentionsWithComponents(this.displayedContent)
+    this.displayedContent = this.displayedContent?.replace('\n','<br/>')
     this.linkifiedContent = this.linkifyContent(this.displayedContent)
     this.getAuthor();
     this.getCommunity();

diff --git a/src/app/pipe/short-number.pipe.ts b/src/app/pipe/short-number.pipe.ts
@@ -8,7 +8,7 @@ export class ShortNumberPipe implements PipeTransform {
     transform(number: number, args?: any): any {
         if (isNaN(number)) return null; // will only work value is a number
         if (number === null) return null;
-        if (number === 0) return null;
+        if (number === 0) return 0;
         let abs = Math.abs(number);
         const rounder = Math.pow(10, 1);
         const isNegative = number < 0; // will also work for Negetive numbers