diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css index 4f8868ffe..ff68df17f 100644 --- a/app/renderer/css/main.css +++ b/app/renderer/css/main.css @@ -267,6 +267,10 @@ body { margin-bottom: 5px; } +.invalid-input-value:focus { + border: #ef5350 2px solid; +} + /******************* * Webview Area * @@ -331,6 +335,7 @@ webview.focus { #dnd-tooltip, #back-tooltip, #reload-tooltip, +#url-tooltip, #setting-tooltip { font-family: sans-serif; background: #222c31; @@ -349,6 +354,7 @@ webview.focus { #dnd-tooltip:after, #back-tooltip:after, #reload-tooltip:after, +#url-tooltip:after, #setting-tooltip:after { content: " "; border-top: 8px solid transparent; @@ -415,6 +421,23 @@ webview.focus { display: none !important; } +.url-container { + position: absolute; + margin-left: 53px; + margin-top: 5px; +} + +.url-input-value { + flex-grow: 1; + margin-left: 2px; + font-size: 14px; + border-radius: 4px; + padding: 6px 8px; + border: #ededed 2px solid; + background: #fff; + max-width: 450px; +} + /* Full screen Popup container */ diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js index 75b53752d..333d78861 100644 --- a/app/renderer/js/main.js +++ b/app/renderer/js/main.js @@ -1,6 +1,6 @@ 'use strict'; -const { ipcRenderer, remote } = require('electron'); +const { ipcRenderer, remote, clipboard } = require('electron'); const isDev = require('electron-is-dev'); const { session, app, Menu, dialog } = remote; @@ -31,6 +31,7 @@ class ServerManagerView { const $actionsContainer = document.getElementById('actions-container'); this.$reloadButton = $actionsContainer.querySelector('#reload-action'); + this.$urlButton = $actionsContainer.querySelector('#url-action'); this.$settingsButton = $actionsContainer.querySelector('#settings-action'); this.$webviewsContainer = document.getElementById('webviews-container'); this.$backButton = $actionsContainer.querySelector('#back-action'); @@ -38,11 +39,15 @@ class ServerManagerView { this.$addServerTooltip = document.getElementById('add-server-tooltip'); this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip'); + this.$urlTooltip = $actionsContainer.querySelector('#url-tooltip'); this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip'); this.$serverIconTooltip = document.getElementsByClassName('server-tooltip'); this.$backTooltip = $actionsContainer.querySelector('#back-tooltip'); this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip'); + this.$urlField = document.getElementById('url-input-container').children[0]; + this.urlEnabled = false; + this.$sidebar = document.getElementById('sidebar'); this.$fullscreenPopup = document.getElementById('fullscreen-popup'); @@ -228,6 +233,9 @@ class ServerManagerView { this.$addServerButton.addEventListener('click', () => { this.openSettings('AddServer'); }); + this.$urlButton.addEventListener('click', () => { + this.toggleUrlContainer(); + }); this.$settingsButton.addEventListener('click', () => { this.openSettings('General'); }); @@ -236,12 +244,55 @@ class ServerManagerView { }); this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true); + this.sidebarHoverEvent(this.$urlButton, this.$urlTooltip); this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip); this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip); this.sidebarHoverEvent(this.$backButton, this.$backTooltip); this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip); } + isURLSaved(url) { + for (let i = 0; i < this.tabs.length; ++i) { + const tabURL = this.tabs[i].webview.props.url; + if (url === tabURL) { + return i; + } + } + return -1; + } + + initURLShortcut() { + this.$urlField.addEventListener('keypress', event => { + if (event.keyCode === 13) { + const url = this.$urlField.value; + const urlIndex = this.isURLSaved(url); + if (urlIndex >= 0) { + this.activateTab(urlIndex); + } else { + this.$urlField.classList.add('invalid-input-value'); + } + } + }); + + this.$urlField.addEventListener('input', () => { + this.$urlField.classList.remove('invalid-input-value'); + }); + } + + toggleUrlContainer() { + if (this.urlEnabled) { + this.$urlField.type = 'hidden'; + } else { + this.initURLShortcut(); + this.$urlField.value = this.tabs[this.activeTabIndex].webview.props.url; + const { height } = this.$urlButton.getBoundingClientRect(); + this.$urlField.style.height = (height / 2) + 'px'; + this.$urlField.type = 'url'; + clipboard.writeText(this.$urlField.value); + } + this.urlEnabled = !this.urlEnabled; + } + initDNDButton() { const dnd = ConfigUtil.getConfigItem('dnd', false); this.toggleDNDButton(dnd); @@ -423,7 +474,9 @@ class ServerManagerView { this.tabs[this.activeTabIndex].deactivate(); } } - + if (this.urlEnabled) { + this.toggleUrlContainer(); + } try { this.tabs[index].webview.canGoBackButton(); } catch (err) { diff --git a/app/renderer/main.html b/app/renderer/main.html index 2a1fd18ba..6973c4255 100644 --- a/app/renderer/main.html +++ b/app/renderer/main.html @@ -24,6 +24,10 @@