using boxicons instead of jam icons WIP

This commit is contained in:
zadam
2019-11-02 12:17:00 +01:00
parent b471d51cb4
commit fc87bcf10c
24 changed files with 78 additions and 1011 deletions

View File

@@ -70,7 +70,7 @@ export default class SidebarOptions {
for (const {name, title, option} of widgets) {
const $widgetTitle = $('<div class="widget-title">')
.attr('data-widget-name', name)
.append($("<span>").addClass("handle jam jam-move"))
.append($("<span>").addClass("handle bx bx-move"))
.append($("<span>").text(title));
const $expandedCheckbox = $('<div class="expansion-conf">')

View File

@@ -168,7 +168,7 @@ class Attributes {
$input.prop("placeholder", "http://website...");
const $openButton = $("<span>")
.addClass("input-group-text open-external-link-button jam jam-arrow-up-right")
.addClass("input-group-text open-external-link-button bx bx-trending-up")
.prop("title", "Open external link")
.click(() => window.open($input.val(), '_blank'));
@@ -201,7 +201,7 @@ class Attributes {
if (definition.multiplicityType === "multivalue") {
const addButton = $("<span>")
.addClass("jam jam-plus pointer")
.addClass("bx bx-plus pointer")
.prop("title", "Add new attribute")
.click(async () => {
const $new = await this.createPromotedAttributeRow(definitionAttr, {
@@ -217,7 +217,7 @@ class Attributes {
});
const removeButton = $("<span>")
.addClass("jam jam-trash-alt pointer")
.addClass("bx bx-trash pointer")
.prop("title", "Remove this attribute")
.click(async () => {
if (valueAttr.attributeId) {

View File

@@ -19,7 +19,7 @@ async function initContextMenu(event, contextMenu) {
const $icon = $("<span>");
if (item.uiIcon) {
$icon.addClass("jam jam-" + item.uiIcon);
$icon.addClass("bx bx-" + item.uiIcon);
} else {
$icon.append("&nbsp;");
}

View File

@@ -72,7 +72,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
/**
* @typedef {Object} ToolbarButtonOptions
* @property {string} title
* @property {string} [icon] - name of the JAM icon to be used (e.g. "clock" for "jam-clock" icon)
* @property {string} [icon] - name of the boxicon to be used (e.g. "time" for "bx-time" icon)
* @property {function} action - callback handling the click on the button
* @property {string} [shortcut] - keyboard shortcut for the button, e.g. "alt+t"
*/
@@ -90,7 +90,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
.click(opts.action);
if (opts.icon) {
button.append($("<span>").addClass("jam jam-" + opts.icon))
button.append($("<span>").addClass("bx bx-" + opts.icon))
.append("&nbsp;");
}

View File

@@ -49,15 +49,15 @@ function initNoteAutocomplete($el, options) {
$el.addClass("note-autocomplete-input");
const $clearTextButton = $("<a>")
.addClass("input-group-text input-clearer-button jam jam-close")
.addClass("input-group-text input-clearer-button bx bx-x")
.prop("title", "Clear text field");
const $showRecentNotesButton = $("<a>")
.addClass("input-group-text show-recent-notes-button jam jam-clock")
.addClass("input-group-text show-recent-notes-button bx bx-time")
.prop("title", "Show recent notes");
const $goToSelectedNoteButton = $("<a>")
.addClass("input-group-text go-to-selected-note-button jam jam-arrow-right")
.addClass("input-group-text go-to-selected-note-button bx bx-right-arrow")
.attr("data-action", "note");
const $sideButtons = $("<div>")

View File

@@ -218,7 +218,7 @@ class NoteDetailBook {
return $el;
}
else if (type === 'protected-session') {
const $button = $(`<button class="btn btn-sm"><span class="jam jam-door"></span> Enter protected session</button>`)
const $button = $(`<button class="btn btn-sm"><span class="bx bx-log-in"></span> Enter protected session</button>`)
.click(protectedSessionService.enterProtectedSession);
return $("<div>")

View File

@@ -4,7 +4,7 @@ import utils from "./utils.js";
function toast(options) {
const $toast = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto"><span class="jam jam-${options.icon}"></span> ${options.title}</strong>
<strong class="mr-auto"><span class="bx bx-${options.icon}"></span> ${options.title}</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

View File

@@ -499,7 +499,7 @@ function initFancyTree(tree) {
const note = await treeCache.getNote(node.data.noteId);
if (note.type === 'search' && $span.find('.refresh-search-button').length === 0) {
const refreshSearchButton = $('<span>&nbsp; <span class="refresh-search-button jam jam-refresh" title="Refresh saved search results"></span></span>');
const refreshSearchButton = $('<span>&nbsp; <span class="refresh-search-button bx bx-recycle" title="Refresh saved search results"></span></span>');
$span.append(refreshSearchButton);
}

View File

@@ -31,30 +31,30 @@ async function prepareBranch(note) {
}
const NOTE_TYPE_ICONS = {
"file": "jam jam-attachment",
"image": "jam jam-picture",
"code": "jam jam-terminal",
"render": "jam jam-play",
"search": "jam jam-search-folder",
"relation-map": "jam jam-map",
"book": "jam jam-book"
"file": "bx bx-file",
"image": "bx bx-image",
"code": "bx bx-code",
"render": "bx bx-extension",
"search": "bx bx-file-find",
"relation-map": "bx bx-map-alt",
"book": "bx bx-book"
};
async function getIcon(note) {
const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
if (note.noteId === 'root') {
return "jam jam-chevrons-right";
return "bx bx-chevrons-right";
}
else if (note.noteId === hoistedNoteId) {
return "jam jam-arrow-up";
return "bx bxs-arrow-from-bottom";
}
else if (note.type === 'text') {
if (note.hasChildren()) {
return "jam jam-folder";
return "bx bx-folder";
}
else {
return "jam jam-file";
return "bx bx-note";
}
}
else {

View File

@@ -8,13 +8,13 @@ import server from "../services/server.js";
const TPL = `
<div class="calendar-widget">
<div class="calendar-header">
<button class="calendar-btn jam jam-arrow-left" data-calendar-toggle="previous"></button>
<button class="calendar-btn bx bx-left-arrow" data-calendar-toggle="previous"></button>
<div class="calendar-header__label" data-calendar-label="month">
March 2017
</div>
<button class="calendar-btn jam jam-arrow-right" data-calendar-toggle="next"></button>
<button class="calendar-btn bx bx-right-arrow" data-calendar-toggle="next"></button>
</div>
<div class="calendar-week">

View File

@@ -8,7 +8,7 @@ const WIDGET_TPL = `
Collapsible Group Item
</button>
<a class="widget-help external no-arrow jam jam-help"></a>
<a class="widget-help external no-arrow bx bx-info-circle"></a>
</div>
<div class="widget-header-actions"></div>

View File

@@ -53,7 +53,7 @@ ul.fancytree-container {
}
.fancytree-node:not(.fancytree-loading) .fancytree-expander:before {
font-family: 'jam-icons' !important;
font-family: 'boxicons' !important;
speak: none;
font-style: normal;
font-weight: normal;
@@ -62,7 +62,7 @@ ul.fancytree-container {
line-height: 1;
padding-left: 5px;
padding-right: 5px;
content: "\e9bc";
content: "\203A";
}
/* this is done to preserve correct indentation. Better solution would be preferable */
@@ -71,7 +71,7 @@ ul.fancytree-container {
}
.fancytree-node.fancytree-expanded .fancytree-expander:before {
content: "\e9ba";
content: "\2304";
}
.note-title[readonly] {
@@ -774,7 +774,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
border-color: var(--main-border-color) !important;
}
.jam-empty {
.bx-empty {
width: 1em;
display: inline-block;
}

View File

@@ -12,33 +12,33 @@
<div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) minmax(0, <%= rightPaneWidthPercent %>fr)">
<div id="header" class="hide-toggle">
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action jam jam-arrow-square-left"></a>
<a id="history-back-button" title="Go to previous note." class="icon-action bx bx-left-arrow-circle"></a>
&nbsp;
<a id="history-forward-button" title="Go to next note." class="icon-action jam jam-arrow-square-right"></a>
<a id="history-forward-button" title="Go to next note." class="icon-action bx bx-right-arrow-circle"></a>
</div>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm" id="jump-to-note-dialog-button" title="CTRL+J">
<span class="jam jam-direction"></span>
<span class="bx bx-crosshair"></span>
Jump to note
</button>
<button class="btn btn-sm" id="recent-changes-button">
<span class="jam jam-history"></span>
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm" id="enter-protected-session-button" title="Enter protected session to be able to find and view protected notes">
<span class="jam jam-door"></span>
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm" id="leave-protected-session-button" title="Leave protected session so that protected notes are not accessible any more." style="display: none;">
<span class="jam jam-log-out"></span>
<span class="bx bx-log-out"></span>
Leave protected session
</button>
@@ -50,58 +50,58 @@
<div>
<div class="dropdown" id="global-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
<span class="jam jam-align-justify"></span>
<span class="bx bx-menu"></span>
Menu
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" id="options-button">
<span class="jam jam-settings-alt"></span>
<span class="bx bx-slider"></span>
Options
</a>
<a class="dropdown-item" id="sync-now-button" title="Trigger sync">
<span class="jam jam-refresh"></span>
<span class="bx bx-recycle"></span>
Sync (<span id="outstanding-syncs-count">0</span>)
</a>
<a class="dropdown-item" id="open-dev-tools-button">
<span class="jam jam-terminal"></span>
<span class="bx bx-terminal"></span>
Open Dev Tools
<kbd>CTRL+SHIFT+I</kbd>
</a>
<a class="dropdown-item" id="open-sql-console-button">
<span class="jam jam-database"></span>
<span class="bx bx-data"></span>
Open SQL Console
<kbd>ALT+O</kbd>
</a>
<a class="dropdown-item" id="reload-frontend-button" title="Reload can help with some visual glitches without restarting the whole app.">
<span class="jam jam-empty"></span>
<span class="bx bx-empty"></span>
Reload frontend
<kbd>CTRL-R</kbd>
</a>
<a class="dropdown-item" id="toggle-fullscreen-button">
<span class="jam jam-empty"></span>
<span class="bx bx-empty"></span>
Toggle fullscreen
<kbd>F11</kbd>
</a>
<a class="dropdown-item" id="show-help-button">
<span class="jam jam-help"></span>
<span class="bx bx-info-circle"></span>
Show Help
<kbd>F1</kbd>
</a>
<a class="dropdown-item" id="show-about-dialog-button">
<span class="jam jam-empty"></span>
<span class="bx bx-empty"></span>
About Trilium Notes
</a>
<a class="dropdown-item" id="logout-button">
<span class="jam jam-log-out"></span>
<span class="bx bx-log-out"></span>
Logout
</a>
</div>
@@ -111,13 +111,13 @@
<div id="left-pane" class="hide-toggle">
<div id="global-buttons">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action jam jam-plus-circle"></a>
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action jam jam-layers"></a>
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action bx bx-layer-minus"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note. Shortcut CTRL+." class="icon-action bx bx-crosshair"></a>
<a id="toggle-search-button" title="Search in notes. Shortcut CTRL+S" class="icon-action jam jam-search"></a>
<a id="toggle-search-button" title="Search in notes. Shortcut CTRL+S" class="icon-action bx bx-search"></a>
</div>
<div id="search-box">
@@ -127,7 +127,7 @@
placeholder="Search text, labels" autocomplete="off">
<div class="input-group-append">
<button id="do-search-button" class="btn btn-sm icon-button jam jam-search" title="Search (enter)"></button>
<button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
</div>
</div>
</div>
@@ -136,9 +136,9 @@
<div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
<button id="save-search-button" class="btn btn-sm"
title="This will create new saved search note under active note.">
<span class="jam jam-save"></span> Save search</button>
<span class="bx bx-save"></span> Save search</button>
<button id="close-search-button" class="btn btn-sm"><span class="jam jam-close"></span> Close search</button>
<button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
</div>
</div>
@@ -215,7 +215,7 @@
<script src="javascripts/desktop.js" crossorigin type="module"></script>
<link rel="stylesheet" type="text/css" href="libraries/jam/css/jam.min.css">
<link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
<script type="text/javascript">
// we hide container initally because otherwise it is rendered first without CSS and then flickers into

View File

@@ -1,15 +1,15 @@
<div class="note-detail-book note-detail-component">
<div class="btn-group floating-button" style="right: 20px; top: 20px;">
<button type="button"
class="expand-children-button btn icon-button jam jam-arrows-v"
class="expand-children-button btn icon-button bx bx-move-vertical"
title="Expand all children"></button>
<button type="button"
class="book-zoom-in-button btn icon-button jam jam-search-plus"
class="book-zoom-in-button btn icon-button bx bx-zoom-in"
title="Zoom In"></button>
<button type="button"
class="book-zoom-out-button btn icon-button jam jam-search-minus"
class="book-zoom-out-button btn icon-button bx bx-zoom-out"
title="Zoom Out"></button>
</div>

View File

@@ -1,23 +1,23 @@
<div class="note-detail-relation-map note-detail-component">
<button class="relation-map-create-child-note btn btn-sm floating-button" type="button"
title="Create new child note and add it into this relation map">
<span class="jam jam-plus"></span>
<span class="bx bx-folder-plus"></span>
Create child note
</button>
<button type="button"
class="relation-map-reset-pan-zoom btn icon-button floating-button jam jam-crop"
class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop"
title="Reset pan & zoom to initial coordinates and magnification"
style="right: 70px;"></button>
<div class="btn-group floating-button" style="right: 10px;">
<button type="button"
class="relation-map-zoom-in btn icon-button jam jam-search-plus"
class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
title="Zoom In"></button>
<button type="button"
class="relation-map-zoom-out btn icon-button jam jam-search-minus"
class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
title="Zoom Out"></button>
</div>

View File

@@ -98,7 +98,7 @@
&nbsp;
<span title="Delete" style="padding: 13px; cursor: pointer;" class="jam jam-trash"
<span title="Delete" style="padding: 13px; cursor: pointer;" class="bx bx-trash"
data-bind="click: $parent.deleteAttribute"></span>
</td>
</tr>

View File

@@ -15,18 +15,18 @@
<div id="left-pane" class="d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4">
<div id="global-buttons">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action jam jam-plus-circle"></a>
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action jam jam-layers"></a>
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action bx bx-layer-minus"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
<a id="scroll-to-active-note-button" title="Scroll to active note. Shortcut CTRL+." class="icon-action bx bx-crosshair"></a>
<div class="dropdown">
<a id="global-actions-button" title="Global actions" class="icon-action jam jam-cogs dropdown-toggle" data-toggle="dropdown"></a>
<a id="global-actions-button" title="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" id="switch-to-desktop-button"><span class="jam jam-computer"></span> Switch to desktop version</a>
<a class="dropdown-item" id="log-out-button"><span class="jam jam-log-out"></span> Logout</a>
<a class="dropdown-item" id="switch-to-desktop-button"><span class="bx bx-laptop"></span> Switch to desktop version</a>
<a class="dropdown-item" id="log-out-button"><span class="bx bx-log-out"></span> Logout</a>
</div>
</div>
</div>
@@ -43,7 +43,7 @@
<div class="note-tab-content note-tab-content-template">
<div class="note-detail-content" style="width: 100%">
<div class="note-title-row">
<button type="button" class="note-menu-button action-button jam jam-align-justify"></button>
<button type="button" class="note-menu-button action-button bx bx-menu"></button>
<input autocomplete="off" value="" class="form-control note-title" tabindex="1">
@@ -115,7 +115,7 @@
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/mobile.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="libraries/jam/css/jam.min.css">
<link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
<script type="text/javascript">
// we hide container initally because otherwise it is rendered first without CSS and then flickers into

View File

@@ -1,6 +1,6 @@
<div class="note-detail-sidebar hide-toggle" style="width: <%= sidebarWidthPercent %>%; min-width: <%= sidebarMinWidth %>px">
<div style="text-align: center; margin-bottom: 10px;">
<button class="hide-sidebar-button" style="background: none; border: none;">hide sidebar <span class="jam jam-chevron-right"></span></button>
<button class="hide-sidebar-button" style="background: none; border: none;">hide sidebar <span class="bx bx-chevrons-right"></span></button>
</div>
<div class="note-detail-widget-container"></div>

View File

@@ -12,25 +12,25 @@
<input autocomplete="off" value="" class="note-title" tabindex="1">
<span class="saved-indicator jam jam-check" title="All changes have been saved"></span>
<span class="saved-indicator bx bx-check" title="All changes have been saved"></span>
<div class="hide-toggle" style="display: flex; align-items: center;">
<button class="btn btn-sm icon-button jam jam-play render-button"
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button jam jam-play execute-script-button"
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-sm icon-button jam jam-shield-check protect-button"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
title="Protected note can be viewed and edited only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button jam jam-shield-close unprotect-button"
class="btn btn-sm icon-button bx bx-shield unprotect-button"
title="Not protected note can be viewed without entering password">
</button>
</div>
@@ -63,7 +63,7 @@
</div>
</div>
<button class="btn btn-sm icon-button jam jam-chevron-left show-sidebar-button" title="Show sidebar"></button>
<button class="btn btn-sm icon-button bx bx-chevrons-left show-sidebar-button" title="Show sidebar"></button>
</div>
</div>
</div>