moved protected note switch to "note actions", added shadow to protected note title

This commit is contained in:
zadam
2020-04-29 00:01:07 +02:00
parent 989a003d2f
commit 4c308ad68f
6 changed files with 89 additions and 47 deletions

View File

@@ -1,4 +1,5 @@
import TabAwareWidget from "./tab_aware_widget.js";
import protectedSessionService from "../services/protected_session.js";
const TPL = `
<div class="dropdown note-actions">
@@ -12,6 +13,49 @@ const TPL = `
background-color: transparent !important;
pointer-events: none; /* makes it unclickable */
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
float: right;
}
/* The slider */
.slider {
border-radius: 24px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--more-accented-background-color);
transition: .4s;
}
.slider:before {
border-radius: 50%;
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--main-background-color);
-webkit-transition: .4s;
transition: .4s;
}
.slider.checked {
background-color: var(--main-text-color);
}
.slider.checked:before {
transform: translateX(26px);
}
</style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
@@ -19,6 +63,22 @@ const TPL = `
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item protect-button">
Protect the note
<span title="Note is not protected, click to make it protected">
<label class="switch">
<span class="slider"></span>
</span>
</div>
<div class="dropdown-item unprotect-button">
Unprotect the note
<span title="Note is protected, click to make it unprotected">
<label class="switch">
<span class="slider checked"></span>
</span>
</div>
<a data-trigger-command="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
<a data-trigger-command="showAttributes" class="dropdown-item show-attributes-button"><kbd data-command="showAttributes"></kbd> Attributes</a>
<a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
@@ -48,6 +108,12 @@ export default class NoteActionsWidget extends TabAwareWidget {
this.$importNoteButton = this.$widget.find('.import-files-button');
this.$importNoteButton.on("click", () => import('../dialogs/import.js').then(d => d.showDialog(this.noteId)));
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', () => protectedSessionService.protectNote(this.noteId, false, false));
return this.$widget;
}
@@ -64,5 +130,14 @@ export default class NoteActionsWidget extends TabAwareWidget {
else {
this.$exportNoteButton.attr('disabled', 'disabled');
}
this.$protectButton.toggle(!note.isProtected);
this.$unprotectButton.toggle(!!note.isProtected);
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}
}
}