diff --git a/web/app.react.js b/web/app.react.js index ad3f0975a..61f6a964e 100644 --- a/web/app.react.js +++ b/web/app.react.js @@ -1,273 +1,281 @@ // @flow import 'basscss/css/basscss.min.css'; import './theme.css'; import { config as faConfig } from '@fortawesome/fontawesome-svg-core'; import _isEqual from 'lodash/fp/isEqual'; import * as React from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { useDispatch } from 'react-redux'; import { fetchEntriesActionTypes, updateCalendarQueryActionTypes, } from 'lib/actions/entry-actions'; import { createLoadingStatusSelector, combineLoadingStatuses, } from 'lib/selectors/loading-selectors'; import { unreadCount } from 'lib/selectors/thread-selectors'; import { isLoggedIn } from 'lib/selectors/user-selectors'; import type { LoadingStatus } from 'lib/types/loading-types'; import type { Dispatch } from 'lib/types/redux-types'; import { registerConfig } from 'lib/utils/config'; import AppsDirectory from './apps/apps-directory.react'; import Calendar from './calendar/calendar.react'; import Chat from './chat/chat.react'; +import NavigationArrows from './components/navigation-arrows.react'; import InputStateContainer from './input/input-state-container.react'; import LoadingIndicator from './loading-indicator.react'; import { MenuProvider } from './menu-provider.react'; import { ModalProvider, useModalContext } from './modals/modal-provider.react'; import DisconnectedBar from './redux/disconnected-bar'; import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler'; import FocusHandler from './redux/focus-handler.react'; import { useSelector } from './redux/redux-utils'; import VisibilityHandler from './redux/visibility-handler.react'; import history from './router-history'; import AccountSettings from './settings/account-settings.react'; import DangerZone from './settings/danger-zone.react'; import LeftLayoutAside from './sidebar/left-layout-aside.react'; import Splash from './splash/splash.react'; import './typography.css'; import css from './style.css'; import getTitle from './title/getTitle'; import { type NavInfo, updateNavInfoActionType } from './types/nav-types'; import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils'; // We want Webpack's css-loader and style-loader to handle the Fontawesome CSS, // so we disable the autoAddCss logic and import the CSS file. Otherwise every // icon flashes huge for a second before the CSS is loaded. import '@fortawesome/fontawesome-svg-core/styles.css'; faConfig.autoAddCss = false; registerConfig({ // We can't securely cache credentials on web, so we have no way to recover // from a cookie invalidation resolveInvalidatedCookie: null, // We use httponly cookies on web to protect against XSS attacks, so we have // no access to the cookies from JavaScript setCookieOnRequest: false, setSessionIDOnRequest: true, // Never reset the calendar range calendarRangeInactivityLimit: null, platformDetails: { platform: 'web' }, }); type BaseProps = { +location: { +pathname: string, ... }, }; type Props = { ...BaseProps, // Redux state +navInfo: NavInfo, +entriesLoadingStatus: LoadingStatus, +loggedIn: boolean, +activeThreadCurrentlyUnread: boolean, // Redux dispatch functions +dispatch: Dispatch, +modals: $ReadOnlyArray, }; class App extends React.PureComponent { componentDidMount() { const { navInfo, location: { pathname }, loggedIn, } = this.props; const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn); if (pathname !== newURL) { history.replace(newURL); } } componentDidUpdate(prevProps: Props) { const { navInfo, location: { pathname }, loggedIn, } = this.props; if (!_isEqual(navInfo)(prevProps.navInfo)) { const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn); if (newURL !== pathname) { history.push(newURL); } } else if (pathname !== prevProps.location.pathname) { const newNavInfo = navInfoFromURL(pathname, { navInfo }); if (!_isEqual(newNavInfo)(navInfo)) { this.props.dispatch({ type: updateNavInfoActionType, payload: newNavInfo, }); } } else if (loggedIn !== prevProps.loggedIn) { const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn); if (newURL !== pathname) { history.replace(newURL); } } } onWordmarkClicked = () => { this.props.dispatch({ type: updateNavInfoActionType, payload: { tab: 'chat' }, }); }; render() { let content; if (this.props.loggedIn) { content = this.renderMainContent(); } else { content = ; } return ( {content} {this.props.modals} ); } renderMainContent() { let mainContent; const { tab, settingsSection } = this.props.navInfo; if (tab === 'calendar') { mainContent = ; } else if (tab === 'chat') { mainContent = ; } else if (tab === 'apps') { mainContent = ; } else if (tab === 'settings') { if (settingsSection === 'account') { mainContent = ; } else if (settingsSection === 'danger-zone') { mainContent = ; } } + const shouldShowNavigationArrows = false; + let navigationArrows = null; + if (shouldShowNavigationArrows) { + navigationArrows = ; + } + return (

Comm

