gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 17 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

51
src/templates/app.html
View File

@ -5,31 +5,21 @@
<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">
<form action="logout" method="POST">
<input type="submit" class="btn btn-sm" value="Logout">
</form>
</div>
<div class="hide-toggle" style="position: absolute; left: 940px;">
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
</div>
<div class="hide-toggle" style="width: 300px; height: 100%; float: left;">
<p> <p>
<label>Search:</label> <label>Search:</label>
<input name="search" autocomplete="off"> <input name="search" autocomplete="off">
<button id="btnResetSearch">&times;</button> <button id="btnResetSearch">&times;</button>
<span id="matches"></span> <span id="matches"></span>
</p> </p>
</div>
<div class="hide-toggle" style="grid-area: tree-buttons;">
<a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action"> <a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
<img src="stat/icons/file-plus.png" alt="Create new top level note"/> <img src="stat/icons/file-plus.png" alt="Create new top level note"/>
</a> </a>
@ -41,35 +31,47 @@
<a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action"> <a onclick="scrollToCurrentNote()" title="Scroll to current note" class="icon-action">
<img src="stat/icons/crosshair.png" alt="Collapse tree"/> <img src="stat/icons/crosshair.png" alt="Collapse tree"/>
</a> </a>
<div id="tree">
</div>
</div> </div>
<div id="noteDetailWrapper"> <div id="tree" style="overflow: auto; grid-area: tree">
<div style="float: left; margin: 0 5px 5px 5px;" class="hide-toggle"> </div>
<div style="grid-area: title">
<div style="display: flex; align-items: center;" class="hide-toggle">
<a onclick="encryptNoteAndSendToServer()" <a onclick="encryptNoteAndSendToServer()"
title="Encrypt the note so that password will be required to view the note" title="Encrypt the note so that password will be required to view the note"
class="icon-action" class="icon-action"
id="encryptButton"> id="encryptButton"
style="display: none;">
<img src="stat/icons/lock.png" alt="Encrypt note"/> <img src="stat/icons/lock.png" alt="Encrypt note"/>
</a> </a>
<a onclick="decryptNoteAndSendToServer()" <a onclick="decryptNoteAndSendToServer()"
title="Decrypt note permamently so that password will not be required to access this note in the future" title="Decrypt note permamently so that password will not be required to access this note in the future"
class="icon-action" class="icon-action"
id="decryptButton"> id="decryptButton"
style="display: none;">
<img src="stat/icons/unlock.png" alt="Decrypt note"/> <img src="stat/icons/unlock.png" alt="Decrypt note"/>
</a> </a>
&nbsp; &nbsp;
<input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; width: 600px;" tabindex="1"> <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>
<div style="clear: both; height: 0"></div> <div class="hide-toggle">
<button class="btn btn-sm" onclick="displaySettings();">Settings</button>
</div>
</div>
</div>
<div id="noteDetail" style="overflow: scroll; height: 100%;"> <div style="overflow: auto; grid-area: note-content">
<div id="noteDetail">
<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> <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>
<p>You can work with the tree using following keyboard shortcuts:</p> <p>You can work with the tree using following keyboard shortcuts:</p>
@ -85,7 +87,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div id="recentNotesDialog" title="Recent notes" style="display: none;"> <div id="recentNotesDialog" title="Recent notes" style="display: none;">
<select id="recentNotesSelectBox" size="15" style="width: 100%"> <select id="recentNotesSelectBox" size="15" style="width: 100%">

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;
@ -83,3 +75,18 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
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;
}