diff --git a/projects/budgetkey/src/app/common-components/bk-tooltip.less b/projects/budgetkey/src/app/common-components/bk-tooltip.less index 505e96b..dca9649 100644 --- 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)"; + // } } \ No newline at end of file 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 index 37952ed..b98dadd 100644 --- 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 @@
-
- -
+
+ +

{{title}}

-
+
-
- -
\ No newline at end of file diff --git a/projects/budgetkey/src/app/common-components/layout.service.ts b/projects/budgetkey/src/app/common-components/layout.service.ts index 396c863..8847a1c 100644 --- 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/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html index 9211b5e..7eb7b2b 100644 --- a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html +++ b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html @@ -1,5 +1,5 @@
- +
@@ -8,6 +8,7 @@

{{list.title}}

+
@@ -15,8 +16,8 @@

{{list.title}}

 - -
+ +
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less index f10cf2d..31b9fb7 100644 --- a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less +++ b/projects/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/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts b/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts index 8f84803..d5a2ddd 100644 --- a/projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts +++ b/projects/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 index f0286d0..4c9f866 100644 --- 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 @@ -
- +
+ +
+
+ +
+ 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 index 419f843..1932b86 100644 --- 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; 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 index 7284f46..5b54751 100644 --- 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 @@ -1,9 +1,9 @@ -import { Component, Input, OnChanges, SimpleChanges, effect } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, computed, effect, signal } from '@angular/core'; import { UntilDestroy } from '@ngneat/until-destroy'; import { EMPTY_LIST, ListContents, ListsService } from '../../common-components/services/lists.service'; import { ActivatedRoute, Router } from '@angular/router'; import { AddToListDialogCommand } from '../add-to-list-dialog/add-to-list-dialog.component'; -import { EMPTY, forkJoin, from, map, of, switchMap, tap } from 'rxjs'; +import { EMPTY, forkJoin, from, map, of, switchMap, tap, timer } from 'rxjs'; import { DocResultEntry } from '../../common-components/search-models'; @UntilDestroy() @@ -12,20 +12,37 @@ import { DocResultEntry } from '../../common-components/search-models'; templateUrl: './add-to-list-icon.component.html', styleUrls: ['./add-to-list-icon.component.less'], host: { - '[class.enabled]': 'enabled', + '[class.enabled]': 'enabled()', } }) export class AddToListIconComponent implements OnChanges { @Input() doc: DocResultEntry; - enabled = false; - subscribed = false; + enabled = computed(() => { + return this.lists.hasCuratedLists(); + }); + subscribed = signal(false); + tooltipText = computed(() => { + if (this.dialogOpen()) { + return null; + } + if (!this.enabled()) { + return 'יש להתחבר בכדי
להוסיף לרשימה'; + } + if (this.subscribed()) { + return 'ניהול פריט'; + } else { + return 'הוספה לרשימה'; + } + }); itemIds: any = {}; - processing: boolean = false; - dialogOpen: boolean = false; + processing = signal(false); + dialogOpen = signal(false); constructor(public lists: ListsService, private router: Router, private route: ActivatedRoute) { - effect(() => this.update()); + effect(() => this.update(), { + allowSignalWrites: true, + }); } ngOnChanges(): void { @@ -33,23 +50,32 @@ export class AddToListIconComponent implements OnChanges { } update() { - this.enabled = this.lists.hasCuratedLists(); this.itemIds = this.lists.curatedItemIds(); - this.subscribed = this.doc && this.doc.source.doc_id && !!this.itemIds[this.doc.source.doc_id]; + this.subscribed.set(this.doc && this.doc.source.doc_id && !!this.itemIds[this.doc.source.doc_id]); } click() { - if (this.processing) { + if (!this.enabled()) { + return; + } + if (this.processing()) { return; } - this.dialogOpen = true; + this.dialogOpen.set(true); + timer(50).subscribe(() => { + this.subscribed.set(true); + }); + } + + tooltip() { } execute(commands: AddToListDialogCommand[]) { - this.dialogOpen = false; - this.processing = true; + this.dialogOpen.set(false); + this.processing.set(true); + this.update(); if (commands.length === 0) { - this.processing = false; + this.processing.set(false); return; } const observables = commands.map(command => this.executeCommand(command)); @@ -68,7 +94,7 @@ export class AddToListIconComponent implements OnChanges { this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: key }, queryParamsHandling: 'merge' }); } }); - this.processing = false; + this.processing.set(false); }); } diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts b/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts index ba89707..e682e78 100644 --- a/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts +++ b/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import {Component, ViewEncapsulation, Input, signal, AfterViewInit, effect, computed} from '@angular/core'; +import {Component, ViewEncapsulation, Input, signal, AfterViewInit, effect, computed, OnChanges} from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { GlobalSettingsService } from '../../common-components/global-settings.service'; import { distinct, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs'; @@ -14,7 +14,7 @@ import { LayoutService } from '../../common-components/layout.service'; templateUrl: './app-container.component.html', styleUrls: ['./app-container.component.less'], }) -export class AppContainerComponent { +export class AppContainerComponent implements AfterViewInit, OnChanges { @Input() showHeader = true; @Input() showFooter = true; @Input() showSearchBar = false; @@ -57,17 +57,20 @@ export class AppContainerComponent { this.lists.currentListId.set(this.listKey()); }); effect(() => { - let maxWidth = this.layout.width(); - if (this.showListView()) { - maxWidth -= 400; - } - if (maxWidth < 0) { - maxWidth = 0; - } - this.maxWidth.set(maxWidth); + const x = this.hasListView(); + this.updateWidth(); }, { allowSignalWrites: true}); } + ngAfterViewInit(): void { + this.layout.recalcWidth(); + this.updateWidth(); + } + + ngOnChanges(): void { + this.updateWidth(); + } + showListView() { return this.layout.desktop && this.listSideView && this.hasListView(); } @@ -75,4 +78,15 @@ export class AppContainerComponent { onDeleted() { this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: null }, queryParamsHandling: 'merge', replaceUrl: true}); } + + updateWidth() { + let maxWidth = this.layout.width(); + if (this.showListView()) { + maxWidth -= 400; + } + if (maxWidth < 0) { + maxWidth = 0; + } + this.maxWidth.set(maxWidth); + } } 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 index 7fd14aa..2180a75 100644 --- 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,8 +1,15 @@ -
- +
- +
@@ -68,7 +67,7 @@ - +
@@ -83,8 +82,8 @@
-
\ No newline at end of file + \ No newline at end of file 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 index d858988..b74d86b 100644 --- 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,4 +720,11 @@ 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-routing.module.ts b/projects/budgetkey/src/app/list-page/list-routing.module.ts index e8e2da7..ad9f2ea 100644 --- a/projects/budgetkey/src/app/list-page/list-routing.module.ts +++ b/projects/budgetkey/src/app/list-page/list-routing.module.ts @@ -13,10 +13,9 @@ const routes: Routes = [ component: ListPageComponent }, ]; - - @NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] - }) - export class ListRoutingModule {} - \ No newline at end of file + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ListRoutingModule {} diff --git a/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg b/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg new file mode 100644 index 0000000..a41b399 --- /dev/null +++ b/projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg b/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg index f3bb4f8..3540a33 100644 --- a/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg +++ b/projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg @@ -1,3 +1,3 @@ - + diff --git a/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg b/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg index ec92aec..c9bf4d1 100644 --- a/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg +++ b/projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg @@ -1,3 +1,3 @@ - + diff --git a/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg b/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg new file mode 100644 index 0000000..653610b --- /dev/null +++ b/projects/budgetkey/src/assets/lists/icon-remove-list-red.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +