attr detail automatically focuses the name input and allows saving with ctrl+enter.

src/public/app/widgets/attribute_detail.js

@@ -7,6 +7,7 @@ import noteAutocompleteService from "../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from '../services/promoted_attribute_definition_parser.js';
 import TabAwareWidget from "./tab_aware_widget.js";
 import SpacedUpdate from "../services/spaced_update.js";
+import utils from "../services/utils.js";
 
 const TPL = `
 <div class="attr-detail">
@@ -145,7 +146,7 @@ const TPL = `
     <div class="attr-save-delete-button-container">
         <button class="btn btn-primary btn-sm attr-save-changes-and-close-button" 
             style="flex-grow: 1; margin-right: 20px">
-            Save & close</button>
+            Save & close <kbd>Ctrl+Enter</kbd></button>
             
         <button class="btn btn-secondary btn-sm attr-delete-button">
             Delete</button>
@@ -221,6 +222,9 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         this.relatedNotesSpacedUpdate = new SpacedUpdate(async () => this.updateRelatedNotes(), 1000);
 
         this.$widget = $(TPL);
+
+        utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.saveAndClose());
+
         this.contentSized();
 
         this.$title = this.$widget.find('.attr-detail-title');
@@ -291,11 +295,7 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         this.$attrSaveDeleteButtonContainer = this.$widget.find('.attr-save-delete-button-container');
 
         this.$saveAndCloseButton = this.$widget.find('.attr-save-changes-and-close-button');
-        this.$saveAndCloseButton.on('click', async () => {
-            await this.triggerCommand('saveAttributes');
-
-            this.hide();
-        });
+        this.$saveAndCloseButton.on('click', () => this.saveAndClose());
 
         this.$deleteButton = this.$widget.find('.attr-delete-button');
         this.$deleteButton.on('click', async () => {
@@ -326,6 +326,12 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         });
     }
 
+    async saveAndClose() {
+        await this.triggerCommand('saveAttributes');
+
+        this.hide();
+    }
+
     userEditedAttribute() {
         this.updateAttributeInEditor();
         this.updateHelp();
@@ -350,7 +356,7 @@ export default class AttributeDetailWidget extends TabAwareWidget {
         }
     }
 
-    async showAttributeDetail({allAttributes, attribute, isOwned, x, y}) {
+    async showAttributeDetail({allAttributes, attribute, isOwned, x, y, focus}) {
         if (!attribute) {
             this.hide();
 
@@ -474,6 +480,10 @@ export default class AttributeDetailWidget extends TabAwareWidget {
             this.$widget.outerHeight() + y > $(window).height() - 50
                         ? $(window).height() - y - 50
                         : 10000);
+
+        if (focus === 'name') {
+            this.$inputName.focus().select();
+        }
     }
 
     async updateRelatedNotes() {

src/public/app/widgets/attribute_editor.js

@@ -55,6 +55,7 @@ const TPL = `
     
     .attribute-errors {
         color: red;
+        padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
     }
     </style>
     
@@ -196,11 +197,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
         this.initialized = this.initEditor();
 
         this.$editor.on('keydown', async e => {
-            const keycode = (e.keyCode ? e.keyCode : e.which);
-
-            if (keycode === 13) {
-                this.triggerCommand('focusOnDetail', {tabId: this.tabContext.tabId});
-
+            if (e.which === 13) {
                 await this.save();
             }
 
@@ -283,7 +280,8 @@ export default class AttributeEditorWidget extends TabAwareWidget {
                 attribute: attrs[attrs.length - 1],
                 isOwned: true,
                 x: (rect.left + rect.right) / 2,
-                y: rect.bottom
+                y: rect.bottom,
+                focus: 'name'
             });
         }, 100);
     }
@@ -402,7 +400,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
             html: true,
             title: HELP_TEXT,
             placement: 'bottom',
-            offset: "0,20"
+            offset: "0,30"
         });
     }
 

src/public/stylesheets/style.css

@@ -829,3 +829,8 @@ body {
 ul.fancytree-container li {
     contain: layout paint;
 }
+
+/** ckeditor's autocomplete */
+.ck.ck-balloon-panel {
+    z-index: 10001;
+}

src/services/search/services/search.js

@@ -78,7 +78,7 @@ function findNotesWithQuery(query, parsingContext) {
         }
 
         return findNotesWithExpression(expression);
-    });
+    }, 20);
 }
 
 /**
@@ -180,7 +180,7 @@ function highlightSearchResults(searchResults, highlightedTokens) {
 
 function formatAttribute(attr) {
     if (attr.type === 'relation') {
-        return '@' + utils.escapeHtml(attr.name) + "=…";
+        return '~' + utils.escapeHtml(attr.name) + "=…";
     }
     else if (attr.type === 'label') {
         let label = '#' + utils.escapeHtml(attr.name);

src/views/dialogs/jump_to_note.ejs

@@ -16,8 +16,8 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>ctrl+enter</kbd></button>
+                <button id="show-in-full-text-button" class="btn btn-sm">Search in full text <kbd>Ctrl+Enter</kbd></button>
             </div>
         </div>
     </div>
-</div>
+</div>

src/views/dialogs/markdown_import.ejs

@@ -13,7 +13,7 @@
                 <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
             </div>
             <div class="modal-footer">
-                <button id="markdown-import-button" class="btn btn-primary">Import <kbd>ctrl+enter</kbd></button>
+                <button id="markdown-import-button" class="btn btn-primary">Import <kbd>Ctrl+Enter</kbd></button>
             </div>
         </div>
     </div>