mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-07 16:48:02 +08:00
9ffe0d74dd
Summary: This diff gives the ComponentRegistry a cleaner, smaller API. Instead of querying by name, location or role, it's now just location and role, and you can register components for one or more location and one or more roles without assigning the entries in the registry separate names. When you register with the ComponentRegistry, the syntax is also cleaner and uses the component's displayName instead of requiring you to provide a name. You also provide the actual component when unregistering, ensuring that you can't unregister someone else's component. InjectedComponent and InjectedComponentSet now wrap their children in UnsafeComponent, which prevents render/component lifecycle problems from propogating. Existing components have been updated: 1. maxWidth / minWidth are now containerStyles.maxWidth/minWidth 2. displayName is now required to use the CR. 3. containerRequired = false can be provided to exempt a component from being wrapped in an UnsafeComponent. This is useful because it's slightly faster and keeps DOM flat. This diff also makes the "Show Component Regions" more awesome. It displays column regions, since they now use the InjectedComponentSet, and also shows for InjectedComponent as well as InjectedComponentSet. Change ComponentRegistry syntax, lots more work on safely wrapping items. See description. Fix for inline flexbox scenarios (message actions) Allow ~/.inbox/packages to be symlinked to a github repo Test Plan: Run tests! Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1457
415 lines
9.7 KiB
Text
415 lines
9.7 KiB
Text
// 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;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
|
|
.composer-action-bar-content {
|
|
display:flex;
|
|
flex-direction:row;
|
|
margin-left: -@spacing-standard / 2;
|
|
margin-right: -@spacing-standard / 2;
|
|
padding: @spacing-standard @spacing-double;
|
|
padding-bottom: @spacing-standard*1.1;
|
|
|
|
> * {
|
|
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;
|
|
margin-top: @spacing-standard;
|
|
padding: 0 @spacing-standard;
|
|
|
|
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;
|
|
font-size: @font-size-small;
|
|
padding-left: 1em;
|
|
&:hover {
|
|
color: @text-color-link;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.composer-participant-actions {
|
|
position: absolute;
|
|
z-index: 900;
|
|
right: @spacing-double;
|
|
.header-action {
|
|
position: relative;
|
|
top: 1em;
|
|
}
|
|
}
|
|
|
|
.tokenizing-field.to {
|
|
padding-right: 160px;
|
|
}
|
|
|
|
input, textarea, div[contenteditable] {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
background: inherit;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
|
|
.compose-subject-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 5px @spacing-standard 0 0;
|
|
margin: 0 @spacing-standard;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
|
|
.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: 6px 0 2px 0;
|
|
margin: 0 0 5px 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;
|
|
display: flex;
|
|
cursor: text;
|
|
overflow: auto;
|
|
position: relative;
|
|
|
|
.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: @spacing-standard;
|
|
padding-bottom: 0;
|
|
margin-bottom: 37px;
|
|
}
|
|
.contenteditable-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 0px 15px 0px 15px;
|
|
.attachment-file-wrap {
|
|
padding-top: 5px;
|
|
&.pending, &.started, &.progress {
|
|
color: @text-color-subtle;
|
|
.attachment-file-actions { visibility: visible; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-subtle; }
|
|
}
|
|
|
|
&.completed, &.success {
|
|
color: @text-color-success; // Success state
|
|
.attachment-file-actions { visibility: hidden; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-success; }
|
|
.attachment-upload-progress { background: @background-color-success; }
|
|
}
|
|
|
|
&.aborted, &.failed {
|
|
color: @text-color-error;
|
|
.attachment-file-actions { visibility: hidden; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-error; }
|
|
.attachment-upload-progress { background: @background-color-error; }
|
|
}
|
|
}
|
|
|
|
.attachment-file-actions {
|
|
margin-left: 0.4em;
|
|
}
|
|
}
|
|
|
|
.token {
|
|
background: transparent;
|
|
&.selected,
|
|
&.dragging {
|
|
.participant-secondary {
|
|
color: @text-color-inverse-very-subtle;
|
|
}
|
|
}
|
|
// &:hover {
|
|
// background: transparent;
|
|
// }
|
|
// &.selected,
|
|
// &.dragging {
|
|
// background: transparent;
|
|
// color: @text-color;
|
|
//
|
|
// .action { color: @text-color-subtle; }
|
|
// }
|
|
}
|
|
|
|
// .btn.btn-send {
|
|
// font-weight: @font-weight-semi-bold;
|
|
// color: @accent-primary-dark;
|
|
// border-top: 1px solid fade(@accent-primary, 39%);
|
|
// border-right: 1px solid fade(@accent-primary, 39%);
|
|
// border-left: 1px solid fade(@accent-primary, 39%);
|
|
// }
|
|
}
|
|
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: @background-secondary;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
}
|
|
|
|
.compose-body {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
|
|
.contenteditable-container {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
|
|
div[contenteditable] {
|
|
height: auto;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
|
|
.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: 0px 10px 20px rgba(0,0,0,0.19), inset 0px 0px 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: 0px;
|
|
}
|
|
|
|
.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;
|
|
|
|
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") }
|
|
}
|
|
}
|
|
}
|