+ {navigationArrows}
{mainContent}
); } } const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( fetchEntriesActionTypes, ); const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector( updateCalendarQueryActionTypes, ); const ConnectedApp: React.ComponentType = React.memo( function ConnectedApp(props) { const activeChatThreadID = useSelector( state => state.navInfo.activeChatThreadID, ); const navInfo = useSelector(state => state.navInfo); const fetchEntriesLoadingStatus = useSelector( fetchEntriesLoadingStatusSelector, ); const updateCalendarQueryLoadingStatus = useSelector( updateCalendarQueryLoadingStatusSelector, ); const entriesLoadingStatus = combineLoadingStatuses( fetchEntriesLoadingStatus, updateCalendarQueryLoadingStatus, ); const loggedIn = useSelector(isLoggedIn); const activeThreadCurrentlyUnread = useSelector( state => !activeChatThreadID || !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread, ); const boundUnreadCount = useSelector(unreadCount); React.useEffect(() => { document.title = getTitle(boundUnreadCount); }, [boundUnreadCount]); const dispatch = useDispatch(); const modalContext = useModalContext(); const modals = React.useMemo( () => modalContext.modals.map(([modal, key]) => ( {modal} )), [modalContext.modals], ); return ( ); }, ); function AppWithProvider(props: BaseProps): React.Node { return ( ); } export default AppWithProvider; diff --git a/web/components/navigation-arrows.css b/web/components/navigation-arrows.css new file mode 100644 index 000000000..7b51a5384 --- /dev/null +++ b/web/components/navigation-arrows.css @@ -0,0 +1,10 @@ +.container { + display: flex; + column-gap: 12px; +} + +.button { + color: var(--fg); + display: flex; + align-items: center; +} diff --git a/web/components/navigation-arrows.react.js b/web/components/navigation-arrows.react.js new file mode 100644 index 000000000..fb8e6b4a2 --- /dev/null +++ b/web/components/navigation-arrows.react.js @@ -0,0 +1,31 @@ +// @flow + +import * as React from 'react'; + +import history from '../router-history.js'; +import SWMansionIcon from '../SWMansionIcon.react.js'; +import css from './navigation-arrows.css'; + +function NavigationArrows(): React.Node { + const goBack = React.useCallback( + () => history.getHistoryObject().goBack(), + [], + ); + const goForward = React.useCallback( + () => history.getHistoryObject().goForward(), + [], + ); + + return ( + + ); +} + +export default NavigationArrows; diff --git a/web/style.css b/web/style.css index 4e6b7b28a..a0aa47a34 100644 --- a/web/style.css +++ b/web/style.css @@ -1,282 +1,283 @@ *, *:before, *:after { padding: 0; margin: 0; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { height: 100%; font-size: 62.5%; } body { font-family: var(--font-stack); background: var(--bg); height: 100%; overflow: hidden; font-size: 1.6rem; } a { text-decoration: none; color: #2a5db0; cursor: pointer; } button { cursor: pointer; } img, iframe { display: block; } input[type='text'], input[type='password'], textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; border: 1px solid #dddddd; border-radius: 1px; font-family: var(--font-stack); } button svg { vertical-align: top; } :global(#react-root) { display: flex; flex-direction: column; height: 100%; } div.layout { height: 100vh; display: grid; grid-template-columns: 244px repeat(12, 1fr); grid-template-rows: 65px calc(100vh - 65px); grid-template-areas: 'nav nav nav nav nav nav nav nav nav nav nav nav nav' 'sBar app app app app app app app app app app app app'; } header.header { background: var(--bg); z-index: 1; grid-area: nav; } div.main-header { height: 64px; background: var(--bg); display: flex; align-items: center; border-bottom: 1px solid var(--border-color); } div.main-header > .wordmark { color: var(--fg); padding-left: 92px; font-family: var(--font-logo); line-height: var(--line-height-text); font-weight: var(--semi-bold); font-size: var(--logo-font-22); + margin-right: 40px; } .wordmark > a { color: inherit; } div.main-content-container { position: relative; grid-area: app; } div.main-content { height: 100%; } div.upper-right { position: absolute; top: 0; right: 0; padding: 15px 16px; } span.loading-indicator-loading { display: inline-block; } @keyframes loading-indicator-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } span.loading-indicator-loading-medium:after { content: ' '; display: block; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-large:after { content: ' '; display: block; width: 25px; height: 25px; border-radius: 50%; border: 3px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-loading-small:after { content: ' '; display: block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; border-color: #fff transparent #fff transparent; animation-name: loading-indicator-loading; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } span.loading-indicator-black:after { border-color: #000 transparent #000 transparent; } span.loading-indicator-error { font-weight: bold; color: white; line-height: 0; } span.loading-indicator-error-black { font-weight: bold; color: red; line-height: 0; } div.form-enum-selector { display: inline-block; padding-bottom: 4px; } div.form-enum-selector > div.form-enum-container { padding-top: 5px; } div.form-enum-selector > div.form-enum-container > input { vertical-align: top; margin-top: 4px; } div.form-enum-selector div.form-enum-option { display: inline-block; font-size: 15px; font-weight: 600; padding-left: 3px; } div.form-enum-selector span.form-enum-description { display: block; font-family: var(--font-stack); font-weight: normal; font-size: 13px; max-width: 260px; color: gray; } div.color-title { margin-top: 4px; } .hidden { display: none; } .italic { font-style: italic; } div.form-textarea-container { margin-top: 1px; } div.new-thread-privacy-container { margin-bottom: 3px; margin-top: -6px; } span.page-loading { margin-top: 5px; margin-right: 12px; float: left; } span.page-error { margin: 15px; font-size: 42px; float: left; color: red; } div.color-picker-container { outline: none; position: relative; } div.color-picker-button { margin: 6px 3px; overflow: hidden; cursor: pointer; padding: 4px; display: inline-block; border: solid 1px darkgray; background: #eee; color: #333; vertical-align: middle; border-radius: 3px; } div.color-picker-preview { width: 25px; height: 16px; border: solid 1px #222; margin-right: 5px; float: left; z-index: 0; } div.color-picker-down-symbol { padding: 1px 0; height: 16px; line-height: 16px; float: left; font-size: 10px; } div.color-picker-selector { position: absolute; left: 4px; top: 34px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 320dpi), only screen and (min-resolution: 2dppx) { header.header, header.main-header, div.splash-header-container, div.splash-top-container, div.splash-bottom, div.calendar-filters-container { background: var(--bg); } } @media (hover: none) { div.splash-header-container, div.splash-top-container, div.splash-bottom { background-attachment: initial; } }