Page MenuHomePhorge
Files F32943629

D8136.1768259691.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D8136.1768259691.diff
View Options

diff --git a/web/components/dropdown.css b/web/components/dropdown.css
new file mode 100644
--- /dev/null
+++ b/web/components/dropdown.css
@@ -0,0 +1,81 @@
+.dropdownContainer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ padding: 20px;
+}
+
+.dropdownMenu {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 45px;
+ max-width: 350px;
+ padding: 0 10px;
+ background-color: var(--modal-bg);
+ border-color: var(--dropdown-select-border);
+ border-radius: 5px;
+ border-style: solid;
+}
+
+.dropdownMenu {
+ cursor: pointer;
+}
+
+.dropdownDisplayText {
+ color: var(--change-member-role-modal-generic-text);
+ font-family: var(--font-stack);
+ padding: 5px;
+}
+
+.dropdownIcon {
+ margin-left: auto;
+ font-size: var(--m-font-16);
+}
+
+.dropdownList {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 370px;
+ max-height: 200px;
+ overflow-y: auto;
+ padding: 0 10px;
+ list-style: none;
+ margin-top: -15px;
+ width: 100%;
+}
+
+.dropdownListItem {
+ color: var(--dropdown-text);
+ background-color: var(--dropdown-option-bg);
+ width: 100%;
+ height: 45px;
+ display: flex;
+ align-items: center;
+}
+
+.dropdownListItem:hover {
+ background-color: var(--dropdown-option-hover-bg);
+ cursor: pointer;
+}
+
+.dropdownListItemButton {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.dropdownListDisplayText {
+ color: var(--change-member-role-modal-generic-text);
+ font-family: var(--font-stack);
+ padding: 15px;
+}
+
+.dropdownListCheckIcon {
+ margin-left: auto;
+ margin-right: 10px;
+ color: var(--dropdown-selected-option-check-color);
+}
diff --git a/web/components/dropdown.react.js b/web/components/dropdown.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/dropdown.react.js
@@ -0,0 +1,88 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './dropdown.css';
+
+type DropdownOption = {
+ +id: ?string,
+ +name: string,
+};
+
+type DropdownProps = {
+ +options: $ReadOnlyArray<DropdownOption>,
+ +activeSelection: ?string,
+ +setActiveSelection: (?string) => mixed,
+};
+
+function Dropdown(props: DropdownProps): React.Node {
+ const { options, activeSelection, setActiveSelection } = props;
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ const toggleMenu = React.useCallback(() => setIsOpen(!isOpen), [isOpen]);
+
+ const handleSelection = React.useCallback(
+ selection => {
+ setActiveSelection(selection.id);
+ setIsOpen(false);
+ },
+ [setActiveSelection],
+ );
+
+ const activeDisplayedOption = React.useMemo(() => {
+ const activeOption = options.find(option => option.id === activeSelection);
+ invariant(activeOption, 'Active option must be in options list');
+ return activeOption.name;
+ }, [activeSelection, options]);
+
+ const dropdownList = React.useMemo(() => {
+ if (!isOpen) {
+ return null;
+ }
+
+ const dropdownOptions = options.map(option => {
+ const checkIcon =
+ option.id === activeSelection ? (
+ <SWMansionIcon icon="check" size={18} />
+ ) : null;
+
+ return (
+ <li
+ className={css.dropdownListItem}
+ key={option.id}
+ onClick={() => handleSelection(option)}
+ >
+ <button className={css.dropdownListItemButton}>
+ <p className={css.dropdownListDisplayText}>{option.name}</p>
+ </button>
+ <div className={css.dropdownListCheckIcon}>{checkIcon}</div>
+ </li>
+ );
+ });
+
+ return <ul className={css.dropdownList}>{dropdownOptions}</ul>;
+ }, [activeSelection, handleSelection, isOpen, options]);
+
+ return (
+ <>
+ <div className={css.dropdownContainer} onClick={toggleMenu}>
+ <div className={css.dropdownMenu}>
+ <p className={css.dropdownDisplayText}>{activeDisplayedOption}</p>
+ <div className={css.dropdownIcon}>
+ <SWMansionIcon
+ icon={isOpen ? 'chevron-up' : 'chevron-down'}
+ color="white"
+ size={18}
+ />
+ </div>
+ </div>
+ </div>
+ {dropdownList}
+ </>
+ );
+}
+
+export default Dropdown;
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -6,7 +6,6 @@
import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {
- memberIsAdmin,
removeMemberFromThread,
getAvailableThreadMemberActions,
} from 'lib/shared/thread-utils.js';
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -225,4 +225,10 @@
--pinned-count-text-color: var(--shades-white-90);
--modal-overlay-background-90: rgba(0, 0, 0, 0.9);
--modal-overlay-background-80: rgba(0, 0, 0, 0.8);
+ --dropdown-text: var(--shades-white-100);
+ --dropdown-select-bg: var(--shades-black-90);
+ --dropdown-select-border: var(--shades-white-60);
+ --dropdown-option-bg: var(--shades-black-80);
+ --dropdown-option-hover-bg: var(--shades-black-70);
+ --dropdown-selected-option-check-color: var(--violet-dark-100);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 12, 11:14 PM (12 h, 43 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5925224
Default Alt Text
D8136.1768259691.diff (5 KB)

Event Timeline