Page MenuHomePhabricator
Differential D6977

[web] Remove active drawer item highlight
ClosedPublic
Actions

Authored by inka on Mar 7 2023, 4:00 AM.
Tags
None
Referenced Files
F6171068: D6977.id24792.diff
Wed, Apr 23, 2:11 AM
Unknown Object (File)
Thu, Apr 17, 1:19 PM
Unknown Object (File)
Fri, Apr 11, 3:57 PM
Unknown Object (File)
Wed, Apr 9, 1:30 PM
Unknown Object (File)
Wed, Apr 9, 9:14 AM
Unknown Object (File)
Tue, Apr 8, 1:07 PM
Unknown Object (File)
Mon, Apr 7, 10:14 AM
Unknown Object (File)
Mon, Apr 7, 6:30 AM
View All Files
Subscribers
ashoat
atul

Details

Reviewers
kamil
tomek
michal
Commits
rCOMM898e72433538: [web] Remove active drawer item highlight
Summary

issue: https://linear.app/comm/issue/ENG-3177/change-drawer-highlights
there won't be a highlight for the chat we are currently in

Test Plan

run web app, check that there is no highlight signifying thhe currently selected chat, other that the background behind the selected community in Chat tab

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 24792

View Options

web/sidebar/community-drawer-item.css

