sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixes to mobile version (WIP)

pull/255/head
zadam 2019-05-13 23:08:59 +07:00
parent 79d779dee8
commit 2178f82324
7 changed files with 79 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/public/javascripts/mobile.js
Unescape Escape View File

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

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

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

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

@ -34,8 +34,6 @@ const defaultTapProperties = {
title: 'New tab'
};
let instanceId = 0;
class TabRow {
constructor(el) {
this.draggabillies = [];
@ -45,10 +43,6 @@ class TabRow {
this.el = el;
this.hideTabRowForOneTab = false;
this.instanceId = instanceId;
this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId);
instanceId += 1;
this.setupStyleEl();
this.setupEvents();
this.layoutTabs();
@ -156,14 +150,10 @@ class TabRow {
const {tabPositions, newTabPosition} = this.getTabPositions();
tabPositions.forEach((position, i) => {
styleHTML += `
.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-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;
}

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

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

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

@ -40,14 +40,12 @@ html, body {
flex-direction: column;
}
#detail-content {
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;
#note-tab-container {
height: 100%;
}
.note-tab-row {
display: none !important;
}
.note-title-row {
@ -103,4 +101,15 @@ kbd {
margin: 4px;
border-width: 2px;
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
Unescape Escape View File

@ -52,15 +52,6 @@ button.close:hover {
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 {
/* override specific size from fancytree.css */
font-family: inherit !important;

40
src/views/mobile.ejs
Unescape Escape View File

@ -32,35 +32,39 @@
</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="note-title-row">
<button type="button" id="note-menu-button" class="action-button jam jam-align-justify"></button>
<div class="note-tab-row">
<div class="note-tab-row-content"></div>
</div>
<input autocomplete="off" value="" id="note-title" class="form-control" tabindex="1">
<div id="note-tab-container">
<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>
<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>
<input autocomplete="off" value="" class="form-control note-title" tabindex="1">
<div style="position: relative; height: 100%;"> <!-- This div here is for saved indicator to have suitable parent -->
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
<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>
<div id="detail-content">
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
<div class="note-detail-component-wrapper">
<div class="note-detail-text note-detail-component" tabindex="10000"></div>
<div id="note-detail-code" class="note-detail-component"></div>
<div class="note-detail-code note-detail-component"></div>
<% include details/search.ejs %>
<% include details/search.ejs %>
<% include details/render.ejs %>
<% include details/render.ejs %>
<% include details/file.ejs %>
<% include details/file.ejs %>
<% include details/image.ejs %>
<% include details/image.ejs %>
<% include details/relation_map.ejs %>
<% include details/relation_map.ejs %>
<% include details/protected_session_password.ejs %>
<% include details/protected_session_password.ejs %>
</div>
</div>
</div>
</div>