Page MenuHomePhorge
Files F32562256

D11066.1767336412.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D11066.1767336412.diff
View Options

diff --git a/web/modals/threads/create/compose-subchannel-modal.css b/web/modals/threads/create/compose-subchannel-modal.css
--- a/web/modals/threads/create/compose-subchannel-modal.css
+++ b/web/modals/threads/create/compose-subchannel-modal.css
@@ -1,33 +1,22 @@
div.modalHeader {
padding: 15px;
font-weight: var(--semi-bold);
- color: var(--compose-subchannel-header-fg);
- background-color: var(--compose-subchannel-header-bg);
+ color: var(--text-background-tertiary-default);
+ background-color: var(--frame-background-tertiary-default);
display: flex;
align-items: center;
justify-content: center;
- margin-top: 30px;
column-gap: 10px;
}
div.modalHeaderParentName {
- color: var(--compose-subchannel-mark-color);
+ color: var(--link-background-secondary-default);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.container {
- width: 383px;
- overflow-y: auto;
-}
-
-div.stepContainer {
- position: relative;
- height: 100vh;
- max-height: 533px;
-}
-
-div.stepItem {
- padding: 20px;
+ height: 60vh;
+ overflow: auto;
}
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -18,7 +18,7 @@
import SubchannelMembers from './steps/subchannel-members.react.js';
import type { VisibilityType } from './steps/subchannel-settings.react.js';
import SubchannelSettings from './steps/subchannel-settings.react.js';
-import Stepper from '../../../components/stepper.react.js';
+import Button from '../../../components/button.react.js';
import { updateNavInfoActionType } from '../../../redux/action-types.js';
import { useSelector } from '../../../redux/redux-utils.js';
import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
@@ -183,40 +183,6 @@
],
);
- const stepperButtons = React.useMemo(
- () => ({
- settings: {
- nextProps: {
- content: 'Next',
- disabled: !channelName.trim(),
- onClick: () => {
- setErrorMessage('');
- setChannelName(channelName.trim());
- setActiveStep('members');
- },
- },
- },
- members: {
- prevProps: {
- content: 'Back',
- onClick: () => setActiveStep('settings'),
- },
- nextProps: {
- content: 'Create',
- loading: loadingState === 'loading',
- disabled: pendingUsersToAdd.size === 0,
- onClick: dispatchCreateSubchannel,
- },
- },
- }),
- [
- channelName,
- dispatchCreateSubchannel,
- loadingState,
- pendingUsersToAdd.size,
- ],
- );
-
const subchannelMembers = React.useMemo(
() => <SubchannelMembers parentThreadInfo={parentThreadInfo} />,
[parentThreadInfo],
@@ -227,29 +193,81 @@
? `Create channel - ${trimText(channelName, 11)}`
: 'Create channel';
+ const subheader = React.useMemo(
+ () => <ComposeSubchannelHeader parentThreadName={parentThreadName} />,
+ [parentThreadName],
+ );
+
+ const modalContent = React.useMemo(() => {
+ if (activeStep === 'settings') {
+ return subchannelSettings;
+ }
+ return subchannelMembers;
+ }, [activeStep, subchannelMembers, subchannelSettings]);
+
+ const onClickNext = React.useCallback(() => {
+ setErrorMessage('');
+ setChannelName(channelName.trim());
+ setActiveStep('members');
+ }, [channelName]);
+
+ const primaryButton = React.useMemo(() => {
+ if (activeStep === 'settings') {
+ return (
+ <Button
+ disabled={!channelName.trim()}
+ variant="filled"
+ onClick={onClickNext}
+ >
+ Next
+ </Button>
+ );
+ }
+
+ return (
+ <Button
+ disabled={loadingState === 'loading' || pendingUsersToAdd.size === 0}
+ variant="filled"
+ onClick={dispatchCreateSubchannel}
+ >
+ Create
+ </Button>
+ );
+ }, [
+ activeStep,
+ channelName,
+ dispatchCreateSubchannel,
+ loadingState,
+ onClickNext,
+ pendingUsersToAdd.size,
+ ]);
+
+ const onClickBack = React.useCallback(() => setActiveStep('settings'), []);
+
+ const secondaryButton = React.useMemo(() => {
+ if (activeStep !== 'members') {
+ return null;
+ }
+
+ return (
+ <Button variant="outline" onClick={onClickBack}>
+ Back
+ </Button>
+ );
+ }, [activeStep, onClickBack]);
+
return (
- <Modal name={modalName} onClose={onClose} size="fit-content">
+ <Modal
+ name={modalName}
+ onClose={onClose}
+ size="large"
+ subheader={subheader}
+ primaryButton={primaryButton}
+ secondaryButton={secondaryButton}
+ >
<div className={css.container}>
- <ComposeSubchannelHeader parentThreadName={parentThreadName} />
- <div className={css.stepItem}>
- <Stepper.Container
- className={css.stepContainer}
- activeStep={activeStep}
- >
- <Stepper.Item
- content={subchannelSettings}
- name="settings"
- nextProps={stepperButtons.settings.nextProps}
- />
- <Stepper.Item
- content={subchannelMembers}
- name="members"
- prevProps={stepperButtons.members.prevProps}
- nextProps={stepperButtons.members.nextProps}
- errorMessage={errorMessage}
- />
- </Stepper.Container>
- </div>
+ {modalContent}
+ {errorMessage}
</div>
</Modal>
);
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -182,10 +182,6 @@
--inline-engagement-bg: var(--shades-black-60);
--inline-engagement-bg-hover: var(--shades-black-75);
--inline-engagement-color: var(--fg);
- --compose-subchannel-header-fg: var(--shades-black-50);
- --compose-subchannel-header-bg: var(--shades-black-75);
- --compose-subchannel-label-color: var(--shades-black-50);
- --compose-subchannel-mark-color: var(--violet-light-100);
--enum-option-icon-color: var(--violet-dark-100);
--show-password-bg-hover: var(--shades-black-60);
--typeahead-overlay-light: var(--shades-black-75);

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 6:46 AM (4 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5878549
Default Alt Text
D11066.1767336412.diff (6 KB)

Event Timeline