From da80904d54cdc56a67d05fe0813733148c46a019 Mon Sep 17 00:00:00 2001 From: Daniel James Smith Date: Thu, 28 Oct 2021 23:21:42 +0200 Subject: [PATCH 1/3] Fill translations and responsively switch them for smaller screens --- src/notification/bar.html | 9 ++++---- src/notification/bar.js | 44 +++++++++++++++++++-------------------- src/notification/bar.scss | 32 ++++++++++++++++++++++++++-- 3 files changed, 55 insertions(+), 30 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index bc43ed7cc8..43f56c19dd 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -1,4 +1,4 @@ - + @@ -24,15 +24,14 @@
- - - + +
- +
diff --git a/src/notification/bar.js b/src/notification/bar.js index fec7ed16f4..6798e789bf 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -25,33 +25,31 @@ 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.setAttribute('short-text', i18n.never); + neverButton.setAttribute('full-text', i18n.notificationNeverSave); + + var selectFolder = document.querySelector('#template-add .select-folder'); + selectFolder.setAttribute('aria-label', i18n.folder); + + var addButton = document.querySelector('#template-add .add-save'); + addButton.setAttribute('short-text', i18n.yes); + addButton.setAttribute('full-text', i18n.notificationAddSave); + + var changeButton = document.querySelector('#template-change .change-save'); + changeButton.setAttribute('short-text', i18n.yes); + changeButton.setAttribute('full-text', 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; diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 6982a3a91f..75603d3b07 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -1,4 +1,4 @@ -body { +body { background-color: #ffffff; padding: 0; margin: 0; @@ -24,7 +24,6 @@ grid-template-columns: auto max-content; } - .outer-wrapper > *, .inner-wrapper > * { align-self: center; } @@ -77,6 +76,35 @@ button.neutral { } } + +@media screen and (min-width: 768px) { + .never-save::after { + content: attr(full-text); + } + + .add-save::after { + content: attr(full-text); + } + + .change-save::after { + content: attr(full-text); + } +} + +@media screen and (max-width: 768px) { + .never-save::after { + content: attr(short-text); + } + + .add-save::after { + content: attr(short-text); + } + + .change-save::after { + content: attr(short-text); + } +} + @media (print) { body { display: none; From d495ed6c1f87f6dc34d641bf3a3bae7a9c9c603b Mon Sep 17 00:00:00 2001 From: Daniel James Smith Date: Thu, 28 Oct 2021 23:23:00 +0200 Subject: [PATCH 2/3] Handle displaying folder select: small screen vs. un-/locked vault --- src/notification/bar.html | 3 ++- src/notification/bar.js | 1 + src/notification/bar.scss | 9 ++++++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index 43f56c19dd..1772389c7c 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -1,4 +1,4 @@ - + @@ -25,6 +25,7 @@
+
diff --git a/src/notification/bar.js b/src/notification/bar.js index 6798e789bf..338d3546fe 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -33,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => { 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.setAttribute('short-text', i18n.yes); diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 75603d3b07..a5ba203da0 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -1,4 +1,4 @@ -body { +body { background-color: #ffffff; padding: 0; margin: 0; @@ -76,6 +76,9 @@ button.neutral { } } +.select-folder[isVaultLocked="true"] { + display: none +} @media screen and (min-width: 768px) { .never-save::after { @@ -103,6 +106,10 @@ button.neutral { .change-save::after { content: attr(short-text); } + + .select-folder { + display: none + } } @media (print) { From a1c36147649f7a389c27fc4a51d289bf7db22f65 Mon Sep 17 00:00:00 2001 From: Daniel James Smith Date: Thu, 4 Nov 2021 18:44:38 +0100 Subject: [PATCH 3/3] Simplify text displayed in notificationBar and remove css which modified it --- src/_locales/en/messages.json | 7 ++----- src/notification/bar.html | 6 +++--- src/notification/bar.js | 11 +++-------- src/notification/bar.scss | 26 -------------------------- 4 files changed, 8 insertions(+), 42 deletions(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index af284dde2b..7d129dd59f 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -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" diff --git a/src/notification/bar.html b/src/notification/bar.html index 1772389c7c..a03c566f19 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -24,15 +24,15 @@
- + - +
- +
diff --git a/src/notification/bar.js b/src/notification/bar.js index 338d3546fe..665f882117 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -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'); @@ -28,20 +26,17 @@ document.addEventListener('DOMContentLoaded', () => { document.getElementById('logo-link').title = i18n.appName; var neverButton = document.querySelector('#template-add .never-save'); - neverButton.setAttribute('short-text', i18n.never); - neverButton.setAttribute('full-text', i18n.notificationNeverSave); + 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.setAttribute('short-text', i18n.yes); - addButton.setAttribute('full-text', i18n.notificationAddSave); + addButton.textContent = i18n.notificationAddSave; var changeButton = document.querySelector('#template-change .change-save'); - changeButton.setAttribute('short-text', i18n.yes); - changeButton.setAttribute('full-text', i18n.notificationChangeSave); + changeButton.textContent = i18n.notificationChangeSave; var closeIcon = document.getElementById('close'); closeIcon.src = chrome.runtime.getURL('images/close.png'); diff --git a/src/notification/bar.scss b/src/notification/bar.scss index a5ba203da0..51b818ea51 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -80,33 +80,7 @@ button.neutral { display: none } -@media screen and (min-width: 768px) { - .never-save::after { - content: attr(full-text); - } - - .add-save::after { - content: attr(full-text); - } - - .change-save::after { - content: attr(full-text); - } -} - @media screen and (max-width: 768px) { - .never-save::after { - content: attr(short-text); - } - - .add-save::after { - content: attr(short-text); - } - - .change-save::after { - content: attr(short-text); - } - .select-folder { display: none }