Adjust console font resize interface for easier access, and make min-allowed font size to 8

This commit is contained in:
NI
2019-12-15 16:22:26 +08:00
parent dff3857306
commit 0c8db2d243
3 changed files with 105 additions and 42 deletions

View File

@@ -57,6 +57,28 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group.console-toolbar-group-left {
border-right: 1px solid #0001;
margin-right: -1px;
float: left;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group.console-toolbar-group-main {
border-left: 1px solid #0001;
overflow: auto;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item {
padding: 15px;
float: left;
@@ -67,6 +89,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-title {
font-size: 0.7em;
@@ -81,6 +104,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item {
display: block;
@@ -96,6 +120,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item:active {
background: #fff3;
@@ -106,6 +131,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item
> .tb-key-icon {
@@ -119,6 +145,20 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item
> .tb-key-icon.tb-key-resize-icon {
display: block;
padding: 5px;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item
> .tb-key-icon:first-child {
@@ -130,6 +170,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item
> .tb-key-icon:last-child {
@@ -141,6 +182,7 @@
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-group
> .console-toolbar-item
.tb-item:active
.tb-key-icon {

View File

@@ -47,40 +47,54 @@
>
<h2 style="display:none;">Tool bar</h2>
<div class="console-toolbar-item">
<h3 class="tb-title">Text size</h3>
<div class="console-toolbar-group console-toolbar-group-left">
<div class="console-toolbar-item">
<h3 class="tb-title">Text size</h3>
<ul class="hlst lst-nostyle">
<li>
<a class="tb-item" href="javascript:;" @click="fontSizeUp">
<span class="tb-key-icon icon icon-keyboardkey2">Increase +</span>
</a>
</li>
<li>
<a class="tb-item" href="javascript:;" @click="fontSizeDown">
<span class="tb-key-icon icon icon-keyboardkey2">Decrease -</span>
</a>
</li>
</ul>
<ul class="lst-nostyle">
<li>
<a class="tb-item" href="javascript:;" @click="fontSizeUp">
<span
class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
>
<i>+</i>
Increase
</span>
</a>
</li>
<li>
<a class="tb-item" href="javascript:;" @click="fontSizeDown">
<span
class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
>
<i>-</i>
Decrease
</span>
</a>
</li>
</ul>
</div>
</div>
<div
v-for="(keyType, keyTypeIdx) in screenKeys"
:key="keyTypeIdx"
class="console-toolbar-item"
>
<h3 class="tb-title">{{ keyType.title }}</h3>
<div class="console-toolbar-group console-toolbar-group-main">
<div
v-for="(keyType, keyTypeIdx) in screenKeys"
:key="keyTypeIdx"
class="console-toolbar-item"
>
<h3 class="tb-title">{{ keyType.title }}</h3>
<ul class="hlst lst-nostyle">
<li v-for="(key, keyIdx) in keyType.keys" :key="keyIdx">
<a
class="tb-item"
href="javascript:;"
@click="sendSpecialKey(key[1])"
v-html="$options.filters.specialKeyHTML(key[0])"
></a>
</li>
</ul>
<ul class="hlst lst-nostyle">
<li v-for="(key, keyIdx) in keyType.keys" :key="keyIdx">
<a
class="tb-item"
href="javascript:;"
@click="sendSpecialKey(key[1])"
v-html="$options.filters.specialKeyHTML(key[0])"
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
@@ -107,7 +121,7 @@ const termTypeFaceLoadError =
termFallbackTypeFace +
'" instead until the remote font is loaded';
const termDefaultFontSize = 16;
const termMinFontSize = 14;
const termMinFontSize = 8;
const termMaxFontSize = 36;
class Term {
@@ -223,14 +237,6 @@ class Term {
});
}
setFont(value) {
if (this.closed) {
return;
}
this.term.setOption("fontFamily", value);
}
init(root, callbacks) {
if (this.closed) {
return;
@@ -322,6 +328,15 @@ class Term {
}
}
setFont(value) {
if (this.closed) {
return;
}
this.term.setOption("fontFamily", value);
this.refit();
}
fontSizeUp() {
if (this.closed) {
return;