diff --git a/res/css/_components.scss b/res/css/_components.scss index 88fbbb5c3e..24d2ffa2b0 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -61,7 +61,9 @@ @import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; +@import "./views/dialogs/_CommunityPrototypeInviteDialog.scss"; @import "./views/dialogs/_ConfirmUserActionDialog.scss"; +@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss"; @import "./views/dialogs/_CreateGroupDialog.scss"; @import "./views/dialogs/_CreateRoomDialog.scss"; @import "./views/dialogs/_DeactivateAccountDialog.scss"; @@ -72,8 +74,6 @@ @import "./views/dialogs/_KeyboardShortcutsDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_NewSessionReviewDialog.scss"; -@import "./views/dialogs/_PrototypeCommunityInviteDialog.scss"; -@import "./views/dialogs/_PrototypeCreateGroupDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomSettingsDialogBridges.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; diff --git a/res/css/views/dialogs/_PrototypeCommunityInviteDialog.scss b/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss similarity index 82% rename from res/css/views/dialogs/_PrototypeCommunityInviteDialog.scss rename to res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss index 8d2ff598d8..beae03f00f 100644 --- a/res/css/views/dialogs/_PrototypeCommunityInviteDialog.scss +++ b/res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_PrototypeCommunityInviteDialog { +.mx_CommunityPrototypeInviteDialog { &.mx_Dialog_fixedWidth { width: 360px; } @@ -22,7 +22,7 @@ limitations under the License. .mx_Dialog_content { margin-bottom: 0; - .mx_PrototypeCommunityInviteDialog_people { + .mx_CommunityPrototypeInviteDialog_people { position: relative; margin-bottom: 4px; @@ -36,11 +36,11 @@ limitations under the License. } } - .mx_PrototypeCommunityInviteDialog_morePeople { + .mx_CommunityPrototypeInviteDialog_morePeople { margin-top: 8px; } - .mx_PrototypeCommunityInviteDialog_person { + .mx_CommunityPrototypeInviteDialog_person { position: relative; margin-top: 4px; @@ -55,21 +55,21 @@ limitations under the License. width: 16px; // to force a square } - .mx_PrototypeCommunityInviteDialog_personIdentifiers { + .mx_CommunityPrototypeInviteDialog_personIdentifiers { display: inline-block; & > * { display: block; } - .mx_PrototypeCommunityInviteDialog_personName { + .mx_CommunityPrototypeInviteDialog_personName { font-weight: 600; font-size: $font-14px; color: $primary-fg-color; margin-left: 7px; } - .mx_PrototypeCommunityInviteDialog_personId { + .mx_CommunityPrototypeInviteDialog_personId { font-size: $font-12px; color: $muted-fg-color; margin-left: 7px; @@ -77,7 +77,7 @@ limitations under the License. } } - .mx_PrototypeCommunityInviteDialog_primaryButton { + .mx_CommunityPrototypeInviteDialog_primaryButton { display: block; font-size: $font-13px; line-height: 20px; diff --git a/res/css/views/dialogs/_PrototypeCreateGroupDialog.scss b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss similarity index 79% rename from res/css/views/dialogs/_PrototypeCreateGroupDialog.scss rename to res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss index 3235575a88..81babc4c38 100644 --- a/res/css/views/dialogs/_PrototypeCreateGroupDialog.scss +++ b/res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss @@ -14,13 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_PrototypeCreateGroupDialog { +.mx_CreateCommunityPrototypeDialog { .mx_Dialog_content { display: flex; flex-direction: row; margin-bottom: 12px; - .mx_PrototypeCreateGroupDialog_colName { + .mx_CreateCommunityPrototypeDialog_colName { flex-basis: 66.66%; padding-right: 100px; @@ -29,7 +29,7 @@ limitations under the License. line-height: $font-20px; } - .mx_PrototypeCreateGroupDialog_subtext { + .mx_CreateCommunityPrototypeDialog_subtext { display: block; color: $muted-fg-color; margin-bottom: 16px; @@ -38,12 +38,12 @@ limitations under the License. margin-top: 16px; } - &.mx_PrototypeCreateGroupDialog_subtext_error { + &.mx_CreateCommunityPrototypeDialog_subtext_error { color: $warning-color; } } - .mx_PrototypeCreateGroupDialog_communityId { + .mx_CreateCommunityPrototypeDialog_communityId { position: relative; .mx_InfoTooltip { @@ -59,21 +59,21 @@ limitations under the License. } } - .mx_PrototypeCreateGroupDialog_colAvatar { + .mx_CreateCommunityPrototypeDialog_colAvatar { flex-basis: 33.33%; - .mx_PrototypeCreateGroupDialog_avatarContainer { + .mx_CreateCommunityPrototypeDialog_avatarContainer { margin-top: 12px; margin-bottom: 20px; - .mx_PrototypeCreateGroupDialog_avatar, - .mx_PrototypeCreateGroupDialog_placeholderAvatar { + .mx_CreateCommunityPrototypeDialog_avatar, + .mx_CreateCommunityPrototypeDialog_placeholderAvatar { width: 96px; height: 96px; border-radius: 96px; } - .mx_PrototypeCreateGroupDialog_placeholderAvatar { + .mx_CreateCommunityPrototypeDialog_placeholderAvatar { background-color: #368bd6; // hardcoded for both themes &::before { @@ -91,7 +91,7 @@ limitations under the License. } } - .mx_PrototypeCreateGroupDialog_tip { + .mx_CreateCommunityPrototypeDialog_tip { & > b, & > span { display: block; color: $muted-fg-color; diff --git a/src/RoomInvite.js b/src/RoomInvite.js index 3347a8288d..420561ea41 100644 --- a/src/RoomInvite.js +++ b/src/RoomInvite.js @@ -23,7 +23,7 @@ import Modal from './Modal'; import * as sdk from './'; import { _t } from './languageHandler'; import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog"; -import PrototypeCommunityInviteDialog from "./components/views/dialogs/PrototypeCommunityInviteDialog"; +import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog"; /** * Invites multiple addresses to a room @@ -59,7 +59,7 @@ export function showRoomInviteDialog(roomId) { export function showCommunityRoomInviteDialog(roomId, communityName) { Modal.createTrackedDialog( - 'Invite Users to Community', '', PrototypeCommunityInviteDialog, {communityName, roomId}, + 'Invite Users to Community', '', CommunityPrototypeInviteDialog, {communityName, roomId}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true, ); } diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 2b764d00c9..9d51062b7d 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -77,7 +77,7 @@ import ErrorDialog from "../views/dialogs/ErrorDialog"; import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore"; import { SettingLevel } from "../../settings/SettingLevel"; import { leaveRoomBehaviour } from "../../utils/membership"; -import PrototypeCreateGroupDialog from "../views/dialogs/PrototypeCreateGroupDialog"; +import CreateCommunityPrototypeDialog from "../views/dialogs/CreateCommunityPrototypeDialog"; /** constants for MatrixChat.state.view */ export enum Views { @@ -623,7 +623,7 @@ export default class MatrixChat extends React.PureComponent { case 'view_create_group': { let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog") if (SettingsStore.getValue("feature_communities_v2_prototypes")) { - CreateGroupDialog = PrototypeCreateGroupDialog; + CreateGroupDialog = CreateCommunityPrototypeDialog; } Modal.createTrackedDialog('Create Community', '', CreateGroupDialog); break; diff --git a/src/components/views/dialogs/PrototypeCommunityInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx similarity index 94% rename from src/components/views/dialogs/PrototypeCommunityInviteDialog.tsx rename to src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx index 08d3f0208a..7a500cd053 100644 --- a/src/components/views/dialogs/PrototypeCommunityInviteDialog.tsx +++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx @@ -56,7 +56,7 @@ interface IState { busy: boolean; } -export default class PrototypeCommunityInviteDialog extends React.PureComponent { +export default class CommunityPrototypeInviteDialog extends React.PureComponent { constructor(props: IProps) { super(props); @@ -145,7 +145,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent< private renderPerson(person: IPerson, key: any) { const avatarSize = 36; return ( -
+
-
- {person.user.name} - {person.userId} +
+ {person.user.name} + {person.userId}
this.setPersonToggle(person, e.target.checked)} />
@@ -206,14 +206,14 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent< {_t("Show more")} ); } } if (this.state.people.length > 0) { peopleIntro = ( -
+
{_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})} {this.state.showPeople ? _t("Hide") : _t("Show")} @@ -230,7 +230,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent< return ( @@ -242,7 +242,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent< {buttonText}
diff --git a/src/components/views/dialogs/PrototypeCreateGroupDialog.tsx b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx similarity index 88% rename from src/components/views/dialogs/PrototypeCreateGroupDialog.tsx rename to src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx index d37301b573..5f8321fd7d 100644 --- a/src/components/views/dialogs/PrototypeCreateGroupDialog.tsx +++ b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx @@ -37,7 +37,7 @@ interface IState { avatarPreview: string; } -export default class PrototypeCreateGroupDialog extends React.PureComponent { +export default class CreateCommunityPrototypeDialog extends React.PureComponent { private avatarUploadRef: React.RefObject = React.createRef(); constructor(props: IProps) { @@ -138,7 +138,7 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent + {_t("Community ID: +:%(domain)s", { domain: MatrixClientPeg.getHomeserverName(), }, { @@ -155,32 +155,32 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent + {_t("You can change this later if needed.")} ); if (this.state.error) { helpText = ( - + {this.state.error} ); } - let preview = ; + let preview = ; if (!this.state.avatarPreview) { - preview =
+ preview =
} return (
-
+
{helpText} - + {/*nbsp is to reserve the height of this element when there's nothing*/}  {communityId} @@ -196,16 +196,16 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent
-
+
- + {preview} -
+
{_t("Add image (optional)")} {_t("An image will help people identify your community.")} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c24a5537a3..f3cd1d80b7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1598,6 +1598,15 @@ "Unable to load commit detail: %(msg)s": "Unable to load commit detail: %(msg)s", "Unavailable": "Unavailable", "Changelog": "Changelog", + "Email address": "Email address", + "Add another email": "Add another email", + "People you know on %(brand)s": "People you know on %(brand)s", + "Hide": "Hide", + "Show": "Show", + "Skip": "Skip", + "Send %(count)s invites|other": "Send %(count)s invites", + "Send %(count)s invites|one": "Send %(count)s invite", + "Invite people to join %(communityName)s": "Invite people to join %(communityName)s", "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)", "Removing…": "Removing…", "Destroy cross-signing keys?": "Destroy cross-signing keys?", @@ -1608,6 +1617,15 @@ "Clear all data in this session?": "Clear all data in this session?", "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.", "Clear all data": "Clear all data", + "There was an error creating your community. The name may be taken or the server is unable to process your request.": "There was an error creating your community. The name may be taken or the server is unable to process your request.", + "Community ID: +:%(domain)s": "Community ID: +:%(domain)s", + "Use this when referencing your community to others. The community ID cannot be changed.": "Use this when referencing your community to others. The community ID cannot be changed.", + "You can change this later if needed.": "You can change this later if needed.", + "What's the name of your community or team?": "What's the name of your community or team?", + "Enter name": "Enter name", + "Create": "Create", + "Add image (optional)": "Add image (optional)", + "An image will help people identify your community.": "An image will help people identify your community.", "Community IDs cannot be empty.": "Community IDs cannot be empty.", "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Community IDs may only contain characters a-z, 0-9, or '=_-./'", "Something went wrong whilst creating your community": "Something went wrong whilst creating your community", @@ -1616,7 +1634,6 @@ "Example": "Example", "Community ID": "Community ID", "example": "example", - "Create": "Create", "Please enter a name for the room": "Please enter a name for the room", "Set a room address to easily share your room with other people.": "Set a room address to easily share your room with other people.", "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.", @@ -1729,23 +1746,6 @@ "Use this session to verify your new one, granting it access to encrypted messages:": "Use this session to verify your new one, granting it access to encrypted messages:", "If you didn’t sign in to this session, your account may be compromised.": "If you didn’t sign in to this session, your account may be compromised.", "This wasn't me": "This wasn't me", - "Email address": "Email address", - "Add another email": "Add another email", - "People you know on %(brand)s": "People you know on %(brand)s", - "Hide": "Hide", - "Show": "Show", - "Skip": "Skip", - "Send %(count)s invites|other": "Send %(count)s invites", - "Send %(count)s invites|one": "Send %(count)s invite", - "Invite people to join %(communityName)s": "Invite people to join %(communityName)s", - "There was an error creating your community. The name may be taken or the server is unable to process your request.": "There was an error creating your community. The name may be taken or the server is unable to process your request.", - "Community ID: +:%(domain)s": "Community ID: +:%(domain)s", - "Use this when referencing your community to others. The community ID cannot be changed.": "Use this when referencing your community to others. The community ID cannot be changed.", - "You can change this later if needed.": "You can change this later if needed.", - "What's the name of your community or team?": "What's the name of your community or team?", - "Enter name": "Enter name", - "Add image (optional)": "Add image (optional)", - "An image will help people identify your community.": "An image will help people identify your community.", "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.": "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.", "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.": "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.", "Report bugs & give feedback": "Report bugs & give feedback",