devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Fill translations and responsively switch them for smaller screens

This commit is contained in:
Daniel James Smith 2021-10-28 23:21:42 +02:00
parent ad1653ec3f
commit da80904d54
No known key found for this signature in database
GPG Key ID: 03E4BD365FF06726
3 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/notification/bar.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
@ -24,15 +24,14 @@
<div class="inner-wrapper" id="template-add">
<div class="add-text"></div>
<div class="add-buttons">
<button type="button" class="never-save link"></button>
<select class="select-folder"></select>
<button type="button" class="add-save"></button>
<button type="button" class="never-save link " short-text="" full-text=""></button>
<button type="button" class="add-save" short-text="" full-text=""></button>
</div>
</div>
<div class="inner-wrapper" id="template-change">
<div class="change-text"></div>
<div class="change-buttons">
<button type="button" class="change-save"></button>
<button type="button" class="change-save" short-text="" full-text=""></button>
</div>
</div>
</div>

44
src/notification/bar.js
View File

@ -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;

32
src/notification/bar.scss
View File

@ -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;