protected notes detail is now marked with shield background instead of just grey background

This commit is contained in:
azivner 2018-08-17 09:32:07 +02:00
parent 02c0f9a6cd
commit 427ce3972e
3 changed files with 8 additions and 5 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fafafa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>

After

Width:  |  Height:  |  Size: 274 B

View File

@ -25,7 +25,6 @@ const $noteDetailComponents = $(".note-detail-component");
const $protectButton = $("#protect-button");
const $unprotectButton = $("#unprotect-button");
const $noteDetailWrapper = $("#note-detail-wrapper");
const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
const $noteIdDisplay = $("#note-id-display");
const $attributeList = $("#attribute-list");
const $attributeListInner = $("#attribute-list-inner");
@ -122,7 +121,7 @@ async function saveNoteIfChanged() {
function setNoteBackgroundIfProtected(note) {
const isProtected = !!note.isProtected;
$noteDetailComponentWrapper.toggleClass("protected", isProtected);
$noteDetailWrapper.toggleClass("protected", isProtected);
$protectButton.toggleClass("active", isProtected);
$unprotectButton.toggleClass("active", !isProtected);
}

View File

@ -6,7 +6,7 @@
grid-template-areas: "header header"
"left-pane title"
"left-pane note-detail";
grid-template-columns: 29% 70%;
grid-template-columns: 29% 69.5%;
grid-template-rows: auto
auto
1fr;
@ -52,8 +52,10 @@
overflow: auto;
}
#note-detail-component-wrapper.protected, #note-detail-component-wrapper.protected .CodeMirror {
background-color: #eee;
#note-detail-wrapper.protected {
background: url('/images/shield.svg') no-repeat;
background-size: contain;
background-position: center;
}
#note-detail-text p {
@ -286,6 +288,7 @@ div.ui-tooltip {
.CodeMirror {
font-family: "Liberation Mono", "Lucida Console", monospace;
height: auto;
background: inherit;
}
.CodeMirror-scroll {