mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 13:44:41 +08:00
40f9e5172a
* Fix private key email-adder, add "no private key" error The decrypt UI is seriously confusing some people. This commit adds an error message that should at least stop them from trying to decrypt a message without a private key to speak of. Also, there was a dumb hardcoded true in validAddress. * Adds incorrect passphrase notification; enables carriage return for popover The passphrase popover was woefully inadequate. It didn't tell users when they had the wrong password - it just closed without saying anything - and you couldn't even use carriage return to submit the password. This commit fixes those mistakes by buffing out passphrase-popover.cjsx. * Adds private key popover to decrypt button The decrypt UI was confusing and didn't provide the user with an option to get a key imported from the message view. This mondo commit adds an entirely new popover so that the user never again will be forced to go to the preferences page. * Adds more forgiving encrypted block parsing * Overhauls decryption error handling The decrypt UI didn't clearly communicate error messages from the failure in PGPKeyStore.decrypt up to the user. This commit adds nice error surfacing as well as some pretty colors. * Fix encrypt modal key miscount error via getKeyContents coercion On Linux and Windows, fs.watch double-triggers on some actions in the key folder, for reasons that aren't super clear. This was causing issues where the encrypt modal would report not having a key loaded even though the key was totally loaded and saved. This commit sort of kludgily forces the modal to run getKeyContents for every key it has saved right before it returns them all. This would probably be better fixed with a refactor the the PGP Keystore. * remember to close popover, d'oh * patch key picker modal styling for Linux and Windows * response to review
526 lines
8.5 KiB
Text
Executable file
526 lines
8.5 KiB
Text
Executable file
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@code-bg-color: #fcf4db;
|
|
|
|
.keybase {
|
|
|
|
.no-keys-message {
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.container-keybase {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.keybase-profile {
|
|
border: 1px solid @border-color-primary;
|
|
border-top: 0;
|
|
background: @background-primary;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
display: flex;
|
|
|
|
.profile-photo-wrap {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: @border-radius-base;
|
|
padding: 3px;
|
|
box-shadow: 0 0 1px rgba(0,0,0,0.5);
|
|
background: @background-primary;
|
|
|
|
.profile-photo {
|
|
border-radius: @border-radius-small;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
|
|
img, .default-profile-image {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.default-profile-image {
|
|
line-height: 44px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: white;
|
|
box-shadow: inset 0 0 1px rgba(0,0,0,0.18);
|
|
background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
|
|
}
|
|
|
|
.user-picture {
|
|
background: @background-secondary;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.key-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
button {
|
|
margin: 2px 0 2px 10px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
}
|
|
|
|
button {
|
|
margin: 10px 0 10px 10px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
keybase-participant-field {
|
|
float: right;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.email-list {
|
|
padding-left: 10px;
|
|
word-break: break-all;
|
|
flex-grow: 3;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.keybase-profile:first-child {
|
|
border-top: 1px solid @border-color-primary;
|
|
}
|
|
|
|
.fixed-popover-container, .email-list {
|
|
.keybase-participant-field {
|
|
margin-bottom: 10px;
|
|
|
|
.n1-keybase-recipient-key-chip {
|
|
display: none;
|
|
}
|
|
|
|
.tokenizing-field-label {
|
|
display: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tokenizing-field-input {
|
|
padding-left: 0;
|
|
padding-top: 0;
|
|
|
|
input {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixed-popover-container {
|
|
.keybase-participant-field {
|
|
width: 300px;
|
|
background: @input-bg;
|
|
border: 1px solid @input-border-color;
|
|
|
|
.menu .content-container {
|
|
background: @background-secondary;
|
|
}
|
|
}
|
|
|
|
.passphrase-popover {
|
|
margin: 10px;
|
|
display: flex;
|
|
|
|
button {
|
|
margin-left: 5px;
|
|
flex: 0;
|
|
}
|
|
|
|
input {
|
|
min-width: 180px;
|
|
flex: 1;
|
|
}
|
|
|
|
.bad-passphrase {
|
|
border-color: @color-error;
|
|
}
|
|
}
|
|
|
|
.keybase-import-popover {
|
|
margin: 10px;
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.private-key-popover {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 300px;
|
|
margin: 5px 10px;
|
|
|
|
.picker-title {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
textarea {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.invalid-key-body {
|
|
background-color: @code-bg-color;
|
|
color: darken(@code-bg-color, 70%);
|
|
border: 1.5px solid darken(@code-bg-color, 10%);
|
|
border-radius: @border-radius-small;
|
|
font-size: @font-size-small;
|
|
margin: 5px 0 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.key-add-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
button {
|
|
width: 147px;
|
|
margin: 5px 0 0 0;
|
|
}
|
|
|
|
.paste-btn {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
.picker-controls {
|
|
width: 100%;
|
|
margin: 5px auto;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: row;
|
|
|
|
.modal-cancel-button {
|
|
float: left;
|
|
}
|
|
|
|
.modal-prefs-button {
|
|
flex: 1;
|
|
margin: 0 35px;
|
|
}
|
|
|
|
.modal-done-button {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.email-list {
|
|
.keybase-participant-field {
|
|
width: 200px;
|
|
border-bottom: 1px solid @gray-light;
|
|
}
|
|
}
|
|
|
|
.keybase-decrypt {
|
|
|
|
div.line-w-label {
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(128, 128, 128, 0.5);
|
|
}
|
|
|
|
div.decrypt-bar {
|
|
padding: 5px;
|
|
border: 1.5px solid rgba(128, 128, 128, 0.5);
|
|
border-radius: @border-radius-large;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.title-text {
|
|
flex: 1;
|
|
margin: auto 0;
|
|
}
|
|
|
|
.decryption-interface {
|
|
button {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.error-decrypt-bar {
|
|
border: 1.5px solid @color-error;
|
|
|
|
.title-text {
|
|
color: @color-error;
|
|
}
|
|
}
|
|
|
|
div.done-decrypt-bar {
|
|
border: 1.5px solid @color-success;
|
|
|
|
.title-text {
|
|
color: @color-success;
|
|
}
|
|
}
|
|
|
|
div.border {
|
|
height: 1px;
|
|
background: rgba(128, 128, 128, 0.5);
|
|
flex: 1;
|
|
}
|
|
|
|
div.error-border {
|
|
background: @color-error;
|
|
}
|
|
|
|
div.done-border {
|
|
background: @color-success;
|
|
}
|
|
}
|
|
|
|
.key-manager {
|
|
|
|
div.line-w-label {
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(128, 128, 128, 0.5);
|
|
margin: 10px 0;
|
|
}
|
|
div.title-text {
|
|
padding: 0 10px;
|
|
}
|
|
div.border {
|
|
height: 1px;
|
|
background: rgba(128, 128, 128, 0.5);
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.key-status-bar {
|
|
background-color: @code-bg-color;
|
|
color: darken(@code-bg-color, 70%);
|
|
border: 1.5px solid darken(@code-bg-color, 10%);
|
|
border-radius: @border-radius-small;
|
|
font-size: @font-size-small;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.key-add {
|
|
padding-top:10px;
|
|
|
|
.no-keys-message {
|
|
text-align: center;
|
|
}
|
|
|
|
.key-adder {
|
|
position: relative;
|
|
border: 1px solid @input-border-color;
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
margin-bottom: 10px;
|
|
|
|
.key-text {
|
|
margin-top: 10px;
|
|
min-height: 200px;
|
|
display: flex;
|
|
|
|
.loading {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
|
|
textarea {
|
|
border: 0;
|
|
padding: 0;
|
|
font-size: 0.9em;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.credentials {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.key-add-btn {
|
|
margin: 10px 5px 0 0;
|
|
flex: 0;
|
|
}
|
|
|
|
.key-email-input {
|
|
margin: 10px 5px 0 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.key-passphrase-input {
|
|
margin: 10px 5px 0 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.invalid-msg {
|
|
color: #AAA;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
margin: 12px 5px 0 0;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.key-creation-button {
|
|
display: inline-block;
|
|
margin: 0 5px 10px 5px;
|
|
}
|
|
|
|
.editor-note {
|
|
color: #AAA;
|
|
}
|
|
}
|
|
|
|
.key-instructions {
|
|
color: #333;
|
|
font-size: small;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.keybase-search {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
overflow: scroll;
|
|
position: relative;
|
|
|
|
input {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 8px; // lol I wonder how long until this is a problem
|
|
}
|
|
|
|
.bad-search-msg {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: rgba(128, 128, 128, 0.5);
|
|
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.key-picker-modal {
|
|
width: 400px;
|
|
height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.keybase-search {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
max-width: 400px;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
margin-top: 10px;
|
|
|
|
.searchbar {
|
|
width: 380px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.loading {
|
|
right: 20px;
|
|
}
|
|
|
|
.results {
|
|
overflow: auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.bad-search-msg {
|
|
br {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.picker-controls {
|
|
width: 380px;
|
|
margin: 5px auto 10px auto;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: row;
|
|
|
|
.modal-back-button {
|
|
float: left;
|
|
}
|
|
|
|
.modal-prefs-button {
|
|
flex: 1;
|
|
margin: 0 35px;
|
|
}
|
|
|
|
.modal-next-button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.keybase-profile-solo {
|
|
border: 1px solid @border-color-primary;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.picker-title {
|
|
margin-top: 10px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.decrypted {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
-webkit-print-color-adjust: exact;
|
|
padding: 8px 12px;
|
|
margin-bottom: 5px;
|
|
border: 1px solid rgb(235, 204, 209);
|
|
border-radius: 4px;
|
|
background-color: rgb(121, 212, 91);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|