OCram85/code-server
Archived
1
0
Fork 0
Code Pull Requests 2 Activity

Web socket + fill setup

Browse Source
This commit is contained in:
Asher
2019-01-14 17:19:29 -06:00
committed by Kyle Carberry
parent 14f91686c5
commit 24a86b81ba
12 changed files with 64 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/web/src/index.scss
View File

@ -30,18 +30,18 @@ html, body {
z-index: 2;
}
#overlay>.message {
#overlay > .message {
color: white;
margin-top: 10px;
opacity: 0.5;
}
#overlay.error>.message {
#overlay.error > .message {
color: white;
opacity: 0.3;
}
#overlay>.activitybar {
#overlay > .activitybar {
background-color: rgb(44, 44, 44);
bottom: 0;
height: 100%;
@ -51,14 +51,14 @@ html, body {
width: 50px;
}
#overlay>.activitybar svg {
#overlay > .activitybar svg {
fill: white;
margin-left: 2px;
margin-top: 2px;
opacity: 0.3;
}
#overlay.error>#status {
#overlay.error > #status {
opacity: 0;
}
@ -76,7 +76,7 @@ html, body {
transform-style: preserve-3d;
}
#logo>svg {
#logo > svg {
fill: rgb(0, 122, 204);
opacity: 1;
width: 100px;
@ -94,7 +94,7 @@ html, body {
transition: 300ms opacity ease;
}
#status>#progress {
#progress {
background: rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
@ -134,7 +134,7 @@ html, body {
}
}
#status>#progress>#fill {
#fill {
animation: statusProgress 2s ease infinite;
background-size: 400% 400%;
background: linear-gradient(270deg, #007acc, #0016cc);
@ -142,3 +142,11 @@ html, body {
transition: 500ms width ease;
width: 0%;
}
.reload-button {
background-color: #007acc;
border-radius: 2px;
cursor: pointer;
margin-top: 10px;
padding: 6px 10px;
}

14
packages/web/src/index.ts
View File

@ -3,7 +3,7 @@ import { load } from "@coder/vscode";
import "./index.scss";
const loadTime = time(2500);
logger.info("Loading IDE...");
logger.info("Loading IDE");
const overlay = document.getElementById("overlay");
const logo = document.getElementById("logo");
@ -33,11 +33,15 @@ load().then(() => {
overlay.classList.add("error");
}
if (msgElement) {
msgElement.innerText = `Failed to load: ${error.message}. Retrying in 3 seconds...`;
const button = document.createElement("div");
button.className = "reload-button";
button.innerText = "Reload";
button.addEventListener("click", () => {
location.reload();
});
msgElement.innerText = `Failed to load: ${error.message}.`;
msgElement.parentElement!.appendChild(button);
}
setTimeout(() => {
location.reload();
}, 3000);
}).finally(() => {
logger.info("Load completed", field("duration", loadTime));
});