mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
31037dfa1b
Summary: Allow Database models to create indexes, but don't autocreate bad ones fix minor bug in error-reporter Fix index on message list to make thread list lookups use proper index Developer bar ignores state changes unless it's open DatabaseView now asks for metadata for a set of items rather than calling a function for every item. Promise.props was cute but we really needed to make a single database query for all message metadata. New "in" matcher so you can say `thread_id IN (1,2,3)` Add .scroll-region-content-inner which is larger than the viewport by 1 page size, and uses transform(0,0,0) trick ScrollRegion exposes `onScrollEnd` so listTabular, et al don't need to re-implement it with more timers. Also removing requestAnimationFrame which was causing us to request scrollTop when it was not ready, and caching the values of... ...clientHeight/scrollHeight while scrolling is in-flight Updating rendered content 10 rows at a time (RangeChunkSize) was a bad idea. Instead, add every row in a render: pass as it comes in (less work all the time vs more work intermittently). Also remove bad requestAnimationFrame, and prevent calls to... ...updateRangeState from triggering additional calls to updateRangeState by removing `componentDidUpdate => updateRangeState ` Turning off hover (pointer-events:none) is now standard in ScrollRegion Loading text in the scroll tooltip, instead of random date shown Handle query parse errors by catching error and throwing a better more explanatory error Replace "quick action" retina images with background images to make React render easier Replace hasTagId with a faster implementation which doesn't call functions and doesn't build a temporary array Print query durations when printing to console instead of only in metadata Remove headers from support from ListTabular, we'll never use it Making columns part of state was a good idea but changing the array causes the entire ListTabular to re-render. To avoid this, be smarter about updating columns. This logic could potentially go in `componentDidReceiveProps` too. Fix specs and add 6 more for new database store functionality Test Plan: Run 6 new specs. More in the works? Reviewers: evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D1651
194 lines
4.2 KiB
Plaintext
194 lines
4.2 KiB
Plaintext
@import "ui-variables";
|
|
|
|
.sheet-toolbar .selection-bar {
|
|
// This item sits in the toolbar and takes up all the remaining
|
|
// space from the toolbar-spacer divs, but flex-shrink means that
|
|
// it shrinks before any other element when not enough space is available.
|
|
|
|
// This is important because the spacers will prevent items from being clickable,
|
|
// (webkit-app-region:drag) even if we're covering them up. We need to make them
|
|
// 0px wide!
|
|
|
|
width: 100%;
|
|
flex-shrink:100;
|
|
height:49px;
|
|
z-index: 10000;
|
|
-webkit-app-region: drag;
|
|
|
|
.absolute {
|
|
position: absolute;
|
|
left: -1px;
|
|
right:-1px;
|
|
top: 0;
|
|
height:49px;
|
|
border-left:1px solid @border-color-divider;
|
|
border-right:1px solid @border-color-divider;
|
|
background-color: @background-primary;
|
|
opacity:0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
|
|
.inner {
|
|
top: -100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
display:flex;
|
|
transition: top 0.2s ease-in-out;
|
|
-webkit-app-region: no-drag;
|
|
|
|
.centered {
|
|
flex: 1;
|
|
cursor:default;
|
|
text-align: center;
|
|
color:@text-color-subtle;
|
|
padding-top: 15px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
// .absolute is positioned full-width over all the other items in the toolbar.
|
|
// when .enabled, it transitions to opacity:1, hiding other items beneath it.
|
|
|
|
// .inner contains the actual buttons and animates *down* while the opacity animation
|
|
// is running. This means the items beneath fade out as the new ones slide in.
|
|
|
|
&.enabled {
|
|
.absolute {
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
.inner {
|
|
top:0;
|
|
.centered {
|
|
-webkit-app-region: drag;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.list-container {
|
|
.list-item {
|
|
font-size: @font-size-base;
|
|
line-height: @line-height-computed;
|
|
color: @text-color;
|
|
background: @list-bg;
|
|
|
|
&:hover {
|
|
background: darken(@list-bg, 5%);
|
|
}
|
|
|
|
&.selected {
|
|
background: @list-selected-bg;
|
|
color: @list-selected-color;
|
|
.list-column {
|
|
border-bottom: 1px solid @list-selected-border;
|
|
}
|
|
}
|
|
|
|
&.focused {
|
|
background: @list-focused-bg;
|
|
color: @list-focused-color;
|
|
.list-column {
|
|
border-bottom: 1px solid @list-focused-border;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-tabular {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.list-tabular-item {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
|
|
&.keyboard-cursor {
|
|
.list-column:first-child {
|
|
border-left:4px solid @list-focused-bg;
|
|
padding-left:8px;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
.checkmark .inner {
|
|
background-color: @accent-primary;
|
|
background-image: url(images/thread-list/checkbox-checkmark@2x.png);
|
|
border:none;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
&.selected.focused {
|
|
.checkmark .inner {
|
|
background-color: @list-bg;
|
|
background-image: url(images/thread-list/checkbox-checkmark-activerow@2x.png);
|
|
border:none;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
&.focused {
|
|
.checkmark .inner {
|
|
border:1px solid @accent-primary;
|
|
}
|
|
}
|
|
|
|
.checkmark {
|
|
padding: 12px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
.inner {
|
|
width:14px;
|
|
height:14px;
|
|
border:1px solid @list-border;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
background-size: 12px 9px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-column {
|
|
// The width is set by React.
|
|
display: inline-block;
|
|
padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
border-bottom: 1px solid @list-border;
|
|
|
|
&:last-child {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.list-headers {
|
|
display: flex;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
position: absolute;
|
|
background: fade(@list-bg,90%);
|
|
font-size: @font-size-base;
|
|
line-height: @font-size-base * 1.6;
|
|
height:@font-size-base * 2;
|
|
z-index: 3;
|
|
}
|
|
|
|
.list-header {
|
|
}
|
|
|
|
}
|