fixes and tweaks - readonly bar is smaller and on the right

src/public/app/services/attribute_renderer.js

@@ -1,4 +1,5 @@
 import ws from "./ws.js";
+import linkService from "./link.js";
 
 function renderAttribute(attribute, $container, renderIsInheritable) {
     const isInheritable = renderIsInheritable && attribute.isInheritable ? `(inheritable)` : '';
@@ -48,11 +49,15 @@ function formatValue(val) {
 }
 
 function createNoteLink(noteId) {
-    return $("<a>", {
+    const $link = $("<a>", {
         href: '#' + noteId,
         class: 'reference-link',
         'data-note-path': noteId
     });
+
+    linkService.loadReferenceLinkTitle(noteId, $link);
+
+    return $link;
 }
 
 export default {

src/public/app/services/link.js

@@ -1,6 +1,7 @@
 import treeService from './tree.js';
 import contextMenu from "./context_menu.js";
 import appContext from "./app_context.js";
+import treeCache from "./tree_cache.js";
 
 function getNotePathFromUrl(url) {
     const notePathMatch = /#(root[A-Za-z0-9/]*)$/.exec(url);
@@ -125,6 +126,24 @@ function linkContextMenu(e) {
     });
 }
 
+async function loadReferenceLinkTitle(noteId, $el) {
+    const note = await treeCache.getNote(noteId, true);
+
+    let title;
+
+    if (!note) {
+        title = '[missing]';
+    }
+    else if (!note.isDeleted) {
+        title = note.title;
+    }
+    else {
+        title = note.isErased ? '[erased]' : `${note.title} (deleted)`;
+    }
+
+    $el.text(title);
+}
+
 $(document).on('click', "a", goToLink);
 $(document).on('auxclick', "a", goToLink); // to handle middle button
 $(document).on('contextmenu', 'a', linkContextMenu);
@@ -132,5 +151,6 @@ $(document).on('contextmenu', 'a', linkContextMenu);
 export default {
     getNotePathFromUrl,
     createNoteLink,
-    goToLink
+    goToLink,
+    loadReferenceLinkTitle
 };

src/public/app/widgets/attribute_detail.js

@@ -22,7 +22,7 @@ const TPL = `
             width: 500px;
             max-height: 600px;
             overflow: auto;
-            box-shadow: 10px 10px 93px -25px var(--main-text-color);
+            box-shadow: 10px 10px 93px -25px black;
         }
         
         .attr-help td {

src/public/app/widgets/type_widgets/abstract_text_type_widget.js

@@ -46,21 +46,7 @@ export default class AbstractTextTypeWidget extends TypeWidget {
     }
 
     async loadReferenceLinkTitle(noteId, $el) {
-        const note = await treeCache.getNote(noteId, true);
+        await linkService.loadReferenceLinkTitle(noteId, $el);
-
-        let title;
-
-        if (!note) {
-            title = '[missing]';
-        }
-        else if (!note.isDeleted) {
-            title = note.title;
-        }
-        else {
-            title = note.isErased ? '[erased]' : `${note.title} (deleted)`;
-        }
-
-        $el.text(title);
     }
 
     refreshIncludedNote($container, noteId) {

src/public/app/widgets/type_widgets/editable_code.js

@@ -13,6 +13,7 @@ const TPL = `
         height: 100%;
         display: flex;
         flex-direction: column;
+        font-size: larger; /* monospace fonts are smaller for some reason so this compensates that */
     }
     
     .note-detail-code-editor {

src/public/app/widgets/type_widgets/read_only_code.js

@@ -11,10 +11,16 @@ const TPL = `
     .note-detail-read-only-code-content {
         padding: 10px;
     }
+    
+    .edit-code-note-container {
+        position: absolute; 
+        top: 0px; 
+        right: 10px;
+    }
     </style>
 
-    <div class="alert alert-warning no-print" style="margin-bottom: 0;">
+    <div class="alert alert-warning no-print edit-code-note-container">
-        <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">Read only</a> code view is shown. <a href="#" class="edit-note">Click here</a> to edit the note.
+         <a href="#" class="edit-note">Edit</a> <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">?</a>
     </div>
 
     <pre class="note-detail-read-only-code-content"></pre>

src/public/app/widgets/type_widgets/read_only_text.js

@@ -27,10 +27,16 @@ const TPL = `
     .note-detail-readonly-text img {
         max-width: 100%;
     }
+    
+    .edit-text-note-container {
+        position: absolute; 
+        top: 5px; 
+        right: 10px;
+    }
     </style>
 
-    <div class="alert alert-warning no-print">
+    <div class="alert alert-warning no-print edit-text-note-container">
-        <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">Read only</a> text view is shown. <a href="#" class="edit-note">Click here</a> to edit the note.
+         <a href="#" class="edit-note">Edit</a> <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">?</a>
     </div>
 
     <div class="note-detail-readonly-text-content ck-content"></div>