docs(user): improve documentation on mobile support
@ -1,12 +1,18 @@
|
||||
<p>To easily access selected notes, you can bookmark them. See demo:</p>
|
||||
<p>
|
||||
<img src="Bookmarks_bookmarks.gif">
|
||||
</p>
|
||||
<p>Frequently used notes can be bookmarked, which will make them appear in
|
||||
the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a> for
|
||||
easy access.</p>
|
||||
<h2>Configuring the launch bar</h2>
|
||||
<p>If bookmarks don't appear in the launch bar, then most likely the bookmark
|
||||
section has been hidden. Go to the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a> configuration
|
||||
from the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> and
|
||||
ensure <em>Bookmarks</em> is in the <em>Visible Launchers</em> section.</p>
|
||||
<h2>Bookmark folder</h2>
|
||||
<p>Space in the left panel is limited, and you might want to bookmark many
|
||||
items. One possible solution is to bookmark a folder, so it shows its children:</p>
|
||||
<p>
|
||||
<img src="Bookmarks_bookmark-folder.png">
|
||||
</p>
|
||||
<p>To do this, you need to add a <code spellcheck="false">#bookmarkFolder</code> label
|
||||
to the note.</p>
|
||||
<p>To do this, bookmark a folder and assign it the <code spellcheck="false">#bookmarkFolder</code> label.</p>
|
||||
<h2>Mobile</h2>
|
||||
<p>On mobile, bookmarks are only displayed starting with v0.102.0. Because
|
||||
of the more constrained screen size, the bookmarks are grouped under a
|
||||
single icon instead of displaying them as separate icons.</p>
|
||||
<p>When pressed, a menu will appear listing all the bookmarks. Bookmark folders
|
||||
are also supported and will appear as sub-menus.</p>
|
||||
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 305 KiB |
@ -1,8 +1,11 @@
|
||||
<h2>Position of the Launch bar</h2>
|
||||
<p>Depending on the layout selected, the launcher bar will either be on the
|
||||
left side of the screen with buttons displayed vertically or at the top
|
||||
of the screen. See <a href="#root/_help_x0JgW8UqGXvq">Vertical and horizontal layout</a> for
|
||||
<p>On desktop, depending on the layout selected, the launcher bar will either
|
||||
be on the left side of the screen with buttons displayed vertically or
|
||||
at the top of the screen. See <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x0JgW8UqGXvq">Vertical and horizontal layout</a> for
|
||||
more information.</p>
|
||||
<p>On mobile, the launch bar will always be at the bottom.</p>
|
||||
<p>If there are too many items in the launch bar to fit the screen, it will
|
||||
become scrollable.</p>
|
||||
<h2>Terminology</h2>
|
||||
<ul>
|
||||
<li><strong>Launcher</strong>: a button that can be (or is) displayed on the
|
||||
@ -12,16 +15,16 @@
|
||||
<li><strong>Visible Launcher</strong>: a launcher that is currently displayed
|
||||
on the launch bar.</li>
|
||||
</ul>
|
||||
<h2>Configuring the Launch bar</h2>
|
||||
<h2>Configuring the desktop Launch bar</h2>
|
||||
<p>There are two ways to configure the launch bar:</p>
|
||||
<ul>
|
||||
<li>Right click in the empty space between launchers on the launch bar and
|
||||
select <em>Configure Launchbar.</em>
|
||||
</li>
|
||||
<li>Click on the <a href="#root/_help_x3i7MxGccDuM">Global menu</a> and
|
||||
<li>Click on the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> and
|
||||
select <em>Configure Launchbar</em>.</li>
|
||||
</ul>
|
||||
<p>This will open a new tab with the <a href="#root/_help_oPVyFC7WL2Lp">Note Tree</a> listing
|
||||
<p>This will open a new tab with the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a> listing
|
||||
the launchers.</p>
|
||||
<p>
|
||||
<img src="Launch Bar_image.png">
|
||||
@ -29,6 +32,19 @@
|
||||
<p>Expanding <em>Available Launchers</em> section will show the list of launchers
|
||||
that are not displayed on the launch bar. The <em>Visible Launchers</em> will
|
||||
show the ones that are currently displayed.</p>
|
||||
<h2>Configuring the mobile launch bar</h2>
|
||||
<p>The launch bar on mobile uses a different configuration from the desktop
|
||||
one. The reasoning is that not all desktop icons are available on mobile,
|
||||
and fewer icons fit on a mobile screen.</p>
|
||||
<p>To configure the launch bar on mobile, go to <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> and
|
||||
select <em>Configure Launchbar</em>.</p>
|
||||
<p>The configure the mobile launch bar while on the desktop (especially useful
|
||||
to configure more complicated launchers such as scripts or custom widgets),
|
||||
go to <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> →
|
||||
Advanced → Show Hidden Subtree and look for the <em>Mobile Launch Bar</em> section.
|
||||
While in the hidden subtree, it's also possible to drag launchers between
|
||||
the <em>Mobile Launch Bar</em> and (Desktop) <em>Launch Bar</em> sections.</p>
|
||||
<h3>Adding/removing and reordering launchers</h3>
|
||||
<p>To display a new launcher in the launch bar, first look for it in the <em>Available Launchers</em> section.
|
||||
Then right click it and select <em>Move to visible launchers</em>. It is
|
||||
@ -36,13 +52,13 @@
|
||||
<p>Similarly, to remove it from the launch bar, simply look for it in <em>Visible Launchers</em> then
|
||||
right click it and select <em>Move to available launchers</em> or use drag-and-drop.</p>
|
||||
<p>Drag-and-drop the items in the tree in order to change their
|
||||
order. See <a href="#root/_help_oPVyFC7WL2Lp">Note Tree</a> for more
|
||||
interaction options, including using keyboard shortcuts.</p>
|
||||
order. See <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a> for
|
||||
more interaction options, including using keyboard shortcuts.</p>
|
||||
<h2>Customizing the launcher</h2>
|
||||
<ul>
|
||||
<li>The icon of a launcher can be changed just like a normal note. See
|
||||
<a
|
||||
href="#root/_help_p9kXRFAkwN4o">Note Icons</a> for more information.</li>
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_p9kXRFAkwN4o">Note Icons</a> for more information.</li>
|
||||
<li>The title of the launcher can also be changed.</li>
|
||||
</ul>
|
||||
<h3>Resetting</h3>
|
||||
@ -54,42 +70,39 @@
|
||||
<p>Right click either the <em>Available launchers</em> or <em>Visible launchers</em> sections
|
||||
and select one of the options:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>Note Launcher</strong>
|
||||
<br>A note launcher will simply navigate to a specified note.</p>
|
||||
<li><strong>Note Launcher</strong>
|
||||
<br>A note launcher will simply navigate to a specified note.
|
||||
<ol>
|
||||
<li>Set the <code spellcheck="false">target</code> promoted attribute to the
|
||||
note to navigate to.</li>
|
||||
<li>Optionally, set <code spellcheck="false">hoistedNote</code> to hoist a particular
|
||||
note. See <a href="#root/_help_OR8WJ7Iz9K4U">Note Hoisting</a> for
|
||||
note. See <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_OR8WJ7Iz9K4U">Note Hoisting</a> for
|
||||
more information.</li>
|
||||
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
|
||||
the launcher.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Script Launcher</strong>
|
||||
<br>An advanced launcher which will run a script upon pressing. See
|
||||
<a
|
||||
href="#root/_help_CdNpE2pqjmI6">Scripts</a> for more information.</p>
|
||||
<ol>
|
||||
<li>Set <code spellcheck="false">script</code> to point to the desired script
|
||||
to run.</li>
|
||||
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
|
||||
the launcher.</li>
|
||||
</ol>
|
||||
<li><strong>Script Launcher</strong>
|
||||
<br>An advanced launcher which will run a script upon pressing. See
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/_help_CdNpE2pqjmI6">Scripting</a> for more information.
|
||||
<ol>
|
||||
<li>Set <code spellcheck="false">script</code> to point to the desired script
|
||||
to run.</li>
|
||||
<li>Optionally, set a <code spellcheck="false">keyboardShortcut</code> to trigger
|
||||
the launcher.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<li class="ck-list-marker-bold">
|
||||
<p><strong>Custom Widget</strong>
|
||||
</p>
|
||||
<p>Allows defining a custom widget to be rendered inside the launcher. See
|
||||
<a
|
||||
href="#root/_help_SynTBQiBsdYJ">Widget Basics</a> for more information.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Spacers</strong>
|
||||
<br>Launchers that create some distance between other launchers for better
|
||||
visual distinction.</p>
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_SynTBQiBsdYJ">Widget Basics</a> for more information.</p>
|
||||
</li>
|
||||
<li><strong>Spacers</strong>
|
||||
<br>Launchers that create some distance between other launchers for better
|
||||
visual distinction.</li>
|
||||
</ol>
|
||||
<p>Launchers are configured via predefined <a href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>.</p>
|
||||
<p>Launchers are configured via predefined <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>.</p>
|
||||
@ -4,8 +4,7 @@ class="image image-style-align-center">
|
||||
<img style="aspect-ratio:1398/1015;" src="Split View_2_Split View_im.png"
|
||||
width="1398" height="1015">
|
||||
</figure>
|
||||
|
||||
<h2><strong>Interactions</strong></h2>
|
||||
<h2><strong>Interactions</strong></h2>
|
||||
<ul>
|
||||
<li>Press the
|
||||
<img src="Split View_Split View_imag.png">button to the right of a note's title to open a new split to the right
|
||||
@ -51,11 +50,12 @@ class="image image-style-align-center">
|
||||
<ul>
|
||||
<li>On smartphones, the split views are laid out vertically (one on the top
|
||||
and one on the bottom), instead of horizontally as on the desktop.</li>
|
||||
<li>There can be only one split open per tab.</li>
|
||||
<li>It's not possible to resize the two split panes.</li>
|
||||
<li>When the keyboard is opened, the active note will be “maximized”, thus
|
||||
allowing for more space even when a split is open. When the keyboard is
|
||||
closed, the splits become equal in size again.</li>
|
||||
<li
|
||||
>There can be only one split open per tab.</li>
|
||||
<li>It's not possible to resize the two split panes.</li>
|
||||
<li>When the keyboard is opened, the active note will be “maximized”, thus
|
||||
allowing for more space even when a split is open. When the keyboard is
|
||||
closed, the splits become equal in size again.</li>
|
||||
</ul>
|
||||
<p>Interaction:</p>
|
||||
<ul>
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
<ul>
|
||||
<li>For the vertical layout, the tabs will be placed at the top but to the
|
||||
right of the <a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
|
||||
<li>For the horizontal layout, the tabs will be placed at the top in full-width,
|
||||
<li
|
||||
>For the horizontal layout, the tabs will be placed at the top in full-width,
|
||||
above the <a href="#root/_help_oPVyFC7WL2Lp">note tree</a>, allowing for
|
||||
more tabs to be comfortably displayed.</li>
|
||||
</ul>
|
||||
@ -22,7 +23,8 @@
|
||||
href="#root/_help_luNhaphA37EO">Split View</a>. Each tab can have one or more
|
||||
notes, displayed horizontally.</li>
|
||||
<li>Tabs can be reordered by drag-and-dropping it into a new position.</li>
|
||||
<li>An existing tab can be displayed in a new window by dragging the tab upwards
|
||||
<li
|
||||
>An existing tab can be displayed in a new window by dragging the tab upwards
|
||||
or downwards. It is not possible to combine tabs back into another window.</li>
|
||||
</ul>
|
||||
<h2>Keyboard interaction</h2>
|
||||
@ -36,7 +38,29 @@
|
||||
<li><kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to
|
||||
go to the next or previous tab.</li>
|
||||
<li><kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to
|
||||
activate the first, second and up til ninth tab.</li>
|
||||
activate the first, second and up to ninth tab.</li>
|
||||
<li>There is also a shortcut to go to the last tab, but it is not assigned
|
||||
a key by default.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<h2>Mobile</h2>
|
||||
<figure class="image image-style-align-right image_resized" style="width:34.12%;">
|
||||
<img style="aspect-ratio:1242/2688;" src="Tabs_IMG_1767.PNG"
|
||||
width="1242" height="2688">
|
||||
</figure>
|
||||
<p>Tabs are also supported on the <a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_RDslemsQ6gCp">Mobile Frontend</a>.</p>
|
||||
<p>Since v0.102.0, the tabs are displayed by pressing the dedicated tab switcher
|
||||
button in the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
|
||||
In this view the tabs are laid out on a grid with a preview of the note
|
||||
content.</p>
|
||||
<p>The context menu button at the top-right of the popup allows creating
|
||||
a new tab, reopening the last closed tab and closing all the tabs.</p>
|
||||
<p><a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_luNhaphA37EO">Split View</a>s
|
||||
are also indicated in the tab switcher, with two titles displayed in a
|
||||
tab.</p>
|
||||
<aside class="admonition note">
|
||||
<p>Versions prior to v0.102.0 also supported tabs, but they were displayed
|
||||
directly above the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
|
||||
The decision to use a more mobile-like tab switcher was taken because the
|
||||
original tab bar could not support many tabs at once and the new design
|
||||
better aligns with how mobile applications handle tabs.</p>
|
||||
</aside>
|
||||
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs_IMG_1767.PNG
generated
vendored
Normal file
|
After Width: | Height: | Size: 195 KiB |
@ -1,35 +1,168 @@
|
||||
<p>Trilium (<a href="#root/_help_WOcw2SLH6tbX">server edition</a>) has a mobile
|
||||
web frontend which is optimized for touch based devices - smartphones and
|
||||
tablets. It is activated automatically during login process based on browser
|
||||
detection.</p>
|
||||
<p>Mobile frontend is limited in features compared to full desktop frontend.
|
||||
<figure class="image image_resized image-style-align-right" style="width:33.52%;">
|
||||
<img style="aspect-ratio:1242/2688;" src="Mobile Frontend_IMG_1765.PNG"
|
||||
width="1242" height="2688">
|
||||
</figure>
|
||||
<p>Trilium has a mobile web frontend which is optimized for touch based devices
|
||||
- smartphones and tablets. It is activated automatically during login process
|
||||
based on browser detection.</p>
|
||||
<p>Mobile frontend is limited in features compared to the full desktop version.
|
||||
See below for more details on this.</p>
|
||||
<p>Note that this is not an Android/iOS app, this is just mobile friendly
|
||||
web page served on the <a href="#root/_help_WOcw2SLH6tbX">server edition</a>.</p>
|
||||
<h2>Layout basics</h2>
|
||||
<p>Unlike the desktop version, the mobile version has a slightly different
|
||||
UI meant to better fit the constrained screens of a mobile phone.</p>
|
||||
<p>Here is a non-exhaustive list of differences between the desktop version
|
||||
and the mobile one:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>The <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a> is
|
||||
displayed as a sidebar. To display the sidebar, press the button in the
|
||||
top-left of the screen.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>There is also a swipe gesture that can be done from the left of the screen,
|
||||
but the browser's navigation gesture interferes with it most of the time
|
||||
(depending on the platform).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Press and hold a note to display the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/oPVyFC7WL2Lp/_help_YtSN43OrfzaA">Note tree contextual menu</a>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_Ms1nauBra7gq">Quick search</a> bar
|
||||
is also displayed at the top of the note tree.</li>
|
||||
<li>The full <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a> function
|
||||
can be triggered either from either the <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a> or
|
||||
from the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>,
|
||||
if configured.</li>
|
||||
<li>
|
||||
<p>The <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a> is
|
||||
displayed at the bottom of the screen.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>The launch bar uses a different configuration for icons than the desktop
|
||||
version. See the dedicated page for more information on how to configure
|
||||
it.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>Most of the note-related actions are grouped in the horizontal dots icon
|
||||
on the top-right of the note.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_3seOhtN8uLIY">Tabs</a> are
|
||||
grouped under a tab switcher in the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>,
|
||||
where the tabs are displayed in a full-screen grid with preview for easy
|
||||
switching, as well as additional options such as reopening closed tabs.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Since v0.100.0, <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_luNhaphA37EO">Split View</a> can
|
||||
also be used in mobile view, but with a maximum of two panes at once. The
|
||||
splits are displayed vertically instead of horizontally.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Starting with v0.102.0, the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a> is
|
||||
enforced on mobile. This brings features such as the note badges, note
|
||||
type switcher or collection properties which would otherwise not be available.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Installing as a PWA</h2>
|
||||
<p>The mobile view can be set up as a PWA. While this does not offer any
|
||||
offline capabilities, it will display the application in full-screen and
|
||||
makes it easy to access via your mobile phone's home screen.</p>
|
||||
<h3>On iOS with Safari</h3>
|
||||
<ol>
|
||||
<li>Open your default web browser and access your Trilium instance.</li>
|
||||
<li
|
||||
>Login.</li>
|
||||
<li>
|
||||
<p>Press the […] button in the bottom-right of the screen and select Share.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Scroll down to reveal the full list of items and choose “Add to Home Screen”.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Press “Add” and the web app will be available.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>On Android with Google Chrome</h3>
|
||||
<aside class="admonition important">
|
||||
<p>Google Chrome requires the server to be served over HTTPS in order to
|
||||
display in full-screen. If using HTTP, the app will appear like a normal
|
||||
web page (similar to a bookmark).</p>
|
||||
</aside>
|
||||
<ol>
|
||||
<li>Open your default web browser and access your Trilium instance.</li>
|
||||
<li
|
||||
>Login.</li>
|
||||
<li>
|
||||
<p>Press the three vertical dots icon in the top-right of the screen and
|
||||
select <em>Add to Home screen.</em>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Select the <em>Install</em> option.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Select an appropriate name.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The web app will appear as an application, not on the home screen.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>On Android with Brave</h3>
|
||||
<aside class="admonition important">
|
||||
<p>Brave requires the server to be served over HTTPS in order to display
|
||||
in full-screen. If using HTTP, the app will appear like a normal web page
|
||||
(similar to a bookmark).</p>
|
||||
</aside>
|
||||
<ol>
|
||||
<li>Open your default web browser and access your Trilium instance.</li>
|
||||
<li
|
||||
>Login.</li>
|
||||
<li>
|
||||
<p>Press the three vertical dots icon in the bottom-right of the screen and
|
||||
select <em>Add to Home screen</em>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Press the <em>Install</em> option.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The web app will appear as an application, not on the home screen.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>On Samsung Browser</h3>
|
||||
<ol>
|
||||
<li>Open your default web browser and access your Trilium instance.</li>
|
||||
<li
|
||||
>Login.</li>
|
||||
<li>
|
||||
<p>Press the hamburger menu in the bottom-right of the screen.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Select <em>Add to</em>, followed by <em>Home screen</em>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Press <em>Add</em> and the web app will appear on the home page.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Testing via the desktop application</h2>
|
||||
<p>If you are running Trilium without a dedicated <a href="#root/_help_WOcw2SLH6tbX">server installation</a>,
|
||||
you can still test the mobile application using the desktop application.
|
||||
For more information, see <a class="reference-link" href="#root/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
|
||||
To access it go to <code spellcheck="false">http://<ip>:37840/login?mobile</code> .</p>
|
||||
<h2>Limitations</h2>
|
||||
<p>Mobile frontend provides only some of the features of the full desktop
|
||||
frontend:</p>
|
||||
<ul>
|
||||
<li>it is possible to browse the whole note tree, read and edit all types
|
||||
of notes, but you can create only text notes</li>
|
||||
<li>reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
|
||||
possible, but creating them is not supported</li>
|
||||
<li>editing options is not supported</li>
|
||||
<li>cloning notes is not supported</li>
|
||||
<li>uploading file attachments is not supported</li>
|
||||
</ul>
|
||||
<h2>Forcing mobile/desktop frontend</h2>
|
||||
<p>Trilium decides automatically whether to use mobile or desktop frontend.
|
||||
<p>Trilium decides automatically whether to use mobile or desktop front-end.
|
||||
If this is not appropriate, you can use <code spellcheck="false">?mobile</code> or
|
||||
<code
|
||||
spellcheck="false">?desktop</code>query param on <strong>login</strong> page (Note: you might
|
||||
need to log out).</p>
|
||||
<p>Alternatively, simply select <em>Switch to Mobile/Desktop Version</em> in
|
||||
the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>.</p>
|
||||
<h2>Scripting</h2>
|
||||
<p>You can alter the behavior with <a href="#root/_help_CdNpE2pqjmI6">scripts</a> just
|
||||
like for normal frontend. For script notes to be executed, they need to
|
||||
have labeled <code spellcheck="false">#run=mobileStartup</code>.</p>
|
||||
<p>You can alter the behavior with <a class="reference-link" href="#root/pOsGYCXsbNQG/_help_CdNpE2pqjmI6">Scripting</a>,
|
||||
just like for normal frontend. For script notes to be executed, they need
|
||||
to have labeled <code spellcheck="false">#run=mobileStartup</code>.</p>
|
||||
<p>Custom <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a> widgets
|
||||
are also supported.</p>
|
||||
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Mobile Frontend_IMG_1765.PNG
generated
vendored
Normal file
|
After Width: | Height: | Size: 280 KiB |
@ -1,5 +1,5 @@
|
||||
# Documentation
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/y2NjgAW23yyj/Documentation_image.png" width="205" height="162">
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/qIpo9UiTZNdm/Documentation_image.png" width="205" height="162">
|
||||
|
||||
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
|
||||
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
|
||||
|
||||
248
docs/User Guide/!!!meta.json
vendored
@ -1491,20 +1491,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "bwg0e8ewQMak",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -1518,11 +1504,90 @@
|
||||
"value": "bx bx-mobile-alt",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "YtSN43OrfzaA",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "Ms1nauBra7gq",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "eIg8jdvaoNNd",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "3seOhtN8uLIY",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 160
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "luNhaphA37EO",
|
||||
"isInheritable": false,
|
||||
"position": 170
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Mobile Frontend.md",
|
||||
"attachments": []
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "JRliU5bOLszn",
|
||||
"title": "IMG_1765.PNG",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Mobile Frontend_IMG_1765.PNG"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
@ -2793,6 +2858,20 @@
|
||||
"value": "tabs",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RDslemsQ6gCp",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -2821,6 +2900,14 @@
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "2_Tabs_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "rFdKVhoVtsLA",
|
||||
"title": "IMG_1767.PNG",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Tabs_IMG_1767.PNG"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -2840,20 +2927,6 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x0JgW8UqGXvq",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
@ -2861,41 +2934,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "p9kXRFAkwN4o",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OR8WJ7Iz9K4U",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SynTBQiBsdYJ",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -2909,6 +2947,55 @@
|
||||
"value": "launch-bar",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "SynTBQiBsdYJ",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CdNpE2pqjmI6",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OR8WJ7Iz9K4U",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "p9kXRFAkwN4o",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x0JgW8UqGXvq",
|
||||
"isInheritable": false,
|
||||
"position": 160
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -5256,28 +5343,25 @@
|
||||
"value": "bx bx-bookmarks",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Bookmarks.md",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "99dD0P74W8QJ",
|
||||
"title": "bookmark-folder.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Bookmarks_bookmark-folder.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "9dX71aLlSl9R",
|
||||
"title": "bookmarks.gif",
|
||||
"role": "image",
|
||||
"mime": "image/gif",
|
||||
"position": 10,
|
||||
"dataFileName": "Bookmarks_bookmarks.gif"
|
||||
}
|
||||
]
|
||||
"attachments": []
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
# Bookmarks
|
||||
To easily access selected notes, you can bookmark them. See demo:
|
||||
Frequently used notes can be bookmarked, which will make them appear in the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> for easy access.
|
||||
|
||||

