Skip to content

Commit b8ec5c5

Browse files
adirochsadirochs
committed
feat(homepage-quick-access) - add "pinned" on the left menu for quick access
1 parent 23fefbc commit b8ec5c5

10 files changed

Lines changed: 276 additions & 210 deletions

File tree

‎apps/codever-api/resources/mongodb-commands-for-dev/snippets-commands.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// find last 10 snippets created
2+
db.snippets.find().sort({createdAt: -1}).limit(10).pretty();
3+
4+
// find count snippets that have origin property
5+
db.snippets.find({ origin: { $exists: true } }).count();
6+
7+
// show last 10 snippets that have origin property
8+
db.snippets.find({ origin: { $exists: true } }).sort({createdAt: -1}).limit(10).pretty();
9+
10+
// count snippets that have reference property
11+
db.snippets.find({ reference: { $exists: true } }).count();
12+
13+
// find snippets that include "a text" in the title property
14+
db.snippets.find({ title: /a text/ }).pretty();
15+
16+
// find snipppets where "initiator" exists and not undefined
17+
db.snippets.find({ initiator: { $ne: undefined } }).pretty();

‎apps/codever-ui/src/app/app.component.html‎

Lines changed: 11 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -43,56 +43,20 @@
4343
>
4444
<i class="fas fa-cog mr-1"></i> Settings
4545
</a>
46-
<div
47-
*ngIf="latestVisitedBookmarks$ | async as latestVisitedBookmarks"
48-
class="mt-1"
49-
(mouseout)="resetHoveringLastVisited()"
50-
>
51-
<a
52-
class="list-group-item list-group-item-action bg-light"
53-
title="Ctrl+H for quick access"
54-
(click)="launchHistoryDialog()"
55-
>
56-
<i class="fas fa-history mr-1"></i> History bookmarks (<b>Ctrl</b>+<b>h</b>)
57-
</a>
58-
<ng-container
59-
*ngFor="let bookmark of latestVisitedBookmarks; let i = index"
60-
class="mt-1"
61-
>
62-
<span class="mt-1 mr-2 on-top">
63-
<a
64-
(mouseover)="hoveringLastVisited[i] = true"
65-
(mouseout)="hoveringLastVisited[i] = false"
66-
class="badge badge-secondary mb-1 ml-2"
67-
[class.my-bookmarks-last-search]="bookmark.public === false"
68-
[class.public-bookmarks-last-search]="bookmark.public === true"
69-
title="See bookmark details. Right click to go directly to main link - {{
70-
bookmark.location
71-
}}"
72-
(click)="navigateToBookmarkDetails(bookmark)"
73-
(auxclick)="goToMainLink(bookmark)"
74-
target="_blank"
75-
>
76-
<i class="fa fa-xs fa-bookmark mr-1"></i>
77-
<span
78-
*ngIf="!hoveringLastVisited[i]; else longVersionLastVisited"
79-
>{{
80-
bookmark.name.length > 33
81-
? bookmark.name.substring(0, 33) + '...'
82-
: bookmark.name
83-
}}</span
84-
>
85-
<ng-template #longVersionLastVisited>{{
86-
bookmark.name
87-
}}</ng-template>
88-
</a>
89-
</span>
90-
</ng-container>
91-
</div>
46+
<app-quick-access-bookmarks
47+
[quickAccessBookmarks]="latestPinnedBookmarks$ | async"
48+
[source]="'pinned'"
49+
(newSectionTitleEvent)="launchDialogFromQuickAccess($event)">
50+
</app-quick-access-bookmarks>
51+
<app-quick-access-bookmarks
52+
[quickAccessBookmarks]="latestVisitedBookmarks$ | async"
53+
[source]="'last_visited'"
54+
(newSectionTitleEvent)="launchDialogFromQuickAccess($event)">
55+
</app-quick-access-bookmarks>
9256

9357
<ng-container *ngIf="latestSearches$ | async as latestSearches">
9458
<a
95-
class="list-group-item list-group-item-action bg-light"
59+
class="ml-2 mt-3 bg-light"
9660
title="Ctrl+S for quick access"
9761
(click)="displaySearchBarSearches()"
9862
>

‎apps/codever-ui/src/app/app.component.scss‎

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,106 +3,8 @@
33
display: block;
44
}
55

