Page MenuHomePhabricator
Files F3402245

D10350.id34694.diff
No OneTemporary
Actions

D10350.id34694.diff
View Options

diff --git a/web/navigation-sidebar/navigation-sidebar-constants.js b/web/navigation-sidebar/navigation-sidebar-constants.js
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-constants.js
@@ -0,0 +1,9 @@
+// @flow
+
+export const navigationSidebarTooltipStyle = {
+ paddingTop: 8,
+ paddingBottom: 8,
+ paddingLeft: 8,
+ paddingRight: 8,
+ height: 17,
+};
diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
@@ -0,0 +1,25 @@
+// @flow
+
+import * as React from 'react';
+
+import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js';
+import css from './navigation-sidebar-tooltip.css';
+
+type Props = {
+ +tooltipLabel: string,
+};
+
+function NavigationSidebarTooltip(props: Props): React.Node {
+ const { tooltipLabel } = props;
+
+ return (
+ <div className={css.container}>
+ <div className={css.arrowLeft} />
+ <div className={css.tooltipLabel} style={navigationSidebarTooltipStyle}>
+ {tooltipLabel}
+ </div>
+ </div>
+ );
+}
+
+export default NavigationSidebarTooltip;
diff --git a/web/navigation-sidebar/navigation-sidebar-tooltip.css b/web/navigation-sidebar/navigation-sidebar-tooltip.css
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-tooltip.css
@@ -0,0 +1,24 @@
+.container {
+ position: relative;
+ margin-left: 24px;
+}
+
+.arrowLeft {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 100%;
+ width: 0;
+ height: 0;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 10px solid var(--tooltip-background-primary-default);
+}
+
+.tooltipLabel {
+ border-radius: 4px;
+ background-color: var(--tooltip-background-primary-default);
+ color: var(--tooltip-label-primary-default);
+ font-size: var(--s-font-14);
+ white-space: nowrap;
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -313,6 +313,10 @@
--enumOption-description-primary-default: var(--shades-white-60);
--enumOption-input-primary-default: var(--shades-black-60);
--enumOption-input-primary-selected: var(--shades-white-60);
+
+ /* Tooltip */
+ --tooltip-background-primary-default: var(--shades-black-75);
+ --tooltip-label-primary-default: var(--shades-white-100);
}
/* Light theme */
@@ -379,4 +383,9 @@
--enumOption-description-primary-default: var(--shades-black-60);
--enumOption-input-primary-default: var(--shades-black-50);
--enumOption-input-primary-selected: var(--shades-black-60);
+
+ /* Tooltip */
+ /* @GINSU: TODO double check these values after redesign is finished */
+ --tooltip-background-primary-default: var(--shades-white-80);
+ --tooltip-label-primary-default: var(--shades-black-85);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 3:36 PM (2 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2611898
Default Alt Text
D10350.id34694.diff (2 KB)

Event Timeline