Skip to content

Commit

Permalink
improve status box
Browse files Browse the repository at this point in the history
  • Loading branch information
gi8lino committed Dec 15, 2023
1 parent 790c1cc commit 850b87a
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 29 deletions.
2 changes: 1 addition & 1 deletion cmd/root.go
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import (
)

const (
version = "v0.0.8"
version = "v0.0.9"
)

var (
Expand Down
51 changes: 31 additions & 20 deletions web/static/css/vimbin.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@ body {
color: var(--ctp-latte-overlay0);
}

.button {
background-color: var(--ctp-latte-peach);
color: var(--ctp-latte-overlay2);
border: 2px solid var(--ctp-latte-surface2);
}

.container {
margin: 20px;
position: relative;
Expand Down Expand Up @@ -44,40 +38,57 @@ footer {
font-size: 12px;
padding: 5px;
margin-right: 5px;
width: 130px;
}

.custom-width {
width: 200px;
display: inline-block;
}

.nowrap {
width: 54px;
white-space: nowrap;
}

/* Style for the vim mode */
.normal {
background-color: #16a34a;
background-color: #40a02b;
color: white;
}

.insert {
background-color: #0284c7;
background-color: #1e66f5;
color: white;
}

.visual {
background-color: #fb923c;
background-color: #fe640b;
color: white;
}

.visual-line {
background-color: #a855f7;
background-color: #8839ef;
color: white;
}

.unknown {
background-color: #e11d48;
background-color: #dd7878;
color: white;
}

/* Status container */
#status-container {
width: 200px;
display: inline-block;
white-space: nowrap;
}

#status {
font-size: 12px;
padding: 5px;
margin-right: 5px;
white-space: nowrap;
display: inline-block;
}

.isError {
background-color: #e78284;
color: #ffffff;
}

.noChanges {
background-color: #e5c890;
color: #ffffff;
}
47 changes: 40 additions & 7 deletions web/static/js/vimbin.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,31 @@ document.addEventListener("DOMContentLoaded", function () {

// Function to show relative line numbers
function showRelativeLines(cm) {
const lineNum = cm.getCursor().line + 1;
const lineNum = cm.getCursor().line + 1; // Get the current line number of the cursor

// If the current line number is the same as the stored line number, no need to update
if (cm.state.curLineNum === lineNum) {
return;
}
cm.state.curLineNum = lineNum;

cm.state.curLineNum = lineNum; // Update the stored line number

// Set the line number formatter to display relative line numbers
cm.setOption("lineNumberFormatter", (l) =>
// If the line number is the same as the current line, display the absolute line number
l === lineNum ? lineNum : Math.abs(lineNum - l),
);
}

// Function to save the content
async function saveContent() {
const statusElement = document.getElementById("status");
clearTimeout(statusElement.timerId); // Clear the existing timer before setting a new one

let status = "No changes were made.";
let isError = false;
let noChanges = true;
let startTimer = true;

try {
const response = await fetch("/save", {
Expand All @@ -81,10 +93,9 @@ document.addEventListener("DOMContentLoaded", function () {
});

if (!response.ok) {
throw new Error("Save failed. Reason: " + response.statusText);
throw new Error(`Save failed. Reason: ${response.statusText}`);
}

// Check if the response has a valid JSON body
const isJson = response.headers
.get("content-type")
?.includes("application/json");
Expand All @@ -96,14 +107,36 @@ document.addEventListener("DOMContentLoaded", function () {
const changesResponse = await response.json();

if (changesResponse.status !== "no changes") {
// Retrieve the number of bytes written from the response headers
const bytesWritten = response.headers.get("X-Bytes-Written");
status = `${bytesWritten}B written`;
noChanges = false;
}
} catch (error) {
status = "Error saving: " + error.message;
startTimer = false;
isError = true;
status = `ERROR: ${error.message}`;
}

statusElement.innerText = status;
statusElement.classList.remove("isError", "noChanges"); // Remove all classes

if (isError) {
statusElement.classList.add("isError");
}

if (noChanges) {
statusElement.classList.add("noChanges");
}

if (startTimer) {
const delay = 5000;

// Set a new timer
statusElement.timerId = setTimeout(() => {
statusElement.innerText = "";
statusElement.classList.remove("isError", "noChanges");
}, delay);
}
document.getElementById("status").innerText = status;
}

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
Expand Down
5 changes: 4 additions & 1 deletion web/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ <h2>{{.Title}}</h2>
<footer>
<div class="vim-info-container">
<span id="vim-mode" class="vim-mode normal">NORMAL</span>
<span id="status" class="custom-width nowrap"></span>
<div id="status-container">
<div id="status"></div>
<div id="error-message"></div>
</div>
</div>
<script src="static/js/vimbin.js"></script>
<script>
Expand Down

0 comments on commit 850b87a

Please sign in to comment.