6-
// START side-navigation
7-
#wrapper {
8-
overflow-x: hidden;
9-
}
10-
11-
#sidebar-wrapper {
12-
margin-top: 100px;
13-
//min-height: 100vh;
14-
margin-left: -15rem;
15-
-webkit-transition: margin 0.25s ease-out;
16-
-moz-transition: margin 0.25s ease-out;
17-
-o-transition: margin 0.25s ease-out;
18-
transition: margin 0.25s ease-out;
19-
}
20-
21-
#sidebar-wrapper .sidebar-heading {
22-
padding: 0.875rem 1.25rem;
23-
font-size: 1.2rem;
24-
}
25-
26-
#sidebar-wrapper .list-group {
27-
width: 16.5rem;
28-
}
29-
30-
#page-content-wrapper {
31-
min-width: 100vw;
32-
}
33-
34-
#wrapper.toggled #sidebar-wrapper {
35-
margin-left: 0;
36-
}
37-
38-
#sidebar-wrapper {
39-
display: none;
40-
}
41-
42-
@media (min-width: 1200px) {
43-
#sidebar-wrapper {
44-
display: flex;
45-
margin-left: 0;
46-
}
47-
48-
#page-content-wrapper {
49-
min-width: 0;
50-
width: 100%;
51-
}
52-
53-
#wrapper.toggled #sidebar-wrapper {
54-
margin-left: -15rem;
55-
}
56-
}
57-
// END side-navigation
58-
596
footer {
607
margin-top: 1rem;
618
text-align: center;
629
font-size: 0.8em;
6310
}
64-
65-
.header-notification-wrapper {
66-
display: flex;
67-
justify-content: space-between;
68-
}
69-
70-
.my-snippets-last-search {
71-
background: black;
72-
color: white;
73-
}
74-
75-
.last-search-border {
76-
border-width: 0.05rem;
77-
border-style: solid;
78-
border-color: #495057;
79-
}
80-
81-
.public-bookmarks-last-search {
82-
@extend .last-search-border;
83-
background: #f0f2f5;
84-
color: black;
85-
}
86-
87-
.public-snippets-last-search {
88-
@extend .last-search-border;
89-
background: darkgray;
90-
color: white;
91-
}
92-
93-
.my-bookmarks-last-search {
94-
@extend .last-search-border;
95-
background: linen;
96-
color: #495057;
97-
}
98-
99-
.my-notes-last-search {
100-
@extend .last-search-border;
101-
background: lightgoldenrodyellow;
102-
color: #495057;
103-
}
104-
105-
.on-top {
106-
position: relative;
107-
z-index: 900;
108-
}

‎apps/codever-ui/src/app/app.component.ts‎

Lines changed: 35 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,9 @@ export class AppComponent implements OnInit {
4040
showAcknowledgeMigrationHeader = false;
4141
latestSearches$: Observable<Search[]>;
4242
latestVisitedBookmarks$: Observable<Bookmark[]>;
43+
latestPinnedBookmarks$: Observable<Bookmark[]>;
4344

4445
private hoveringLastSearches: boolean[] = [];
45-
private hoveringLastVisited: boolean[] = [
46-
false,
47-
false,
48-
false,
49-
false,
50-
false,
51-
false,
52-
false,
53-
false,
54-
false,
55-
false,
56-
];
5746

5847
favIcon: HTMLLinkElement = document.querySelector('#favicon');
5948
readonly environment = environment;
@@ -99,6 +88,8 @@ export class AppComponent implements OnInit {
9988
this.userId,
10089
1
10190
);
91+
this.latestPinnedBookmarks$ =
92+
this.userDataPinnedStore.getPinnedBookmarks$(this.userId, 1);
10293
});
10394
this.userData$ = this.userDataStore.getUserData$();
10495
this.latestSearches$ = this.userData$.pipe(
@@ -124,31 +115,32 @@ export class AppComponent implements OnInit {
124115
this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);
125116
} else {
126117
event.preventDefault();
127-
const dialogConfig = new MatDialogConfig();
128-
129-
dialogConfig.disableClose = false;
130-
dialogConfig.autoFocus = true;
131-
dialogConfig.width = this.getRelativeWidth();
132-
dialogConfig.height = this.getRelativeHeight();
133-
dialogConfig.scrollStrategy = this.scrollStrategy;
134-
dialogConfig.data = {
135-
bookmarks$: this.userDataPinnedStore.getPinnedBookmarks$(
136-
this.userId,
137-
1
138-
),
139-
title: '<i class="fas fa-thumbtack"></i> Pinned',
140-
};
141-
142-
const dialogRef = this.historyDialog.open(
143-
HotKeysDialogComponent,
144-
dialogConfig
145-
);
146-
dialogRef.afterClosed().subscribe((data) => {
147-
console.log('Dialog output:', data);
148-
});
118+
this.launchPinnedDialog();
149119
}
150120
}
151121

