idan/sshwifty-udp-telnet-http
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/common.css
View File

@@ -285,12 +285,18 @@ body {
box-shadow: 1px 1px 0 2px #0003;
}
.icon.icon-keyboardkey2 {
background: #fff;
color: #999;
.icon.icon-iconed-bottom1 {
padding: 4px 6px;
display: inline-block;
border-radius: 3px;
text-align: center;
}
.icon.icon-iconed-bottom1 > i {
font-style: normal;
display: block;
margin: 3px;
font-size: 2em;
font-weight: normal;
}
/* Windows */

42
ui/widgets/screen_console.css
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 {

39
ui/widgets/screen_console.vue
View File

@@ -47,23 +47,36 @@
>
<h2 style="display:none;">Tool bar</h2>
<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">
<ul class="lst-nostyle">
<li>
<a class="tb-item" href="javascript:;" @click="fontSizeUp">
<span class="tb-key-icon icon icon-keyboardkey2">Increase +</span>
<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 icon icon-keyboardkey2">Decrease -</span>
<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 class="console-toolbar-group console-toolbar-group-main">
<div
v-for="(keyType, keyTypeIdx) in screenKeys"
:key="keyTypeIdx"
@@ -84,6 +97,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@@ -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;