added calendar to the sidebar

src/public/app/layouts/desktop_layout.js

@@ -40,6 +40,7 @@ import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js";
 import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import EditButton from "../widgets/buttons/edit_button.js";
+import CalendarMenuWidget from "../widgets/buttons/calendar_menu.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -71,6 +72,7 @@ export default class DesktopLayout {
                     .icon("bx-history")
                     .title("Show recent changes")
                     .command("showRecentChanges"))
+                .child(new CalendarMenuWidget())
                 .child(new SpacerWidget(40, 0))
                 .child(new FlexContainer("column")
                     .id("plugin-buttons")

src/public/app/widgets/buttons/calendar_menu.js

@@ -1,71 +1,88 @@
-import CollapsibleWidget from "../collapsible_widget.js";
 import libraryLoader from "../../services/library_loader.js";
 import utils from "../../services/utils.js";
 import dateNoteService from "../../services/date_notes.js";
 import server from "../../services/server.js";
 import appContext from "../../services/app_context.js";
+import BasicWidget from "../basic_widget.js";
 
 const TPL = `
-<div class="calendar-widget">
+<div class="dropdown calendar-menu-widget dropright">
-  <div class="calendar-header">
+    <style>
-    <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
+    .calendar-menu-widget {
+        width: 53px;
+        height: 53px;
+    }
     
-    <div class="calendar-header-label" data-calendar-label="month"></div>
+    .calendar-menu {
+        width: 350px;
+    }
+    </style>
 
-    <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
+    <button type="button" data-toggle="dropdown" data-placement="right"
-  </div>
+            aria-haspopup="true" aria-expanded="false" 
+            class="icon-action bx bx-calendar calendar-menu-button" title="Calendar"></button>
     
-  <div class="calendar-week">
+    <div class="dropdown-menu dropdown-menu-right">
-    <span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
+        <div class="calendar-menu">
-  </div>
+          <div class="calendar-header">
-  <div class="calendar-body" data-calendar-area="month"></div>
+            <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
+        
+            <div class="calendar-header-label" data-calendar-label="month"></div>
+        
+            <button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
+          </div>
+        
+          <div class="calendar-week">
+            <span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
+          </div>
+          <div class="calendar-body" data-calendar-area="month"></div>
+        </div>
+    </div>
 </div>
 `;
 
-export default class CalendarWidget extends CollapsibleWidget {
+export default class CalendarMenuWidget extends BasicWidget {
-    get widgetTitle() { return "Calendar"; }
+    doRender() {
+        this.$widget = $(TPL);
 
-    isEnabled() {
+        this.$month = this.$widget.find('[data-calendar-area="month"]');
-        return super.isEnabled()
+        this.$next = this.$widget.find('[data-calendar-toggle="next"]');
-            && this.note.hasOwnedLabel("dateNote");
+        this.$previous = this.$widget.find('[data-calendar-toggle="previous"]');
-    }
+        this.$label = this.$widget.find('[data-calendar-label="month"]');
-
-    async doRenderBody() {
-        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
-
-        this.$body.html(TPL);
-
-        this.$month = this.$body.find('[data-calendar-area="month"]');
-        this.$next = this.$body.find('[data-calendar-toggle="next"]');
-        this.$previous = this.$body.find('[data-calendar-toggle="previous"]');
-        this.$label = this.$body.find('[data-calendar-label="month"]');
 
         this.$next.on('click', () => {
             this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
 
-        this.$previous.on('click', () => {
+        this.$previous.on('click', e => {
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();
         });
 
-        this.$body.on('click', '.calendar-date', async ev => {
+        this.$widget.find('.calendar-header').on("click", e => e.stopPropagation());
+
+        this.$widget.on('click', '.calendar-date', async ev => {
             const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
 
             const note = await dateNoteService.getDateNote(date);
 
             if (note) {
                 appContext.tabManager.getActiveContext().setNote(note.noteId);
+                this.$widget.dropdown("hide");
             }
             else {
                 alert("Cannot find day note");
             }
         });
-    }
 
-    async refreshWithNote(note) {
+        this.$widget.on('show.bs.dropdown', async () => {
-        this.init(this.$body, note.getOwnedLabelValue("dateNote"));
+            await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
+
+            const activeNote = appContext.tabManager.getActiveContextNote();
+
+            this.init(this.$widget, activeNote?.getOwnedLabelValue("dateNote"));
+        });
     }
 
     init($el, activeDate) {

src/public/stylesheets/calendar.css

@@ -1,14 +1,14 @@
-.calendar-widget *, .calendar-widget *:before, .calendar-widget *:after {
+.calendar-menu *, .calendar-menu *:before, .calendar-menu *:after {
   box-sizing: border-box;
 }
 
-.calendar-widget {
+.calendar-menu {
   margin: 0 auto;
   overflow: hidden;
   width: 100%;
 }
 
-.calendar-widget .calendar-btn {
+.calendar-menu .calendar-btn {
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-appearance: button;
@@ -25,24 +25,24 @@
   text-align: center;
 }
 
-.calendar-widget .calendar-header {
+.calendar-menu .calendar-header {
   align-items: center;
   display: flex;
   padding: 0 0.5rem 0.5rem 0.5rem;
 }
 
-.calendar-widget .calendar-header-label {
+.calendar-menu .calendar-header-label {
   font-weight: bold;
   text-align: center;
   width: 100%;
 }
 
-.calendar-widget .calendar-week {
+.calendar-menu .calendar-week {
   display: flex;
   flex-wrap: wrap;
 }
 
-.calendar-widget .calendar-week span {
+.calendar-menu .calendar-week span {
   flex-direction: column;
   flex: 0 0 14.28%;
   font-size: 1rem;
@@ -54,12 +54,12 @@
   text-transform: uppercase;
 }
 
-.calendar-widget .calendar-body {
+.calendar-menu .calendar-body {
   display: flex;
   flex-wrap: wrap;
 }
 
-.calendar-widget .calendar-date {
+.calendar-menu .calendar-date {
   align-items: center;
   color: var(--main-text-color);
   background-color: var(--main-background-color);
@@ -71,24 +71,24 @@
   font-size: 120%;
 }
 
-.calendar-widget .calendar-date:hover {
+.calendar-menu .calendar-date:hover {
   color: var(--hover-item-text-color);
   background-color: var(--hover-item-background-color);
 }
 
-.calendar-widget .calendar-date-active {
+.calendar-menu .calendar-date-active {
   background-color: var(--active-item-background-color);
   color: var(--active-item-text-color);
 }
 
-.calendar-widget .calendar-date-today {
+.calendar-menu .calendar-date-today {
   font-weight: bold;
 }
 
-.calendar-widget .calendar-date-exists {
+.calendar-menu .calendar-date-exists {
   text-decoration: underline !important;
 }
 
-.calendar-widget .calendar-date:not(.calendar-date-active) {
+.calendar-menu .calendar-date:not(.calendar-date-active) {
   cursor: pointer;
 }