A different approach for making cards clickable (re #2)

OpenBudget · Dec 7, 2023 · 87eac78 · 87eac78
1 parent f3baac0
commit 87eac78
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 25 deletions.
diff --git a/projects/budgetkey/src/app/common-components/seo.service.ts b/projects/budgetkey/src/app/common-components/seo.service.ts
@@ -26,7 +26,7 @@ export class SeoService {
     //   }
     // };
     this.seo.setTitle(title);
-    this.seo.setMetaSiteName(this.globalSettings.siteName + '1');
+    this.seo.setMetaSiteName(this.globalSettings.siteName + '');
     this.seo.setMetaCanonical(canonical);
     this.seo.setMetaUrl(canonical);
     this.seo.setMetaCustomTags([

diff --git a/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html b/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html
@@ -1,7 +1,7 @@
 <div class='dialog'>
     <ng-container *ngIf='!listSelectionMode'>
         <div class='header'>
-            <div class='icon'></div>
+            <div class='icon' (activated)='cancel()' clickOnReturn></div>
             <div class='title'>
                 <span>נוסף לרשימה:</span>
                 <h1>{{list.title}}</h1>

diff --git a/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less b/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less
@@ -30,6 +30,11 @@
                 background-image: url(../../../assets/lists/icon-list-red.svg);
                 background-size: contain;
                 background-repeat: no-repeat;
+                cursor: pointer;
+
+                &:hover {
+                    background-image: url(../../../assets/lists/icon-remove-list-red.svg);
+                }
             }
 
             .title {

diff --git a/...ects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts b/...ects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts
@@ -147,4 +147,8 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
   toggleSubscription(list: ListContents) {
     this.subscriptionState[list.name] = !this.subscriptionState[list.name];
   }
+
+  cancel() {
+    this.commands.emit([]);
+  }
 }
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html
@@ -2,7 +2,7 @@
     <div class='icon bk-tooltip-anchor' *ngIf='!enabled()'>
         <span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
     </div>
-    <div class='icon bk-tooltip-anchor' *ngIf='enabled()' [class.subscribed]='subscribed()' [class.processing]='processing()' clickOnReturn (activated)='click()'>
+    <div class='icon bk-tooltip-anchor' *ngIf='enabled()' [class.subscribed]='subscribed()' [class.processing]='processing()' clickOnReturn (activated)='click($event)'>
         <span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
     </div>
     <app-add-to-list-dialog *ngIf='dialogOpen()' [doc]='doc' [listSelection]='subscribed()' (commands)='execute($event)'></app-add-to-list-dialog>

diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts
@@ -54,13 +54,15 @@ export class AddToListIconComponent implements OnChanges {
     this.subscribed.set(this.doc && this.doc.source.doc_id && !!this.itemIds[this.doc.source.doc_id]);
   }
 
-  click() {
+  click(ev: Event) {
     if (!this.enabled()) {
       return;
     }
     if (this.processing()) {
       return;
     }
+    ev.stopPropagation();
+    ev.preventDefault();
     this.dialogOpen.set(true);
     timer(50).subscribe(() => {
       this.subscribed.set(true);

diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.html b/projects/budgetkey/src/app/list-components/search-result/search-result.component.html
@@ -1,16 +1,19 @@
-<a  [href]='href()' 
-    [target]='bare ? "_blank" : "_self"'
-    clickOnReturn
-    [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
-    [routerLink]='routerLink()'
-    [queryParams]='{li: index}'
-    [queryParamsHandling]='"merge"'
+<div  
     class='card' 
     [class.horizontal]='horizontal'
     [style.border-color]='p.secondaryColor'
     [style.background-color]='p.bgColor'
     [attr.data-doc-id]='item.source.doc_id'
     >
+    <a
+        [href]='href()' 
+        [target]='bare ? "_blank" : "_self"'
+        clickOnReturn
+        [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
+        [routerLink]='routerLink()'
+        [queryParams]='{li: index}'
+        [queryParamsHandling]='"merge"'
+    ></a>
     <div class='top-line'>
         <span class='top-line-tag' *ngIf='p.tag' [innerHtml]='p.tag'
               [style.background-color]='p.tagColor'
@@ -82,8 +85,7 @@
     <div class='notes' *ngIf='showNotes && (editableNotes || (notes && notes.length))'>
         <div class='inner'>
             <input [(ngModel)]='notes' kind='text' placeholder='#תגיות והערות לסעיף זה....' [class.empty]='!notes || !notes.length'
-            (blur)='updateNotes()' (click)='inputClicked($event)' [style.pointer-events]='editableNotes ? "all" : "none"'
-            >
+            (blur)='updateNotes()' [style.pointer-events]='editableNotes ? "all" : "none"'>
         </div>
     </div>
-</a>
+</div>
diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.less b/projects/budgetkey/src/app/list-components/search-result/search-result.component.less
@@ -6,6 +6,35 @@
     border-radius: 4px;
     box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
     border: solid 1px black;
+    position: relative;
+
+    * {
+        pointer-events: none;
+    }
+
+    & > * {
+        z-index: 1;
+        position: relative;
+        background-color: @color-white;
+    }
+
+    & > a {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: all;
+        background: rgba(100,0,0,0.1);
+        z-index: 0;
+    }
+
+    .notes, app-add-to-list-icon {
+        * {
+            pointer-events: all;
+        }
+        pointer-events: all;
+    }
 
     &.horizontal {
         width: 320px;
@@ -17,6 +46,7 @@
         display: flex;
         flex-flow: row;
         align-items: center;
+        position: relative;
 
         span {
             font-family: 'Abraham TRIAL';
@@ -261,18 +291,22 @@
 
                 &.empty {
                     padding-right: 24px;
+                    .background-image;
+                    background-size: 16px;
+                    background-image: url(../../../assets/lists/icon-edit-gray-400.svg);
+                    background-position: center right;    
                 }
 
                 &::placeholder {
                     color: @color-gray-600;
                     .font-abraham;
                     font-size: 13px;
                     font-weight: 300;
-                    .background-image;
-                    background-size: 16px;
-                    background-image: url(../../../assets/lists/icon-edit-gray-400.svg);
-                    background-position: center right;
                 }
+
+                // &:focus {
+                //     background-image: none;
+                // }
             }
         }
     }

diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts b/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts
@@ -720,11 +720,4 @@ export class SearchResultComponent implements OnInit {
   updateNotes() {
     this.updatedNotes.emit(this.notes);
   }
-
-  inputClicked(ev: Event) {
-    if (this.editableNotes) {
-      ev.stopPropagation();
-      ev.preventDefault();  
-    }
-  }
 }
diff --git a/projects/budgetkey/src/app/list-page/list-page/list-page.component.ts b/projects/budgetkey/src/app/list-page/list-page/list-page.component.ts
@@ -20,6 +20,7 @@ export class ListPageComponent {
   init = false;
   list: ListContents|null = null;
   listKey: string|null = null;
+  canonical: string = '';
 
   constructor(private globalSettings: GlobalSettingsService, private seo: SeoService, private route: ActivatedRoute,
       private lists: ListsService, private router: Router, private ps: PlatformService, @Optional() @Inject(REQUEST) private request: Request) {
@@ -41,6 +42,7 @@ export class ListPageComponent {
         this.router.navigate(['/not-found'], {queryParamsHandling: 'preserve', replaceUrl: true});
       } else {
         this.list = list;
+        this.seo.setSeo(`${list?.title} - מפתח התקציב`, this.canonical);
       }
     });
     this.route.params.pipe(
@@ -52,6 +54,7 @@ export class ListPageComponent {
       filter((params) => !!params.listId && !!params.userId),
     ).subscribe((list) => {
       this.listKey = `${list.userId}:${list.listId}`;
+      this.canonical = `https://next.obudget.org/l/${list.userId}/${list.listId}`;
       this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: this.listKey }, queryParamsHandling: 'merge', replaceUrl: true});
     });
   }