Page MenuHomePhorge
Files F32221640

D6158.1765198797.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D6158.1765198797.diff
View Options

diff --git a/web/sidebar/expand-buttons.css b/web/sidebar/expand-buttons.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/expand-buttons.css
@@ -0,0 +1,22 @@
+.wrapper {
+ width: 24px;
+ justify-content: center;
+ display: flex;
+}
+
+.button {
+ color: var(--drawer-expand-button);
+}
+
+.disabledButton {
+ color: var(--drawer-expand-button-disabled);
+}
+
+.sizeContainer {
+ font-size: 12px;
+ width: 24px;
+ height: 24px;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
diff --git a/web/sidebar/expand-buttons.react.js b/web/sidebar/expand-buttons.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/expand-buttons.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import Button from '../components/button.react';
+import css from './expand-buttons.css';
+
+type Props = {
+ +onClick: () => void,
+ +expanded: boolean,
+};
+
+function ExpandButton(props: Props): React.Node {
+ const icon = props.expanded ? faCaretDown : faCaretRight;
+
+ return (
+ <div className={css.wrapper}>
+ <Button onClick={props.onClick}>
+ <div className={css.sizeContainer}>
+ <FontAwesomeIcon icon={icon} className={css.button} />
+ </div>
+ </Button>
+ </div>
+ );
+}
+
+function ExpandButtonDisabled(): React.Node {
+ return (
+ <div className={classNames(css.wrapper, css.sizeContainer)}>
+ <FontAwesomeIcon icon={faCaretRight} className={css.disabledButton} />
+ </div>
+ );
+}
+
+export { ExpandButton, ExpandButtonDisabled };
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -194,4 +194,6 @@
--spoiler-text-color: var(--spoiler-color);
--spoiler-background-color: var(--spoiler-color);
--purple-link: var(--violet-light-100);
+ --drawer-expand-button: var(--shades-black-60);
+ --drawer-expand-button-disabled: var(--shades-black-80);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 8, 12:59 PM (12 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5848383
Default Alt Text
D6158.1765198797.diff (2 KB)

Event Timeline