2015-06-06 02:50:55 +08:00
|
|
|
@import "ui-variables";
|
|
|
|
|
|
|
|
|
|
@tooltipBorderColor: rgba(54, 56, 57, 0.9);
|
|
|
|
|
@tooltipBackground: -webkit-gradient(linear, left top, left bottom, from(rgba(99, 102, 103, 0.9)), to(rgba(82, 85, 86, 0.9)));
|
|
|
|
|
|
|
|
|
|
.scroll-tooltip {
|
|
|
|
|
background: @tooltipBackground;
|
|
|
|
|
color: white;
|
|
|
|
|
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
|
|
|
|
|
padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
|
|
|
|
|
border: 1px solid @tooltipBorderColor;
|
|
|
|
|
border-radius: @border-radius-base;
|
|
|
|
|
transform: translate(-15px, 0);
|
|
|
|
|
position: relative;
|
|
|
|
|
white-space:nowrap;
|
2015-06-12 09:38:57 +08:00
|
|
|
pointer-events: none;
|
2015-06-06 02:50:55 +08:00
|
|
|
}
|
|
|
|
|
.scroll-tooltip:after, .scroll-tooltip:before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
border: solid transparent;
|
|
|
|
|
content: " ";
|
|
|
|
|
height: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.scroll-tooltip:after {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
border-left-color: lighten(rgba(99, 102, 103, 1), 3%);
|
|
|
|
|
border-width: 8px;
|
|
|
|
|
margin-top: -8px;
|
|
|
|
|
}
|
|
|
|
|
.scroll-tooltip:before {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
border-left-color: darken(@tooltipBorderColor, 20%);
|
|
|
|
|
border-width: 9px;
|
|
|
|
|
margin-top: -9px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.scroll-region {
|
2015-09-18 03:59:01 +08:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-06 02:50:55 +08:00
|
|
|
position:relative;
|
|
|
|
|
|
|
|
|
|
.scroll-region-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow-y: scroll;
|
2015-10-23 01:53:57 +08:00
|
|
|
z-index: 1; // Important so that content does not repaint with container
|
2015-06-06 02:50:55 +08:00
|
|
|
}
|
2015-10-23 01:53:57 +08:00
|
|
|
|
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
|
|
|
.scroll-region-content-inner {
|
|
|
|
|
transform:translate3d(0,0,0);
|
|
|
|
|
}
|
2015-06-06 02:50:55 +08:00
|
|
|
}
|
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
|
|
|
|
2015-06-24 06:21:25 +08:00
|
|
|
.scroll-region.scrolling {
|
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
|
|
|
.scroll-region-content-inner {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2015-06-24 06:21:25 +08:00
|
|
|
}
|
perf(thread-list): Tailored SQLite indexes, ListTabular / ScrollRegion optimizations galore
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
2015-06-18 11:12:48 +08:00
|
|
|
|
2015-06-24 06:21:25 +08:00
|
|
|
.scrollbar-track {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 0.3s;
|
|
|
|
|
transition-delay: 0.5s;
|
|
|
|
|
padding:3px;
|
|
|
|
|
width:17px;
|
|
|
|
|
background: @list-bg;
|
|
|
|
|
border-left: 1px solid @border-color-divider;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2015-06-06 02:50:55 +08:00
|
|
|
opacity: 1;
|
|
|
|
|
transition-delay: 0s;
|
|
|
|
|
}
|
2015-06-24 06:21:25 +08:00
|
|
|
|
|
|
|
|
&.scrolling {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition-delay: 0s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.dragging {
|
2015-06-06 02:50:55 +08:00
|
|
|
opacity: 1;
|
|
|
|
|
.scrollbar-handle {
|
|
|
|
|
cursor: default;
|
|
|
|
|
background-color: lighten(@gray, 30%);
|
|
|
|
|
border:1px solid lighten(@gray, 20%);
|
|
|
|
|
.tooltip {
|
|
|
|
|
opacity: 1;
|
2015-06-12 09:38:57 +08:00
|
|
|
display:block;
|
2015-06-06 02:50:55 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-06-24 06:21:25 +08:00
|
|
|
|
|
|
|
|
/* Used to read the track height with padding applied. */
|
|
|
|
|
.scrollbar-track-inner {
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scrollbar-handle {
|
|
|
|
|
background-color: lighten(@gray, 40%);
|
|
|
|
|
border:1px solid lighten(@gray, 30%);
|
|
|
|
|
border-radius:8px;
|
|
|
|
|
.tooltip {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
display:none;
|
|
|
|
|
transition: opacity 0.3s;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-100%, -50%);
|
|
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-06-12 09:38:57 +08:00
|
|
|
}
|
2015-10-22 11:32:33 +08:00
|
|
|
body.platform-win32 {
|
|
|
|
|
.scroll-tooltip {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
.scrollbar-track {
|
|
|
|
|
.scrollbar-handle {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