122+
private launchPinnedDialog() {
123+
const dialogConfig = new MatDialogConfig();
124+
125+
dialogConfig.disableClose = false;
126+
dialogConfig.autoFocus = true;
127+
dialogConfig.width = this.getRelativeWidth();
128+
dialogConfig.height = this.getRelativeHeight();
129+
dialogConfig.scrollStrategy = this.scrollStrategy;
130+
dialogConfig.data = {
131+
bookmarks$: this.userDataPinnedStore.getPinnedBookmarks$(this.userId, 1),
132+
title: '<i class="fas fa-thumbtack"></i> Pinned',
133+
};
134+
135+
const dialogRef = this.historyDialog.open(
136+
HotKeysDialogComponent,
137+
dialogConfig
138+
);
139+
dialogRef.afterClosed().subscribe((data) => {
140+
console.log('Dialog output:', data);
141+
});
142+
}
143+
152144
private getRelativeWidth() {
153145
let relativeWidth = (window.innerWidth * 80) / 100;
154146
if (window.innerWidth > 1500) {
@@ -236,35 +228,18 @@ export class AppComponent implements OnInit {
236228
this.hoveringLastSearches.forEach((item) => (item = false));
237229
}
238230

239-
resetHoveringLastVisited() {
240-
this.hoveringLastVisited.forEach((item) => (item = false));
241-
}
242-
243-
navigateToBookmarkDetails(bookmark: Bookmark): void {
244-
let link = [`./my-bookmarks/${bookmark._id}/details`];
245-
if (bookmark.public) {
246-
link = [`./bookmarks/${bookmark._id}/details`];
247-
}
248-
this.router.navigate(link, {
249-
state: { bookmark: bookmark },
250-
});
251-
this.addToHistoryService.promoteInHistoryIfLoggedIn(
252-
this.userIsLoggedIn,
253-
bookmark
254-
);
255-
}
256-
257-
goToMainLink(bookmark: Bookmark) {
258-
this.addToHistoryService.promoteInHistoryIfLoggedIn(
259-
this.userIsLoggedIn,
260-
bookmark
261-
);
262-
window.open(bookmark.location, '_blank');
263-
}
264-
265231
displaySearchBarSearches() {
266232
this.latestSearchClickNotificationService.sendMessage(
267233
'click on latest searches'
268234
);
269235
}
236+
237+
launchDialogFromQuickAccess(source: string) {
238+
if (source === 'last_visited') {
239+
this.launchHistoryDialog();
240+
}
241+
if (source === 'pinned') {
242+
this.launchPinnedDialog();
243+
}
244+
}
270245
}

‎apps/codever-ui/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
import { SnippetNotFoundComponent } from './not-found/snippet-not-found.component';
3939
import { SystemService } from './core/cache/system.service';
4040
import { NewEntryComponent } from './new-entry/new-entry.component';
41+
import { QuickAccessBookmarksComponent } from './left-navigation-menu/quick-access-bookmarks.component';
4142

4243
function initializeKeycloak(
4344
keycloak: KeycloakService,
@@ -132,6 +133,7 @@ function initializeKeycloak(
132133
],
133134
declarations: [
134135
AppComponent,
136+
QuickAccessBookmarksComponent,
135137
PageNotFoundComponent,
136138
SnippetNotFoundComponent,
137139
LoaderComponent,

‎apps/codever-ui/src/app/left-navigation-menu/quick-access-bookmarks.component.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<div
2+
*ngIf="quickAccessBookmarks && quickAccessBookmarks.length > 0"
3+
class="mt-3"
4+
(mouseout)="resetHovering()"
5+
>
6+
<a *ngIf="source === 'last_visited'"
7+
class="ml-2 bg-light"
8+
title="Ctrl+h for quick access"
9+
(click)="addNewSectionTitleEvent(source)"
10+
>
11+
<i class="fas fa-history mr-1"></i> History bookmarks (<b>Ctrl</b>+<b>h</b>)
12+
</a>
13+
<a *ngIf="source === 'pinned'"
14+
class="ml-2 bg-light"
15+
title="Ctrl+p for quick access"
16+
(click)="addNewSectionTitleEvent(source)"
17+
>
18+
<i class="fas fa-thumbtack mr-1"></i> Pinned bookmarks (<b>Ctrl</b>+<b>p</b>)
19+
</a>
20+
<ng-container
21+
*ngFor="let bookmark of quickAccessBookmarks; let i = index"
22+
class="mt-1"
23+
>
24+
<span class="mt-1 mr-2 on-top">
25+
<a
26+
(mouseover)="hovering[i] = true"
27+
(mouseout)="hovering[i] = false"
28+
class="badge badge-secondary mb-1 ml-2"
29+
[class.my-bookmarks-last-search]="bookmark.public === false"
30+
[class.public-bookmarks-last-search]="bookmark.public === true"
31+
title="See bookmark details. Right click to go directly to main link - {{
32+
bookmark.location
33+
}}"
34+
(click)="navigateToBookmarkDetails(bookmark)"
35+
(auxclick)="goToMainLink(bookmark)"
36+
target="_blank"
37+
>
38+
<i class="fa fa-xs fa-bookmark mr-1"></i>
39+
<span
40+
*ngIf="!hovering[i]; else longVersion"
41+
>{{
42+
bookmark.name.length > 33
43+
? bookmark.name.substring(0, 33) + '...'
44+
: bookmark.name
45+
}}</span
46+
>
47+
<ng-template #longVersion>{{
48+
bookmark.name
49+
}}</ng-template>
50+
</a>
51+
</span>
52+
</ng-container>
53+
</div>

0 commit comments

Comments
 (0)