tabindex 2 for text and code editor so that tabbing from title leads to editor focus

This commit is contained in:
azivner 2018-04-11 22:44:33 -04:00
parent 5b43f321e2
commit 7a94e21c54
3 changed files with 22 additions and 4 deletions

View file

@ -31,7 +31,8 @@ async function show() {
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
lint: true,
gutters: ["CodeMirror-lint-markers"],
lineNumbers: true
lineNumbers: true,
tabindex: 2 // so that tab from title will lead to code editor focus
});
codeEditor.on('change', noteDetailService.noteChanged);

View file

@ -28,6 +28,23 @@
align-items: center;
}
#note-detail-wrapper {
position: relative;
overflow: hidden;
grid-area: note-detail;
padding-left: 10px;
padding-top: 10px;
display: flex;
flex-direction: column;
}
#note-detail-component-wrapper {
flex-grow: 1;
position: relative;
overflow: auto;
flex-basis: content;
}
.note-detail-component {
display: none;
}

View file

@ -132,9 +132,9 @@
</div>
</div>
<div style="position: relative; overflow: hidden; grid-area: note-detail; padding-left: 10px; padding-top: 10px; display: flex; flex-direction: column;" id="note-detail-wrapper">
<div style="flex-grow: 1; position: relative; overflow: auto; flex-basis: content;">
<div id="note-detail-text" style="height: 100%;" class="note-detail-component"></div>
<div id="note-detail-wrapper">
<div id="note-detail-component-wrapper">
<div id="note-detail-text" class="note-detail-component" tabindex="2"></div>
<div id="note-detail-search" class="note-detail-component">
<div style="display: flex; align-items: center;">