mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-06 08:08:10 +08:00
86f7d65034
Summary:
This diff provides multi-selection in the thread list powered by a new ModelList component that implements selection on top of ListTabular (or soon another List component). It includes business logic for single selection, shift selection, command-click selection, etc.
This diff also improves the performance of DatabaseView by assessing whether updates are required based on specific database changes and skipping queries in many scenarios.
WIP
WIP
Move selection into modelView instead of store
WIP
Preparing to convert to ModelList mixin
Make ThreadStore => ThreadListStore
Break the DraftStore in two (new DraftListStore) to avoid keeping all drafts in all windows
Get rid of unread instance variable in favor of getter that falls through to isUnread()
Much smarter logic in DatabaseView to prevent needless queries (especially counts and full invalidation of retained range)
Squashed commit of the following:
commit 486516b540e659735675765ca8b20d8a107ee2a9
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 17:30:23 2015 -0700
Invalidate the retained range debounced
commit 7ac80403f52d108696c555f79c4c687d969f0228
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 17:30:16 2015 -0700
Wait until after the view updates to move focus
commit 88d66eb19a9710847ff98bea22045bb686f30cc6
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 17:28:01 2015 -0700
Bail out early when loading data if a reload has been requested
commit a49bedc44687040f7c675ff298376917a0b5fdcb
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 16:38:58 2015 -0700
Log query data when in a query is being logged
commit c64a9e02f9072fd30edb98c45be581d6ac00c48a
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 16:38:45 2015 -0700
Mark thread and messages as read in parallel instead of in sequence
commit 4b227100a795e20257cda0d60b00cc75b0000b0f
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 16:38:32 2015 -0700
Don't load tags with hardcoded IDs from the database, and load them in parallel instead of in sequence
commit aeb7f1d646786cfa1c247fe78ce5467da07c4446
Author: Ben Gotow <bengotow@gmail.com>
Date: Tue Apr 7 16:37:54 2015 -0700
Pass objects instead of ids to thread methods—since we always have the most current thread anyway, this makes things a bit faster
commit e70889d1d05ece81a081b8b3f27b62491429b6f9
Author: Ben Gotow <bengotow@gmail.com>
Date: Mon Apr 6 16:41:49 2015 -0700
[icon] Paper airplanes
Restyle account sidebar, optimize tag count queries a bit more
Fix initialization issue with webkit image mask
Can't compare dates with is/isnt
Assets for check boxes
Bug fixes
Wrap ModelList instead of providing props
Verbose mode for database view
Fix existing specs
Six new specs covering invalidateIfItemsInconsistent
Test Plan: Run 40+ new tests
Reviewers: evan
Reviewed By: evan
Differential Revision: https://review.inboxapp.com/D1410
496 lines
16 KiB
Text
496 lines
16 KiB
Text
// Color abstraction hierarchy:
|
|
// 1. Hex code (#428bca)
|
|
// 2. Common color name (@blue)
|
|
// 3. Generic color descriptor (@accent-primary, @background-primary)
|
|
// --------
|
|
// 4. Generic usage descriptor (@input-background, @button-background)
|
|
// 5. Application-specific usage (@unread-label-background)
|
|
|
|
// Typography abstraction hierarchy
|
|
// 1. Font-face (FaktPro)
|
|
// 2. Common name (@bold, @italic)
|
|
// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
|
|
// --------
|
|
// 4. Generic usage descriptor (.btn-text, .p-body)
|
|
// 5. Application-specific usage (.message-list-h1, .salesforce-h1)
|
|
|
|
//=============================== Colors ===============================//
|
|
//== Brand colors
|
|
@nilas-yellow: #D5DC28;
|
|
@nilas-yellow-dark: #A0C23A;
|
|
@nilas-green: #5CB346;
|
|
@nilas-green-dark: #078E46;
|
|
@nilas-blue: #11A1A2;
|
|
@nilas-blue-dark: #0F7982;
|
|
@nilas-black: #313435;
|
|
@nilas-gray: #434648;
|
|
|
|
//== Generic colors
|
|
@black: @nilas-black;
|
|
@gray-base: #0a0b0c;
|
|
@gray-darker: lighten(@gray-base, 13.5%); // #222
|
|
@gray-dark: lighten(@gray-base, 20%); // #333
|
|
@gray: lighten(@gray-base, 33.5%); // #555
|
|
@gray-light: lighten(@gray-base, 46.7%); // #777
|
|
@gray-lighter: lighten(@gray-base, 92.5%); // #eee
|
|
@white: #ffffff;
|
|
|
|
@blue: #419bf9;
|
|
@blue-dark: #3187e1;
|
|
|
|
//== Color descriptors
|
|
@accent-primary: @blue;
|
|
@accent-primary-dark: @blue-dark;
|
|
@accent-secondary: @nilas-yellow;
|
|
|
|
@background-primary: #ffffff;
|
|
@background-off-primary: #fbfbfb;
|
|
@background-secondary: #f6f6f6;
|
|
@background-tertiary: #6d7987;
|
|
|
|
@border-primary-bg: darken(@background-primary, 10%);
|
|
@border-secondary-bg: darken(@background-secondary, 10%);
|
|
@border-tertiary-bg: darken(@background-tertiary, 10%);
|
|
@border-color-divider: @border-secondary-bg;
|
|
|
|
@info-color: @blue-dark;
|
|
@success-color: @nilas-green;
|
|
@warning-color: #f0ad4e;
|
|
@error-color: #d9534f;
|
|
@danger-color: #d9534f;
|
|
|
|
|
|
//============================= Typography =============================//
|
|
|
|
// ----- Colors -----
|
|
@text-color: @black;
|
|
@text-color-subtle: fadeout(@text-color, 20%);
|
|
@text-color-very-subtle: fadeout(@text-color, 50%);
|
|
@text-color-inverse: @white;
|
|
@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%);
|
|
@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%);
|
|
|
|
@text-color-heading: @nilas-gray;
|
|
|
|
@text-color-link: @blue;
|
|
@text-color-link-hover: @blue-dark;
|
|
@text-color-link-active: @blue-dark;
|
|
|
|
@text-color-selected: @text-color-inverse;
|
|
@text-color-highlight: @text-color;
|
|
|
|
@text-color-info: @info-color;
|
|
@text-color-success: @success-color;
|
|
@text-color-warning: @warning-color;
|
|
@text-color-error: @error-color;
|
|
@text-color-destructive: @danger-color;
|
|
|
|
// ----- Font Families -----
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('FaktPro-Blond'), url('fonts/Fakt/FaktPro-Blond.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('FaktPro-Normal'), url('fonts/Fakt/FaktPro-Normal.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: local('FaktPro-Medium'), url('fonts/Fakt/FaktPro-Medium.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FaktPro';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: local('FaktPro-SemiBold'), url('fonts/Fakt/FaktPro-SemiBold.ttf'), local('Comic Sans MS');
|
|
}
|
|
|
|
@font-family-sans-serif: "FaktPro", "Helvetica", 'Lucida Grande', 'Segoe UI', sans-serif;
|
|
@font-family-smallcap: "Proxima Nova Regular Small Cap", "sans-serif";
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
@font-family-base: @font-family-sans-serif;
|
|
@font-family: @font-family-base;
|
|
@font-family-heading: @font-family-sans-serif;
|
|
|
|
// ----- Font Weights -----
|
|
@font-weight-blond: 300;
|
|
@font-weight-normal: 400;
|
|
@font-weight-medium: 500;
|
|
@font-weight-semi-bold: 600;
|
|
@headings-font-weight: 600;
|
|
|
|
// ----- Font Sizes -----
|
|
@font-size-base: 15px;
|
|
|
|
@font-size-smaller: @font-size-base * 0.80; // 12px
|
|
@font-size-small: @font-size-base * 0.93; // 14px
|
|
@font-size: @font-size-base; // 15px
|
|
@font-size-large: @font-size-base * 1.06; // 16px
|
|
@font-size-larger: @font-size-base * 1.20; // 18px
|
|
|
|
@font-size-h1: @font-size-base * 1.6; // 24px
|
|
@font-size-h2: @font-size-base * 1.6; // 24px
|
|
@font-size-h3: @font-size-base * 1.7; // 24px
|
|
@font-size-h4: @font-size-base * 1.25; // 18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: @font-size-base * 0.85; // 12px
|
|
|
|
// ----- Line Height -----
|
|
@line-height-base: 1.5; // 22.5/15
|
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
|
@line-height-heading: 1.1;
|
|
|
|
|
|
//============================ Iconography =============================//
|
|
// Specify custom location and filename of the included Glyphicons icon
|
|
// font. Useful for those including Bootstrap via Bower.
|
|
|
|
//** Load fonts from this directory.
|
|
@icon-font-path: "../fonts/";
|
|
//** File name for all font files.
|
|
@icon-font-name: "glyphicons-halflings-regular";
|
|
//** Element ID within SVG icon file.
|
|
@icon-font-svg-id: "glyphicons_halflingsregular";
|
|
|
|
|
|
//============================== Spacing ===============================//
|
|
// Define common padding and border radius sizes and more. Values based on
|
|
// 14px text and 1.428 line-height (~20px to start).
|
|
|
|
@spacing-standard: @font-size-base;
|
|
|
|
@spacing-quarter: @spacing-standard * 0.25;
|
|
@spacing-half: @spacing-standard * 0.5;
|
|
@spacing-three-quarters: @spacing-standard * 0.75;
|
|
|
|
@spacing-sub-double: @spacing-standard * 1.75;
|
|
@spacing-double: @spacing-standard * 2;
|
|
@spacing-super-double: @spacing-standard * 2.25;
|
|
|
|
|
|
@padding-base-vertical: 6px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 10px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 5px;
|
|
@padding-small-horizontal: 10px;
|
|
|
|
@padding-xs-vertical: 1px;
|
|
@padding-xs-horizontal: 5px;
|
|
|
|
@line-height-large: @line-height-computed * 1.3;
|
|
@line-height-small: @line-height-computed * 0.95;
|
|
|
|
@border-radius-base: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
|
|
//============================== Shadows ===============================//
|
|
@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21);
|
|
|
|
|
|
//============================== Tables ===============================//
|
|
// Customizes the `.table` component with basic values, each used across
|
|
// all table variations.
|
|
|
|
//** Padding for `<th>`s and `<td>`s.
|
|
@table-cell-padding: 8px;
|
|
//** Padding for cells in `.table-condensed`.
|
|
@table-condensed-cell-padding: 5px;
|
|
|
|
//** Default background color used for all tables.
|
|
@table-bg: transparent;
|
|
//** Background color used for `.table-striped`.
|
|
@table-bg-accent: #f9f9f9;
|
|
//** Background color used for `.table-hover`.
|
|
@table-bg-hover: #f5f5f5;
|
|
@table-bg-active: @table-bg-hover;
|
|
|
|
//** Border color for table and cell borders.
|
|
@table-border-color: #ddd;
|
|
|
|
|
|
//=============================== Buttons ==============================//
|
|
|
|
@btn-shadow: @standard-shadow;
|
|
|
|
@btn-default-bg-color: @background-primary;
|
|
@btn-default-text-color: @text-color;
|
|
|
|
@btn-action-bg-color: @success-color;
|
|
@btn-action-text-color: @text-color;
|
|
|
|
@btn-emphasis-bg-color: #5b90fb;
|
|
@btn-emphasis-text-color: @text-color-inverse;
|
|
|
|
@btn-danger-bg-color: @danger-color;
|
|
@btn-danger-text-color: @text-color-inverse;
|
|
|
|
//=============================== Inputs ===============================//
|
|
|
|
//** `<input>` background color
|
|
@input-bg: #fff;
|
|
//** `<input disabled>` background color
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@input-background-color: white;
|
|
|
|
@input-border-color: fadeout(@border-color, 10%);
|
|
@input-border-color-blurred: desaturate(@input-border-color, 100%);
|
|
|
|
@input-tint-color: fade(@background-color-selected, 10%);
|
|
@input-tint-color-hover: fade(@input-tint-color, 30%);
|
|
@input-tint-color-blurred: desaturate(@input-tint-color, 100%);
|
|
|
|
|
|
@input-accessory-color-hover: @light-blue;
|
|
@input-accessory-color: @cool-gray;
|
|
@input-cancel-color: @red;
|
|
|
|
//** Text color for `<input>`s
|
|
@input-color: @gray;
|
|
//** `<input>` border color
|
|
@input-border: #ccc;
|
|
|
|
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
|
|
//** Default `.form-control` border radius
|
|
@input-border-radius: @border-radius-base;
|
|
//** Large `.form-control` border radius
|
|
@input-border-radius-large: @border-radius-large;
|
|
//** Small `.form-control` border radius
|
|
@input-border-radius-small: @border-radius-small;
|
|
|
|
//** Border color for inputs on focus
|
|
@input-border-focus: #66afe9;
|
|
|
|
//** Placeholder text color
|
|
@input-color-placeholder: #999;
|
|
|
|
//** Default `.form-control` height
|
|
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
|
//** Large `.form-control` height
|
|
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
|
//** Small `.form-control` height
|
|
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
|
|
|
//** Background color for textual input addons
|
|
@input-group-addon-bg: @gray-lighter;
|
|
//** Border color for textual input addons
|
|
@input-group-addon-border-color: @input-border;
|
|
|
|
|
|
//=============================== Z-Index ==============================//
|
|
//-- Z-index master list
|
|
//
|
|
// Warning: Avoid customizing these values. They're used for a bird's eye
|
|
// view of components dependent on the z-axis and are designed to all work
|
|
// together.
|
|
//
|
|
// Note: These variables are not generated into the Customizer.
|
|
|
|
@zindex-navbar: 1000;
|
|
@zindex-dropdown: 1000;
|
|
@zindex-popover: 1060;
|
|
@zindex-tooltip: 1070;
|
|
@zindex-navbar-fixed: 1030;
|
|
@zindex-modal: 1040;
|
|
|
|
|
|
|
|
//** Global color for active items (e.g., navs or dropdowns).
|
|
@component-active-color: @accent-primary-dark;
|
|
//** Global background color for active items (e.g., navs or dropdowns).
|
|
@component-active-bg: @background-primary;
|
|
|
|
@component-secondary-active-bg: @background-primary;
|
|
|
|
//== Source List (used in Sidebar, iTunes-style)
|
|
//
|
|
// ##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@source-list-bg: @background-primary;
|
|
//** Text color of active list items
|
|
@source-list-active-color: @component-active-color;
|
|
//** Background color of active list items
|
|
@source-list-active-bg: @component-active-bg;
|
|
|
|
//== List
|
|
//
|
|
//##
|
|
|
|
//** Background color on `.list-group-item`
|
|
@list-bg: #fff;
|
|
//** `.list-item` border color
|
|
@list-border: #ddd;
|
|
//** List group border radius
|
|
@list-border-radius: @border-radius-base;
|
|
|
|
//** Background color of single list items on hover
|
|
@list-hover-bg: #f5f5f5;
|
|
|
|
//** Text color of active list items
|
|
@list-focused-color: @list-bg;
|
|
//** Background color of active list items
|
|
@list-focused-bg: @component-active-color;
|
|
//** Border color of active list elements
|
|
@list-focused-border: @list-focused-bg;
|
|
//** Text color for content within active list items
|
|
@list-focused-color-muted: lighten(@list-focused-bg, 40%);
|
|
|
|
//** Text color of active list items
|
|
@list-selected-color: inherit;
|
|
//** Background color of active list items
|
|
@list-selected-bg: fade(@component-active-color, 17%);
|
|
//** Border color of active list elements
|
|
@list-selected-border: fade(@component-active-color, 50%);
|
|
//** Text color for content within active list items
|
|
@list-selected-color-muted: lighten(@list-selected-bg, 40%);
|
|
|
|
//** Text color of disabled list items
|
|
@list-disabled-color: @gray-light;
|
|
//** Background color of disabled list items
|
|
@list-disabled-bg: @gray-lighter;
|
|
//** Text color for content within disabled list items
|
|
@list-disabled-text-color: @list-disabled-color;
|
|
|
|
|
|
//** Abbreviations and acronyms border color
|
|
@abbr-border-color: @gray-light;
|
|
//** Blockquote small color
|
|
@blockquote-small-color: @gray-light;
|
|
//** Blockquote font size
|
|
@blockquote-font-size: (@font-size-base * 1.25);
|
|
//** Blockquote border color
|
|
@blockquote-border-color: @gray-lighter;
|
|
|
|
|
|
|
|
//== Form states and alerts
|
|
//
|
|
//## Define colors for form feedback states and, by default, alerts.
|
|
|
|
@state-success-text: #3c763d;
|
|
@state-success-bg: #dff0d8;
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: #31708f;
|
|
@state-info-bg: #d9edf7;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
@state-warning-text: #8a6d3b;
|
|
@state-warning-bg: #fcf8e3;
|
|
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
|
|
|
|
@state-danger-text: #a94442;
|
|
@state-danger-bg: #f2dede;
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
|
|
|
|
/////
|
|
|
|
// -------------
|
|
// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS
|
|
// old stuff
|
|
// -------------
|
|
|
|
// Private
|
|
//
|
|
// Do not use these colors outside of this file.
|
|
// You should choose variables based on the role of your
|
|
// interface elements. In other themes, @light-blue may
|
|
// not be light or blue.
|
|
|
|
@PANTONE-340-UP: #00ac6f;
|
|
@PANTONE-7704-UP: #009ec4;
|
|
@PANTONE-7547-UP: #3c505f;
|
|
@PANTONE-296-UP: #003c56;
|
|
@PANTONE-421-UP: #b4babd;
|
|
@PANTONE-Red-032-UP: #f15f4b;
|
|
@PANTONE-326-UP: #3bbeb4;
|
|
@PANTONE-Process-Black-UP: #231f20;
|
|
@PANTONE-Cool-Gray-1-UP: #e1e0dc;
|
|
|
|
@green: @PANTONE-340-UP;
|
|
@light-blue: @PANTONE-7704-UP;
|
|
@blue-gray: @PANTONE-7547-UP;
|
|
@dark-blue: @PANTONE-296-UP;
|
|
@light-gray: @PANTONE-421-UP;
|
|
@red: @PANTONE-Red-032-UP;
|
|
@teal: @PANTONE-326-UP;
|
|
@black: @PANTONE-Process-Black-UP;
|
|
@cool-gray: @PANTONE-Cool-Gray-1-UP;
|
|
|
|
@blue-grey: @blue-gray;
|
|
@light-grey: @light-gray;
|
|
|
|
// Public
|
|
//
|
|
// Use these variables in your packages. Choose the variable
|
|
// that best matches the role of the element you are styling.
|
|
|
|
// TEXT
|
|
|
|
@unread-color: @blue; //!
|
|
@action-color: @green;
|
|
|
|
@progress-bar-fill: @light-blue;
|
|
@progress-bar-background: @light-gray;
|
|
|
|
@background-color: #fff;
|
|
@background-color-highlight: darken(@background-color, 2.5%);
|
|
@background-color-selected: @light-blue;
|
|
@background-color-secondary: darken(@background-color, 5%);
|
|
@background-color-accent: @blue-gray;
|
|
|
|
@background-color-info: @light-blue;
|
|
@background-color-success: @green;
|
|
@background-color-warning: #ff4800;
|
|
@background-color-error: @red;
|
|
@background-color-pending: @light-gray;
|
|
|
|
@base-border-color: darken(@background-color, 15%);
|
|
@border-color: darken(@background-color, 15%);
|
|
@border-color-subtle: darken(@background-color, 8%);
|
|
|
|
// Inputs
|
|
|
|
// Menus
|
|
|
|
@menu-color: white;
|
|
@menu-divider-color: @light-gray;
|
|
@menu-item-color-hover: fade(@background-color-selected, 10%);
|
|
@menu-item-color-selected: @background-color-selected;
|
|
@menu-text-color-selected: @text-color-inverse;
|
|
|
|
// Sizes
|
|
|
|
@disclosure-arrow-size: 12px;
|
|
@input-font-size: 14px;
|
|
|
|
@component-padding: 10px;
|
|
@component-icon-padding: 5px;
|
|
@component-icon-size: 16px;
|
|
@component-line-height: 25px;
|
|
@component-border-radius: 2px;
|
|
|
|
|
|
|
|
@body-bg: @white;
|
|
//== Panels and Sidebars
|
|
@panel-background-color: @gray-lighter;
|
|
@toolbar-background-color: @white;
|