From 87eac7889d3da2e3ef25ad0af577613d48455147 Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Thu, 7 Dec 2023 14:04:01 +0200 Subject: [PATCH] A different approach for making cards clickable (re #2) --- .../src/app/common-components/seo.service.ts | 2 +- .../add-to-list-dialog.component.html | 2 +- .../add-to-list-dialog.component.less | 5 +++ .../add-to-list-dialog.component.ts | 4 ++ .../add-to-list-icon.component.html | 2 +- .../add-to-list-icon.component.ts | 4 +- .../search-result.component.html | 22 +++++----- .../search-result.component.less | 42 +++++++++++++++++-- .../search-result/search-result.component.ts | 7 ---- .../list-page/list-page.component.ts | 3 ++ 10 files changed, 68 insertions(+), 25 deletions(-) diff --git a/projects/budgetkey/src/app/common-components/seo.service.ts b/projects/budgetkey/src/app/common-components/seo.service.ts index 4971e34..cae8b94 100644 --- 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/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 7eb7b2b..f80e196 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,7 +1,7 @@
-
+
נוסף לרשימה:

{{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 31b9fb7..fc87f44 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 @@ -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/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 d5a2ddd..6d687d7 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 @@ -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 index 4c9f866..8635fdc 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 @@ -2,7 +2,7 @@
-
+
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 5b54751..de3f916 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 @@ -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 index 2180a75..f71f598 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,16 +1,19 @@ - +
+ (blur)='updateNotes()' [style.pointer-events]='editableNotes ? "all" : "none"'>
- \ 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.less b/projects/budgetkey/src/app/list-components/search-result/search-result.component.less index fd06093..687de52 100644 --- 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,6 +291,10 @@ &.empty { padding-right: 24px; + .background-image; + background-size: 16px; + background-image: url(../../../assets/lists/icon-edit-gray-400.svg); + background-position: center right; } &::placeholder { @@ -268,11 +302,11 @@ .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 index b74d86b..d858988 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,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 index 3f11f4e..9b4a663 100644 --- 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}); }); }