mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
4671bf885f
Summary: Initial message list collapsing messages can be expanded explicitly styling message items composer UI and collapsing expanding and collapsing headers style new reply area adding in message controls Add message actions dropdown Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D1664
399 lines
8.6 KiB
Plaintext
399 lines
8.6 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-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 {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
width: 100%;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
padding-top: 5px;
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.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 {
|
|
flex: 1;
|
|
z-index: 1;
|
|
cursor: text;
|
|
overflow: auto;
|
|
position: relative;
|
|
padding: 0 8px;
|
|
|
|
.quoted-text-control {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 15px;
|
|
margin: 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 {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.composer-footer-region {
|
|
cursor: default;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 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-content-wrap {
|
|
margin-top: @spacing-standard;
|
|
}
|
|
|
|
.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") }
|
|
}
|
|
}
|
|
}
|