Focus group description input when editing it
This commit is contained in:
parent
c986a1c644
commit
66d9bb8418
4 changed files with 52 additions and 25 deletions
|
@ -2614,21 +2614,19 @@ button.module-conversation-details__action-button {
|
||||||
|
|
||||||
.module-conversation-details {
|
.module-conversation-details {
|
||||||
&-header {
|
&-header {
|
||||||
&__root,
|
&__root {
|
||||||
&__root--editable {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: inherit;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0;
|
margin: 0 0 24px 0;
|
||||||
outline: inherit;
|
|
||||||
padding: 0 0 24px 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__root--editable {
|
||||||
|
@include button-reset();
|
||||||
|
}
|
||||||
|
|
||||||
&__root--editable {
|
&__root--editable {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,8 @@ import { getCustomColorStyle } from '../../../util/getCustomColorStyle';
|
||||||
|
|
||||||
enum ModalState {
|
enum ModalState {
|
||||||
NothingOpen,
|
NothingOpen,
|
||||||
EditingGroupAttributes,
|
EditingGroupDescription,
|
||||||
|
EditingGroupTitle,
|
||||||
AddingGroupMembers,
|
AddingGroupMembers,
|
||||||
CustomDisappearingTimeout,
|
CustomDisappearingTimeout,
|
||||||
}
|
}
|
||||||
|
@ -142,10 +143,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
|
||||||
case ModalState.NothingOpen:
|
case ModalState.NothingOpen:
|
||||||
modalNode = undefined;
|
modalNode = undefined;
|
||||||
break;
|
break;
|
||||||
case ModalState.EditingGroupAttributes:
|
case ModalState.EditingGroupDescription:
|
||||||
|
case ModalState.EditingGroupTitle:
|
||||||
modalNode = (
|
modalNode = (
|
||||||
<EditConversationAttributesModal
|
<EditConversationAttributesModal
|
||||||
avatarPath={conversation.avatarPath}
|
avatarPath={conversation.avatarPath}
|
||||||
|
focusDescription={modalState === ModalState.EditingGroupDescription}
|
||||||
groupDescription={conversation.groupDescription}
|
groupDescription={conversation.groupDescription}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
makeRequest={async (
|
makeRequest={async (
|
||||||
|
@ -269,8 +272,12 @@ export const ConversationDetails: React.ComponentType<Props> = ({
|
||||||
conversation={conversation}
|
conversation={conversation}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
memberships={memberships}
|
memberships={memberships}
|
||||||
startEditing={() => {
|
startEditing={(isGroupTitle: boolean) => {
|
||||||
setModalState(ModalState.EditingGroupAttributes);
|
setModalState(
|
||||||
|
isGroupTitle
|
||||||
|
? ModalState.EditingGroupTitle
|
||||||
|
: ModalState.EditingGroupDescription
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@ export type Props = {
|
||||||
conversation: ConversationType;
|
conversation: ConversationType;
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
memberships: Array<GroupV2Membership>;
|
memberships: Array<GroupV2Membership>;
|
||||||
startEditing: () => void;
|
startEditing: (isGroupTitle: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const bem = bemGenerator('module-conversation-details-header');
|
const bem = bemGenerator('module-conversation-details-header');
|
||||||
|
@ -58,24 +58,36 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
|
||||||
<div className={bem('title')}>
|
<div className={bem('title')}>
|
||||||
<Emojify text={conversation.title} />
|
<Emojify text={conversation.title} />
|
||||||
</div>
|
</div>
|
||||||
<div className={bem('subtitle')}>{subtitle}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (canEdit) {
|
if (canEdit) {
|
||||||
return (
|
return (
|
||||||
<button
|
<div className={bem('root')}>
|
||||||
type="button"
|
<button
|
||||||
onClick={ev => {
|
type="button"
|
||||||
ev.preventDefault();
|
onClick={ev => {
|
||||||
ev.stopPropagation();
|
ev.preventDefault();
|
||||||
startEditing();
|
ev.stopPropagation();
|
||||||
}}
|
startEditing(true);
|
||||||
className={bem('root', 'editable')}
|
}}
|
||||||
>
|
className={bem('root', 'editable')}
|
||||||
{contents}
|
>
|
||||||
</button>
|
{contents}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={ev => {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.stopPropagation();
|
||||||
|
startEditing(false);
|
||||||
|
}}
|
||||||
|
className={bem('root', 'editable')}
|
||||||
|
>
|
||||||
|
<div className={bem('subtitle')}>{subtitle}</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,6 +25,7 @@ const TEMPORARY_AVATAR_VALUE = new ArrayBuffer(0);
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
avatarPath?: string;
|
avatarPath?: string;
|
||||||
|
focusDescription?: boolean;
|
||||||
groupDescription?: string;
|
groupDescription?: string;
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
makeRequest: (
|
makeRequest: (
|
||||||
|
@ -39,8 +40,15 @@ type PropsType = {
|
||||||
title: string;
|
title: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function focusRef(el: HTMLElement | null) {
|
||||||
|
if (el) {
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
||||||
avatarPath: externalAvatarPath,
|
avatarPath: externalAvatarPath,
|
||||||
|
focusDescription = false,
|
||||||
groupDescription: externalGroupDescription = '',
|
groupDescription: externalGroupDescription = '',
|
||||||
i18n,
|
i18n,
|
||||||
makeRequest,
|
makeRequest,
|
||||||
|
@ -156,6 +164,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
||||||
disabled={isRequestActive}
|
disabled={isRequestActive}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
onChangeValue={setRawTitle}
|
onChangeValue={setRawTitle}
|
||||||
|
ref={!focusDescription ? focusRef : undefined}
|
||||||
value={rawTitle}
|
value={rawTitle}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -163,6 +172,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
||||||
disabled={isRequestActive}
|
disabled={isRequestActive}
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
onChangeValue={setRawGroupDescription}
|
onChangeValue={setRawGroupDescription}
|
||||||
|
ref={focusDescription ? focusRef : undefined}
|
||||||
value={rawGroupDescription}
|
value={rawGroupDescription}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue