pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Don't use fixed width on terminal input

Browse source 
Instead added some additional styles to support input-block-level
inputs with add-ons.
This commit is contained in:
Gina Häußge 2017-07-18 09:46:32 +02:00
parent 1b9ff1b0e2
commit 8fec0859d9
3 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

38
src/octoprint/static/less/octoprint.less
View file

@ -875,10 +875,6 @@ ul.dropdown-menu li a {
margin-bottom: 30px;
}
#terminal-sendpanel {
text-align: right;
}
}
#settings_dialog {
@ -1295,6 +1291,40 @@ _::-webkit-full-page-media, _:future, :root .full-sized-box {
}
}
// block level inputs with add-ons
//
// LESS based on CSS from https://stackoverflow.com/a/17466199/2028598
//
// Note: do not use <button> for attached buttons, use <a class="btn add-on">...</a>
// instead
.input-append,
.input-prepend {
&.input-block-level {
display: table;
.add-on {
display: table-cell;
width: 1%; /* remove this if you want default bootstrap button width */
}
> input {
box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
display: table; /* table-cell is not working well in Chrome for small widths */
min-height: inherit;
width: 100%;
}
}
}
.input-append.input-block-level > input {
border-right: 0;
}
.input-prepend.input-block-level > input {
border-left: 0;
}
.btn-input-dec,
.btn-input-enc {
//font-size: 80%;

8
src/octoprint/templates/tabs/terminal.jinja2
View file

@ -1,10 +1,10 @@
<div class="terminal">
<pre id="terminal-output" class="pre-scrollable pre-output" data-bind="foreach: displayedLines, visible: fancyFunctionality(), click: function(){ gotoTerminalCommand(); }"><span data-bind="text: line, css: {muted: type == 'filtered' || type == 'cut'}"></span></pre>
<pre id="terminal-output-lowfi" style="display: none" class="pre-scrollable" data-bind="text: plainLogOutput, visible: !fancyFunctionality()"></pre>
<div class="row" id="terminal-sendpanel" style="display: none;" data-bind="visible: loginState.isUser">
<div class="input-append">
<input type="text" id="terminal-command" style="width:516px" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()" autocomplete="off">
<button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
<div id="terminal-sendpanel" style="display: none;" data-bind="visible: loginState.isUser">
<div class="input-block-level input-append">
<input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()" autocomplete="off">
<a class="btn add-on" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</a>
</div>
</div>
<small class="pull-left" data-bind="visible: fancyFunctionality()"><button class="btn btn-mini" data-bind="click: toggleAutoscroll, css: {active: autoscrollEnabled}">{{ _('Autoscroll') }}</button> <span data-bind="text: lineCount, visible: enableFancyFunctionality"></span></small>