mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 17:26:06 +08:00
b8ed562d19
Summary: The attachment components were the only React Components which used inheritance between components, which is an anti-pattern in react. I deleted these components in favor of new purely functional/dumb components exposed via the component-kit: Attachment Item and ImageAttachmentItem. These are defined in the same file to reuse some smaller components between them, like the progress-bar, etc. The attachments pacakage still remains, and only registers a single component to a new are called MessageAttachments. This InjectedComponent role is shared by the Composer and MessageItem, and is the only reason this exists as an injected component in a separate package. MessageAttachments renders all image and non image attachments for a message or draft, and binds the appropriate actions for removal, downloading, etc. The composer still used FileUpload and ImageUpload components for rendering uploads in the Composer (i.e. when you add an attachment (these are different from files because they aren't saved until the draft is sent)). These 2 components were pretty much copied and pasted from the ones in the attachments package, with subtle differences-- I got rid of these as well in favor of the new AttachmentItem and ImageAttachmentItem Also convert more coffee to ES6! Test Plan: Unit tests Reviewers: bengotow, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D3381
566 lines
12 KiB
Plaintext
566 lines
12 KiB
Plaintext
// The ui-variables file is provided by base themes provided by N1.
|
|
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
@import "buttons";
|
|
|
|
@compose-width: 800px;
|
|
@compose-min-height: 70px;
|
|
|
|
@blurred-primary-color: mix(@background-primary, #ffbb00, 96%);
|
|
@blurred-off-primary-color: mix(@background-off-primary, #ffbb00, 96%);
|
|
|
|
body.platform-win32 {
|
|
.composer-inner-wrap {
|
|
.composer-drop-cover {
|
|
border-radius: 0;
|
|
}
|
|
.composer-action-bar-wrap {
|
|
border-radius: 0;
|
|
}
|
|
input, input:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-bar-cover-gen() {
|
|
.action-bar-cover {
|
|
background-image: -webkit-linear-gradient(left, fade(@action-bar-bg, 0) 0%,
|
|
@action-bar-bg 10%);
|
|
}
|
|
}
|
|
|
|
// Used to allow the click targets to extend into the margins
|
|
.composer-field-bottom-border() {
|
|
width: calc(~"100% - 44px");
|
|
height: 1px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 23px;
|
|
content: " ";
|
|
background: @border-color-divider;
|
|
}
|
|
|
|
.composer-inner-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.composer-drop-cover {
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.7);
|
|
border-radius: @border-radius-base;
|
|
border: 4px dashed lighten(@gray, 30%);
|
|
text-align: center;
|
|
line-height:2.3em;
|
|
pointer-events: none;
|
|
|
|
.centered {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: lighten(@gray, 20%);
|
|
font-weight: 500;
|
|
font-size:1.1em;
|
|
img { margin: auto; display:block; margin-bottom:20px; background-color: lighten(@gray, 20%); }
|
|
}
|
|
}
|
|
|
|
.inline-image-upload-container {
|
|
display: inline-block;
|
|
|
|
.nylas-attachment-item.image-attachment-item {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.composer-action-bar-wrap {
|
|
@action-bar-bg: @background-off-primary;
|
|
position: relative;
|
|
width: 100%;
|
|
background: @action-bar-bg;
|
|
border-top: 1px solid darken(@background-off-primary, 7%);
|
|
box-shadow: inset 0 2px 1px rgba(0,0,0,0.03);
|
|
border-bottom: 0;
|
|
border-radius: @border-radius-base;
|
|
|
|
.action-bar-cover-gen;
|
|
|
|
// Buttons in the composer footer
|
|
.btn.btn-toolbar:not(.btn-emphasis) {
|
|
background: transparent;
|
|
box-shadow: 0 0 0;
|
|
margin: 0;
|
|
padding: 0 9px;
|
|
white-space: nowrap;
|
|
|
|
img.content-mask {
|
|
background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 30%);
|
|
}
|
|
&:hover {
|
|
img.content-mask {
|
|
background-color: fadeout(mix(@btn-default-text-color, @component-active-color, 88%), 5%);
|
|
}
|
|
}
|
|
&.btn-enabled {
|
|
color: @component-active-color;
|
|
img.content-mask {
|
|
background-color: @component-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-send {
|
|
margin-right: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.composer-action-bar-content {
|
|
display:flex;
|
|
margin: 0 auto;
|
|
flex-direction:row;
|
|
max-width: @compose-width;
|
|
padding: 9px 22.5px;
|
|
|
|
.composer-action-bar-plugins {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.action-bar-animation-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.composer-action-bar-plugins {
|
|
opacity: 0;
|
|
transition: opacity 30ms;
|
|
}
|
|
|
|
.action-bar-cover {
|
|
transition: left 200ms ease-out;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.plugins-loaded {
|
|
.composer-action-bar-plugins {
|
|
opacity: 1;
|
|
}
|
|
.action-bar-cover {
|
|
left: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-content-wrap {
|
|
padding: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.composer-centered {
|
|
display:flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
padding-top: @spacing-standard * 0.7;
|
|
}
|
|
.text-actions {
|
|
text-align: right;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
|
|
.composer-body-wrap {
|
|
padding: 0 0 5px 0;
|
|
}
|
|
|
|
.composer-header-actions {
|
|
position: relative;
|
|
float: right;
|
|
z-index: 2;
|
|
cursor: default;
|
|
padding-right: @spacing-standard + @spacing-half;
|
|
padding-top: 12px;
|
|
|
|
.action {
|
|
color: @text-color-very-subtle;
|
|
img.content-mask { background-color: @text-color-very-subtle; }
|
|
font-size: @font-size-small;
|
|
padding: 10px 6px;
|
|
&:first-child {
|
|
padding-left: @spacing-standard;
|
|
}
|
|
&:last-child {
|
|
padding-right: 0;
|
|
}
|
|
&:hover {
|
|
color: @text-color-link;
|
|
img.content-mask { background-color: @text-color-link; }
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
input, textarea {
|
|
color: @text-color;
|
|
position: relative;
|
|
display: block;
|
|
background: inherit;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
|
|
.composer-field-label {
|
|
color: @text-color-very-subtle;
|
|
float: left;
|
|
padding-top: 13px;
|
|
display: block;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.collapsed-composer-participants {
|
|
position: relative;
|
|
margin: 0 23px;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
flex-shrink:0;
|
|
color: @text-color-very-subtle;
|
|
padding: 10px 0 10px 0;
|
|
|
|
.collapsed-contact {
|
|
padding-right: 0.25em;
|
|
color: @text-color;
|
|
&:after {
|
|
content: ","
|
|
}
|
|
&:last-child:after {
|
|
content: ""
|
|
}
|
|
}
|
|
|
|
.num-remaining.token {
|
|
color: @text-color;
|
|
padding-right: 12px;
|
|
margin-left: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.num-remaining-wrap {
|
|
position: absolute;
|
|
right: -3px;
|
|
z-index: 2;
|
|
top: 6px;
|
|
.show-more-fade {
|
|
position: absolute;
|
|
width: 190px;
|
|
height: 32px;
|
|
right: 0;
|
|
top: 0;
|
|
background: linear-gradient(to right, fade(@background-primary, 0%) 0%, fade(@background-primary, 100%) 40%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-subject {
|
|
position: relative;
|
|
margin: 0;
|
|
flex-shrink:0;
|
|
|
|
&:after {
|
|
.composer-field-bottom-border;
|
|
}
|
|
|
|
// for Mail Merge
|
|
div[contenteditable] {
|
|
padding-left: 22px;
|
|
padding-right: 22px;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
padding: 13px 22px 9px 22px;
|
|
min-width: 5em;
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
&::-webkit-input-placeholder {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.compose-body-scroll {
|
|
position:initial;
|
|
.scroll-region-content .scroll-region-content-inner {
|
|
min-height: 100%;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.compose-body {
|
|
flex: 1;
|
|
cursor: text;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
margin: 0;
|
|
|
|
.quoted-text-control {
|
|
position: relative;
|
|
// The quoted-text-control has no top margin since the
|
|
// div[contentedtiable] has 10px of bottom padding. It's better to
|
|
// put the padding on the contenteditable so the bottom looks nice
|
|
// in popout windows when there's no quoted text control.
|
|
margin: 0 @spacing-standard @spacing-standard 22px;
|
|
|
|
.remove-quoted-text {
|
|
display: none;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: -6px;
|
|
top: -6px;
|
|
border-radius: 0 0 0 3px;
|
|
&:active {
|
|
background: none;
|
|
-webkit-filter: brightness(95%);
|
|
}
|
|
img {
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
&:hover .remove-quoted-text {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// All of the padding is placed on the contenteditable itself so
|
|
// clicks on the margins register within the region.
|
|
div[contenteditable] {
|
|
padding: 20px 22px 0 22px;
|
|
min-height: @compose-min-height;
|
|
}
|
|
}
|
|
|
|
.composer-footer-region {
|
|
cursor: default;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 0;
|
|
margin: 0 8px;
|
|
}
|
|
}
|
|
|
|
// Overrides for the full-window popout composer
|
|
.composer-full-window {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.composer-outer-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.composer-inner-wrap {
|
|
|
|
.composer-action-bar-wrap {
|
|
@action-bar-bg: darken(@background-primary, 1%);
|
|
background: @action-bar-bg;
|
|
border-top: 1px solid darken(@background-primary, 8%);
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
|
|
.action-bar-cover-gen;
|
|
}
|
|
|
|
.composer-action-bar-content {
|
|
padding: 9px 13.5px 9px 22.5px;
|
|
}
|
|
|
|
.compose-body {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
|
|
.compose-body {
|
|
div[contenteditable] {
|
|
min-height: @line-height-computed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overrides for the composer in a message-list
|
|
#message-list {
|
|
.message-item-wrap {
|
|
.message-item-white-wrap.composer-outer-wrap {
|
|
background: @blurred-primary-color;
|
|
|
|
.btn.btn-toolbar.btn-trash {
|
|
padding-right: 0;
|
|
}
|
|
.show-more-fade {
|
|
background: linear-gradient(to right, fade(@blurred-primary-color, 0%) 0%, fade(@blurred-primary-color, 100%) 40%);
|
|
}
|
|
.composer-action-bar-wrap {
|
|
@action-bar-bg: @blurred-off-primary-color;
|
|
background: @action-bar-bg;
|
|
.action-bar-cover-gen;
|
|
}
|
|
}
|
|
.message-item-white-wrap.composer-outer-wrap.focused {
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary;
|
|
background-color: @background-primary;
|
|
.show-more-fade {
|
|
background: linear-gradient(to right, fade(@background-primary, 0%) 0%, fade(@background-primary, 100%) 40%);
|
|
}
|
|
.composer-action-bar-wrap {
|
|
@action-bar-bg: @background-off-primary;
|
|
background: @action-bar-bg;
|
|
.action-bar-cover-gen;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//////////////////////////////////
|
|
// participants-text-field.cjsx //
|
|
//////////////////////////////////
|
|
.composer-participant-field {
|
|
position: relative;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
min-height: 46px;
|
|
color: @text-color;
|
|
|
|
.tokenizing-field-wrap {
|
|
padding: 0 22px;
|
|
}
|
|
.content-container {
|
|
margin-left: 22px;
|
|
width: calc(~"100% - 44px");
|
|
}
|
|
.button-dropdown {
|
|
.content-container {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
&:after {
|
|
.composer-field-bottom-border;
|
|
}
|
|
|
|
&.from-field {
|
|
padding: 0 22px;
|
|
}
|
|
|
|
.from-single-name {
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.button-dropdown {
|
|
margin-left: 10px;
|
|
padding-top: 11px;
|
|
vertical-align: -webkit-baseline-middle;
|
|
|
|
.primary-item, .only-item {
|
|
line-height: 2em;
|
|
}
|
|
&:hover {
|
|
.primary-item,
|
|
.only-item {
|
|
border-radius: @border-radius-base;
|
|
}
|
|
}
|
|
.secondary-items {
|
|
border-radius: @border-radius-base;
|
|
}
|
|
.item {
|
|
.contact.is-alias {
|
|
font-style: italic;
|
|
padding-left: @padding-small-horizontal;
|
|
border-left: 2px solid @border-color-divider;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.participant {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
.participant-primary {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
.tokenizing-field-input {
|
|
margin-left: 2.8em;
|
|
}
|
|
}
|
|
|
|
|
|
//////////////////////////////////
|
|
// Overlaid Components //
|
|
//////////////////////////////////
|
|
.overlaid-components {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
line-height: 1.4; // must match contenteditable container
|
|
overflow: visible;
|
|
z-index: 1;
|
|
}
|
|
img.n1-overlaid-component-anchor-container {
|
|
border: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
.toggle-preview {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 20px;
|
|
font-size: @font-size-smaller;
|
|
opacity: 0.3;
|
|
cursor: pointer;
|
|
&:hover {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
}
|