zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-21 16:16:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

styling changes of buttons

Browse source
This commit is contained in:
zadam 2022-12-11 13:20:37 +01:00
parent 1f468f81cc
commit c231b3cb79
18 changed files with 52 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package-lock.json generated
View file

@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "trilium",
"version": "0.57.3",
"hasInstallScript": true,
"license": "AGPL-3.0-only",

2
src/public/app/components/component.js
View file

@ -13,7 +13,7 @@ import utils from '../services/utils.js';
*/
export default class Component {
constructor() {
this.componentId = `comp-` + this.sanitizedClassName + '-' + utils.randomString(8);
this.componentId = this.sanitizedClassName + '-' + utils.randomString(8);
/** @type Component[] */
this.children = [];
this.initialized = null;

2
src/public/app/layouts/desktop_layout.js
View file

@ -143,13 +143,13 @@ export default class DesktopLayout {
.ribbon(new NoteMapRibbonWidget())
.ribbon(new SimilarNotesWidget())
.ribbon(new NoteInfoWidget())
.button(new EditButton())
.button(new NoteRevisionsButton())
.button(new NoteActionsWidget())
)
.child(new SharedInfoWidget())
.child(new NoteUpdateStatusWidget())
.child(new FloatingButtons()
.child(new EditButton())
.child(new RelationMapButtons())
.child(new MermaidExportButton())
.child(new BacklinksWidget())

1
src/public/app/widgets/basic_widget.js
View file

@ -72,6 +72,7 @@ class BasicWidget extends Component {
render() {
this.doRender();
this.$widget.attr('data-component-id', this.componentId);
this.$widget.addClass('component')
.prop('component', this);

2
src/public/app/widgets/bookmark_buttons.js
View file

@ -24,6 +24,8 @@ export default class BookmarkButtons extends FlexContainer {
? new BookmarkFolderWidget(note)
: new OpenNoteButtonWidget().targetNote(note.noteId);
buttonWidget.class("launcher-button");
this.child(buttonWidget);
this.$widget.append(buttonWidget.render());

15
src/public/app/widgets/buttons/abstract_button.js
View file

@ -1,8 +1,8 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `<span class="button-widget icon-action bx"
data-toggle="tooltip"
title=""></span>`;
const TPL = `<button class="button-widget no-print" data-toggle="tooltip">
<span class="bx"></span>
</button>`;
export default class AbstractButtonWidget extends NoteContextAwareWidget {
isEnabled() {
@ -22,6 +22,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$iconSpan = this.$widget.find("span");
if (this.settings.onContextMenu) {
this.$widget.on("contextmenu", e => {
@ -49,9 +50,9 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
}
refreshIcon() {
for (const className of this.$widget[0].classList) {
for (const className of this.$iconSpan[0].classList) {
if (className.startsWith("bx-")) {
this.$widget.removeClass(className);
this.$iconSpan.removeClass(className);
}
}
@ -59,7 +60,7 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
? this.settings.icon()
: this.settings.icon;
this.$widget.addClass(icon);
this.$iconSpan.addClass(icon);
}
initialRenderCompleteEvent() {
@ -87,4 +88,4 @@ export default class AbstractButtonWidget extends NoteContextAwareWidget {
onContextMenu(handler) {
this.settings.onContextMenu = handler;
}
}
}

3
src/public/app/widgets/buttons/create_pane_button.js
View file

@ -7,6 +7,7 @@ export default class CreatePaneButton extends OnClickButtonWidget {
this.icon("bx-dock-right")
.title("Create new split")
.titlePlacement("bottom")
.onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() }));
.onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() }))
.class("icon-action");
}
}

2
src/public/app/widgets/buttons/launcher/abstract_launcher.js
View file

@ -5,6 +5,8 @@ export default class AbstractLauncher extends OnClickButtonWidget {
constructor(launcherNote) {
super();
this.class("launcher-button");
/** @type {NoteShort} */
this.launcherNote = launcherNote;

2
src/public/app/widgets/buttons/left_pane_toggle.js
View file

@ -6,6 +6,8 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
constructor() {
super();
this.class("launcher-button");
this.settings.icon = () => options.is('leftPaneVisible')
? "bx-chevrons-left"
: "bx-chevrons-right";

3
src/public/app/widgets/buttons/note_revisions_button.js
View file

@ -7,7 +7,8 @@ export default class NoteRevisionsButton extends CommandButtonWidget {
this.icon('bx-history')
.title("Note Revisions")
.command("showNoteRevisions")
.titlePlacement("bottom");
.titlePlacement("bottom")
.class("icon-action");
}
isEnabled() {

2
src/public/app/widgets/buttons/protected_session_status.js
View file

@ -5,6 +5,8 @@ export default class ProtectedSessionStatusWidget extends CommandButtonWidget {
constructor() {
super();
this.class("launcher-button");
this.settings.icon = () => protectedSessionHolder.isProtectedSessionAvailable()
? "bx-check-shield"
: "bx-shield-quarter";

2
src/public/app/widgets/buttons/right_dropdown_button.js
View file

@ -11,7 +11,7 @@ const TPL = `
<button type="button" data-toggle="dropdown" data-placement="right"
aria-haspopup="true" aria-expanded="false"
class="icon-action bx right-dropdown-button"></button>
class="bx right-dropdown-button launcher-button"></button>
<div class="dropdown-menu dropdown-menu-right"></div>
</div>

10
src/public/app/widgets/containers/launcher.js
View file

@ -1,4 +1,3 @@
import OnClickButtonWidget from "../buttons/onclick_button.js";
import CalendarWidget from "../buttons/calendar.js";
import SpacerWidget from "../spacer.js";
import BookmarkButtons from "../bookmark_buttons.js";
@ -34,11 +33,14 @@ export default class LauncherWidget extends BasicWidget {
const launcherType = note.getLabelValue("launcherType");
if (launcherType === 'command') {
this.innerWidget = this.initCommandWidget(note);
this.innerWidget = this.initCommandWidget(note)
.class("launcher-button");
} else if (launcherType === 'note') {
this.innerWidget = new NoteLauncher(note);
this.innerWidget = new NoteLauncher(note)
.class("launcher-button");
} else if (launcherType === 'script') {
this.innerWidget = new ScriptLauncher(note);
this.innerWidget = new ScriptLauncher(note)
.class("launcher-button");
} else if (launcherType === 'customWidget') {
this.innerWidget = await this.initCustomWidget(note);
} else if (launcherType === 'builtinWidget') {

4
src/public/app/widgets/containers/ribbon_container.js
View file

@ -78,10 +78,6 @@ const TPL = `
margin-right: 5px;
}
.ribbon-button-container .icon-action {
padding: 5px;
}
.ribbon-button-container > * {
position: relative;
top: -3px;

15
src/public/app/widgets/floating_buttons/floating_buttons.js
View file

@ -20,9 +20,22 @@ const TPL = `
margin-left: 10px;
}
.floating-buttons .floating-button {
.floating-buttons-children > button {
font-size: 130%;
padding: 5px 10px 4px 10px;
width: 40px;
cursor: pointer;
color: var(--button-text-color);
background: var(--button-background-color);
border-radius: var(--button-border-radius);
border: 1px solid transparent;
display: flex;
justify-content: space-around;
}
.floating-buttons-children > button:hover {
text-decoration: none;
border-color: var(--button-border-color);
}
.floating-buttons.temporarily-hidden {

6
src/public/app/widgets/floating_buttons/mermaid_export_button.js
View file

@ -2,8 +2,10 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `
<button type="button"
class="export-mermaid-button floating-button btn bx bx-export no-print"
title="Export Mermaid diagram as SVG"></button>
class="export-mermaid-button no-print"
title="Export Mermaid diagram as SVG">
<span class="bx bx-export"></span>
</button>
`;
export default class MermaidExportButton extends NoteContextAwareWidget {

4
src/public/stylesheets/style.css
View file

@ -109,7 +109,6 @@ button.close:hover {
.icon-action {
border: 1px solid transparent;
padding: 5px;
width: 35px;
height: 35px;
cursor: pointer;
@ -863,13 +862,14 @@ body {
margin: 10px;
}
#launcher-pane .icon-action {
#launcher-pane .launcher-button {
font-size: 150%;
display: inline-block;
padding: 15px 15px;
cursor: pointer;
border: none;
color: var(--launcher-pane-text-color);
background-color: var(--launcher-pane-background-color);
width: 53px;
height: 53px;
}

2
src/services/app_info.js
View file

@ -4,7 +4,7 @@ const build = require('./build');
const packageJson = require('../../package');
const {TRILIUM_DATA_DIR} = require('./data_dir');
const APP_DB_VERSION = 206;
const APP_DB_VERSION = 205;
const SYNC_VERSION = 28;
const CLIPPER_PROTOCOL_VERSION = "1.0";