gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

added calendar to the sidebar

Browse Source
This commit is contained in:
zadam 2021-07-05 14:46:20 +02:00
parent da0670188b
commit 3c8e267aad
5 changed files with 70 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libraries/ckeditor/ckeditor.js.map
View File

File diff suppressed because one or more lines are too long

2
src/public/app/layouts/desktop_layout.js
View File

@ -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")

85
src/public/app/widgets/collapsible_widgets/calendar.js → src/public/app/widgets/buttons/calendar_menu.js
View File

@ -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="calendar-header">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
<div class="dropdown calendar-menu-widget dropright">
<style>
.calendar-menu-widget {
width: 53px;
height: 53px;
}
.calendar-menu {
width: 350px;
}
</style>
<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>
<button type="button" data-toggle="dropdown" data-placement="right"
aria-haspopup="true" aria-expanded="false"
class="icon-action bx bx-calendar calendar-menu-button" title="Calendar"></button>
<div class="dropdown-menu dropdown-menu-right">
<div class="calendar-menu">
<div class="calendar-header">
<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 {
get widgetTitle() { return "Calendar"; }
export default class CalendarMenuWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
isEnabled() {
return super.isEnabled()
&& this.note.hasOwnedLabel("dateNote");
}
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.$month = this.$widget.find('[data-calendar-area="month"]');
this.$next = this.$widget.find('[data-calendar-toggle="next"]');
this.$previous = this.$widget.find('[data-calendar-toggle="previous"]');
this.$label = this.$widget.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.init(this.$body, note.getOwnedLabelValue("dateNote"));
this.$widget.on('show.bs.dropdown', async () => {
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
const activeNote = appContext.tabManager.getActiveContextNote();
this.init(this.$widget, activeNote?.getOwnedLabelValue("dateNote"));
});
}
init($el, activeDate) {

4
src/public/app/widgets/collapsible_widgets/edited_notes.js
View File

@ -7,8 +7,8 @@ const TPL = `
<div class="edited-notes-widget">
<style>
.edited-notes-widget .edited-note-line {
white-space: nowrap;
overflow-x: hidden;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
</style>

28
src/public/stylesheets/calendar.css
View File

@ -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;
}