From 9cd45299b18844314e50629c65602eecdbb477af Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Tue, 30 Mar 2021 23:26:14 +0200
Subject: [PATCH] grid items in note list are clickable as a whole

---
 src/public/app/services/link.js               |  2 +-
 src/public/app/services/note_list_renderer.js | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/public/app/services/link.js b/src/public/app/services/link.js
index ceaf73ab2..99ce1bfe3 100644
--- a/src/public/app/services/link.js
+++ b/src/public/app/services/link.js
@@ -72,7 +72,7 @@ function goToLink(e) {
     e.preventDefault();
     e.stopPropagation();
 
-    const $link = $(e.target).closest("a");
+    const $link = $(e.target).closest("a,.block-link");
 
     const notePath = getNotePathFromLink($link);
 
diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js
index 1a4ea8975..10c0b8fc6 100644
--- a/src/public/app/services/note_list_renderer.js
+++ b/src/public/app/services/note_list_renderer.js
@@ -20,6 +20,7 @@ const TPL = `
     
     .note-list.grid-view .note-book-card {
         flex-basis: 300px;
+        border: 1px solid transparent;
     }
     
     .note-list.grid-view .note-expander {
@@ -30,6 +31,12 @@ const TPL = `
         max-height: 300px;
     }
     
+    .note-list.grid-view .note-book-card:hover {
+        cursor: pointer;
+        border: 1px solid var(--main-border-color);
+        background: var(--more-accented-background-color);
+    }
+    
     .note-book-card {
         border-radius: 10px;
         background-color: var(--accented-background-color);
@@ -310,6 +317,7 @@ class NoteListRenderer {
         const $expander = $('<span class="note-expander bx bx-chevron-right"></span>');
 
         const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note);
+        const notePath = this.parentNote.noteId + '/' + note.noteId;
 
         const $card = $('<div class="note-book-card">')
             .attr('data-note-id', note.noteId)
@@ -317,10 +325,20 @@ class NoteListRenderer {
                 $('<h5 class="note-book-title">')
                     .append($expander)
                     .append($('<span class="note-icon">').addClass(note.getIcon()))
-                    .append(await linkService.createNoteLink(note.noteId, {showTooltip: false, showNotePath: this.showNotePath}))
+                    .append(this.viewType === 'grid'
+                        ? note.title
+                        : await linkService.createNoteLink(notePath, {showTooltip: false, showNotePath: this.showNotePath})
+                    )
                     .append($renderedAttributes)
             );
 
+        if (this.viewType === 'grid') {
+            $card
+                .addClass("block-link")
+                .attr("data-note-path", notePath)
+                .on('click', e => linkService.goToLink(e));
+        }
+
         $expander.on('click', () => this.toggleContent($card, note, !$card.hasClass("expanded")));
 
         await this.toggleContent($card, note, expand);