mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
de0f2374fe
Summary: Adds a resizable column next to the calendar that lets you pick which calendars you want to turn on and off. The picker sidebar styling mimics that of the main account sidebar. Calendars are grouped by account. We store the disabled calendars in in your config. I added a `notIn` SQL method so it'll perform `WHERE calendarId NOT IN ['a', 'b', ...]` instead of `NOT (WHERE calendarId IN ['a', 'b', 'c'])` I wanted it to be an exclusion (instead of inclusion) list so the default was "all on" and we didn't need to always fetch the full list of calendarIds from the database to compare against. This also fixed a test that was failing constantly: The Query Subscription Pool Spec was not being properly reset on each test. As a result, the test would fail with an instance of a query subscription that Jasmine would attempt to pretty print. Jasmine would fail to pretty print it because of a jasmine bug that fails to properly display Objects with null prototypes. The DatabaseStore's EventEmitter has a property with a null prototyp causing the error Test Plan: manual Reviewers: bengotow, juan Reviewed By: juan Differential Revision: https://phab.nylas.com/D3336
400 lines
7.6 KiB
Plaintext
400 lines
7.6 KiB
Plaintext
@import 'ui-variables';
|
|
body.platform-win32 {
|
|
.calendar-toggles {
|
|
.colored-checkbox {
|
|
border-radius: 0;
|
|
.bg-color {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nylas-calendar {
|
|
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.calendar-toggles {
|
|
display: flex;
|
|
background-color: @source-list-bg;
|
|
border-right: 1px solid @border-color-divider;
|
|
color: @text-color-subtle;
|
|
.calendar-toggles-wrap {
|
|
padding: 20px;
|
|
padding-top: 6px;
|
|
}
|
|
.colored-checkbox {
|
|
position: relative;
|
|
top: 1px;
|
|
margin-left: 1px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-shadow: 0 0 0.5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.13);
|
|
background: white;
|
|
.bg-color {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
label {
|
|
padding-left: 0.4em;
|
|
}
|
|
.toggle-wrap, .account-label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
.account-calendars-wrap {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
.account-label {
|
|
cursor: default;
|
|
color: @text-color-very-subtle;
|
|
font-weight: @font-weight-semi-bold;
|
|
font-size: @font-size-small * 0.9;
|
|
margin-top: @padding-large-vertical;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
}
|
|
|
|
background: @background-off-primary;
|
|
.calendar-view {
|
|
height: 100%;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-event {
|
|
@interval-height: 21px;
|
|
position: absolute;
|
|
padding: 4px 5px 5px 6px;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-height: @interval-height;
|
|
|
|
border-top: 0;
|
|
border-right: 2px solid @background-primary;
|
|
border-bottom: 2px solid @background-primary;
|
|
border-left: 0;
|
|
|
|
display: flex;
|
|
.default-header {
|
|
flex: 1;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
&.horizontal {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.calendar-mouse-handler {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.week-view {
|
|
height: 100%;
|
|
|
|
@legend-width: 75px;
|
|
|
|
.calendar-body-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.calendar-area-wrap {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-legend {
|
|
width: @legend-width;
|
|
box-shadow: 1px 0 0 rgba(177,177,177,0.15);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.week-header {
|
|
position: relative;
|
|
padding-top: 75px;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.date-labels {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.all-day-events {
|
|
position: relative;
|
|
width: auto;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.all-day-legend {
|
|
width: @legend-width;
|
|
position: relative;
|
|
}
|
|
|
|
.legend-text {
|
|
font-size: 11px;
|
|
position: absolute;
|
|
color: #bfbfbf;
|
|
right: 10px;
|
|
}
|
|
|
|
.date-label-legend {
|
|
width: @legend-width;
|
|
position: relative;
|
|
border-bottom: 1px solid #dddddd;
|
|
box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.15);
|
|
z-index: 3;
|
|
.legend-text {
|
|
bottom: 7px;
|
|
}
|
|
}
|
|
|
|
.day-label-wrap {
|
|
padding: 15px;
|
|
text-align: center;
|
|
flex: 1;
|
|
box-shadow: inset 1px 0 0 rgba(177,177,177,0.15);
|
|
&.is-today {
|
|
.date-label { color: @accent-primary; }
|
|
.weekday-label {
|
|
color: @accent-primary;
|
|
}
|
|
}
|
|
}
|
|
.date-label {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: #808080;
|
|
}
|
|
.weekday-label {
|
|
display: block;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
margin-top: 3px;
|
|
font-size: 12px;
|
|
color: #ccd4d8;
|
|
}
|
|
|
|
.event-grid-wrap {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: @background-primary;
|
|
box-shadow: inset 0 1px 2.5px rgba(0,0,0,0.15);
|
|
}
|
|
.event-grid {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.event-grid-legend-wrap {
|
|
overflow: hidden;
|
|
box-shadow: 1px 0 0 rgba(177,177,177,0.15);
|
|
}
|
|
.event-grid-legend {
|
|
position: relative;
|
|
background: @background-primary;
|
|
z-index: 2;
|
|
}
|
|
.event-grid-bg-wrap {
|
|
.event-grid-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.cursor {
|
|
background: rgba(0,0,0,0.04);
|
|
position: absolute;
|
|
}
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.event-column {
|
|
flex: 1;
|
|
position: relative;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
box-shadow: 1px 0 0 rgba(177,177,177,0.15);
|
|
&.weekend {
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
}
|
|
}
|
|
|
|
.month-view {
|
|
|
|
}
|
|
|
|
.top-banner {
|
|
color: rgba(33,99,146,0.6);
|
|
background: #e0eff6;
|
|
font-size: 12px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.07);
|
|
}
|
|
|
|
.header-controls {
|
|
padding: 10px;
|
|
display: flex;
|
|
color: #808080;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
box-shadow: inset 0 -1px 1px rgba(191,191,191,0.12);
|
|
flex-shrink: 0;
|
|
|
|
.title {
|
|
display: inline-block;
|
|
width: 275px;
|
|
}
|
|
.title, .btn-icon {
|
|
font-size: 15px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.btn-icon {
|
|
margin: 0;
|
|
height: auto;
|
|
img {
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-controls {
|
|
padding: 10px;
|
|
min-height: 45px;
|
|
display: flex;
|
|
color: #808080;
|
|
background: @background-primary;
|
|
border-top: @border-color-divider;
|
|
box-shadow: 0 -3px 16px rgba(0,0,0,0.11);
|
|
z-index: 2;
|
|
}
|
|
|
|
.center-controls {
|
|
text-align: center;
|
|
flex: 1;
|
|
order: 0;
|
|
}
|
|
}
|
|
|
|
.mini-month-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: @background-primary;
|
|
border: 1px solid @border-color-divider;
|
|
border-radius: @border-radius-base;
|
|
|
|
.header {
|
|
display: flex;
|
|
background: @background-secondary;
|
|
padding: 4px 0 3px 0;
|
|
.title {
|
|
padding-top: 3px;
|
|
color: @text-color;
|
|
flex: 1;
|
|
}
|
|
border-bottom: 1px solid @border-color-divider;
|
|
.btn.btn-icon {
|
|
line-height: 27px;
|
|
height: 27px;
|
|
margin-top: -1px;
|
|
margin-right: 0;
|
|
&:active {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
.weekday {
|
|
flex: 1;
|
|
}
|
|
padding: 3px 0;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
}
|
|
|
|
.day-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
.week {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 28px;
|
|
}
|
|
.day {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex: 1;
|
|
min-height: 28px;
|
|
color: @text-color-very-subtle;
|
|
&.cur-month {
|
|
color: @text-color;
|
|
}
|
|
&:hover {
|
|
background: rgba(0,0,0,0.05);
|
|
}
|
|
&.today {
|
|
border: 1px solid @accent-primary;
|
|
}
|
|
&.cur-day {
|
|
background: @accent-primary;
|
|
color: @text-color-inverse;
|
|
&:hover {
|
|
background: darken(@accent-primary, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|