Fixed issue #1292; terminal scrollbar may now be scrolled

* Removed div.terminal_bg whose purpose was to hold the background SVG, as this div was occluding the scrollbar, and instead set SVG as the background-image of div.terminal_container using CSS.
* As CSS does not have a background-opacity directive, manually decoded, edited and re-encoded the SVGs (light, dark) so that all <g>s are wrapped in a top-level <g opacity="0.1">
* Improved the rules of how the background image resizes
pull/1/head
Edward Grech 7 years ago committed by yann300
parent e1b3de2a01
commit 9029670536
  1. 23
      src/app/panels/styles/terminal-styles.js
  2. 2
      src/app/panels/terminal.js
  3. 2
      src/app/ui/styles-guide/style-guide.js
  4. 2
      src/app/ui/styles-guide/styleGuideDark.js

@ -57,25 +57,10 @@ var css = csjs`
overflow-y : auto;
font-family : monospace;
margin : 0px;
}
.terminal_bg {
display : flex;
flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1;
top : 15%;
left : 33%;
bottom : 0;
right : 0;
position : absolute;
background-repeat : no-repeat;
background-size : 45%;
background-image : ${styles.terminal.backgroundImage_Terminal};
background-repeat : no-repeat;
background-position : center 15%;
background-size : auto calc(75% - 1.7em);
}
.terminal {
position: relative;

@ -145,8 +145,6 @@ class Terminal {
self._view.term = yo`
<div class=${css.terminal_container} onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
<div class=${css.terminal_bg}>
</div>
<div class=${css.terminal}>
${self._view.journal}
${self._view.cli}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save