mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
67c48b5136
React-dnd is a nice library but it assumes it's going to be the only thing managing your drag and drop in the entire app. It also hides the underlying dataTransfer object so it's difficult to implement native drag and drop behaviors other than for Files and Urls, which they special-case. Implementing it manually really isn't hard, and we can do things like attach a text/plain version of contact data to the contact drag. Fixes T2054
423 lines
9.2 KiB
Plaintext
423 lines
9.2 KiB
Plaintext
// The ui-variables file is provided by base themes provided by Atom.
|
|
//
|
|
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
|
|
// for a full listing of what's available.
|
|
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
@import "buttons";
|
|
|
|
@compose-width: 800px;
|
|
@compose-min-height: 150px;
|
|
|
|
.composer-inner-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.composer-cover {
|
|
position: absolute;
|
|
top: -1 * @spacing-double; right: 0; bottom: 0; left: 0;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.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;
|
|
|
|
.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%); }
|
|
}
|
|
}
|
|
|
|
.composer-action-bar-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
background: transparent;
|
|
border-bottom: 0;
|
|
|
|
.composer-action-bar-content {
|
|
display:flex;
|
|
margin: 0 auto;
|
|
flex-direction:row;
|
|
max-width: @compose-width;
|
|
padding: @spacing-standard;
|
|
|
|
> * {
|
|
margin-left: @spacing-standard / 2;
|
|
margin-right: @spacing-standard / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-content-wrap {
|
|
z-index: 1;
|
|
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;
|
|
margin-top:@spacing-standard;
|
|
}
|
|
.text-actions {
|
|
text-align: right;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
|
|
.header-action {
|
|
color: @text-color-very-subtle;
|
|
img.content-mask { background-color: @text-color-very-subtle; }
|
|
font-size: @font-size-small;
|
|
padding-left: 1em;
|
|
&:hover {
|
|
color: @text-color-link;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.composer-participant-actions {
|
|
position: absolute;
|
|
z-index: 900;
|
|
right: 23px;
|
|
.header-action {
|
|
position: relative;
|
|
top: 1em;
|
|
}
|
|
}
|
|
|
|
.tokenizing-field.to {
|
|
padding-right: 160px;
|
|
}
|
|
|
|
input, textarea, div[contenteditable] {
|
|
color: @text-color;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
background: inherit;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
|
|
.compose-subject-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 11px @spacing-standard 11px 0;
|
|
margin: 0 23px;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
flex-shrink:0;
|
|
|
|
.subject-label {
|
|
color: @text-color-very-subtle;
|
|
float: left;
|
|
padding-top: 6px;
|
|
display: block;
|
|
}
|
|
|
|
input.compose-field {
|
|
display: inline-block;
|
|
width: calc(~"100% - 61px");
|
|
padding: 0;
|
|
margin: 0 0 0 5px;
|
|
min-width: 5em;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
input.compose-field.compose-subject {
|
|
&::-webkit-input-placeholder {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.compose-body-scroll {
|
|
position:initial;
|
|
}
|
|
|
|
.compose-body {
|
|
flex: 1;
|
|
z-index: 1;
|
|
cursor: text;
|
|
overflow: auto;
|
|
position: relative;
|
|
margin: 0 8px;
|
|
|
|
.quoted-text-control {
|
|
margin: @spacing-standard;
|
|
margin-top:0;
|
|
}
|
|
|
|
div[contenteditable] {
|
|
font-size: @font-size-large;
|
|
line-height: 1.4;
|
|
min-height: @compose-min-height;
|
|
padding: @spacing-standard;
|
|
padding-top: 20px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
.contenteditable-container {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.composer-footer-region {
|
|
cursor: default;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.token {
|
|
background: transparent;
|
|
&.selected,
|
|
&.dragging {
|
|
.participant-secondary {
|
|
color: @text-color-inverse-very-subtle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
body.is-blurred .composer-inner-wrap .tokenizing-field .token {
|
|
background: transparent;
|
|
}
|
|
|
|
// 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 {
|
|
background: #fcfcfc;
|
|
border-top: 1px solid #eaeaea;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.composer-action-bar-content {
|
|
padding: 8px 0.5px;
|
|
}
|
|
|
|
.compose-body {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
|
|
.contenteditable-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
div[contenteditable] {
|
|
height: auto;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.compose-body {
|
|
div[contenteditable] {
|
|
min-height: @line-height-computed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overrides for the composer in a message-list
|
|
#message-list {
|
|
.message-item-wrap.composer-outer-wrap {
|
|
padding-top: @spacing-standard;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(@background-off-primary), to(@background-primary));
|
|
background-repeat:no-repeat;
|
|
-webkit-background-size:100% 150px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//////////////////////////////////
|
|
// participants-text-field.cjsx //
|
|
//////////////////////////////////
|
|
.participants-text-field {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 5px @spacing-standard 0 @spacing-standard;
|
|
margin: 0 8px;
|
|
flex-shrink: 0;
|
|
|
|
.participant {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
.participant-primary {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
///////////////////////////
|
|
// floating-toolbar.cjsx //
|
|
///////////////////////////
|
|
.floating-toolbar {
|
|
z-index: 10;
|
|
position: absolute;
|
|
|
|
background: #fff;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5);
|
|
border-radius: @border-radius-base;
|
|
color: @text-color;
|
|
|
|
transition-duration: .15s;
|
|
transition-property: opacity, margin;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
margin-top: 3px;
|
|
|
|
&.toolbar-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.toolbar-pointer {
|
|
position: absolute;
|
|
width: 22.5px;
|
|
height: 10px;
|
|
background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
|
|
background-size: 22.5px 10.5px;
|
|
margin-left: -11.2px;
|
|
}
|
|
|
|
&.above {
|
|
.toolbar-pointer {
|
|
transform: rotate(0deg);
|
|
bottom: -9px;
|
|
}
|
|
}
|
|
&.below {
|
|
.toolbar-pointer {
|
|
transform: rotate(180deg);
|
|
top: -9px;
|
|
}
|
|
}
|
|
|
|
.floating-toolbar-input {
|
|
display: inline;
|
|
// The hardcoded numbers here represent the widths of the various
|
|
// icons and buttons that surround the input. They are hardcoded here
|
|
// because CSS does the calculation for us that we'd otherwise have to
|
|
// do in React before the element renders to the page.
|
|
width: calc(~"100% - 62px");
|
|
&.with-remove {
|
|
width: calc(~"100% - 95px");
|
|
}
|
|
color: @text-color;
|
|
}
|
|
|
|
@padding: 0.5em;
|
|
.btn {
|
|
background: transparent;
|
|
font-size: 16px;
|
|
height: auto;
|
|
border-radius: 0;
|
|
padding: @padding*0.75 @padding;
|
|
margin: 0;
|
|
color: @text-color;
|
|
box-shadow: none;
|
|
&:first-child {
|
|
padding-left: 1.5*@padding;
|
|
}
|
|
&:last-child {
|
|
padding-right: 1.5*@padding;
|
|
}
|
|
&:hover, &:active {
|
|
color: lighten(@text-color-link, 10%);
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.preview-btn-icon {
|
|
position: relative;
|
|
top: 1px;
|
|
padding: 0 @padding;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
@padding-top: 4px;
|
|
@padding-left: 8px;
|
|
|
|
width: 12.5px + 2*@padding-left;
|
|
height: 12.5px + 2*@padding-top;
|
|
margin: 7.5px 0;
|
|
box-shadow: none;
|
|
border: 0;
|
|
border-right: 1px solid @border-color-divider;
|
|
&:last-child { border-right: 0 }
|
|
|
|
background: no-repeat;
|
|
background-size: 12.5px 12.5px;
|
|
background-position: @padding-left @padding-top;
|
|
&.btn-bold { background-image: url("images/composer/tooltip-bold-black@2x.png") }
|
|
&.btn-italic { background-image: url("images/composer/tooltip-italic-black@2x.png") }
|
|
&.btn-underline { background-image: url("images/composer/tooltip-underline-black@2x.png") }
|
|
&.btn-link { background-image: url("images/composer/tooltip-link-black@2x.png") }
|
|
&:hover {
|
|
cursor: pointer;
|
|
background: no-repeat;
|
|
background-size: 12.5px 12.5px;
|
|
background-position: @padding-left @padding-top;
|
|
&.btn-bold { background-image: url("images/composer/tooltip-bold-blue@2x.png") }
|
|
&.btn-italic { background-image: url("images/composer/tooltip-italic-blue@2x.png") }
|
|
&.btn-underline { background-image: url("images/composer/tooltip-underline-blue@2x.png") }
|
|
&.btn-link { background-image: url("images/composer/tooltip-link-blue@2x.png") }
|
|
}
|
|
}
|
|
}
|