switcher for editability

src/public/app/widgets/containers/scrolling_container.js

@@ -35,7 +35,10 @@ export default class ScrollingContainer extends Container {
 
             const promise = super.handleEventInChildren(name, data);
 
+            // there seems to be some asynchronicity and we need to wait a bit before scrolling
             promise.then(() => setTimeout(() => this.$widget.scrollTop(scrollTop), 500));
+
+            return promise;
         }
         else {
             return super.handleEventInChildren(name, data);

src/public/app/widgets/editability_select.js

@@ -0,0 +1,75 @@
+import attributeService from '../services/attributes.js';
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+
+const TPL = `
+<div class="dropdown editability-select-widget">
+    <style>
+    .editability-dropdown {
+        width: 300px;
+    }
+    
+    .editability-dropdown .dropdown-item div {
+        font-size: small;
+        color: var(--muted-text-color);
+        white-space: normal;
+    }
+    </style>
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle editability-button">
+        <span class="editability-active-desc">auto</span>
+        <span class="caret"></span>
+    </button>
+    <div class="editability-dropdown dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item" href="#" data-editability="auto">
+            Auto
+            <div>Note is editable if it's not too long.</div>    
+        </a>
+        <a class="dropdown-item" href="#" data-editability="readOnly">
+            Read-only
+            <div>Note is read-only, but can be edited with a button click.</div>
+        </a>
+        <a class="dropdown-item" href="#" data-editability="autoReadOnlyDisabled">
+            Always editable
+            <div>Note is always editable, regardless of its length.</div>
+        </a>
+    </div>
+</div>
+`;
+
+export default class EditabilitySelectWidget extends NoteContextAwareWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
+
+        this.$widget.on('click', '.dropdown-item',
+            async e => {
+            this.$widget.find('.dropdown-toggle').dropdown('toggle');
+
+            const editability = $(e.target).closest("[data-editability]").attr("data-editability");
+
+            for (const ownedAttr of this.note.getOwnedLabels()) {
+                if (['readOnly', 'autoReadOnlyDisabled'].includes(ownedAttr.name)) {
+                    await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId);
+                }
+            }
+
+            if (editability !== 'auto') {
+                await attributeService.addLabel(this.noteId, editability);
+            }
+        });
+    }
+
+    async refreshWithNote(note) {
+        this.$editabilityActiveDesc.text(
+            this.note.hasLabel('readOnly') ? 'Read-Only' : (
+                this.note.hasLabel('autoReadOnlyDisabled') ? 'Always Editable' : 'Auto'
+            )
+        );
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId)) {
+            this.refresh();
+        }
+    }
+}

src/public/app/widgets/note_type.js

@@ -27,7 +27,7 @@ const TPL = `
         <span class="note-type-desc"></span>
         <span class="caret"></span>
     </button>
-    <div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
+    <div class="note-type-dropdown dropdown-menu dropdown-menu-left"></div>
 </div>
 `;
 

src/public/app/widgets/ribbon_widgets/basic_properties.js

@@ -1,23 +1,26 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import NoteTypeWidget from "../note_type.js";
 import ProtectedNoteSwitchWidget from "../protected_note_switch.js";
+import EditabilitySelectWidget from "../editability_select.js";
 
 const TPL = `
 <div class="basic-properties-widget">
     <style>
         .basic-properties-widget {
-            padding: 12px 12px 6px 12px;
+            padding: 0px 12px 6px 12px;
             display: flex;
             align-items: baseline;
-        }
-        
-        .note-type-container {
-            display: flex;
-            align-items: center;
+            flex-wrap: wrap;
         }
         
         .basic-properties-widget > * {
             margin-right: 30px;
+            margin-top: 12px;
+        }
+        
+        .note-type-container, .editability-select-container {
+            display: flex;
+            align-items: center;
         }
     </style>
     
@@ -26,6 +29,10 @@ const TPL = `
     </div>
     
     <div class="protected-note-switch-container"></div>
+    
+    <div class="editability-select-container">
+        <span>Editable:</span> &nbsp;
+    </div>
 </div>`;
 
 export default class BasicPropertiesWidget extends NoteContextAwareWidget {
@@ -34,12 +41,13 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
 
         this.noteTypeWidget = new NoteTypeWidget().contentSized();
         this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized();
+        this.editabilitySelectWidget = new EditabilitySelectWidget().contentSized();
 
-        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
+        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget, this.editabilitySelectWidget);
     }
 
     isEnabled() {
-        return this.note;
+        return this.note && (this.note.type === 'text' || this.note.type === 'code');
     }
 
     getTitle() {
@@ -56,5 +64,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
 
         this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
         this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());
+        this.$widget.find(".editability-select-container").append(this.editabilitySelectWidget.render());
     }
 }

src/public/stylesheets/style.css

@@ -787,6 +787,7 @@ body {
 
 ::-webkit-scrollbar {
     width: 12px;
+    background-color: var(--main-background-color);
 }
 
 ::-webkit-scrollbar-thumb {