diff --git a/resources/index.html b/resources/index.html index 01e5523..7e85c2d 100644 --- a/resources/index.html +++ b/resources/index.html @@ -30,7 +30,8 @@
+
- \ No newline at end of file + diff --git a/resources/js/index.js b/resources/js/index.js index 17ecfd5..15feec0 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -17,6 +17,7 @@ let forwardButton; let backButton; let addButton; let emptyPage; +let urlPreview; // Service context menu @@ -117,6 +118,16 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices, // Empty emptyPage = emptyUrl; + + // Url preview element + urlPreview = document.getElementById("url-preview"); + urlPreview.addEventListener('mouseover', () => { + if (urlPreview.classList.contains('right')) { + urlPreview.classList.remove('right'); + } else { + urlPreview.classList.add('right'); + } + }); }); function removeServiceFeatures(id) { @@ -382,6 +393,16 @@ function loadService(serviceId, service) { } } }); + + // Display target urls + service.view.addEventListener('update-target-url', (event) => { + if (event.url.length === 0) { + urlPreview.classList.add('hidden'); + } else { + urlPreview.classList.remove('hidden'); + urlPreview.innerHTML = event.url; + } + }); } } diff --git a/resources/style/index.css b/resources/style/index.css index 5734982..e726b6c 100644 --- a/resources/style/index.css +++ b/resources/style/index.css @@ -179,11 +179,11 @@ body { flex-grow: 1; } -#services > *:not(.loader) { +#services > *:not(.loader):not(#url-preview) { height: 100%; } -#services > :not(.active):not(.loader) { +#services > :not(.active):not(.loader):not(#url-preview) { display: none; } @@ -197,3 +197,40 @@ body { transform: translate(-50%, -50%); z-index: -1; } + +#url-preview { + position: absolute; + bottom: 0; + left: 0; + display: block; + padding: 2px 5px 1px 5px; + + max-width: 48%; + overflow: hidden; + text-overflow: ellipsis; + + font-family: monospace; + + border-width: 1px 1px 0 0; + border-color: #232323; + border-style: solid; + border-radius: 0 5px 0 0; + + background: #2b2b2b; + + opacity: 1; + transition: 100ms ease opacity; + transition-delay: 200ms; +} + +#url-preview.right { + left: auto; + right: 0; + + border-width: 1px 0 0 1px; + border-radius: 5px 0 0 0; +} + +#url-preview.hidden { + opacity: 0; +}