diff --git a/app/templates/downloadPassword.js b/app/templates/downloadPassword.js index 92ded723..74da26dc 100644 --- a/app/templates/downloadPassword.js +++ b/app/templates/downloadPassword.js @@ -6,7 +6,7 @@ module.exports = function(state, emit) { fileInfo.password === null ? html` ${state.translate('incorrectPassword')}` + for="unlock-input">${state.translate('passwordTryAgain')}` : html` ${state.translate('unlockInputLabel')} @@ -16,6 +16,7 @@ module.exports = function(state, emit) { ${label} diff --git a/app/templates/share.js b/app/templates/share.js index 21916cc6..9162c88f 100644 --- a/app/templates/share.js +++ b/app/templates/share.js @@ -9,10 +9,11 @@ module.exports = function(state, emit) { if (!file) { return notFound(state, emit); } - const passwordComplete = html` - - Password: ${file.password} - `; + + file.password = file.password || ''; + const passwordComplete = html``; + passwordComplete.innerHTML = file.password.replace(/ /g, ' '); + const passwordSection = file.password ? passwordComplete : uploadPassword(state, emit); diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js index d68368c6..8c719116 100644 --- a/app/templates/uploadPassword.js +++ b/app/templates/uploadPassword.js @@ -4,14 +4,14 @@ module.exports = function(state, emit) { const file = state.storage.getFileById(state.params.id); const div = html` - + - ${state.translate( - 'requirePasswordCheckbox' - )} + + ${state.translate('requirePasswordCheckbox')} \ No newline at end of file diff --git a/assets/main.css b/assets/main.css index 5b38576d..490a6eef 100644 --- a/assets/main.css +++ b/assets/main.css @@ -142,6 +142,7 @@ select, textarea, button { font-family: inherit; + margin: 0; } a { @@ -595,7 +596,6 @@ tbody { color: white; cursor: pointer; font-size: 15px; - height: 60px; padding-left: 10px; padding-right: 10px; white-space: nowrap; @@ -653,6 +653,8 @@ tbody { .selectPassword { padding: 10px 0; align-self: left; + max-width: 100%; + overflow-wrap: break-word; } .setPassword { @@ -830,7 +832,6 @@ tbody { color: white; cursor: pointer; font-size: 15px; - height: 50px; padding-left: 10px; padding-right: 10px; white-space: nowrap; @@ -904,6 +905,42 @@ tbody { margin-bottom: -5px; } +#addPasswordWrapper { + min-height: 24px; +} + +#addPassword { + position: absolute; + visibility: collapse; +} + +#addPasswordWrapper label { + line-height: 20px; + cursor: pointer; + position: relative; + opacity: 0.6; +} + +#addPassword:checked + label { + opacity: 1; +} + +#addPasswordWrapper label::before { + content: ''; + height: 20px; + width: 20px; + margin-right: 10px; + margin-left: 5px; + float: left; + border: 1px solid rgba(12, 12, 13, 0.3); + border-radius: 2px; +} + +#addPassword:checked + label::before { + background-image: url('./check-16-blue.svg'); + background-position: 2px 1px; +} + @media (max-device-width: 992px), (max-width: 992px) { .popup .popuptext { left: auto; @@ -974,22 +1011,40 @@ tbody { padding: 5px 5px 5px 20px; } - #copy { + #copy, + .setPassword, + #unlock { width: 100%; flex-direction: column; + padding-left: 0; } - #link { + .selectPassword { + align-self: center; + min-width: 95%; + } + + #addPasswordWrapper label::before { + margin-left: 0; + } + + #link, + #unlock-input { font-size: 22px; padding: 15px 10px; border-radius: 6px 6px 0 0; } - #copy-btn { + #copy-btn, + #unlock-btn { border-radius: 0 0 6px 6px; flex: 0 1 65px; } + #copy-text { + text-align: center; + } + th { font-size: 14px; padding: 0 5px; diff --git a/public/locales/en-US/send.ftl b/public/locales/en-US/send.ftl index 74548bc1..f85ae79e 100644 --- a/public/locales/en-US/send.ftl +++ b/public/locales/en-US/send.ftl @@ -85,5 +85,5 @@ footerLinkPrivacy = Privacy footerLinkTerms = Terms footerLinkCookies = Cookies requirePasswordCheckbox = Require a password to download this file -addPasswordButton = Add Password -incorrectPassword = Incorrect password. Try again? +addPasswordButton = Add password +passwordTryAgain = Incorrect password. Try again.