diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js index 030934f85..905c15f46 100644 --- a/src/public/javascripts/services/sidebar.js +++ b/src/public/javascripts/services/sidebar.js @@ -1,3 +1,23 @@ +import NoteInfoWidget from "../widgets/note_info.js"; + +const WIDGET_TPL = ` +
+
+
+ +
+
+ +
+
+
+
+`; + +let widgetIdCtr = 1; + class Sidebar { /** * @param {TabContext} ctx @@ -5,6 +25,7 @@ class Sidebar { constructor(ctx) { this.ctx = ctx; this.$sidebar = ctx.$tabContent.find(".note-detail-sidebar"); + this.$widgets = this.$sidebar.find(".note-detail-widgets"); this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button"); this.$showSideBarButton.hide(); @@ -18,7 +39,35 @@ class Sidebar { this.$showSideBarButton.click(() => { this.$sidebar.show(); this.$showSideBarButton.hide(); - }) + }); + } + + async noteLoaded() { + this.$widgets.empty(); + + this.addNoteInfoWidget(); + this.addNoteInfoWidget(); + } + + async addNoteInfoWidget() { + const $widget = this.createWidgetElement(); + + const noteInfoWidget = new NoteInfoWidget(this.ctx, $widget); + await noteInfoWidget.renderBody(); + + console.log($widget); + + this.$widgets.append($widget); + } + + createWidgetElement() { + const widgetId = 'widget-' + widgetIdCtr++; + + const $widget = $(WIDGET_TPL); + $widget.find('[data-target]').attr('data-target', "#" + widgetId); + $widget.find('.body-wrapper').attr('id', widgetId); + + return $widget; } } diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js index a12cf5908..5751a54f8 100644 --- a/src/public/javascripts/services/tab_context.js +++ b/src/public/javascripts/services/tab_context.js @@ -60,9 +60,9 @@ class TabContext { this.noteChangeDisabled = false; this.isNoteChanged = false; this.attributes = new Attributes(this); - this.sidebar = new Sidebar(this); if (utils.isDesktop()) { + this.sidebar = new Sidebar(this); this.noteType = new NoteTypeContext(this); } @@ -133,6 +133,10 @@ class TabContext { this.showPaths(); + if (this.sidebar) { + this.sidebar.noteLoaded(); + } + console.debug(`Switched tab ${this.tabId} to ${this.noteId}`); } diff --git a/src/public/javascripts/widgets/note_info.js b/src/public/javascripts/widgets/note_info.js new file mode 100644 index 000000000..d412a3ca2 --- /dev/null +++ b/src/public/javascripts/widgets/note_info.js @@ -0,0 +1,59 @@ +const TPL = ` + + + + + + + + + + + + + + + + + + + + + +
Note ID
Created
Modified
Type
MIME
+`; + +class NoteInfoWidget { + /** + * @param {TabContext} ctx + * @param {jQuery} $widget + */ + constructor(ctx, $widget) { + this.ctx = ctx; + this.$widget = $widget; + this.$title = this.$widget.find('.widget-title'); + this.$title.text("Note info"); + } + + async renderBody() { + const $body = this.$widget.find('.card-body'); + + $body.html(TPL); + + const $noteId = $body.find(".note-info-note-id"); + const $dateCreated = $body.find(".note-info-date-created"); + const $dateModified = $body.find(".note-info-date-modified"); + const $type = $body.find(".note-info-type"); + const $mime = $body.find(".note-info-mime"); + + const note = this.ctx.note; + + $noteId.text(note.noteId); + $dateCreated.text(note.dateCreated); + $dateModified.text(note.dateModified); + $type.text(note.type); + $mime.text(note.mime); + } +} + +export default NoteInfoWidget; \ No newline at end of file diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 6d2a33013..3e24c8870 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -152,8 +152,8 @@ body { background-color: inherit; } -#note-info-table td, #note-info-table th { - padding: 15px; +.widget .note-info-table td, .widget .note-info-table th { + padding: 5px; } [data-toggle="tooltip"] span { diff --git a/src/views/sidebar.ejs b/src/views/sidebar.ejs index a481b4b76..69cded6dd 100644 --- a/src/views/sidebar.ejs +++ b/src/views/sidebar.ejs @@ -3,47 +3,5 @@ -
-
-
- -
-
- -
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
-
-
-
- -
-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
-
-
-
- -
-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
+
\ No newline at end of file