mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
fix(composer): enable click regions on margins of composer
Change padding, margins, and borders to allow you to click on the left margin of to, cc, bcc, from, subject fields as well as the composer margins both above, left, and to the right of the composer. Ensured attachments and other assets show up in correct spots Ensure subject looks correct for mail merge
This commit is contained in:
parent
506a04ca22
commit
8e3b436ba3
|
@ -48,7 +48,7 @@ export default class AccountContactField extends React.Component {
|
||||||
|
|
||||||
_renderAccountSpan = (label) => {
|
_renderAccountSpan = (label) => {
|
||||||
return (
|
return (
|
||||||
<span style={{position: "relative", top: 13, left: "0.5em"}}>
|
<span className="from-single-name" style={{position: "relative", top: 13, left: "0.5em"}}>
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -95,7 +95,7 @@ export default class AccountContactField extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="composer-participant-field">
|
<div className="composer-participant-field from-field">
|
||||||
<div className="composer-field-label">From:</div>
|
<div className="composer-field-label">From:</div>
|
||||||
{this._renderAccountSelector()}
|
{this._renderAccountSelector()}
|
||||||
{this._renderFromFieldComponents()}
|
{this._renderFromFieldComponents()}
|
||||||
|
|
|
@ -30,6 +30,17 @@ body.platform-win32 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 {
|
.composer-inner-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -178,7 +189,7 @@ body.platform-win32 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer-body-wrap {
|
.composer-body-wrap {
|
||||||
padding: 20px 14px 5px 14px;
|
padding: 0 0 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer-header-actions {
|
.composer-header-actions {
|
||||||
|
@ -223,6 +234,9 @@ body.platform-win32 {
|
||||||
float: left;
|
float: left;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
display: block;
|
display: block;
|
||||||
|
&:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsed-composer-participants {
|
.collapsed-composer-participants {
|
||||||
|
@ -269,13 +283,22 @@ body.platform-win32 {
|
||||||
|
|
||||||
.composer-subject {
|
.composer-subject {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 23px;
|
margin: 0;
|
||||||
border-bottom: 1px solid @border-color-divider;
|
|
||||||
flex-shrink:0;
|
flex-shrink:0;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
.composer-field-bottom-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for Mail Merge
|
||||||
|
div[contenteditable] {
|
||||||
|
padding-left: 22px;
|
||||||
|
padding-right: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 13px 0 9px 0;
|
padding: 13px 22px 9px 22px;
|
||||||
min-width: 5em;
|
min-width: 5em;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -302,7 +325,7 @@ body.platform-win32 {
|
||||||
cursor: text;
|
cursor: text;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 8px;
|
margin: 0;
|
||||||
|
|
||||||
.quoted-text-control {
|
.quoted-text-control {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -310,7 +333,7 @@ body.platform-win32 {
|
||||||
// div[contentedtiable] has 10px of bottom padding. It's better to
|
// div[contentedtiable] has 10px of bottom padding. It's better to
|
||||||
// put the padding on the contenteditable so the bottom looks nice
|
// put the padding on the contenteditable so the bottom looks nice
|
||||||
// in popout windows when there's no quoted text control.
|
// in popout windows when there's no quoted text control.
|
||||||
margin: 0 @spacing-standard @spacing-standard 0;
|
margin: 0 @spacing-standard @spacing-standard 22px;
|
||||||
|
|
||||||
.remove-quoted-text {
|
.remove-quoted-text {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -334,7 +357,10 @@ body.platform-win32 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// All of the padding is placed on the contenteditable itself so
|
||||||
|
// clicks on the margins register within the region.
|
||||||
div[contenteditable] {
|
div[contenteditable] {
|
||||||
|
padding: 20px 22px 0 22px;
|
||||||
min-height: @compose-min-height;
|
min-height: @compose-min-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -349,7 +375,7 @@ body.platform-win32 {
|
||||||
// TODO FIXME DRY From stylesheets/message-list.less
|
// TODO FIXME DRY From stylesheets/message-list.less
|
||||||
.attachments-area {
|
.attachments-area {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -430,12 +456,32 @@ body.platform-win32 {
|
||||||
//////////////////////////////////
|
//////////////////////////////////
|
||||||
.composer-participant-field {
|
.composer-participant-field {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 8+@spacing-standard;
|
margin: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-bottom: 1px solid @border-color-divider;
|
|
||||||
min-height: 46px;
|
min-height: 46px;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
|
|
||||||
|
.tokenizing-field-wrap {
|
||||||
|
padding: 0 22px;
|
||||||
|
}
|
||||||
|
.content-container {
|
||||||
|
margin-left: 22px;
|
||||||
|
width: calc(~"100% - 44px");
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
.composer-field-bottom-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.from-field {
|
||||||
|
padding: 0 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.from-single-name {
|
||||||
|
&:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button-dropdown {
|
.button-dropdown {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
padding-top: 11px;
|
padding-top: 11px;
|
||||||
|
|
|
@ -303,7 +303,7 @@ class TokenizingTextField extends React.Component
|
||||||
/>
|
/>
|
||||||
|
|
||||||
_fieldComponent: =>
|
_fieldComponent: =>
|
||||||
<div key="field-component" ref="field-drop-target" onClick={@_onClick} onDrop={@_onDrop}>
|
<div key="field-component" ref="field-drop-target" onClick={@_onClick} onDrop={@_onDrop} className="tokenizing-field-wrap">
|
||||||
{@_renderPrompt()}
|
{@_renderPrompt()}
|
||||||
<div className="tokenizing-field-input">
|
<div className="tokenizing-field-input">
|
||||||
{@_placeholder()}
|
{@_placeholder()}
|
||||||
|
|
|
@ -127,11 +127,14 @@
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
|
&:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tokenizing-field-input {
|
.tokenizing-field-input {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 2.8em;
|
margin-left: 2.8em;
|
||||||
padding-top: 9px;
|
padding-top: 9px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue