luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

UI: Bugfix. Remove split view code editor (#4615) 

When adding an auto resizing (heightwise) code editor, the
ivy-codemirror plugin seems to do this using more nested divs. This div
had a horizontal scroller but couldn't be seen on some platforms (with
hidden scrollbars). This commit makes the code editor slightly more
usable and more visually correct by removing the scroll bar in this div
to stop producing the 'split view look', yet keeping the horizontal
scroller at the bottom of the code editor for when you enter code that
is wider than the area. A max-width has also been added here to prevent
the text area from growing off the side of the page.

Another improvement to the code editor here is the addition of a nicer
color for hightlighting text selection so its at least visible.

Lastly, there was a way you could get the bottom horizontal scrollbar to overlay
the code in the editor. This makes sure there is always some space at
the bottom of the editor to make sure the code won't be obscured
This commit is contained in:
John Cowen 2018-09-12 20:18:12 +01:00 committed by GitHub
parent d9764ed04b
commit b1d83f98b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-v2/app/styles/components/code-editor/index.scss
View File

@ -20,8 +20,14 @@ $syntax-dark-gray: #535f73;
$syntax-gutter-grey: #2a2f36;
$syntax-yellow: $ui-yellow-500;
.CodeMirror {
max-width: 1150px;
min-height: 300px;
height: auto;
/* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
padding-bottom: 20px;
}
.CodeMirror-scroll {
overflow-x: hidden !important;
}
.CodeMirror-lint-tooltip {
background-color: #f9f9fa;
@ -59,13 +65,13 @@ $syntax-yellow: $ui-yellow-500;
}
&.CodeMirror-focused div.CodeMirror-selected {
background: rgba(255, 255, 255, 0.1);
background: rgb(33, 66, 131);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: rgba(255, 255, 255, 0.1);
background: rgb(33, 66, 131);
}
.CodeMirror-line::-moz-selection,

2
ui-v2/app/templates/components/code-editor.hbs
View File

@ -3,6 +3,6 @@
readonly=readonly
name=name
class=class
options=(hash lineNumbers=true mode=mode theme='hashi')
options=(hash lineNumbers=true mode=mode theme='hashi' showCursorWhenSelecting=true)
valueUpdated=(action onkeyup)
}}