Skip to content

Commit f3baac0

Browse files
akarivakariv
committed
Fixes re #2 
1 parent 6114fd4 commit f3baac0

17 files changed

+205
-97
lines changed

‎projects/budgetkey/src/app/common-components/bk-tooltip.less

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../common.less';
2+
13
.bk-tooltip-anchor {
24
position: relative;
35
display: inline;
@@ -8,21 +10,31 @@
810
span.bk-tooltip {
911
position: absolute;
1012
display: none;
11-
width: 300px;
13+
width: max-content;
14+
max-width: 300px;
1215
color: #FFFFFF;
13-
background: #434343;
16+
background: @color-gray-700;
1417
line-height: 18px;
15-
text-align: center;
1618
visibility: hidden;
17-
border-radius: 3px;
19+
border-radius: 4px;
20+
21+
text-align: right;
1822
font-size: 14px;
23+
line-height: 17x;
1924
font-weight: 300;
20-
padding: 10px;
21-
text-align: justify;
22-
font-family: "Abraham TRIAL", "Alef Hebrew", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
25+
26+
&.bk-bigger {
27+
text-align: center;
28+
font-size: 16px;
29+
line-height: 20px;
30+
font-weight: 400;
31+
}
32+
padding: 4px 8px;
33+
34+
.font-abraham;
2335

2436
@media only screen and (max-width: 600px) {
25-
width: 150px;
37+
max-width: 150px;
2638
font-size: 10px;
2739
line-height: 12px;
2840
padding: 5px;
@@ -31,11 +43,10 @@
3143
&:after {
3244
content: '';
3345
position: absolute;
34-
bottom: 100%;
35-
left: 95%;
36-
margin-left: -5px;
46+
top: -5px;
47+
right: 5px;
3748
width: 0; height: 0;
38-
border-bottom: 5px solid #434343;
49+
border-bottom: 5px solid @color-gray-700;
3950
border-right: 5px solid transparent;
4051
border-left: 5px solid transparent;
4152

@@ -46,26 +57,37 @@
4657

4758
&.bk-align-left {
4859
&:after {
49-
left: 5%;
60+
left: 5px;
61+
right: auto;
5062
}
5163
}
5264

65+
&.bk-align-top {
66+
&:after {
67+
bottom: -5px;
68+
top: auto;
69+
transform: rotate(180deg);
70+
}
71+
}
5372
}
5473

5574
&:hover .bk-tooltip {
5675
visibility: visible;
5776
display: inherit;
58-
top: ~"calc(100% + 5px)";
59-
left: 50%;
60-
margin-left: -280px;
77+
bottom: -4px;
78+
right: calc(50% ~'-' 10px);
79+
transform: translateY(100%);
6180
z-index: 999;
6281

63-
@media only screen and (max-width: 600px) {
64-
margin-left: -75px;
82+
&.bk-align-left {
83+
left: 4px;
84+
right: auto;
6585
}
6686

67-
&.bk-align-left {
68-
margin-left: -10px;
87+
&.bk-align-top {
88+
top: -4px;
89+
bottom: auto;
90+
transform: translateY(-100%);
6991
}
7092
}
7193

@@ -76,8 +98,8 @@
7698
position: relative;
7799
}
78100

79-
&.img:hover .bk-tooltip {
80-
top: ~"calc(100% + 0.75em)";
81-
left: ~"calc(50% - 0.32em)";
82-
}
101+
// &.img:hover .bk-tooltip {
102+
// top: ~"calc(100% + 0.75em)";
103+
// left: ~"calc(50% - 0.32em)";
104+
// }
83105
}

‎projects/budgetkey/src/app/common-components/components/modal/modal.component.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
<div class="bkmodal-bg">
22
<div class="bkmodal-dialog">
3-
<div class="bkmodal-content" *ngIf='standardLayout'>
4-
<button type="button" class="close" (click)="_close()">&times;</button>
5-
<div class="bkmodal-header" *ngIf='title'>
3+
<div class="bkmodal-content">
4+
<button *ngIf='standardLayout' type="button" class="close" (click)="_close()">&times;</button>
5+
<div *ngIf='standardLayout && title' class='bkmodal-header'>
66
<h4 class="modal-title">{{title}}</h4>
77
</div>
8-
<div class="bkmodal-body">
8+
<div [class.bkmodal-body]='standardLayout'>
99
<ng-content></ng-content>
1010
</div>
1111
</div>
12-
<div *ngIf='!standardLayout'>
13-
<ng-content></ng-content>
14-
</div>
1512
</div>
1613
</div>

‎projects/budgetkey/src/app/common-components/layout.service.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@ export class LayoutService {
1010
constructor(private window: WindowService) {
1111
if (this.window._) {
1212
fromEvent(this.window._, 'resize').subscribe(() => {
13-
this.width.set(this.window._?.innerWidth || 0);
13+
this.recalcWidth();
1414
});
15-
this.width.set(this.window._?.innerWidth || 0);
15+
this.recalcWidth();
1616
}
1717
}
1818

19+
recalcWidth() {
20+
this.width.set(this.window._?.innerWidth || 0);
21+
}
22+
1923
get mobile() {
2024
return (this.window._?.innerWidth || 0) < 768;
2125
}

‎projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class='dialog'>
2-
<ng-container *ngIf='!listSelection'>
2+
<ng-container *ngIf='!listSelectionMode'>
33
<div class='header'>
44
<div class='icon'></div>
55
<div class='title'>
@@ -8,15 +8,16 @@ <h1>{{list.title}}</h1>
88
</div>
99
<div class='action'>
1010
<a class='close-button' *ngIf='editing' (activated)='done()' clickOnReturn></a>
11+
<a class='select-list-button' *ngIf='!editing' (activated)='listSelectionMode = true' clickOnReturn></a>
1112
</div>
1213
</div>
1314
<div class='notes'>
1415
<div class='placeholder' *ngIf='!editing' clickOnReturn (activated)='editing = true'>#תגיות והערות לסעיף זה...</div>
1516
<textarea [(ngModel)]='itemNotes' placeholder='#תגיות והערות לסעיף זה...' *ngIf='editing'></textarea>
1617
</div>
1718
</ng-container>
18-
<ng-container *ngIf='listSelection'>
19-
<div class='list-selection' *ngIf='listSelection'>
19+
<ng-container *ngIf='listSelectionMode'>
20+
<div class='list-selection'>
2021
<ng-container *ngFor='let list of lists.curatedLists()'>
2122
<div class='list-selection-item' clickOnReturn (activated)='toggleSubscription(list)' [class.subscribed]='subscribed(list)'>
2223
<div class='icon'></div>

‎projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,10 @@
143143
&.subscribed {
144144
.icon {
145145
background-image: url(../../../assets/lists/icon-list-red.svg);
146+
147+
&:hover {
148+
background-image: url(../../../assets/lists/icon-remove-list-red.svg);
149+
}
146150
}
147151

148152
.title {
@@ -242,6 +246,11 @@
242246
background-image: url(../../../assets/lists/icon-complete-red.svg);
243247
background-size: 24px;
244248
}
249+
250+
&.select-list-button {
251+
background-image: url(../../../assets/lists/icon-chevron-down-grayish-blue.svg);
252+
background-size: 12px;
253+
}
245254
}
246255
}
247256
}

‎projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, Output, effect, signal } from '@angular/core';
1+
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, effect, signal } from '@angular/core';
22
import { EMPTY_LIST, ListContents, ListItem, ListsService } from '../../common-components/services/lists.service';
33
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
44
import { first, fromEvent, take, timer } from 'rxjs';
@@ -19,7 +19,7 @@ export interface AddToListDialogCommand {
1919
templateUrl: './add-to-list-dialog.component.html',
2020
styleUrls: ['./add-to-list-dialog.component.less']
2121
})
22-
export class AddToListDialogComponent implements AfterViewInit, OnChanges {
22+
export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChanges {
2323

2424
@Input() listSelection = false;
2525
@Input() doc: DocResultEntry;
@@ -31,6 +31,7 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
3131
originalSubscriptionState: any = {};
3232
subscriptionState: any = {};
3333

34+
listSelectionMode = false;
3435
editing = false;
3536
itemNotes = '';
3637
newList: string | null = null;
@@ -54,7 +55,7 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
5455
this.originalSubscriptionState[list_.name] = this.checkSubscribed(list_);
5556
this.subscriptionState[list_.name] = this.originalSubscriptionState[list_.name];
5657
});
57-
if (list && !this.listSelection) {
58+
if (list && !this.listSelectionMode) {
5859
this.originalSubscriptionState[list.name] = false;
5960
this.subscriptionState[list.name] = true;
6061
}
@@ -67,6 +68,10 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
6768
});
6869
}
6970

