Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 18:05:55 +01:00
Code Issues Packages Projects Releases Activity

fixes to mobile version (WIP)

Browse Source
This commit is contained in:
zadam
2019-05-13 23:08:59 +02:00
parent 79d779dee8
commit 2178f82324
7 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/public/javascripts/mobile.js
View File

@@ -11,7 +11,6 @@ import treeUtils from "./services/tree_utils.js";
const $leftPane = $("#left-pane"); const $leftPane = $("#left-pane");
const $tree = $("#tree"); const $tree = $("#tree");
const $detail = $("#detail"); const $detail = $("#detail");
const $closeDetailButton = $("#close-detail-button");
function togglePanes() { function togglePanes() {
if (!$leftPane.is(":visible") || !$detail.is(":visible")) { if (!$leftPane.is(":visible") || !$detail.is(":visible")) {
@@ -27,7 +26,7 @@ function showDetailPane() {
} }
} }
$closeDetailButton.click(() => { $detail.on("click", ".close-detail-button",() => {
// no page is opened // no page is opened
document.location.hash = '-'; document.location.hash = '-';
@@ -43,9 +42,8 @@ async function showTree() {
source: tree, source: tree,
scrollParent: $tree, scrollParent: $tree,
minExpandLevel: 2, // root can't be collapsed minExpandLevel: 2, // root can't be collapsed
activate: (event, data) => { activate: async (event, data) => {
const node = data.node; const node = data.node;
const noteId = node.data.noteId;
treeService.clearSelectedNodes(); treeService.clearSelectedNodes();
@@ -72,7 +70,7 @@ async function showTree() {
}); });
} }
$("#note-menu-button").click(async e => { $detail.on("click", ".note-menu-button", async e => {
const node = treeService.getActiveNode(); const node = treeService.getActiveNode();
const branch = await treeCache.getBranch(node.data.branchId); const branch = await treeCache.getBranch(node.data.branchId);
const note = await treeCache.getNote(node.data.noteId); const note = await treeCache.getNote(node.data.noteId);
@@ -88,24 +86,27 @@ $("#note-menu-button").click(async e => {
enabled: isNotRoot && parentNote.type !== 'search' } enabled: isNotRoot && parentNote.type !== 'search' }
]; ];
contextMenuWidget.initContextMenu(e, items, async (event, cmd) => { contextMenuWidget.initContextMenu(e, {
if (cmd === "insertNoteAfter") { getContextMenuItems: () => items,
const parentNoteId = node.data.parentNoteId; selectContextMenuItem: async (event, cmd) => {
const isProtected = await treeUtils.getParentProtectedStatus(node); if (cmd === "insertNoteAfter") {
const parentNoteId = node.data.parentNoteId;
const isProtected = await treeUtils.getParentProtectedStatus(node);
treeService.createNote(node, parentNoteId, 'after', { isProtected: isProtected }); treeService.createNote(node, parentNoteId, 'after', { isProtected: isProtected });
} }
else if (cmd === "insertChildNote") { else if (cmd === "insertChildNote") {
treeService.createNote(node, node.data.noteId, 'into'); treeService.createNote(node, node.data.noteId, 'into');
} }
else if (cmd === "delete") { else if (cmd === "delete") {
treeChangesService.deleteNodes([node]); treeChangesService.deleteNodes([node]);
// move to the tree // move to the tree
togglePanes(); togglePanes();
} }
else { else {
throw new Error("Unrecognized command " + cmd); throw new Error("Unrecognized command " + cmd);
}
} }
}); });
}); });

6
src/public/javascripts/services/tab_context.js
View File

@@ -56,7 +56,11 @@ class TabContext {
this.noteChangeDisabled = false; this.noteChangeDisabled = false;
this.isNoteChanged = false; this.isNoteChanged = false;
this.attributes = new Attributes(this); this.attributes = new Attributes(this);
this.noteType = new NoteTypeContext(this);
if (utils.isDesktop()) {
this.noteType = new NoteTypeContext(this);
}
this.components = {}; this.components = {};
this.$noteTitle.on('input', () => { this.$noteTitle.on('input', () => {

14
src/public/javascripts/services/tab_row.js
View File

@@ -34,8 +34,6 @@ const defaultTapProperties = {
title: 'New tab' title: 'New tab'
}; };
let instanceId = 0;
class TabRow { class TabRow {
constructor(el) { constructor(el) {
this.draggabillies = []; this.draggabillies = [];
@@ -45,10 +43,6 @@ class TabRow {
this.el = el; this.el = el;
this.hideTabRowForOneTab = false; this.hideTabRowForOneTab = false;
this.instanceId = instanceId;
this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId);
instanceId += 1;
this.setupStyleEl(); this.setupStyleEl();
this.setupEvents(); this.setupEvents();
this.layoutTabs(); this.layoutTabs();
@@ -156,14 +150,10 @@ class TabRow {
const {tabPositions, newTabPosition} = this.getTabPositions(); const {tabPositions, newTabPosition} = this.getTabPositions();
tabPositions.forEach((position, i) => { tabPositions.forEach((position, i) => {
styleHTML += ` styleHTML += `.note-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `;
.note-tab-row[data-note-tab-row-instance-id="${ this.instanceId }"] .note-tab:nth-child(${ i + 1 }) {
transform: translate3d(${ position }px, 0, 0)
}
`
}); });
styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) }`; styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `;
this.styleEl.innerHTML = styleHTML; this.styleEl.innerHTML = styleHTML;
} }

9
src/public/stylesheets/desktop.css
View File

@@ -169,6 +169,15 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
margin-top: 10px; margin-top: 10px;
} }
.note-title {
margin-left: 15px;
margin-right: 10px;
font-size: 150%;
border: 0;
width: 5em;
flex-grow: 100;
}
.note-tab-row { .note-tab-row {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;

25
src/public/stylesheets/mobile.css
View File

@@ -40,14 +40,12 @@ html, body {
flex-direction: column; flex-direction: column;
} }
#detail-content { #note-tab-container {
position: relative; height: 100%;
overflow: auto; }
flex-direction: column;
/* for some reason detail overflows a little bit so we subtract few pixels */ .note-tab-row {
height: calc(100% - 25px); display: none !important;
/* large left padding is necessary for ckeditor gutter in detail-only (smartphone) layout */
padding-left: 35px;
} }
.note-title-row { .note-title-row {
@@ -103,4 +101,15 @@ kbd {
margin: 4px; margin: 4px;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
}
.note-detail-component-wrapper {
position: relative;
overflow: auto;
flex-direction: column;
/* for some reason detail overflows a little bit so we subtract few pixels */
height: calc(100% - 25px);
/* large left padding is necessary for ckeditor gutter in detail-only (smartphone) layout */
padding-left: 35px;
padding-top: 10px;
} }

9
src/public/stylesheets/style.css
View File

@@ -52,15 +52,6 @@ button.close:hover {
color: var(--main-text-color) !important; color: var(--main-text-color) !important;
} }
.note-title {
margin-left: 15px;
margin-right: 10px;
font-size: 150%;
border: 0;
width: 5em;
flex-grow: 100;
}
ul.fancytree-container { ul.fancytree-container {
/* override specific size from fancytree.css */ /* override specific size from fancytree.css */
font-family: inherit !important; font-family: inherit !important;

42
src/views/mobile.ejs
View File

@@ -32,35 +32,39 @@
</div> </div>
<div id="detail" class="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8"> <div id="detail" class="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8">
<div id="note-title-row"> <div class="note-tab-row">
<button type="button" id="note-menu-button" class="action-button jam jam-align-justify"></button> <div class="note-tab-row-content"></div>
<input autocomplete="off" value="" id="note-title" class="form-control" tabindex="1">
<button type="button" id="close-detail-button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div style="position: relative; height: 100%;"> <!-- This div here is for saved indicator to have suitable parent --> <div id="note-tab-container">
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span> <div class="note-tab-content note-tab-content-template">
<div class="note-title-row">
<button type="button" class="note-menu-button action-button jam jam-align-justify"></button>
<div id="detail-content"> <input autocomplete="off" value="" class="form-control note-title" tabindex="1">
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
<div id="note-detail-code" class="note-detail-component"></div> <button type="button" class="close-detail-button action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<% include details/search.ejs %> <div class="note-detail-component-wrapper">
<div class="note-detail-text note-detail-component" tabindex="10000"></div>
<% include details/render.ejs %> <div class="note-detail-code note-detail-component"></div>
<% include details/file.ejs %> <% include details/search.ejs %>
<% include details/image.ejs %> <% include details/render.ejs %>
<% include details/relation_map.ejs %> <% include details/file.ejs %>
<% include details/protected_session_password.ejs %> <% include details/image.ejs %>
<% include details/relation_map.ejs %>
<% include details/protected_session_password.ejs %>
</div>
</div> </div>
</div> </div>
</div> </div>