Show All 13 Linesimport {
useModalContext, useModalContext,
type PushModal, type PushModal,
} from 'lib/components/modal-provider.react'; } from 'lib/components/modal-provider.react';
import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors'; import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors';
import { entryKey } from 'lib/shared/entry-utils'; import { entryKey } from 'lib/shared/entry-utils';
import type { EntryInfo } from 'lib/types/entry-types'; import type { EntryInfo } from 'lib/types/entry-types';
import type { Dispatch } from 'lib/types/redux-types'; import type { Dispatch } from 'lib/types/redux-types';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import { import { dateString, dateFromString } from 'lib/utils/date-utils';
dateString,
dateFromString,
currentDateInTimeZone,
} from 'lib/utils/date-utils';
import LogInFirstModal from '../modals/account/log-in-first-modal.react'; import LogInFirstModal from '../modals/account/log-in-first-modal.react';
import HistoryModal from '../modals/history/history-modal.react'; import HistoryModal from '../modals/history/history-modal.react';
import ThreadPickerModal from '../modals/threads/thread-picker-modal.react'; import ThreadPickerModal from '../modals/threads/thread-picker-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import { htmlTargetFromEvent } from '../vector-utils'; import { htmlTargetFromEvent } from '../vector-utils';
import { AddVector, HistoryVector } from '../vectors.react'; import { AddVector, HistoryVector } from '../vectors.react';
import css from './calendar.css'; import css from './calendar.css';
import type { InnerEntry } from './entry.react'; import type { InnerEntry } from './entry.react';
import Entry from './entry.react'; import Entry from './entry.react';
type BaseProps = { type BaseProps = {
+dayString: string, +dayString: string,
+entryInfos: $ReadOnlyArray<EntryInfo>, +entryInfos: $ReadOnlyArray<EntryInfo>,
+startingTabIndex: number, +startingTabIndex: number,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
+onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>, +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
+viewerID: ?string, +viewerID: ?string,
+loggedIn: boolean, +loggedIn: boolean,
+nextLocalID: number, +nextLocalID: number,
+timeZone: ?string,
+dispatch: Dispatch, +dispatch: Dispatch,
+pushModal: PushModal, +pushModal: PushModal,
+popModal: () => void, +popModal: () => void,
}; };
type State = { type State = {
+hovered: boolean, +hovered: boolean,
}; };
class Day extends React.PureComponent<Props, State> { class Day extends React.PureComponent<Props, State> {
state: State = { state: State = {
hovered: false, hovered: false,
}; };
entryContainer: ?HTMLDivElement; entryContainer: ?HTMLDivElement;
entryContainerSpacer: ?HTMLDivElement; entryContainerSpacer: ?HTMLDivElement;
actionLinks: ?HTMLDivElement; actionLinks: ?HTMLDivElement;
entries: Map<string, InnerEntry> = new Map(); entries: Map<string, InnerEntry> = new Map();
componentDidUpdate(prevProps: Props) { componentDidUpdate(prevProps: Props) {
if (this.props.entryInfos.length > prevProps.entryInfos.length) { if (this.props.entryInfos.length > prevProps.entryInfos.length) {
invariant(this.entryContainer, 'entryContainer ref not set'); invariant(this.entryContainer, 'entryContainer ref not set');
this.entryContainer.scrollTop = this.entryContainer.scrollHeight; this.entryContainer.scrollTop = this.entryContainer.scrollHeight;
} }
} }
render() { render() {
const now = currentDateInTimeZone(this.props.timeZone); const now = new Date();
const isToday = dateString(now) === this.props.dayString; const isToday = dateString(now) === this.props.dayString;
const tdClasses = classNames(css.day, { [css.currentDay]: isToday }); const tdClasses = classNames(css.day, { [css.currentDay]: isToday });
let actionLinks = null; let actionLinks = null;
const hovered = this.state.hovered; const hovered = this.state.hovered;
if (hovered) { if (hovered) {
const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`; const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`;
actionLinks = ( actionLinks = (
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Linesconst ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedDay(props) { function ConnectedDay(props) {
const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector); const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
const viewerID = useSelector(state => state.currentUserInfo?.id); const viewerID = useSelector(state => state.currentUserInfo?.id);
const loggedIn = useSelector( const loggedIn = useSelector(
state => state =>
!!(state.currentUserInfo && !state.currentUserInfo.anonymous && true), !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
); );
const nextLocalID = useSelector(state => state.nextLocalID); const nextLocalID = useSelector(state => state.nextLocalID);
const timeZone = useSelector(state => state.timeZone);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
return ( return (
<Day <Day
{...props} {...props}
onScreenThreadInfos={onScreenThreadInfos} onScreenThreadInfos={onScreenThreadInfos}
viewerID={viewerID} viewerID={viewerID}
loggedIn={loggedIn} loggedIn={loggedIn}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
timeZone={timeZone}
dispatch={dispatch} dispatch={dispatch}
pushModal={pushModal} pushModal={pushModal}
popModal={popModal} popModal={popModal}
/> />
); );
}, },
); );
export default ConnectedDay; export default ConnectedDay;
View Options

web/sidebar/community-drawer-item.react.js

Show All 13 Linesimport {
useModalContext, useModalContext,
type PushModal, type PushModal,
} from 'lib/components/modal-provider.react'; } from 'lib/components/modal-provider.react';
import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors'; import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors';
import { entryKey } from 'lib/shared/entry-utils'; import { entryKey } from 'lib/shared/entry-utils';
import type { EntryInfo } from 'lib/types/entry-types'; import type { EntryInfo } from 'lib/types/entry-types';
import type { Dispatch } from 'lib/types/redux-types'; import type { Dispatch } from 'lib/types/redux-types';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import { import { dateString, dateFromString } from 'lib/utils/date-utils';
dateString,
dateFromString,
currentDateInTimeZone,
} from 'lib/utils/date-utils';
import LogInFirstModal from '../modals/account/log-in-first-modal.react'; import LogInFirstModal from '../modals/account/log-in-first-modal.react';
import HistoryModal from '../modals/history/history-modal.react'; import HistoryModal from '../modals/history/history-modal.react';
import ThreadPickerModal from '../modals/threads/thread-picker-modal.react'; import ThreadPickerModal from '../modals/threads/thread-picker-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import { htmlTargetFromEvent } from '../vector-utils'; import { htmlTargetFromEvent } from '../vector-utils';
import { AddVector, HistoryVector } from '../vectors.react'; import { AddVector, HistoryVector } from '../vectors.react';
import css from './calendar.css'; import css from './calendar.css';
import type { InnerEntry } from './entry.react'; import type { InnerEntry } from './entry.react';
import Entry from './entry.react'; import Entry from './entry.react';
type BaseProps = { type BaseProps = {
+dayString: string, +dayString: string,
+entryInfos: $ReadOnlyArray<EntryInfo>, +entryInfos: $ReadOnlyArray<EntryInfo>,
+startingTabIndex: number, +startingTabIndex: number,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
+onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>, +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
+viewerID: ?string, +viewerID: ?string,
+loggedIn: boolean, +loggedIn: boolean,
+nextLocalID: number, +nextLocalID: number,
+timeZone: ?string,
+dispatch: Dispatch, +dispatch: Dispatch,
+pushModal: PushModal, +pushModal: PushModal,
+popModal: () => void, +popModal: () => void,
}; };
type State = { type State = {
+hovered: boolean, +hovered: boolean,
}; };
class Day extends React.PureComponent<Props, State> { class Day extends React.PureComponent<Props, State> {
state: State = { state: State = {
hovered: false, hovered: false,
}; };
entryContainer: ?HTMLDivElement; entryContainer: ?HTMLDivElement;
entryContainerSpacer: ?HTMLDivElement; entryContainerSpacer: ?HTMLDivElement;
actionLinks: ?HTMLDivElement; actionLinks: ?HTMLDivElement;
entries: Map<string, InnerEntry> = new Map(); entries: Map<string, InnerEntry> = new Map();
componentDidUpdate(prevProps: Props) { componentDidUpdate(prevProps: Props) {
if (this.props.entryInfos.length > prevProps.entryInfos.length) { if (this.props.entryInfos.length > prevProps.entryInfos.length) {
invariant(this.entryContainer, 'entryContainer ref not set'); invariant(this.entryContainer, 'entryContainer ref not set');
this.entryContainer.scrollTop = this.entryContainer.scrollHeight; this.entryContainer.scrollTop = this.entryContainer.scrollHeight;
} }
} }
render() { render() {
const now = currentDateInTimeZone(this.props.timeZone); const now = new Date();
const isToday = dateString(now) === this.props.dayString; const isToday = dateString(now) === this.props.dayString;
const tdClasses = classNames(css.day, { [css.currentDay]: isToday }); const tdClasses = classNames(css.day, { [css.currentDay]: isToday });
let actionLinks = null; let actionLinks = null;
const hovered = this.state.hovered; const hovered = this.state.hovered;
if (hovered) { if (hovered) {
const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`; const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`;
actionLinks = ( actionLinks = (
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Linesconst ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedDay(props) { function ConnectedDay(props) {
const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector); const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
const viewerID = useSelector(state => state.currentUserInfo?.id); const viewerID = useSelector(state => state.currentUserInfo?.id);
const loggedIn = useSelector( const loggedIn = useSelector(
state => state =>
!!(state.currentUserInfo && !state.currentUserInfo.anonymous && true), !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
); );
const nextLocalID = useSelector(state => state.nextLocalID); const nextLocalID = useSelector(state => state.nextLocalID);
const timeZone = useSelector(state => state.timeZone);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
return ( return (
<Day <Day
{...props} {...props}
onScreenThreadInfos={onScreenThreadInfos} onScreenThreadInfos={onScreenThreadInfos}
viewerID={viewerID} viewerID={viewerID}
loggedIn={loggedIn} loggedIn={loggedIn}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
timeZone={timeZone}
dispatch={dispatch} dispatch={dispatch}
pushModal={pushModal} pushModal={pushModal}
popModal={popModal} popModal={popModal}
/> />
); );
}, },
); );
export default ConnectedDay; export default ConnectedDay;