|
||||
## Configuring the launch bar
|
||||
|
||||
If bookmarks don't appear in the launch bar, then most likely the bookmark section has been hidden. Go to the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> configuration from the <a class="reference-link" href="../UI%20Elements/Global%20menu.md">Global menu</a> and ensure _Bookmarks_ is in the _Visible Launchers_ section.
|
||||
|
||||
## Bookmark folder
|
||||
|
||||
Space in the left panel is limited, and you might want to bookmark many items. One possible solution is to bookmark a folder, so it shows its children:
|
||||
|
||||

|
||||
To do this, bookmark a folder and assign it the `#bookmarkFolder` label.
|
||||
|
||||
To do this, you need to add a `#bookmarkFolder` label to the note.
|
||||
## Mobile
|
||||
|
||||
On mobile, bookmarks are only displayed starting with v0.102.0. Because of the more constrained screen size, the bookmarks are grouped under a single icon instead of displaying them as separate icons.
|
||||
|
||||
When pressed, a menu will appear listing all the bookmarks. Bookmark folders are also supported and will appear as sub-menus.
|
||||
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 305 KiB |
@ -1,7 +1,11 @@
|
||||
# Launch Bar
|
||||
## Position of the Launch bar
|
||||
|
||||
Depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See [Vertical and horizontal layout](Vertical%20and%20horizontal%20layout.md) for more information.
|
||||
On desktop, depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See <a class="reference-link" href="Vertical%20and%20horizontal%20layout.md">Vertical and horizontal layout</a> for more information.
|
||||
|
||||
On mobile, the launch bar will always be at the bottom.
|
||||
|
||||
If there are too many items in the launch bar to fit the screen, it will become scrollable.
|
||||
|
||||
## Terminology
|
||||
|
||||
@ -9,30 +13,38 @@ Depending on the layout selected, the launcher bar will either be on the left si
|
||||
* **Available Launcher**: a launcher that is not displayed on the launch bar, but can be added.
|
||||
* **Visible Launcher**: a launcher that is currently displayed on the launch bar.
|
||||
|
||||
## Configuring the Launch bar
|
||||
## Configuring the desktop Launch bar
|
||||
|
||||
There are two ways to configure the launch bar:
|
||||
|
||||
* Right click in the empty space between launchers on the launch bar and select _Configure Launchbar._
|
||||
* Click on the [Global menu](Global%20menu.md) and select _Configure Launchbar_.
|
||||
* Click on the <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
|
||||
|
||||
This will open a new tab with the [Note Tree](Note%20Tree.md) listing the launchers.
|
||||
This will open a new tab with the <a class="reference-link" href="Note%20Tree.md">Note Tree</a> listing the launchers.
|
||||
|
||||

