Page MenuHomePhabricator
Files F2902598

D10524.diff
No OneTemporary
Actions

D10524.diff
View Options

diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js
--- a/web/components/tabs-header.js
+++ b/web/components/tabs-header.js
@@ -19,11 +19,15 @@
function TabsHeader<T: string>(props: Props<T>): React.Node {
const { children, isActive, setTab, id, headerStyle = 'underline' } = props;
+
const css = headerStyle === 'pill' ? cssPill : cssUnderline;
+
const headerClasses = classnames(css.tabHeader, {
- [css.backgroundTabHeader]: !isActive,
+ [css.inactiveTabHeader]: !isActive,
});
+
const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]);
+
return (
<Button className={headerClasses} onClick={onClickSetTab}>
{children}
diff --git a/web/components/tabs-legacy.react.js b/web/components/tabs-legacy.react.js
deleted file mode 100644
--- a/web/components/tabs-legacy.react.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import TabsHeader from './tabs-header.js';
-import type { TabsHeaderStyle } from './tabs-header.js';
-import cssPill from './tabs-pill.css';
-import cssUnderline from './tabs-underline.css';
-
-type TabsContainerProps<T: string> = {
- +children?: React.ChildrenArray<?React.Element<typeof TabsItem>>,
- +activeTab: T,
- +setTab: T => mixed,
- +headerStyle?: TabsHeaderStyle,
-};
-
-function TabsContainer<T: string>(props: TabsContainerProps<T>): React.Node {
- const { children, activeTab, setTab, headerStyle = 'underline' } = props;
-
- const css = headerStyle === 'pill' ? cssPill : cssUnderline;
-
- const headers = React.Children.map(children, tab => {
- const { id, header } = tab.props;
-
- const isActive = id === activeTab;
- return (
- <TabsHeader
- id={id}
- isActive={isActive}
- setTab={setTab}
- headerStyle={headerStyle}
- >
- {header}
- </TabsHeader>
- );
- });
-
- const currentTab = React.Children.toArray(children).find(
- tab => tab.props.id === activeTab,
- );
-
- const currentContent = currentTab ? currentTab.props.children : null;
-
- return (
- <div className={css.tabsContainer}>
- <div className={css.tabsHeaderContainer}>
- <div className={css.tabsHeaderContainerPill}>{headers}</div>
- </div>
- {currentContent}
- </div>
- );
-}
-
-type TabsItemProps<T: string> = {
- +children: React.Node,
- +id: T,
- +header: React.Node,
-};
-
-function TabsItem<T: string>(props: TabsItemProps<T>): React.Node {
- const { children } = props;
- return children;
-}
-
-const Tabs = {
- Container: TabsContainer,
- Item: TabsItem,
-};
-
-export default Tabs;
diff --git a/web/components/tabs-pill.css b/web/components/tabs-pill.css
--- a/web/components/tabs-pill.css
+++ b/web/components/tabs-pill.css
@@ -1,46 +1,24 @@
-div.tabsContainer {
- color: var(--fg);
- display: flex;
- flex-direction: column;
- overflow: hidden;
- max-height: 100%;
- flex: 1;
-}
-
-div.tabsHeaderContainer {
- border-bottom: 1px solid var(--border);
- height: 56px;
-}
-
-.tabsHeaderContainerPill {
- display: flex;
- background-color: var(--menu-bg);
- border-radius: 8px;
- margin: 8px;
- align-items: center;
-}
-
.tabHeader {
flex: 1;
font-size: var(--s-font-14);
font-weight: var(--semi-bold);
- color: var(--tabs-header-active-color);
+ color: var(--tab-label-primary-active);
height: 32px;
border-radius: 4px;
- background-color: var(--tabs-header-active-background);
+ background-color: var(--tab-indicator-primary-active);
margin: 4px;
}
-.backgroundTabHeader {
- color: var(--tabs-header-background-color-pill);
+.inactiveTabHeader {
+ color: var(--tab-label-primary-default);
background-color: transparent;
}
-.backgroundTabHeader:hover {
- color: var(--tabs-header-background-color-hover);
+.inactiveTabHeader:hover {
+ color: var(--tab-label-primary-hover);
transition: color 100ms;
}
-.backgroundTabHeader:not(:hover) {
+.inactiveTabHeader:not(:hover) {
transition: color 100ms;
}
diff --git a/web/components/tabs-underline.css b/web/components/tabs-underline.css
--- a/web/components/tabs-underline.css
+++ b/web/components/tabs-underline.css
@@ -1,35 +1,17 @@
-div.tabsContainer {
- color: var(--fg);
- display: flex;
- flex-direction: column;
- overflow: hidden;
- max-height: 100%;
- flex: 1;
-}
-
-div.tabsHeaderContainer {
- display: flex;
-}
-
-.tabsHeaderContainerPill {
- display: flex;
- width: 100%;
-}
-
.tabHeader {
flex: 1;
padding: 16px;
font-size: var(--m-font-16);
- color: var(--tabs-header-active-color);
- border-bottom: 2px solid var(--tabs-header-active-border);
+ color: var(--tab-label-secondary-active);
+ border-bottom: 2px solid var(--tab-indicator-secondary-active);
}
-.backgroundTabHeader {
- color: var(--tabs-header-background-color);
- border-bottom-color: var(--tabs-header-background-border);
+.inactiveTabHeader {
+ color: var(--tab-label-secondary-default);
+ border-bottom-color: var(--tab-indicator-secondary-default);
}
-.backgroundTabHeader:hover {
- color: var(--tabs-header-background-color-hover);
- border-bottom-color: var(--tabs-header-background-border-hover);
+.inactiveTabHeader:hover {
+ color: var(--tab-label-secondary-hover);
+ border-bottom-color: var(--tab-indicator-secondary-hover);
}
diff --git a/web/components/tabs.css b/web/components/tabs.css
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -3,7 +3,7 @@
}
.containerPill {
- background-color: var(--tab-background-primary-default);
+ background-color: var(--tab-indicator-primary-default);
margin: 8px;
border-radius: 8px;
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -338,7 +338,17 @@
--unreadIndicator-border-primary-default: var(--shades-black-85);
/* Tab */
- --tab-background-primary-default: var(--shades-black-85);
+ --tab-indicator-primary-default: var(--shades-black-85);
+ --tab-indicator-primary-active: var(--violet-dark-100);
+ --tab-label-primary-default: var(--shades-white-60);
+ --tab-label-primary-active: var(--shades-white-100);
+ --tab-label-primary-hover: var(--shades-white-80);
+ --tab-indicator-secondary-default: var(--shades-black-75);
+ --tab-indicator-secondary-active: var(--violet-light-100);
+ --tab-indicator-secondary-hover: var(--shades-black-60);
+ --tab-label-secondary-default: var(--shades-black-50);
+ --tab-label-secondary-active: var(--shades-white-100);
+ --tab-label-secondary-hover: var(--shades-white-80);
}
/* Light theme */
@@ -431,5 +441,15 @@
/* Tab */
/* @GINSU: TODO double check these values after redesign is finished */
- --tab-background-primary-default: var(--shades-white-60);
+ --tab-indicator-primary-default: var(--shades-white-60);
+ --tab-indicator-primary-active: var(--violet-dark-100);
+ --tab-label-primary-default: var(--shades-black-75);
+ --tab-label-primary-active: var(--shades-white-100);
+ --tab-label-primary-hover: var(--shades-black-95);
+ --tab-indicator-secondary-default: var(--shades-black-50);
+ --tab-indicator-secondary-active: var(--violet-dark-100);
+ --tab-indicator-secondary-hover: var(--shades-black-60);
+ --tab-label-secondary-default: var(--shades-black-60);
+ --tab-label-secondary-active: var(--shades-black-95);
+ --tab-label-secondary-hover: var(--shades-black-85);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 6, 6:15 PM (21 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2250515
Default Alt Text
D10524.diff (7 KB)

Event Timeline