2016-09-21 01:26:44 +08:00
|
|
|
@import "darkside-variables";
|
|
|
|
|
|
2016-09-21 01:20:15 +08:00
|
|
|
.tokenizing-field .token,
|
|
|
|
|
.tokenizing-field .token:hover,
|
|
|
|
|
.tokenizing-field .token.selected,
|
|
|
|
|
.tokenizing-field .token.dragging {
|
|
|
|
|
color: @sidebar;
|
|
|
|
|
background: @messagelist-bg;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tokenizing-field .token.selected,
|
|
|
|
|
.tokenizing-field .token.dragging {
|
|
|
|
|
color: @sidebar;
|
|
|
|
|
background: @accent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tokenizing-field .token.invalid,
|
|
|
|
|
.tokenizing-field .token.invalid:hover,
|
|
|
|
|
.tokenizing-field .token.invalid.selected,
|
|
|
|
|
.tokenizing-field .token.invalid.dragging {
|
|
|
|
|
color: @sidebar;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: inset 0 0 0 1px @invalid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Darken composer action bar to contrast from background
|
|
|
|
|
.composer-inner-wrap .composer-action-bar-wrap,
|
|
|
|
|
.composer-full-window .composer-inner-wrap .composer-action-bar-wrap {
|
|
|
|
|
background: darken(@messagelist-bg, 1%);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border-bottom-left-radius: 6px;
|
|
|
|
|
border-bottom-right-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Replacing focused state with theme accent
|
|
|
|
|
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
|
|
|
|
|
background: white;
|
|
|
|
|
&.focused {
|
|
|
|
|
box-shadow: 0 0 0 1px @accent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message-item-white-wrap.composer-outer-wrap .composer-participant-field .dropdown-component .signature-button-dropdown .only-item {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// make action bar at bottom of composer a bit darker than background
|
|
|
|
|
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
|
|
|
|
|
& .composer-action-bar-wrap { background: transparent; }
|
|
|
|
|
&.focused .composer-action-bar-wrap { background: darken(@messagelist-bg, 1%); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-participant-field,
|
|
|
|
|
.composer-inner-wrap .composer-subject,
|
|
|
|
|
.composer-inner-wrap .collapsed-composer-participants {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-inner-wrap .composer-centered,
|
|
|
|
|
.composer-inner-wrap .compose-body,
|
|
|
|
|
.composer-inner-wrap .composer-body-wrap,
|
|
|
|
|
.composer-inner-wrap .composer-header-actions {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-inner-wrap .composer-header-actions .action,
|
|
|
|
|
.tokenizing-field .tokenizing-field-input,
|
|
|
|
|
.tokenizing-field .tokenizing-field-label,
|
|
|
|
|
.composer-participant-field .button-dropdown,
|
|
|
|
|
.composer-inner-wrap .composer-field-label,
|
|
|
|
|
.composer-inner-wrap .composer-subject input,
|
|
|
|
|
.tokenizing-field .tokenizing-field-input input {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-inner-wrap .composer-header-actions {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-inner-wrap .collapsed-composer-participants,
|
|
|
|
|
.composer-inner-wrap .composer-subject,
|
|
|
|
|
.composer-participant-field {
|
|
|
|
|
min-height: 0;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-participant-field span {
|
|
|
|
|
top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-participant-field .button-dropdown {
|
|
|
|
|
vertical-align: initial;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.composer-inner-wrap .composer-centered,
|
|
|
|
|
.composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.body-field { margin-top: 20px; }
|
|
|
|
|
|
|
|
|
|
// ============================
|
|
|
|
|
// Attachements
|
|
|
|
|
// ============================
|
|
|
|
|
|
|
|
|
|
.attachments-area,
|
:art:(attachments): DRY and cleanup attachment components code
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
2016-11-01 08:26:07 +08:00
|
|
|
.nylas-attachment-item,
|
|
|
|
|
.nylas-attachment-item.image-attachment-item {
|
2016-09-21 01:20:15 +08:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
:art:(attachments): DRY and cleanup attachment components code
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
2016-11-01 08:26:07 +08:00
|
|
|
.nylas-attachment-item.image-attachment-item {
|
2016-09-21 01:20:15 +08:00
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Composer attatchments hover style
|
:art:(attachments): DRY and cleanup attachment components code
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
2016-11-01 08:26:07 +08:00
|
|
|
.nylas-attachment-item.image-attachment-item .file-preview .file-name-container {
|
2016-09-21 01:20:15 +08:00
|
|
|
background: fade(@sidebar, 20%);
|
|
|
|
|
min-height: 0;
|
|
|
|
|
& .file-name {
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
color: white;
|
|
|
|
|
background: fade(@sidebar, 80%);
|
|
|
|
|
padding: 5px 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
