From 508a859abc58ff18c2a28b4d161b58c035837ef4 Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Sun, 10 Feb 2019 16:16:03 -0800 Subject: [PATCH] Fix the max height of the calendar popovers --- .../lib/core/calendar-event-popover.jsx | 14 ++-- .../main-calendar/lib/main.jsx | 67 +++++-------------- .../main-calendar/styles/main-calendar.less | 38 +++++++++-- .../main-calendar/styles/nylas-calendar.less | 4 +- 4 files changed, 54 insertions(+), 69 deletions(-) diff --git a/app/internal_packages/main-calendar/lib/core/calendar-event-popover.jsx b/app/internal_packages/main-calendar/lib/core/calendar-event-popover.jsx index badf1de15..5ee97d186 100644 --- a/app/internal_packages/main-calendar/lib/core/calendar-event-popover.jsx +++ b/app/internal_packages/main-calendar/lib/core/calendar-event-popover.jsx @@ -266,18 +266,16 @@ export default class CalendarEventPopover extends React.Component {
{location}
{this.renderTime()}
-
+
Invitees:
- {attendees.map((a, idx) =>
{a.cn}
)} -
-
+
{attendees.map((a, idx) =>
{a.cn}
)}
+ +
Notes:
- -
{notes}
- +
{notes}
-
+ ); } diff --git a/app/internal_packages/main-calendar/lib/main.jsx b/app/internal_packages/main-calendar/lib/main.jsx index db881d3a9..a74c73499 100644 --- a/app/internal_packages/main-calendar/lib/main.jsx +++ b/app/internal_packages/main-calendar/lib/main.jsx @@ -1,66 +1,29 @@ -import { exec } from 'child_process'; -import fs from 'fs'; -import path from 'path'; +import React from 'react'; import { WorkspaceStore, ComponentRegistry } from 'mailspring-exports'; import CalendarWrapper from './calendar-wrapper'; import QuickEventButton from './quick-event-button'; -// -// function resolveHelperPath(callback) { -// const resourcesPath = AppEnv.getLoadSettings().resourcePath; -// let pathToCalendarApp = path.join(resourcesPath, '..', 'Nylas Calendar.app'); -// -// fs.exists(pathToCalendarApp, (exists) => { -// if (exists) { -// callback(pathToCalendarApp); -// return; -// } -// -// pathToCalendarApp = path.join(resourcesPath, 'build', 'resources', 'mac', 'Nylas Calendar.app'); -// fs.exists(pathToCalendarApp, (fallbackExists) => { -// if (fallbackExists) { -// callback(pathToCalendarApp); -// return; -// } -// callback(null); -// }); -// }); -// } +const Notice = () => ( +
+ Calendar is launching later this year! This preview is read-only and only supports Google + calendar. +
+); +Notice.displayName = 'Notice'; export function activate() { - // if (process.platform === 'darwin') { - // resolveHelperPath((helperPath) => { - // if (!helperPath) { - // return; - // } - - // exec(`chmod +x "${helperPath}/Contents/MacOS/Nylas Calendar"`, () => { - // exec(`open "${helperPath}"`); - // }); - - // if (!AppEnv.config.get('addedToDockCalendar')) { - // exec(`defaults write com.apple.dock persistent-apps -array-add "tile-datafile-data_CFURLString${helperPath}/_CFURLStringType0"`, () => { - // AppEnv.config.set('addedToDockCalendar', true); - // exec(`killall Dock`); - // }); - // } - // }); - - // AppEnv.onBeforeUnload(() => { - // exec('killall "Nylas Calendar"'); - // return true; - // }); - // } - ComponentRegistry.register(CalendarWrapper, { location: WorkspaceStore.Location.Center, }); - // ComponentRegistry.register(QuickEventButton, { - // location: WorkspaceStore.Location.Center.Toolbar, - // }); + ComponentRegistry.register(Notice, { + location: WorkspaceStore.Sheet.Main.Header, + }); + ComponentRegistry.register(QuickEventButton, { + location: WorkspaceStore.Location.Center.Toolbar, + }); } export function deactivate() { ComponentRegistry.unregister(CalendarWrapper); - // ComponentRegistry.unregister(QuickEventButton); + ComponentRegistry.unregister(QuickEventButton); } diff --git a/app/internal_packages/main-calendar/styles/main-calendar.less b/app/internal_packages/main-calendar/styles/main-calendar.less index b4d3c176d..a16076102 100644 --- a/app/internal_packages/main-calendar/styles/main-calendar.less +++ b/app/internal_packages/main-calendar/styles/main-calendar.less @@ -4,24 +4,22 @@ .main-calendar { height: 100%; - - .event-grid-legend { - border-left: 1px solid @border-color-divider; - } } -.calendar-event-popover { +.fixed-popover .calendar-event-popover { color: fadeout(@text-color, 20%); background-color: @background-primary; display: flex; flex-direction: column; font-size: @font-size-small; + max-height: 95vh; width: 300px; .location { color: @text-color-very-subtle; padding: @padding-base-vertical @padding-base-horizontal; word-wrap: break-word; + flex-shrink: 0; } .title-wrapper { color: @text-color-inverse; @@ -31,16 +29,30 @@ border-top-left-radius: @border-radius-base; border-top-right-radius: @border-radius-base; padding: @padding-base-vertical @padding-base-horizontal; + align-items: center; + flex-shrink: 0; + .title { + padding-right: @padding-base-vertical; + } } .edit-icon { background-color: @text-color-inverse; cursor: pointer; } - .description .scroll-region-content { - max-height: 300px; + + .invitees .scroll-region-content { + max-height: 160px; word-wrap: break-word; position: relative; } + .description { + white-space: pre-line; + word-wrap: break-word; + } + .description .scroll-region-content { + max-height: 250px; + position: relative; + } .label { color: @text-color-very-subtle; } @@ -65,3 +77,15 @@ .quick-event-popover { width: 250px; } + +.preview-notice { + display: block; + box-sizing: border-box; + -webkit-print-color-adjust: exact; + padding: 8px 12px; + border-bottom: 1px solid rgb(235, 224, 204); + color: rgb(169, 136, 66); + background-color: rgb(242, 235, 222); + white-space: nowrap; + overflow: hidden; +} diff --git a/app/internal_packages/main-calendar/styles/nylas-calendar.less b/app/internal_packages/main-calendar/styles/nylas-calendar.less index 1e105a12e..7e71e021c 100644 --- a/app/internal_packages/main-calendar/styles/nylas-calendar.less +++ b/app/internal_packages/main-calendar/styles/nylas-calendar.less @@ -20,8 +20,8 @@ body.platform-win32 { border-right: 1px solid @border-color-divider; color: @text-color-subtle; .calendar-toggles-wrap { - padding: 20px; - padding-top: 6px; + padding: 12px; + padding-top: 0px; } .colored-checkbox { position: relative;