Merge pull request #2151 from bitwarden/responsive-notificationBar
Even more responsive notification bar
This commit is contained in:
commit
d4231589ad
|
@ -558,10 +558,7 @@
|
|||
"message": "Should Bitwarden remember this password for you?"
|
||||
},
|
||||
"notificationAddSave": {
|
||||
"message": "Yes, Save Now"
|
||||
},
|
||||
"notificationNeverSave": {
|
||||
"message": "Never for this website"
|
||||
"message": "Save"
|
||||
},
|
||||
"disableChangedPasswordNotification": {
|
||||
"message": "Disable Changed Password Notification"
|
||||
|
@ -573,7 +570,7 @@
|
|||
"message": "Do you want to update this password in Bitwarden?"
|
||||
},
|
||||
"notificationChangeSave": {
|
||||
"message": "Yes, Update Now"
|
||||
"message": "Update"
|
||||
},
|
||||
"disableContextMenuItem": {
|
||||
"message": "Disable Context Menu Options"
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
<div class="add-text"></div>
|
||||
<div class="add-buttons">
|
||||
<button type="button" class="never-save link"></button>
|
||||
<select class="select-folder"></select>
|
||||
<select class="select-folder" isVaultLocked="false"></select>
|
||||
<button type="button" class="add-save"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -6,11 +6,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
i18n.appName = chrome.i18n.getMessage('appName');
|
||||
i18n.close = chrome.i18n.getMessage('close');
|
||||
i18n.yes = chrome.i18n.getMessage('yes');
|
||||
i18n.never = chrome.i18n.getMessage('never');
|
||||
i18n.folder = chrome.i18n.getMessage('folder');
|
||||
i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave');
|
||||
i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave');
|
||||
i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc');
|
||||
i18n.notificationChangeSave = chrome.i18n.getMessage('notificationChangeSave');
|
||||
i18n.notificationChangeDesc = chrome.i18n.getMessage('notificationChangeDesc');
|
||||
|
@ -25,33 +23,29 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
? chrome.runtime.getURL('images/icon38_locked.png')
|
||||
: chrome.runtime.getURL('images/icon38.png');
|
||||
|
||||
document.getElementById('close').src = chrome.runtime.getURL('images/close.png');
|
||||
document.getElementById('close').alt = i18n.close;
|
||||
|
||||
var closeButton = document.getElementById('close-button'),
|
||||
body = document.querySelector('body'),
|
||||
bodyRect = body.getBoundingClientRect();
|
||||
|
||||
// i18n
|
||||
body.classList.add('lang-' + lang.slice(0, 2));
|
||||
|
||||
document.getElementById('logo-link').title = i18n.appName;
|
||||
|
||||
var neverButton = document.querySelector('#template-add .never-save');
|
||||
neverButton.textContent = i18n.never;
|
||||
|
||||
var selectFolder = document.querySelector('#template-add .select-folder');
|
||||
selectFolder.setAttribute('aria-label', i18n.folder);
|
||||
selectFolder.setAttribute('isVaultLocked', isVaultLocked.toString());
|
||||
|
||||
var addButton = document.querySelector('#template-add .add-save');
|
||||
addButton.textContent = i18n.notificationAddSave;
|
||||
|
||||
var changeButton = document.querySelector('#template-change .change-save');
|
||||
changeButton.textContent = i18n.notificationChangeSave;
|
||||
|
||||
var closeIcon = document.getElementById('close');
|
||||
closeIcon.src = chrome.runtime.getURL('images/close.png');
|
||||
closeIcon.alt = i18n.close;
|
||||
|
||||
var closeButton = document.getElementById('close-button')
|
||||
closeButton.title = i18n.close;
|
||||
closeButton.setAttribute('aria-label', i18n.close);
|
||||
|
||||
if (bodyRect.width < 768) {
|
||||
document.querySelector('#template-add .add-save').textContent = i18n.yes;
|
||||
document.querySelector('#template-add .never-save').textContent = i18n.never;
|
||||
document.querySelector('#template-add .select-folder').style.display = 'none';
|
||||
document.querySelector('#template-change .change-save').textContent = i18n.yes;
|
||||
} else {
|
||||
document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave;
|
||||
document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave;
|
||||
document.querySelector('#template-add .select-folder').style.display = isVaultLocked ? 'none' : 'initial';
|
||||
document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder);
|
||||
document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave;
|
||||
}
|
||||
|
||||
document.querySelector('#template-add .add-text').textContent = i18n.notificationAddDesc;
|
||||
document.querySelector('#template-change .change-text').textContent = i18n.notificationChangeDesc;
|
||||
|
||||
|
|
|
@ -24,7 +24,6 @@
|
|||
grid-template-columns: auto max-content;
|
||||
}
|
||||
|
||||
|
||||
.outer-wrapper > *, .inner-wrapper > * {
|
||||
align-self: center;
|
||||
}
|
||||
|
@ -77,6 +76,16 @@ button.neutral {
|
|||
}
|
||||
}
|
||||
|
||||
.select-folder[isVaultLocked="true"] {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.select-folder {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
@media (print) {
|
||||
body {
|
||||
display: none;
|
||||
|
|
Loading…
Reference in New Issue