Fixes re #2

OpenBudget · Dec 6, 2023 · f3baac0 · f3baac0
1 parent 6114fd4
commit f3baac0
Show file tree

Hide file tree

Showing 17 changed files with 205 additions and 97 deletions.
diff --git a/projects/budgetkey/src/app/common-components/bk-tooltip.less b/projects/budgetkey/src/app/common-components/bk-tooltip.less
@@ -1,3 +1,5 @@
+@import '../../common.less';
+
 .bk-tooltip-anchor {
     position: relative;
     display: inline;
@@ -8,21 +10,31 @@
     span.bk-tooltip {
         position: absolute;
         display: none;
-        width: 300px;
+        width: max-content;
+        max-width: 300px;
         color: #FFFFFF;
-        background: #434343;
+        background: @color-gray-700;
         line-height: 18px;
-        text-align: center;
         visibility: hidden;
-        border-radius: 3px;
+        border-radius: 4px;
+
+        text-align: right;
         font-size: 14px;
+        line-height: 17x;
         font-weight: 300;
-        padding: 10px;
-        text-align: justify;
-        font-family: "Abraham TRIAL", "Alef Hebrew", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+
+        &.bk-bigger {
+            text-align: center;
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: 400;    
+        }
+        padding: 4px 8px;
+
+        .font-abraham;
 
         @media only screen and (max-width: 600px)  {
-            width: 150px;
+            max-width: 150px;
             font-size: 10px;
             line-height: 12px;
             padding: 5px;
@@ -31,11 +43,10 @@
         &:after {
             content: '';
             position: absolute;
-            bottom: 100%;
-            left: 95%;
-            margin-left: -5px;
+            top: -5px;
+            right: 5px;
             width: 0; height: 0;
-            border-bottom: 5px solid #434343;
+            border-bottom: 5px solid @color-gray-700;
             border-right: 5px solid transparent;
             border-left: 5px solid transparent;
 
@@ -46,26 +57,37 @@
 
         &.bk-align-left {        
             &:after {
-                left: 5%;
+                left: 5px;
+                right: auto;
             }
         }
 
+        &.bk-align-top {        
+            &:after {
+                bottom: -5px;
+                top: auto;
+                transform: rotate(180deg);
+            }
+        }
     }
 
     &:hover .bk-tooltip {
         visibility: visible;
         display: inherit;
-        top: ~"calc(100% + 5px)";
-        left: 50%;
-        margin-left: -280px;
+        bottom: -4px;
+        right: calc(50% ~'-' 10px);
+        transform: translateY(100%);
         z-index: 999;    
 
-        @media only screen and (max-width: 600px)  {
-            margin-left: -75px;
+        &.bk-align-left {        
+            left: 4px;
+            right: auto;
         }
 
-        &.bk-align-left {        
-            margin-left: -10px;
+        &.bk-align-top {        
+            top: -4px;
+            bottom: auto;
+            transform: translateY(-100%);
         }
     }
 
@@ -76,8 +98,8 @@
         position: relative;
     }
 
-    &.img:hover .bk-tooltip {
-        top: ~"calc(100% + 0.75em)";
-        left: ~"calc(50% - 0.32em)";
-    }
+    // &.img:hover .bk-tooltip {
+    //     top: ~"calc(100% + 0.75em)";
+    //     left: ~"calc(50% - 0.32em)";
+    // }
 }
diff --git a/projects/budgetkey/src/app/common-components/components/modal/modal.component.html b/projects/budgetkey/src/app/common-components/components/modal/modal.component.html
@@ -1,16 +1,13 @@
 <div class="bkmodal-bg">
   <div class="bkmodal-dialog">
-    <div class="bkmodal-content" *ngIf='standardLayout'>
-      <button type="button" class="close" (click)="_close()">&times;</button>
-      <div class="bkmodal-header" *ngIf='title'>
+    <div class="bkmodal-content">
+      <button *ngIf='standardLayout' type="button" class="close" (click)="_close()">&times;</button>
+      <div  *ngIf='standardLayout && title' class='bkmodal-header'>
         <h4 class="modal-title">{{title}}</h4>
       </div>
-      <div class="bkmodal-body">
+      <div [class.bkmodal-body]='standardLayout'>
         <ng-content></ng-content>
       </div>
     </div>
-    <div *ngIf='!standardLayout'>
-      <ng-content></ng-content>
-    </div>
   </div>
 </div>
diff --git a/projects/budgetkey/src/app/common-components/layout.service.ts b/projects/budgetkey/src/app/common-components/layout.service.ts
@@ -10,12 +10,16 @@ export class LayoutService {
   constructor(private window: WindowService) {
     if (this.window._) {
       fromEvent(this.window._, 'resize').subscribe(() => {
-        this.width.set(this.window._?.innerWidth || 0);
+        this.recalcWidth();
       });
-      this.width.set(this.window._?.innerWidth || 0);
+      this.recalcWidth();
     }
   }
 
+  recalcWidth() {
+    this.width.set(this.window._?.innerWidth || 0);
+  }
+
   get mobile() {
     return (this.window._?.innerWidth || 0) < 768;
   }

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,5 +1,5 @@
 <div class='dialog'>
-    <ng-container *ngIf='!listSelection'>
+    <ng-container *ngIf='!listSelectionMode'>
         <div class='header'>
             <div class='icon'></div>
             <div class='title'>
@@ -8,15 +8,16 @@ <h1>{{list.title}}</h1>
             </div>
             <div class='action'>
                 <a class='close-button' *ngIf='editing' (activated)='done()' clickOnReturn></a>
+                <a class='select-list-button' *ngIf='!editing' (activated)='listSelectionMode = true' clickOnReturn></a>
             </div>
         </div>
         <div class='notes'>
             <div class='placeholder' *ngIf='!editing' clickOnReturn (activated)='editing = true'>#תגיות והערות לסעיף זה...</div>
             <textarea [(ngModel)]='itemNotes' placeholder='#תגיות והערות לסעיף זה...' *ngIf='editing'></textarea>
         </div>
     </ng-container>
-    <ng-container *ngIf='listSelection'>
-        <div class='list-selection' *ngIf='listSelection'>
+    <ng-container *ngIf='listSelectionMode'>
+        <div class='list-selection'>
             <ng-container *ngFor='let list of lists.curatedLists()'>
                 <div class='list-selection-item' clickOnReturn (activated)='toggleSubscription(list)' [class.subscribed]='subscribed(list)'>
                     <div class='icon'></div>

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
@@ -143,6 +143,10 @@
                 &.subscribed {
                     .icon {
                         background-image: url(../../../assets/lists/icon-list-red.svg);
+
+                        &:hover {
+                            background-image: url(../../../assets/lists/icon-remove-list-red.svg);
+                        }
                     }
 
                     .title {
@@ -242,6 +246,11 @@
                     background-image: url(../../../assets/lists/icon-complete-red.svg);
                     background-size: 24px;
                 }
+
+                &.select-list-button {
+                    background-image: url(../../../assets/lists/icon-chevron-down-grayish-blue.svg);
+                    background-size: 12px;
+                }
             }
         }
     }

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
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, Output, effect, signal } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, effect, signal } from '@angular/core';
 import { EMPTY_LIST, ListContents, ListItem, ListsService } from '../../common-components/services/lists.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { first, fromEvent, take, timer } from 'rxjs';
