Page MenuHomePhabricator
Files F3384091

D6752.id23462.diff
No OneTemporary
Actions

D6752.id23462.diff
View Options

diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -160,11 +160,16 @@
let filterPanel = null;
let calendarContentStyle = null;
- let filterButtonStyle = null;
+ let filterButton = null;
if (this.state.filterPanelOpen) {
- filterPanel = <FilterPanel />;
+ filterPanel = <FilterPanel toggleFilters={this.toggleFilters} />;
calendarContentStyle = { marginLeft: '300px' };
- filterButtonStyle = { backgroundColor: 'rgba(0,0,0,0.67)' };
+ } else {
+ filterButton = (
+ <a className={css.filtersButton} onClick={this.toggleFilters}>
+ <SWMansionIcon icon="filters-2" size={16} />
+ </a>
+ );
}
return (
@@ -172,13 +177,7 @@
{filterPanel}
<div className={css.content} style={calendarContentStyle}>
<div>
- <a
- className={css.filtersButton}
- onClick={this.toggleFilters}
- style={filterButtonStyle}
- >
- <SWMansionIcon icon="filters-2" size={16} />
- </a>
+ {filterButton}
<nav className={css.nav}>
<a
className={css.monthLink}
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -6,6 +6,8 @@
background-attachment: fixed;
display: flex;
flex-direction: column;
+ border-right: 1px solid var(--border);
+ background-color: var(--filter-panel-bg);
}
div.filters {
color: #dddddd;
@@ -96,30 +98,42 @@
}
div.searchContainer {
padding: 8px 10px;
- background-color: rgba(0, 0, 0, 0.89);
+ flex-direction: row;
+ display: flex;
+}
+.collapseButton {
+ color: var(--filter-panel-fg);
+ margin-left: 12px;
+ margin-right: 6px;
+ align-self: center;
+ display: flex;
+}
+.collapseButton:hover {
+ color: var(--fg);
}
div.search {
display: flex;
- border-radius: 5px;
- padding: 5px;
- background-color: rgba(255, 255, 255, 0.27);
+ border-radius: 8px;
+ padding: 10px;
+ background-color: var(--text-input-bg);
align-items: center;
+ flex-grow: 1;
+ height: 20px;
}
svg.searchVector {
- fill: white;
- height: 22px;
- width: 22px;
- padding: 0 3px;
+ fill: var(--filter-panel-fg);
+ height: 20px;
+ width: 20px;
}
div.search > input {
color: white;
padding: 0;
border: none;
background-color: transparent;
- font-weight: 600;
- font-size: 15px;
+ font-weight: var(--normal);
+ font-size: var(--s-font-14);
flex-grow: 1;
- margin-left: 3px;
+ margin-left: 8px;
}
div.search > input:focus {
outline: none;
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -9,6 +9,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as React from 'react';
+import { ChevronsLeft } from 'react-feather';
import { useDispatch } from 'react-redux';
import Switch from 'react-switch';
@@ -48,6 +49,7 @@
+includeDeleted: boolean,
+dispatch: Dispatch,
+pushModal: PushModal,
+ +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
};
type State = {
+query: string,
@@ -144,6 +146,9 @@
/>
{clearQueryButton}
</div>
+ <a onClick={this.props.toggleFilters} className={css.collapseButton}>
+ <ChevronsLeft size={30} />
+ </a>
</div>
<div className={css.filters}>{filters}</div>
<div className={css.extras}>
@@ -384,8 +389,14 @@
};
}
-const ConnectedFilterPanel: React.ComponentType<{}> = React.memo<{}>(
- function ConnectedFilterPanel(): React.Node {
+type ConnectedFilterPanelProps = {
+ +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
+};
+
+const ConnectedFilterPanel: React.ComponentType<ConnectedFilterPanelProps> =
+ React.memo<ConnectedFilterPanelProps>(function ConnectedFilterPanel(
+ props: ConnectedFilterPanelProps,
+ ): React.Node {
const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
const filteredCommunityThreadIDs = useSelector(
filterThreadIDsBelongingToCommunitySelector,
@@ -405,9 +416,9 @@
includeDeleted={includeDeleted}
dispatch={dispatch}
pushModal={modalContext.pushModal}
+ toggleFilters={props.toggleFilters}
/>
);
- },
-);
+ });
export default ConnectedFilterPanel;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -207,6 +207,8 @@
--filters-button-bg: var(--shades-black-100);
--filters-button-border: var(--shades-black-80);
--filters-button-hover-bg: var(--shades-black-90);
+ --filter-panel-fg: var(--shades-black-60);
+ --filter-panel-bg: #0d0d0d;
--topbar-button-bg-hover: var(--shades-black-80);
--topbar-button-fg: var(--shades-white-60);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 7:20 PM (18 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2597644
Default Alt Text
D6752.id23462.diff (4 KB)

Event Timeline