Grasscutters/MojoFrontend
2
0
Fork 0
mirror of https://github.com/SpikeHD/MojoFrontend.git synced 2024-11-22 01:05:33 +00:00
Code Issues Projects Releases Wiki Activity

UI Refinement

Browse Source
This commit is contained in:
mingjun97 2022-05-04 18:16:56 -07:00
parent ca71310628
commit 99ee47fa85
5 changed files with 51 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
console.html
View File

@ -4,12 +4,13 @@
<link rel="stylesheet" type="text/css" href="styles/console.css" /> <link rel="stylesheet" type="text/css" href="styles/console.css" />
<script src="scripts/onload.js"></script> <script src="scripts/onload.js"></script>
<script src="scripts/console.js"></script> <script src="scripts/console.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div id="titleBar"> <div id="titleBar">
Mojo Console <img src="" id="logo" /> Mojo Console <img src="" id="logo" />
<div id="status" class="ready"><span class="dot"></span><span id="statusText">Ready</span></div> <div id="status" class="ready"><span id="statusText">Ready</span><span class="dot"></span></div>
</div> </div>
<div id="right"> <div id="right">
<div id="sidebar"> <div id="sidebar">

31
scripts/console.js
View File

@ -10,17 +10,30 @@ async function sendCommand(payload, method="invoke", background=false, persisten
}, },
body: data, body: data,
}) })
try {
let json = await response.json(); let json = await response.json();
if (method == 'invoke' && !background) { try{
var m = json.payload.trim().replace(/\r/g, "").replace(/\n\n/g, "\n"); if (method == 'invoke' && !background) {
if(persistent == "auto") { if (json.code != 200) throw Error('');
var m2 = m.replace(/\n/g, ""); var m = json.payload.trim().replace(/\r/g, "").replace(/\n\n/g, "\n");
persistent = (m.length - m2.length) > 3; // true more than 3 lines if(persistent == "auto") {
var m2 = m.replace(/\n/g, "");
persistent = (m.length - m2.length) > 3; // true more than 3 lines
}
message(`${m}`, null, persistent);
}
return json
} catch (e) {
var messages = `Request failed.`
if (json.code) {
messages += ` Code: ${json.message}`
}
message(messages, "fail", false);
} }
message(`${m}`, null, persistent);
} catch (err) {
message("Connection issue.", "fail", false);
} }
return json
} }
function dismissMessage(){ function dismissMessage(){

3
scripts/onload.js
View File

@ -26,6 +26,7 @@ document.addEventListener("DOMContentLoaded", () => {
checkStatus(); checkStatus();
}, 30 * 1000 ); }, 30 * 1000 );
// adjust frame height // adjust frame height
setTimeout(() => {
var height = window.innerHeight var height = window.innerHeight
|| document.documentElement.clientHeight || document.documentElement.clientHeight
|| document.body.clientHeight; || document.body.clientHeight;
@ -34,5 +35,5 @@ document.addEventListener("DOMContentLoaded", () => {
content.style.height = height + "px"; content.style.height = height + "px";
message("Welcome to MojoConsolePlus!"); message("Welcome to MojoConsolePlus!");
},10); // delay height modification to avoid issues
}) })

15
styles/cheat.css
View File

@ -7,14 +7,14 @@
.toolset { .toolset {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto;
} }
#panel { #panel {
margin-left: 3em; margin-left: 3em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-right: 3em; min-width: 70vw;
min-width: 30em;
overflow-y: auto; overflow-y: auto;
} }
@ -26,6 +26,17 @@
padding-right: 0.5em; padding-right: 0.5em;
} }
.commandGroup>*:last-child {
/* margin-left: auto; */
margin-right: 0.5em;
}
.commandGroup input{
/* margin-left: 1em; */
margin-right: 1em;
}
hr.solid { hr.solid {
border-top: 1px solid #bbb; border-top: 1px solid #bbb;
margin-left: 1px; margin-left: 1px;

15
styles/console.css
View File

@ -57,7 +57,7 @@ button:hover {
} }
#titleBar { #titleBar {
font-size: 3em; font-size: 2em;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
@ -66,8 +66,10 @@ button:hover {
#status { #status {
font-size: 0.7em; font-size: 0.7em;
display: inline-block; float: right;
margin-left: 20em; margin-top: -1em;
display: flex;
align-items: center;
} }
#sidebar { #sidebar {
@ -100,7 +102,9 @@ button:hover {
height: 20px; height: 20px;
width: 20px; width: 20px;
border-radius: 50%; border-radius: 50%;
border: 2px solid grey;
display: inline-block; display: inline-block;
margin-left: 3px;
} }
.ready { .ready {
@ -152,6 +156,11 @@ button:hover {
height: fit-content; height: fit-content;
} }
.messageBox.fail {
background-color: #f65531;
}
.messageBox.initial { .messageBox.initial {
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;