Page MenuHomePhabricator
Files F2761172

D10500.id35166.diff
No OneTemporary
Actions

D10500.id35166.diff
View Options

diff --git a/web/app-list/app-list-header.css b/web/app-list/app-list-header.css
--- a/web/app-list/app-list-header.css
+++ b/web/app-list/app-list-header.css
@@ -2,11 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- background-color: var(--card-background-primary-default);
padding: 16px;
- box-shadow: 0px 1px 3px 0px var(--card-headerShadow-primary-default);
- z-index: 0;
- border-radius: 8px 8px 0 0;
}
.headerLabel {
diff --git a/web/app-list/app-list.css b/web/app-list/app-list.css
--- a/web/app-list/app-list.css
+++ b/web/app-list/app-list.css
@@ -1,6 +1,4 @@
.container {
- display: flex;
- flex-direction: column;
min-width: 160px;
}
@@ -8,8 +6,5 @@
display: flex;
flex-direction: column;
row-gap: 16px;
- background-color: var(--card-background-primary-default);
padding: 16px;
- flex: 1;
- border-radius: 0 0 8px 8px;
}
diff --git a/web/app-list/app-list.react.js b/web/app-list/app-list.react.js
--- a/web/app-list/app-list.react.js
+++ b/web/app-list/app-list.react.js
@@ -8,6 +8,7 @@
import AppListHeader from './app-list-header.react.js';
import AppListItem from './app-list-item.react.js';
import css from './app-list.css';
+import Panel, { type PanelData } from '../components/panel.react.js';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -80,16 +81,22 @@
[calendarAppListItem, onClickInbox],
);
- const appList = React.useMemo(
- () => (
- <div className={css.container}>
- <AppListHeader />
- {appListBody}
- </div>
- ),
+ const panelData: $ReadOnlyArray<PanelData> = React.useMemo(
+ () => [
+ {
+ header: <AppListHeader />,
+ body: appListBody,
+ classNameOveride: css.container,
+ },
+ ],
[appListBody],
);
+ const appList = React.useMemo(
+ () => <Panel panelItems={panelData} />,
+ [panelData],
+ );
+
return appList;
}
diff --git a/web/components/panel.css b/web/components/panel.css
new file mode 100644
--- /dev/null
+++ b/web/components/panel.css
@@ -0,0 +1,32 @@
+.container {
+ display: flex;
+ height: 100%;
+}
+
+.itemContainer {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--card-background-primary-default);
+}
+
+.secondaryItemContainer {
+ background-color: var(--card-background-secondary-default);
+}
+
+.singleItemContainer {
+ border-radius: 8px;
+}
+
+.firstMultiItemContainer {
+ border-radius: 8px 0 0 8px;
+}
+
+.lastMultiItemContainer {
+ border-radius: 0 8px 8px 0;
+}
+
+.headerContainer {
+ height: 56px;
+ box-shadow: 0px 1px 3px 0px var(--card-headerShadow-primary-default);
+ clip-path: inset(0 0 -3px 0);
+}
diff --git a/web/components/panel.react.js b/web/components/panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/panel.react.js
@@ -0,0 +1,69 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import css from './panel.css';
+
+export type PanelData = {
+ +header: React.Node,
+ +body: React.Node,
+ +classNameOveride?: string,
+};
+
+type PanelItemProps = {
+ ...PanelData,
+ +index: number,
+ +numOfItems: number,
+};
+
+function PanelItem(props: PanelItemProps): React.Node {
+ const { header, body, index, numOfItems, classNameOveride } = props;
+
+ const className = classnames(
+ {
+ [css.itemContainer]: true,
+ [css.secondaryItemContainer]: index % 2 === 1,
+ [css.singleItemContainer]: numOfItems === 1,
+ [css.firstMultiItemContainer]: numOfItems > 1 && index === 0,
+ [css.lastMultiItemContainer]: numOfItems > 1 && index === numOfItems - 1,
+ },
+ classNameOveride,
+ );
+
+ return (
+ <div className={className}>
+ <div className={css.headerContainer}>{header}</div>
+ {body}
+ </div>
+ );
+}
+
+type PanelProps = {
+ +panelItems: $ReadOnlyArray<PanelData>,
+};
+
+function Panel(props: PanelProps): React.Node {
+ const { panelItems } = props;
+
+ const items = React.useMemo(
+ () =>
+ panelItems.map((item, index) => {
+ return (
+ <PanelItem
+ key={index}
+ header={item.header}
+ body={item.body}
+ classNameOveride={item.classNameOveride}
+ index={index}
+ numOfItems={panelItems.length}
+ />
+ );
+ }),
+ [panelItems],
+ );
+
+ return <div className={css.container}>{items}</div>;
+}
+
+export default Panel;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -267,6 +267,7 @@
/* Card */
--card-background-primary-default: var(--shades-black-85);
+ --card-background-secondary-default: var(--shades-black-90);
--card-headerShadow-primary-default: var(--shadow-dark-35);
/* Button */
@@ -353,6 +354,7 @@
/* Card */
/* @GINSU: TODO double check these values after redesign is finished */
--card-background-primary-default: var(--shades-white-80);
+ --card-background-secondary-default: var(--shades-white-90);
--card-headerShadow-primary-default: var(--shadow-light-35);
/* Button */

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 7:31 AM (13 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2143034
Default Alt Text
D10500.id35166.diff (5 KB)

Event Timeline