edit button grows and shakes on the first display #2483

This commit is contained in:
zadam 2022-12-20 20:20:24 +01:00
parent 7c6d67f1ad
commit c89455f93f
3 changed files with 18 additions and 2 deletions

View File

@ -31,8 +31,18 @@ export default class EditButton extends OnClickButtonWidget {
// prevent flickering by assuming hidden before async operation
this.toggleInt(false);
const wasVisible = this.isVisible();
// can't do this in isEnabled() since isReadOnly is async
this.toggleInt(await this.noteContext.isReadOnly());
// make the edit button stand out on the first display, otherwise
// it's difficult to notice that the note is readonly
if (this.isVisible() && !wasVisible) {
this.$iconSpan.addClass("bx-tada bx-lg");
setTimeout(() => this.$iconSpan.removeClass("bx-tada bx-lg"), 1700);
}
}
await super.refreshWithNote(note);

View File

@ -21,7 +21,7 @@ const TPL = `
}
.floating-buttons-children > button {
font-size: 130%;
font-size: 150%;
padding: 5px 10px 4px 10px;
width: 40px;
cursor: pointer;

View File

@ -1,7 +1,13 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `
<div>
<div class="relation-map-buttons">
<style>
.relation-map-buttons .floating-button {
font-size: 120%;
}
</style>
<button type="button"
class="relation-map-create-child-note floating-button btn bx bx-folder-plus no-print"
title="Create new child note and add it into this relation map"></button>