prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust the popup size when needed. Change upper row buttons to icons. (#1571)

Browse source 
Adjust the popup size when needed. Change upper row buttons to icons.
This commit is contained in:
Sami Vänttinen 2022-05-29 10:39:29 +03:00 committed by GitHub
parent 81cae63f92
commit 16a602409b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 181 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
keepassxc-browser/icons/custom_login_fields.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<title>Choose Custom Login Fields icon</title>
<defs>
<clipPath id="a">
<path d="m59.581 38.746c3.7521 0 6.7171 3.1246 6.7171 6.8221v5.7285c0.28863-0.02604 0.55101-0.05208 0.83964-0.05208 1.7055 0 3.3061 0.65096 4.5393 1.7967 0.81339-0.36454 1.7055-0.54681 2.5976-0.54681 1.8892 0 3.6472 0.83323 4.8279 2.2654 0.49853-0.13019 0.97083-0.18227 1.4694-0.18227 3.3061 0 5.8774 2.734 5.8774 5.9628v5.6504c0 1.9529-0.23614 3.9318-0.73468 5.8587l-2.414 9.5822c-0.55101 2.2133-2.5714 3.7756-4.8804 3.7756h-18.839c-2.0991 0-4.1195-1.0155-5.3789-2.6559l-10.076-13.332c-0.86587-1.1457-1.3382-2.5778-1.3382-4.0099 0-3.6454 2.9912-6.6659 6.6646-6.6659 1.207 0 2.3877 0.31246 3.411 0.91135v-14.243c0-3.6714 3.0174-6.6659 6.7171-6.6659zm2.5189 36.662v-9.9988zm6.7171 0v-9.9988zm6.7171 0v-9.9988z" display="none" fill="none" stroke="#000" stroke-opacity=".99614" stroke-width="3.284"/>
<path class="powerclip" d="m2.9407 18.329h94.119v59.582h-94.119zm56.64 20.417c-3.6996 0-6.7171 2.9944-6.7171 6.6659v14.243c-1.0233-0.59889-2.204-0.91135-3.411-0.91135-3.6734 0-6.6646 3.0205-6.6646 6.6659 0 1.4321 0.47229 2.8642 1.3382 4.0099l10.076 13.332c1.2595 1.6404 3.2798 2.6559 5.3789 2.6559h18.839c2.309 0 4.3294-1.5623 4.8804-3.7756l2.414-9.5822c0.49854-1.9268 0.73468-3.9058 0.73468-5.8587v-5.6504c0-3.2288-2.5714-5.9628-5.8774-5.9628-0.49854 0-0.97083 0.05208-1.4694 0.18227-1.1807-1.4321-2.9387-2.2654-4.8279-2.2654-0.89211 0-1.7842 0.18227-2.5976 0.54681-1.2332-1.1457-2.8338-1.7967-4.5393-1.7967-0.28862 0-0.55101 0.02604-0.83964 0.05208v-5.7285c0-3.6975-2.965-6.8221-6.7171-6.8221zm2.5189 36.662v-9.9988zm6.7171 0v-9.9988zm6.7171 0v-9.9988z" fill="none" stroke="#000" stroke-opacity=".99614" stroke-width="3.284"/>
</clipPath>
</defs>
<g>
<path d="m17.573 24.971h64.854c4.4266 0 7.9903 4.2146 7.9903 9.4498v27.399c0 5.2352-3.5637 9.4498-7.9903 9.4498h-64.854c-4.4266 0-7.9903-4.2146-7.9903-9.4498v-27.399c0-5.2352 3.5637-9.4498 7.9903-9.4498z" clip-path="url(#a)" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="4" style="paint-order:fill markers stroke"/>
<text x="20" y="69.295219" font-family="sans-serif" font-size="40px" font-weight="400" letter-spacing="0" word-spacing="0" style="line-height:125%"><tspan x="20" y="69.295219">**</tspan></text>
</g>
<g style="mix-blend-mode:normal">
<path d="m60.48 37.248c3.7521 0 6.7171 3.1246 6.7171 6.8221v5.7285c0.28862-0.02604 0.55101-0.05208 0.83963-0.05208 1.7055 0 3.3061 0.65096 4.5393 1.7967 0.81339-0.36454 1.7055-0.54681 2.5976-0.54681 1.8892 0 3.6472 0.83323 4.8279 2.2654 0.49853-0.13019 0.97083-0.18227 1.4694-0.18227 3.3061 0 5.8774 2.734 5.8774 5.9628v5.6504c0 1.9529-0.23614 3.9318-0.73468 5.8587l-2.414 9.5822c-0.55101 2.2133-2.5714 3.7756-4.8804 3.7756h-18.839c-2.0991 0-4.1195-1.0155-5.3789-2.6559l-10.076-13.332c-0.86587-1.1457-1.3382-2.5778-1.3382-4.0099 0-3.6454 2.9912-6.6659 6.6646-6.6659 1.207 0 2.3877 0.31246 3.411 0.91135v-14.243c0-3.6714 3.0174-6.6659 6.7171-6.6659zm2.5189 36.662v-9.9988zm6.7171 0v-9.9988zm6.7171 0v-9.9988z" fill="none" stroke="#000" stroke-opacity=".99614" stroke-width="4"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

1
keepassxc-browser/manifest.json
View file

@ -154,6 +154,7 @@
"https://api.github.com/"
],
"content_security_policy": "script-src 'self' 'sha256-UD5WN2QEhRDEZ6vkLdHKFlkHwzbemzW2ppJiOLooI8o='; object-src 'none'",
"content_security_policy": "script-src 'self' 'sha256-4nJ8uLezzRE3SiBFdkVN/uNwV9YTOGCqRXg6AvB5rCY='; object-src 'none'",
"applications": {
"gecko": {
"id": "keepassxc-browser@keepassxc.org",

59
keepassxc-browser/popups/popup.css
View file

@ -1,13 +1,13 @@
body {
font-family: sans-serif;
overflow-x: hidden;
background-color: var(--kpxc-background-color) !important;
color: var(--kpxc-text-color) !important;
display: flex;
font-family: sans-serif;
font-size: 14px !important;
padding: 8px;
min-width: 440px;
max-width: 460px;
width: auto;
overflow: hidden;
padding-top: 8px;
padding-bottom: 8px;
width: fit-content;
}
code {
@ -15,9 +15,9 @@ code {
}
.container {
min-width: 440px;
display: flex;
flex-direction: column;
max-width: 460px;
width: auto;
}
.loader {
@ -56,6 +56,9 @@ code {
}
.settings {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #333;
@ -84,6 +87,16 @@ code {
color: #787878;
}
.action-buttons-area {
display: flex;
justify-content: flex-start;
}
.lock-button-area {
display: flex;
justify-content: flex-end;
}
#list {
padding-left: 0px;
}
@ -108,8 +121,32 @@ code {
display: none;
}
#options-button {
width: 2.5rem;
}
#choose-custom-login-fields-button {
background: url('chrome-extension://__MSG_@@extension_id__/icons/custom_login_fields.svg') center no-repeat;
background-size: 70%;
background-color: #ffc107 !important;
border-color: #ffc107 !important;
color: #212529 !important;
height: 31px;
width: 2.5rem;
}
#choose-custom-login-fields-button-moz {
background: url('moz-extension://__MSG_@@extension_id__/icons/custom_login_fields.svg') center no-repeat;
background-size: 70%;
background-color: #ffc107 !important;
border-color: #ffc107 !important;
color: #212529 !important;
height: 31px;
width: 2.5rem;
}
#lock-database-button {
float: right;
display: none;
width: 2.5rem;
}
@ -122,6 +159,10 @@ code {
width: 100%;
}
#right-align {
text-align: right;
}
@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
body {
background: var(--kpxc-background-color) !important;

75
keepassxc-browser/popups/popup.html
View file

@ -11,37 +11,50 @@
<script src="../common/global.js"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<script src="popup_functions.js"></script>
<script src="popup.js"></script>
<script defer src="popup.js"></script>
<script defer src="../common/translate.js"></script>
</head>
<body>
<script>
setDefaultPopupSize();
</script>
<div class="container">
<div id="settings" class="settings">
<button id="btn-options" class="btn btn-sm btn-success"><i class="fa fa-cog" aria-hidden="true"></i> <span data-i18n="popupSettingsText"></span></button>
<button id="btn-choose-credential-fields" class="btn btn-sm btn-warning"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupChooseCredentialsText"></span></button>
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
<div id="popup-alerts">
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
<div id="getting-started-guide" class="alert alert-info alert-dismissible">
<span data-i18n="popupGettingStartedText"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/docs/KeePassXC_GettingStarted.html#_setup_browser_integration"><span data-i18n="popupGettingStartedLinkText"></span></a>
<button type="button" id="getting-started-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
</div>
<div id="troubleshooting-guide" class="alert alert-info alert-dismissible">
<span data-i18n="popupTroubleshootingText"></span>
<br />
<a target="_blank" class="alert-link" href="https://github.com/keepassxreboot/keepassxc-browser/wiki/Troubleshooting-guide"><span data-i18n="popupTroubleshootingLinkText"></span></a>
<button type="button" id="troubleshooting-guide-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
</div>
<div class="function-buttons-area">
<button id="options-button" class="btn btn-sm btn-success" data-i18n="[title]popupSettingsText"><i class="fa fa-cog" aria-hidden="true"></i></button>
<button id="choose-custom-login-fields-button" class="btn btn-sm btn-warning" data-i18n="[title]popupChooseCredentialsText"></button>
</div>
<div class="lock-button-area">
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
</div>
<div id="popup-alerts">
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
<div id="getting-started-guide" class="alert alert-info alert-dismissible">
<span data-i18n="popupGettingStartedText"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/docs/KeePassXC_GettingStarted.html#_setup_browser_integration"><span data-i18n="popupGettingStartedLinkText"></span></a>
<button type="button" id="getting-started-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
</div>
<div id="troubleshooting-guide" class="alert alert-info alert-dismissible">
<span data-i18n="popupTroubleshootingText"></span>
<br />
<a target="_blank" class="alert-link" href="https://github.com/keepassxreboot/keepassxc-browser/wiki/Troubleshooting-guide"><span data-i18n="popupTroubleshootingLinkText"></span></a>
<button type="button" id="troubleshooting-guide-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
</div>
</div>
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
<div id="initial-state">
@ -50,7 +63,7 @@
<div id="not-configured" style="display: none">
<p data-i18n="popupNotConfigured"></p>
<div style="text-align: right">
<div id="right-align">
<button id="connect-button" class="btn btn-sm btn-primary"><i class="fa fa-link" aria-hidden="true"></i> <span data-i18n="popupConnectButton"></span></button>
</div>
</div>
@ -61,7 +74,7 @@
<code id="need-reconfigure-message"></code>
</p>
<p data-i18n="popupNeedReconfigureMessage"></p>
<div style="text-align: right">
<div id="right-align">
<button id="reconnect-button" class="btn btn-sm btn-primary"><i class="fa fa-refresh" aria-hidden="true"></i> <span data-i18n="popupReconnectButton"></span></button>
</div>
</div>
@ -72,7 +85,7 @@
<div id="configured-and-associated" style="display: none">
<p data-i18n="popupConfiguredAndAssociated" i18n-placeholder="<span class='bg-success' id='associated-identifier'></span>"></p>
<div style="text-align: right">
<div id="right-align">
<button id="redetect-fields-button" class="btn btn-sm btn-primary"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupRedetectButton"></span></button>
</div>
</div>
@ -82,7 +95,7 @@
<p style="margin-left: 1em">
<code id="error-message"></code>
</p>
<div style="text-align: right">
<div id="right-align">
<button id="reload-status-button" class="btn btn-sm btn-primary"><i class="fa fa-refresh" aria-hidden="true"></i> <span data-i18n="popupReloadButton"></span></button>
</div>
</div>
@ -92,7 +105,7 @@
<p style="margin-left: 1em">
<code id="database-error-message"></code>
</p>
<div style="text-align: right">
<div id="right-align">
<button id="reopen-database-button" class="btn btn-sm btn-primary"><i class="fa fa-lock" aria-hidden="true"></i> <span data-i18n="popupReopenButton"></span></button>
</div>
</div>
@ -100,7 +113,7 @@
<div id="username-field-detected" style="display: none">
<hr />
<p data-i18n="popupUsernameFieldDetected"></p>
<div style="text-align: right">
<div id="right-align">
<button id="username-only-button" class="btn btn-sm btn-primary"><i class="fa fa-plus" aria-hidden="true"></i> <span data-i18n="popupUsernameButton"></span></button>
</div>
</div>

1
keepassxc-browser/popups/popup.js
View file

@ -75,6 +75,7 @@ const sendMessageToTab = async function(message) {
};
(async () => {
resizePopup();
await initColorTheme();
$('#connect-button').addEventListener('click', async () => {

28
keepassxc-browser/popups/popup_functions.js
View file

@ -4,6 +4,9 @@ const $ = function(elem) {
return document.querySelector(elem);
};
const DEFAULT_POPUP_SIZE = '460px';
const PINNED_POPUP_SIZE = '380px';
function updateAvailableResponse(available) {
if (available) {
$('#update-available').show();
@ -11,11 +14,16 @@ function updateAvailableResponse(available) {
}
async function initSettings() {
$('#settings #btn-options').addEventListener('click', () => {
$('#settings #options-button').addEventListener('click', () => {
browser.runtime.openOptionsPage().then(close());
});
$('#settings #btn-choose-credential-fields').addEventListener('click', async () => {
const customLoginFieldsButton = document.body.querySelector('#settings #choose-custom-login-fields-button');
if (isFirefox()) {
customLoginFieldsButton.id = 'choose-custom-login-fields-button-moz';
}
customLoginFieldsButton.addEventListener('click', async () => {
await browser.windows.getCurrent();
const tabs = await browser.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
@ -28,7 +36,6 @@ async function initSettings() {
});
}
async function initColorTheme() {
const colorTheme = await browser.runtime.sendMessage({
action: 'get_color_theme'
@ -41,6 +48,21 @@ async function initColorTheme() {
}
}
// Sets default popup size for Chromium based browsers to prevent flash on popup open
function setDefaultPopupSize() {
if (!isFirefox()) {
document.body.style.width = DEFAULT_POPUP_SIZE;
}
}
// Resizes the popup to the default size if the width is too small
function resizePopup() {
if (document.body.offsetWidth > 0 && document.body.offsetWidth < 100) {
document.body.style.width = isFirefox() ? PINNED_POPUP_SIZE : DEFAULT_POPUP_SIZE;
} else {
document.body.style.width = DEFAULT_POPUP_SIZE;
}
}
(async () => {
if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {

27
keepassxc-browser/popups/popup_httpauth.html
View file

@ -12,22 +12,29 @@
<script src="../bootstrap/jquery-3.4.1.min.js"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<script src="popup_functions.js"></script>
<script src="popup_httpauth.js"></script>
<script defer src="popup_httpauth.js"></script>
<script defer src="../common/translate.js"></script>
</head>
<body>
<script>
setDefaultPopupSize();
</script>
<div class="container">
<div id="settings" class="settings">
<button id="btn-options" class="btn btn-sm btn-success"><i class="fa fa-cog" aria-hidden="true"></i> <span data-i18n="popupSettingsText"></span></button>
<button id="btn-choose-credential-fields" class="btn btn-sm btn-warning"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupChooseCredentialsText"></span></button>
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
<div class="function-buttons-area">
<button id="options-button" class="btn btn-sm btn-success" data-i18n="[title]popupSettingsText"><i class="fa fa-cog" aria-hidden="true"></i></button>
<button id="choose-custom-login-fields-button" class="btn btn-sm btn-warning" data-i18n="[title]popupChooseCredentialsText"></button>
</div>
<div class="lock-button-area">
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
</div>
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
</div>
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
<div class="credentials">
<p data-i18n="popupAuthText"></p>

4
keepassxc-browser/popups/popup_httpauth.js
View file

@ -7,8 +7,11 @@ const getLoginData = async () => {
};
(async () => {
resizePopup();
await initColorTheme();
$('#lock-database-button').show();
const data = await getLoginData();
const ll = document.getElementById('login-list');
for (let i = 0; i < data.logins.length; ++i) {
@ -45,6 +48,7 @@ const getLoginData = async () => {
$('.credentials').hide();
$('#btn-dismiss').hide();
$('#database-not-opened').show();
$('#lock-database-button').hide();
$('#database-error-message').textContent = tr('errorMessageDatabaseNotOpened');
});

27
keepassxc-browser/popups/popup_login.html
View file

@ -11,21 +11,28 @@
<script src="../common/global.js"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<script src="popup_functions.js"></script>
<script src="popup_login.js"></script>
<script defer src="popup_login.js"></script>
<script defer src="../common/translate.js"></script>
</head>
<body>
<script>
setDefaultPopupSize();
</script>
<div class="container">
<div id="settings" class="settings">
<button id="btn-options" class="btn btn-sm btn-success"><i class="fa fa-cog" aria-hidden="true"></i> <span data-i18n="popupSettingsText"></span></button>
<button id="btn-choose-credential-fields" class="btn btn-sm btn-warning"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupChooseCredentialsText"></span></button>
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
<div class="function-buttons-area">
<button id="options-button" class="btn btn-sm btn-success" data-i18n="[title]popupSettingsText"><i class="fa fa-cog" aria-hidden="true"></i></button>
<button id="choose-custom-login-fields-button" class="btn btn-sm btn-warning" data-i18n="[title]popupChooseCredentialsText"></button>
</div>
<div class="lock-button-area">
<button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
</div>
<div id="update-available" class="alert alert-warning">
<span data-i18n="popupUpdateAvailable"></span>
<br />
<a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
</div>
<div id="credentialsList" class="credentials">
@ -42,7 +49,7 @@
<p style="margin-left: 1em">
<code id="database-error-message"></code>
</p>
<div style="text-align: right">
<div id="right-align">
<button id="reopen-database-button" class="btn btn-sm btn-primary"><i class="fa fa-lock" aria-hidden="true"></i> <span data-i18n="popupReopenButton"></span></button>
</div>
</div>

6
keepassxc-browser/popups/popup_login.js
View file

@ -1,8 +1,11 @@
'use strict';
(async () => {
resizePopup();
await initColorTheme();
$('#lock-database-button').show();
const global = await browser.runtime.getBackgroundPage();
const tabs = await browser.tabs.query({ active: true, currentWindow: true });
if (tabs.length === 0) {
@ -67,10 +70,11 @@
$('#credentialsList').hide();
$('#database-not-opened').show();
$('#lock-database-button').hide();
$('#database-error-message').textContent = tr('errorMessageDatabaseNotOpened');
});
$('#reopen-database-button').click((e) => {
$('#reopen-database-button').addEventListener('click', (e) => {
browser.runtime.sendMessage({
action: 'get_status',
args: [ false, true ] // Set forcePopup to true