|
||||
|
||||
Expanding _Available Launchers_ section will show the list of launchers that are not displayed on the launch bar. The _Visible Launchers_ will show the ones that are currently displayed.
|
||||
|
||||
## Configuring the mobile launch bar
|
||||
|
||||
The launch bar on mobile uses a different configuration from the desktop one. The reasoning is that not all desktop icons are available on mobile, and fewer icons fit on a mobile screen.
|
||||
|
||||
To configure the launch bar on mobile, go to <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
|
||||
|
||||
The configure the mobile launch bar while on the desktop (especially useful to configure more complicated launchers such as scripts or custom widgets), go to <a class="reference-link" href="Global%20menu.md">Global menu</a> → Advanced → Show Hidden Subtree and look for the _Mobile Launch Bar_ section. While in the hidden subtree, it's also possible to drag launchers between the _Mobile Launch Bar_ and (Desktop) _Launch Bar_ sections.
|
||||
|
||||
### Adding/removing and reordering launchers
|
||||
|
||||
To display a new launcher in the launch bar, first look for it in the _Available Launchers_ section. Then right click it and select _Move to visible launchers_. It is also possible to drag and drop the item manually.
|
||||
|
||||
Similarly, to remove it from the launch bar, simply look for it in _Visible Launchers_ then right click it and select _Move to available launchers_ or use drag-and-drop.
|
||||
|
||||
Drag-and-drop the items in the tree in order to change their order. See [Note Tree](Note%20Tree.md) for more interaction options, including using keyboard shortcuts.
|
||||
Drag-and-drop the items in the tree in order to change their order. See <a class="reference-link" href="Note%20Tree.md">Note Tree</a> for more interaction options, including using keyboard shortcuts.
|
||||
|
||||
## Customizing the launcher
|
||||
|
||||
* The icon of a launcher can be changed just like a normal note. See [Note Icons](../Notes/Note%20Icons.md) for more information.
|
||||
* The icon of a launcher can be changed just like a normal note. See <a class="reference-link" href="../Notes/Note%20Icons.md">Note Icons</a> for more information.
|
||||
* The title of the launcher can also be changed.
|
||||
|
||||
### Resetting
|
||||
@ -45,19 +57,17 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
|
||||
|
||||
1. **Note Launcher**
|
||||
A note launcher will simply navigate to a specified note.
|
||||
|
||||
1. Set the `target` promoted attribute to the note to navigate to.
|
||||
2. Optionally, set `hoistedNote` to hoist a particular note. See [Note Hoisting](../Navigation/Note%20Hoisting.md) for more information.
|
||||
2. Optionally, set `hoistedNote` to hoist a particular note. See <a class="reference-link" href="../Navigation/Note%20Hoisting.md">Note Hoisting</a> for more information.
|
||||
3. Optionally, set a `keyboardShortcut` to trigger the launcher.
|
||||
2. **Script Launcher**
|
||||
An advanced launcher which will run a script upon pressing. See [Scripts](../../Scripting.md) for more information.
|
||||
|
||||
An advanced launcher which will run a script upon pressing. See <a class="reference-link" href="../../Scripting.md">Scripting</a> for more information.
|
||||
1. Set `script` to point to the desired script to run.
|
||||
2. Optionally, set a `keyboardShortcut` to trigger the launcher.
|
||||
3. **Custom Widget**
|
||||
|
||||
Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md) for more information.
|
||||
Allows defining a custom widget to be rendered inside the launcher. See <a class="reference-link" href="../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md">Widget Basics</a> for more information.
|
||||
4. **Spacers**
|
||||
Launchers that create some distance between other launchers for better visual distinction.
|
||||
|
||||
Launchers are configured via predefined [Promoted Attributes](../../Advanced%20Usage/Attributes/Promoted%20Attributes.md).
|
||||
Launchers are configured via predefined <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a>.
|
||||
@ -26,5 +26,20 @@ Since tabs are a commonly used feature, there are multiple keyboard shortcuts th
|
||||
* <kbd>Ctrl</kbd>+<kbd>W</kbd> to close the current tab.
|
||||
* <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen the last closed tab.
|
||||
* <kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to go to the next or previous tab.
|
||||
* <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up til ninth tab.
|
||||
* There is also a shortcut to go to the last tab, but it is not assigned a key by default.
|
||||
* <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up to ninth tab.
|
||||
* There is also a shortcut to go to the last tab, but it is not assigned a key by default.
|
||||
|
||||
## Mobile
|
||||
|
||||
<figure class="image image-style-align-right image_resized" style="width:34.12%;"><img style="aspect-ratio:1242/2688;" src="Tabs_IMG_1767.PNG" width="1242" height="2688"></figure>
|
||||
|
||||
Tabs are also supported on the <a class="reference-link" href="../../Installation%20%26%20Setup/Mobile%20Frontend.md">Mobile Frontend</a>.
|
||||
|
||||
Since v0.102.0, the tabs are displayed by pressing the dedicated tab switcher button in the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. In this view the tabs are laid out on a grid with a preview of the note content.
|
||||
|
||||
The context menu button at the top-right of the popup allows creating a new tab, reopening the last closed tab and closing all the tabs.
|
||||
|
||||
<a class="reference-link" href="Split%20View.md">Split View</a>s are also indicated in the tab switcher, with two titles displayed in a tab.
|
||||
|
||||
> [!NOTE]
|
||||
> Versions prior to v0.102.0 also supported tabs, but they were displayed directly above the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. The decision to use a more mobile-like tab switcher was taken because the original tab bar could not support many tabs at once and the new design better aligns with how mobile applications handle tabs.
|
||||
BIN
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs_IMG_1767.PNG
vendored
Normal file
|
After Width: | Height: | Size: 195 KiB |
@ -1,28 +1,85 @@
|
||||
# Mobile Frontend
|
||||
Trilium ([server edition](Server%20Installation.md)) has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
|
||||
<figure class="image image_resized image-style-align-right" style="width:33.52%;"><img style="aspect-ratio:1242/2688;" src="Mobile Frontend_IMG_1765.PNG" width="1242" height="2688"></figure>
|
||||
|
||||
Mobile frontend is limited in features compared to full desktop frontend. See below for more details on this.
|
||||
Trilium has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
|
||||
|
||||
Note that this is not an Android/iOS app, this is just mobile friendly web page served on the [server edition](Server%20Installation.md).
|
||||
Mobile frontend is limited in features compared to the full desktop version. See below for more details on this.
|
||||
|
||||
## Layout basics
|
||||
|
||||
Unlike the desktop version, the mobile version has a slightly different UI meant to better fit the constrained screens of a mobile phone.
|
||||
|
||||
Here is a non-exhaustive list of differences between the desktop version and the mobile one:
|
||||
|
||||
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a> is displayed as a sidebar. To display the sidebar, press the button in the top-left of the screen.
|
||||
|
||||
* There is also a swipe gesture that can be done from the left of the screen, but the browser's navigation gesture interferes with it most of the time (depending on the platform).
|
||||
* Press and hold a note to display the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree/Note%20tree%20contextual%20menu.md">Note tree contextual menu</a>.
|
||||
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Quick%20search.md">Quick search</a> bar is also displayed at the top of the note tree.
|
||||
* The full <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Search.md">Search</a> function can be triggered either from either the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a> or from the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, if configured.
|
||||
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> is displayed at the bottom of the screen.
|
||||
|
||||
* The launch bar uses a different configuration for icons than the desktop version. See the dedicated page for more information on how to configure it.
|
||||
* Most of the note-related actions are grouped in the horizontal dots icon on the top-right of the note.
|
||||
* The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Tabs.md">Tabs</a> are grouped under a tab switcher in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, where the tabs are displayed in a full-screen grid with preview for easy switching, as well as additional options such as reopening closed tabs.
|
||||
* Since v0.100.0, <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.md">Split View</a> can also be used in mobile view, but with a maximum of two panes at once. The splits are displayed vertically instead of horizontally.
|
||||
* Starting with v0.102.0, the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/New%20Layout.md">New Layout</a> is enforced on mobile. This brings features such as the note badges, note type switcher or collection properties which would otherwise not be available.
|
||||
|
||||
## Installing as a PWA
|
||||
|
||||
The mobile view can be set up as a PWA. While this does not offer any offline capabilities, it will display the application in full-screen and makes it easy to access via your mobile phone's home screen.
|
||||
|
||||
### On iOS with Safari
|
||||
|
||||
1. Open your default web browser and access your Trilium instance.
|
||||
2. Login.
|
||||
3. Press the \[…\] button in the bottom-right of the screen and select Share.
|
||||
4. Scroll down to reveal the full list of items and choose “Add to Home Screen”.
|
||||
5. Press “Add” and the web app will be available.
|
||||
|
||||
### On Android with Google Chrome
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Google Chrome requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
|
||||
|
||||
1. Open your default web browser and access your Trilium instance.
|
||||
2. Login.
|
||||
3. Press the three vertical dots icon in the top-right of the screen and select _Add to Home screen._
|
||||
4. Select the _Install_ option.
|
||||
5. Select an appropriate name.
|
||||
6. The web app will appear as an application, not on the home screen.
|
||||
|
||||
### On Android with Brave
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Brave requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
|
||||
|
||||
1. Open your default web browser and access your Trilium instance.
|
||||
2. Login.
|
||||
3. Press the three vertical dots icon in the bottom-right of the screen and select _Add to Home screen_.
|
||||
4. Press the _Install_ option.
|
||||
5. The web app will appear as an application, not on the home screen.
|
||||
|
||||
### On Samsung Browser
|
||||
|
||||
1. Open your default web browser and access your Trilium instance.
|
||||
2. Login.
|
||||
3. Press the hamburger menu in the bottom-right of the screen.
|
||||
4. Select _Add to_, followed by _Home screen_.
|
||||
5. Press _Add_ and the web app will appear on the home page.
|
||||
|
||||
## Testing via the desktop application
|
||||
|
||||
If you are running Trilium without a dedicated [server installation](Server%20Installation.md), you can still test the mobile application using the desktop application. For more information, see <a class="reference-link" href="Desktop%20Installation/Using%20the%20desktop%20application%20.md">Using the desktop application as a server</a>. To access it go to `http://<ip>:37840/login?mobile` .
|
||||
|
||||
## Limitations
|
||||
|
||||
Mobile frontend provides only some of the features of the full desktop frontend:
|
||||
|
||||
* it is possible to browse the whole note tree, read and edit all types of notes, but you can create only text notes
|
||||
* reading and editing [protected notes](../Basic%20Concepts%20and%20Features/Notes/Protected%20Notes.md) is possible, but creating them is not supported
|
||||
* editing options is not supported
|
||||
* cloning notes is not supported
|
||||
* uploading file attachments is not supported
|
||||
|
||||
## Forcing mobile/desktop frontend
|
||||
|
||||
Trilium decides automatically whether to use mobile or desktop frontend. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
|
||||
Trilium decides automatically whether to use mobile or desktop front-end. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
|
||||
|
||||
Alternatively, simply select _Switch to Mobile/Desktop Version_ in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>.
|
||||
|
||||
## Scripting
|
||||
|
||||
You can alter the behavior with [scripts](../Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
|
||||
You can alter the behavior with <a class="reference-link" href="../Scripting.md">Scripting</a>, just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
|
||||
|
||||
Custom <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> widgets are also supported.
|
||||
BIN
docs/User Guide/User Guide/Installation & Setup/Mobile Frontend_IMG_1765.PNG
vendored
Normal file
|
After Width: | Height: | Size: 280 KiB |