@@ -19,7 +19,7 @@ export interface AddToListDialogCommand {
   templateUrl: './add-to-list-dialog.component.html',
   styleUrls: ['./add-to-list-dialog.component.less']
 })
-export class AddToListDialogComponent implements AfterViewInit, OnChanges {
+export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChanges {
 
   @Input() listSelection = false;
   @Input() doc: DocResultEntry;
@@ -31,6 +31,7 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
   originalSubscriptionState: any = {};
   subscriptionState: any = {};
 
+  listSelectionMode = false;
   editing = false;
   itemNotes = '';
   newList: string | null = null;
@@ -54,7 +55,7 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
         this.originalSubscriptionState[list_.name] = this.checkSubscribed(list_);
         this.subscriptionState[list_.name] = this.originalSubscriptionState[list_.name];
       });
-      if (list && !this.listSelection) {
+      if (list && !this.listSelectionMode) {
         this.originalSubscriptionState[list.name] = false;
         this.subscriptionState[list.name] = true;
       }
@@ -67,6 +68,10 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
     });
   }
 
+  ngOnInit(): void {
+    this.listSelectionMode = this.listSelection;
+  }
+
   ngOnChanges(): void {
     this.ready.set(true);
   }

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
@@ -1,4 +1,9 @@
 <ng-container *ngIf='doc'>
-    <div class='icon' [class.subscribed]='subscribed' [class.processing]='processing' clickOnReturn *ngIf='enabled' (activated)='click()'></div>
-    <app-add-to-list-dialog *ngIf='dialogOpen' [doc]='doc' [listSelection]='subscribed' (commands)='execute($event)'></app-add-to-list-dialog>
+    <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()'>
+        <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>
 </ng-container>
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less
@@ -12,18 +12,17 @@
 
     position: relative;
 
-    &.enabled {
+    // &.enabled {
         width: 24px;
         height: 24px;
         overflow: visible;
-    }
+    // }
     .icon {
         display: inline-block;
         width: 24px;
         height: 24px;
         .background-image;
         background-size: 24px;
-        cursor: pointer;
 
         background-image: url(../../../assets/lists/icon-not-subscribed.svg);
         &.subscribed {
@@ -35,6 +34,12 @@
         }
     }
 
+    &.enabled {
+        .icon {
+            cursor: pointer;
+        }
+    }
+
     app-add-to-list-dialog {
         position: absolute;
         top: 24px;