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

layout conversion to cleaner CSS grid, work in progress

Browse Source
This commit is contained in:
azivner 2017-09-23 23:54:38 -04:00
parent d47b2e5d0e
commit 21f49ea7c5
3 changed files with 79 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/templates/app.html
View File

@ -5,85 +5,86 @@
<title>Notecase web app</title> <title>Notecase web app</title>
</head> </head>
<body> <body>
<div id="top" style="text-align: center;"> <div id="top" style="grid-area: messages; text-align: center;">&nbsp;
&nbsp;
<span id="top-message"></span> <span id="top-message"></span>
<span id="error-message"></span> <span id="error-message"></span>
</div> </div>
<div id="content" style="margin-left: auto; margin-right: auto; width: 1100px; position: relative;"> <div class="hide-toggle" style="grid-area: search">
<div style="position: absolute; left: 1020px;" class="hide-toggle"> <p>
<form action="logout" method="POST"> <label>Search:</label>
<input type="submit" class="btn btn-sm" value="Logout"> <input name="search" autocomplete="off">
</form> <button id="btnResetSearch">&times;</button>
</div> <span id="matches"></span>
</p>
</div>
<div class="hide-toggle" style="position: absolute; left: 940px;"> <div class="hide-toggle" style="grid-area: tree-buttons;">
<button class="btn btn-sm" onclick="displaySettings();">Settings</button> <a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
</div> <img src="stat/icons/file-plus.png" alt="Create new top level note"/>
</a>
<div class="hide-toggle" style="width: 300px; height: 100%; float: left;"> <a onclick="collapseTree()" title="Collapse tree" class="icon-action">
<p> <img src="stat/icons/list.png" alt="Collapse tree"/>
<label>Search:</label> </a>
<input name="search" autocomplete="off">
<button id="btnResetSearch">&times;</button>
<span id="matches"></span>
</p>
<a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action"> <a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action">
<img src="stat/icons/file-plus.png" alt="Create new top level note"/> <img src="stat/icons/crosshair.png" alt="Collapse tree"/>
</a>
</div>
<div id="tree" style="overflow: auto; grid-area: tree">
</div>
<div style="grid-area: title">
<div style="display: flex; align-items: center;" class="hide-toggle">
<a onclick="encryptNoteAndSendToServer()"
title="Encrypt the note so that password will be required to view the note"
class="icon-action"
id="encryptButton"
style="display: none;">
<img src="stat/icons/lock.png" alt="Encrypt note"/>
</a> </a>
<a onclick="collapseTree()" title="Collapse tree" class="icon-action"> <a onclick="decryptNoteAndSendToServer()"
<img src="stat/icons/list.png" alt="Collapse tree"/> title="Decrypt note permamently so that password will not be required to access this note in the future"
class="icon-action"
id="decryptButton"
style="display: none;">
<img src="stat/icons/unlock.png" alt="Decrypt note"/>
</a> </a>
<a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action"> &nbsp;
<img src="stat/icons/crosshair.png" alt="Collapse tree"/>
</a>
<div id="tree"> <input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
<div class="hide-toggle">
<form action="logout" method="POST">
<input type="submit" class="btn btn-sm" value="Logout">
</form>
</div>
<div class="hide-toggle">
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
</div> </div>
</div> </div>
</div>
<div id="noteDetailWrapper"> <div style="overflow: auto; grid-area: note-content">
<div style="float: left; margin: 0 5px 5px 5px;" class="hide-toggle"> <div id="noteDetail">
<a onclick="encryptNoteAndSendToServer()" <p>This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediately.</p>
title="Encrypt the note so that password will be required to view the note"
class="icon-action"
id="encryptButton">
<img src="stat/icons/lock.png" alt="Encrypt note"/>
</a>
<a onclick="decryptNoteAndSendToServer()" <p>You can work with the tree using following keyboard shortcuts:</p>
title="Decrypt note permamently so that password will not be required to access this note in the future"
class="icon-action"
id="decryptButton">
<img src="stat/icons/unlock.png" alt="Decrypt note"/>
</a>
&nbsp; <ul>
<li>insert - create new note on current tree level</li>
<input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; width: 600px;" tabindex="1"> <li>ctrl + insert - create new sub-note</li>
</div> <li>delete - delete current note (and it's sub-notes)</li>
<li>shift + up - move current note up in the current tree level</li>
<div style="clear: both; height: 0"></div> <li>shift + down - move current note down in the current tree level</li>
<li>shift + left - move current note up in the tree hierarchy</li>
<div id="noteDetail" style="overflow: scroll; height: 100%;"> <li>shift + right - move current note down in the tree hierarchy</li>
<p>This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediately.</p> </ul>
<p>You can work with the tree using following keyboard shortcuts:</p>
<ul>
<li>insert - create new note on current tree level</li>
<li>ctrl + insert - create new sub-note</li>
<li>delete - delete current note (and it's sub-notes)</li>
<li>shift + up - move current note up in the current tree level</li>
<li>shift + down - move current note down in the current tree level</li>
<li>shift + left - move current note up in the tree hierarchy</li>
<li>shift + right - move current note down in the tree hierarchy</li>
</ul>
</div>
</div> </div>
</div> </div>

18
static/js/init.js
View File

@ -1,21 +1,3 @@
$(function() {
$(window).resize(function() {
// dynamically setting height of tree and note content to match window's height
const fancyTree = $('ul.fancytree-container');
if (fancyTree.length) {
fancyTree.height($(window).height() - fancyTree.offset().top - 10);
}
const noteEditable = $('div.note-editable');
if (noteEditable.length) {
noteEditable.height($(window).height() - noteEditable.offset().top);
}
});
$(window).resize();
});
// hot keys are active also inside inputs and content editables // hot keys are active also inside inputs and content editables
jQuery.hotkeys.options.filterInputAcceptingElements = true; jQuery.hotkeys.options.filterInputAcceptingElements = true;
jQuery.hotkeys.options.filterContentEditable = true; jQuery.hotkeys.options.filterContentEditable = true;

25
static/style.css
View File

@ -1,19 +1,13 @@
.note-editable { .note-editable {
/* This is because with empty content height of editor is 0 and it's impossible to click into it */ /* This is because with empty content height of editor is 0 and it's impossible to click into it */
min-height: 400px; min-height: 400px;
overflow: scroll; overflow: auto;
} }
.note-editable.encrypted { .note-editable.encrypted {
background-color: #eee; background-color: #eee;
} }
#noteDetailWrapper {
width: 750px;
float: left;
margin-left: 30px;
}
#top-message { #top-message {
display: none; /* initial state is hidden */ display: none; /* initial state is hidden */
background-color: #e0e0e0; background-color: #e0e0e0;
@ -36,8 +30,6 @@
} }
ul.fancytree-container { ul.fancytree-container {
width: 290px;
height: 400px;
overflow: auto; overflow: auto;
position: relative; position: relative;
outline: none !important; outline: none !important;
@ -82,4 +74,19 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
#encryptButton img, #decryptButton img { #encryptButton img, #decryptButton img {
top: -5px; top: -5px;
position: relative; position: relative;
}
body {
display: grid;
height: 100vh;
grid-template-areas: "messages messages"
"search title"
"tree-buttons note-content"
"tree note-content";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto
auto
auto
1fr;
grid-gap: 10px;
} }