zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-01-01 12:52:17 +08:00
Code Issues Projects Releases Packages Wiki Activity

added note type picker component

Browse source
This commit is contained in:
azivner 2018-01-21 23:06:25 -05:00
parent c8f456d228
commit f9631ff59f
5 changed files with 116 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/javascripts/dialogs/attributes.js
View file

@ -54,7 +54,7 @@ const attributesDialog = (function() {
e.preventDefault();
});
ko.applyBindings(attributesModel);
ko.applyBindings(attributesModel, document.getElementById('attributes-dialog'));
return {
showDialog

2
public/javascripts/note_editor.js
View file

@ -131,8 +131,6 @@ const noteEditor = (function() {
noteTitleEl.val(currentNote.detail.note_title);
console.log("Type: " + currentNote.detail.type);
if (currentNote.detail.type === 'text') {
// temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49
editor.setData(currentNote.detail.note_text ? currentNote.detail.note_text : "<p></p>");

87
public/javascripts/note_type.js Normal file
View file

@ -0,0 +1,87 @@
"use strict";
const noteType = (function() {
const noteTypeModel = new NoteTypeModel();
function NoteTypeModel() {
const self = this;
this.type = ko.observable('text');
this.mime = ko.observable('');
this.codeMimeTypes = ko.observableArray([
{ mime: 'text/x-csrc', title: 'C' },
{ mime: 'text/x-c++src', title: 'C++' },
{ mime: 'text/x-csharp', title: 'C#' },
{ mime: 'text/x-clojure', title: 'Clojure' },
{ mime: 'text/css', title: 'CSS' },
{ mime: 'text/x-dockerfile', title: 'Dockerfile' },
{ mime: 'text/x-erlang', title: 'Erlang' },
{ mime: 'text/x-feature', title: 'Gherkin' },
{ mime: 'text/x-go', title: 'Go' },
{ mime: 'text/x-groovy', title: 'Groovy' },
{ mime: 'text/x-haskell', title: 'Haskell' },
{ mime: 'message/http', title: 'HTTP' },
{ mime: 'text/x-java', title: 'Java' },
{ mime: 'text/javascript', title: 'JavaScript' },
{ mime: 'text/x-kotlin', title: 'Kotlin' },
{ mime: 'text/x-lua', title: 'Lua' },
{ mime: 'text/x-markdown', title: 'Markdown' },
{ mime: 'text/x-objectivec', title: 'Objective C' },
{ mime: 'text/x-pascal', title: 'Pascal' },
{ mime: 'text/x-perl', title: 'Perl' },
{ mime: 'text/x-php', title: 'PHP' },
{ mime: 'text/x-python', title: 'Python' },
{ mime: 'text/x-ruby', title: 'Ruby' },
{ mime: 'text/x-rustsrc', title: 'Rust' },
{ mime: 'text/x-scala', title: 'Scala' },
{ mime: 'text/x-sh', title: 'Shell' },
{ mime: 'text/x-sql', title: 'SQL' },
{ mime: 'text/x-swift', title: 'Swift' },
{ mime: 'text/xml', title: 'XML' },
{ mime: 'text/x-yaml', title: 'YAML' }
]);
this.typeString = function() {
const type = self.type();
const mime = self.mime();
if (type === 'text') {
return 'Text';
}
else if (type === 'code') {
if (!mime) {
return 'Code';
}
else {
const found = self.codeMimeTypes().find(x => x.mime === mime);
return found ? found.title : mime;
}
}
else {
throwError('Unrecognized type: ' + type);
}
};
this.selectText = function() {
self.type('text');
self.mime('');
};
this.selectCode = function() {
self.type('code');
self.mime('');
};
this.selectCodeMime = function(el) {
self.type('code');
self.mime(el.mime);
};
}
ko.applyBindings(noteTypeModel, document.getElementById('note-type'));
return {
};
})();

14
public/stylesheets/style.css
View file

@ -201,16 +201,20 @@ div.ui-tooltip {
filter: opacity(7%);
}
.dropdown-menu li {
.dropdown-menu li:not(.divider) {
padding: 5px;
width: 200px;
}
.dropdown-menu li:hover, .dropdown-menu a:hover {
.dropdown-menu li:not(.divider):hover, .dropdown-menu li:not(.divider) a:hover {
background-color: #eee !important;
cursor: pointer;
}
.dropdown-menu li:not(.selected) .check {
visibility: hidden;
}
.dropdown-menu kbd
{
color: black;
@ -236,4 +240,10 @@ div.ui-tooltip {
right: 10px;
bottom: 5px;
z-index: 1000;
}
#note-type-dropdown {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}

16
views/index.ejs
View file

@ -95,6 +95,21 @@
<span id="note-id-display" title="Note ID"></span>
<div class="dropdown" id="note-type">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
Type: <span data-bind="text: typeString()"></span>
<span class="caret"></span>
</button>
<ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
<li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></li>
<li role="separator" class="divider"></li>
<li data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">&check;</span> <strong>Code</strong></li>
<!-- ko foreach: codeMimeTypes -->
<li data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">&check;</span> <span data-bind="text: title"></span></li>
<!-- /ko -->
</ul>
</div>
<div class="dropdown" style="margin-left: 10px; margin-right: 10px;">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm">
Note actions
@ -445,6 +460,7 @@
<!-- Note detail -->
<script src="javascripts/note_editor.js"></script>
<script src="javascripts/protected_session.js"></script>
<script src="javascripts/note_type.js"></script>
<!-- dialogs -->
<script src="javascripts/dialogs/recent_notes.js"></script>