71+
ngOnInit(): void {
72+
this.listSelectionMode = this.listSelection;
73+
}
74+
7075
ngOnChanges(): void {
7176
this.ready.set(true);
7277
}

‎projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<ng-container *ngIf='doc'>
2-
<div class='icon' [class.subscribed]='subscribed' [class.processing]='processing' clickOnReturn *ngIf='enabled' (activated)='click()'></div>
3-
<app-add-to-list-dialog *ngIf='dialogOpen' [doc]='doc' [listSelection]='subscribed' (commands)='execute($event)'></app-add-to-list-dialog>
2+
<div class='icon bk-tooltip-anchor' *ngIf='!enabled()'>
3+
<span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
4+
</div>
5+
<div class='icon bk-tooltip-anchor' *ngIf='enabled()' [class.subscribed]='subscribed()' [class.processing]='processing()' clickOnReturn (activated)='click()'>
6+
<span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
7+
</div>
8+
<app-add-to-list-dialog *ngIf='dialogOpen()' [doc]='doc' [listSelection]='subscribed()' (commands)='execute($event)'></app-add-to-list-dialog>
49
</ng-container>

‎projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,17 @@
1212

1313
position: relative;
1414

15-
&.enabled {
15+
// &.enabled {
1616
width: 24px;
1717
height: 24px;
1818
overflow: visible;
19-
}
19+
// }
2020
.icon {
2121
display: inline-block;
2222
width: 24px;
2323
height: 24px;
2424
.background-image;
2525
background-size: 24px;
26-
cursor: pointer;
2726

2827
background-image: url(../../../assets/lists/icon-not-subscribed.svg);
2928
&.subscribed {
@@ -35,6 +34,12 @@
3534
}
3635
}
3736

37+
&.enabled {
38+
.icon {
39+
cursor: pointer;
40+
}
41+
}
42+
3843
app-add-to-list-dialog {
3944
position: absolute;
4045
top: 24px;

0 commit comments

Comments
 (0)