-
-
+
+
+
-
+
diff --git a/resources/js/index.js b/resources/js/index.js
index c60f5d7..c0beaeb 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -16,7 +16,7 @@ const icons = [];
let services = [];
let selectedService = null;
-let homeButton, forwardButton, backButton, reloadButton;
+let statusButton, homeButton, forwardButton, backButton, reloadButton;
let addButton;
let emptyPage;
let urlPreview;
@@ -364,6 +364,8 @@ function reorderService(serviceId, targetId) {
}
document.addEventListener('DOMContentLoaded', () => {
+ statusButton = document.getElementById('status');
+
homeButton = document.getElementById('home');
homeButton.addEventListener('click', () => goHome());
@@ -594,16 +596,30 @@ function updateNavigation() {
// Update history navigation
let view = services[selectedService].view;
+ homeButton.classList.remove('disabled');
+
if (view && view.canGoForward()) forwardButton.classList.remove('disabled');
else forwardButton.classList.add('disabled');
if (view && view.canGoBack()) backButton.classList.remove('disabled');
else backButton.classList.add('disabled');
+
+ reloadButton.classList.remove('disabled');
+
+ updateStatusButton();
}
updateWindowTitle();
}
+function updateStatusButton() {
+ for (const c of statusButton.children) {
+ const protocol = services[selectedService].view.getURL().split('://')[0];
+ if (c.classList.contains(protocol)) c.classList.add('active');
+ else c.classList.remove('active');
+ }
+}
+
function updateWindowTitle() {
if (selectedService === null) {
ipcRenderer.send('updateWindowTitle', null);
diff --git a/resources/style/index.css b/resources/style/index.css
index 9e49385..41349b3 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -143,10 +143,14 @@ body {
}
#history {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
padding: 2px;
}
-#history button {
+#history button,
+#history .status {
display: inline;
width: 24px;
height: 24px;
@@ -158,6 +162,8 @@ body {
color: #fff;
cursor: pointer;
+
+ border-radius: 3px;
}
#history button i {
@@ -186,6 +192,65 @@ body {
background-color: #fff4;
}
+#history #status {
+ background: transparent;
+}
+
+#history #status .unknown {
+ opacity: 0.4;
+}
+
+#history #status .https {
+ color: #009800;
+}
+
+#history #status .http {
+ color: #e20000;
+}
+
+#history #status > :not(.active) {
+ display: none;
+}
+
+#history #status > * .tip {
+ position: absolute;
+ z-index: 1;
+ left: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ display: none;
+ margin-left: 8px;
+
+ background-color: #000;
+ padding: 8px;
+ border-radius: 4px;
+ white-space: nowrap;
+ color: #fff;
+ text-transform: none;
+ font-family: sans-serif;
+ font-size: 16px;
+ font-weight: 100;
+}
+
+#history #status > * .tip::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translate(-100%, -50%);
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border: 0 solid transparent;
+ border-top-width: 4px;
+ border-bottom-width: 4px;
+ border-right: 7px solid black;
+}
+
+#history #status:focus > * .tip {
+ display: block;
+}
+
#navigation #add-button:not(:hover) {
opacity: 0.75;
}