Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #6594 from matrix-org/t3chguy/fix/18088
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy committed Sep 16, 2021
2 parents edf7764 + e17318a commit bbc8e4d
Show file tree
Hide file tree
Showing 29 changed files with 355 additions and 227 deletions.
6 changes: 0 additions & 6 deletions res/css/structures/_GroupFilterPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,6 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
.mx_GroupFilterPanel .mx_TagTile {
// opacity: 0.5;
position: relative;

.mx_BetaDot {
position: absolute;
right: -13px;
top: -11px;
}
}

.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
Expand Down
23 changes: 14 additions & 9 deletions res/css/structures/_SpacePanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,16 @@ $activeBorderColor: $secondary-content;
}
}

.mx_SpaceItem_new {
position: relative;

.mx_BetaDot {
position: absolute;
left: 33px;
top: -5px;
}
}

.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize;
min-width: 40px;
Expand Down Expand Up @@ -194,22 +204,17 @@ $activeBorderColor: $secondary-content;
}

&.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $accent-color;
transition: all .1s ease-in-out; // TODO transition
background-color: $roomlist-button-bg-color;

&::before {
background-color: #ffffff;
background-color: $primary-content;
mask-image: url('$(res)/img/element-icons/plus.svg');
transition: all .2s ease-in-out; // TODO transition
}
}

&.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
background-color: $icon-button-color;

&::before {
transform: rotate(45deg);
}
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
transform: rotate(45deg);
}

.mx_BaseAvatar_image {
Expand Down
7 changes: 4 additions & 3 deletions res/css/structures/_SpaceRoomView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,10 @@ $SpaceRoomViewInnerWidth: 428px;
}
}

> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
> .mx_RoomAvatar_isSpaceRoom {
&.mx_BaseAvatar_image, .mx_BaseAvatar_image {
border-radius: 12px;
}
}

h1.mx_SpaceRoomView_preview_name {
Expand Down
1 change: 1 addition & 0 deletions res/css/views/beta/_BetaCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ $dot-size: 12px;
animation: mx_Beta_bluePulse 2s infinite;
animation-iteration-count: 20;
position: relative;
pointer-events: none;

&::after {
content: "";
Expand Down
11 changes: 11 additions & 0 deletions res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@ limitations under the License.

.mx_SettingsTab_section {
margin-bottom: 30px;

> details {
> summary {
cursor: pointer;
color: $primary-content;
}

& + .mx_SettingsFlag {
margin-top: 20px;
}
}
}

.mx_PreferencesUserSettingsTab_CommunityMigrator {
Expand Down
Empty file added res/img/betas/.gitkeep
Empty file.
Binary file removed res/img/betas/spaces.png
Binary file not shown.
10 changes: 2 additions & 8 deletions src/components/structures/GroupFilterPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -146,19 +146,13 @@ class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFil
mx_GroupFilterPanel_items_selected: itemsSelected,
});

let betaDot;
if (SettingsStore.getBetaInfo("feature_spaces") && !localStorage.getItem("mx_seenSpacesBeta")) {
betaDot = <div className="mx_BetaDot" />;
}

let createButton = (
<ActionButton
tooltip
label={_t("Communities")}
action="toggle_my_groups"
className="mx_TagTile mx_TagTile_plus">
{ betaDot }
</ActionButton>
className="mx_TagTile mx_TagTile_plus"
/>
);

if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
Expand Down
116 changes: 116 additions & 0 deletions src/components/structures/LegacyCommunityPreview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { useContext } from "react";

import MatrixClientContext from "../../contexts/MatrixClientContext";
import { _t } from "../../languageHandler";
import AccessibleButton from "../views/elements/AccessibleButton";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import { IGroupSummary } from "../views/dialogs/CreateSpaceFromCommunityDialog";
import { useAsyncMemo } from "../../hooks/useAsyncMemo";
import Spinner from "../views/elements/Spinner";
import GroupAvatar from "../views/avatars/GroupAvatar";
import { linkifyElement } from "../../HtmlUtils";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { Action } from "../../dispatcher/actions";
import { UserTab } from "../views/dialogs/UserSettingsDialog";
import MainSplit from './MainSplit';

interface IProps {
groupId: string;
}

const onSwapClick = () => {
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Preferences,
});
};

// XXX: temporary community migration component, reuses SpaceRoomView & SpacePreview classes for simplicity
const LegacyCommunityPreview = ({ groupId }: IProps) => {
const cli = useContext(MatrixClientContext);

const groupSummary = useAsyncMemo<IGroupSummary>(() => cli.getGroupSummary(groupId), [cli, groupId]);

if (!groupSummary) {
return <main className="mx_SpaceRoomView">
<MainSplit>
<div className="mx_SpaceRoomView_preview">
<Spinner />
</div>
</MainSplit>
</main>;
}

let visibilitySection: JSX.Element;
if (groupSummary.profile.is_public) {
visibilitySection = <span className="mx_SpaceRoomView_info_public">
{ _t("Public community") }
</span>;
} else {
visibilitySection = <span className="mx_SpaceRoomView_info_private">
{ _t("Private community") }
</span>;
}

return <main className="mx_SpaceRoomView">
<ErrorBoundary>
<MainSplit>
<div className="mx_SpaceRoomView_preview">
<GroupAvatar
groupId={groupId}
groupName={groupSummary.profile.name}
groupAvatarUrl={groupSummary.profile.avatar_url}
height={80}
width={80}
resizeMethod='crop'
/>
<h1 className="mx_SpaceRoomView_preview_name">
{ groupSummary.profile.name }
</h1>
<div className="mx_SpaceRoomView_info">
{ visibilitySection }
</div>
<div className="mx_SpaceRoomView_preview_topic" ref={e => e && linkifyElement(e)}>
{ groupSummary.profile.short_description }
</div>
<div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
{ groupSummary.user?.membership === "join"
? _t("To view %(communityName)s, swap to communities in your <a>preferences</a>", {
communityName: groupSummary.profile.name,
}, {
a: sub => (
<AccessibleButton onClick={onSwapClick} kind="link">{ sub }</AccessibleButton>
),
})
: _t("To join %(communityName)s, swap to communities in your <a>preferences</a>", {
communityName: groupSummary.profile.name,
}, {
a: sub => (
<AccessibleButton onClick={onSwapClick} kind="link">{ sub }</AccessibleButton>
),
})
}
</div>
</div>
</MainSplit>
</ErrorBoundary>
</main>;
};

export default LegacyCommunityPreview;
15 changes: 10 additions & 5 deletions src/components/structures/LoggedInView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import classNames from 'classnames';
import GroupFilterPanel from './GroupFilterPanel';
import CustomRoomTagPanel from './CustomRoomTagPanel';
import { mediaFromMxc } from "../../customisations/Media";
import LegacyCommunityPreview from "./LegacyCommunityPreview";

// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
Expand Down Expand Up @@ -629,11 +630,15 @@ class LoggedInView extends React.Component<IProps, IState> {
pageElement = <UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />;
break;
case PageTypes.GroupView:
pageElement = <GroupView
groupId={this.props.currentGroupId}
isNew={this.props.currentGroupIsNew}
resizeNotifier={this.props.resizeNotifier}
/>;
if (SpaceStore.spacesEnabled) {
pageElement = <LegacyCommunityPreview groupId={this.props.currentGroupId} />;
} else {
pageElement = <GroupView
groupId={this.props.currentGroupId}
isNew={this.props.currentGroupIsNew}
resizeNotifier={this.props.resizeNotifier}
/>;
}
break;
}

Expand Down
5 changes: 0 additions & 5 deletions src/components/structures/MatrixChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1800,11 +1800,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
subAction: params.action,
});
} else if (screen.indexOf('group/') === 0) {
if (SpaceStore.spacesEnabled) {
dis.dispatch({ action: "view_home_page" });
return;
}

const groupId = screen.substring(6);

// TODO: Check valid group ID
Expand Down
2 changes: 0 additions & 2 deletions src/components/structures/MyGroups.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import AccessibleButton from '../views/elements/AccessibleButton';
import MatrixClientContext from "../../contexts/MatrixClientContext";
import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent";
import BetaCard from "../views/beta/BetaCard";

@replaceableComponent("structures.MyGroups")
export default class MyGroups extends React.Component {
Expand Down Expand Up @@ -138,7 +137,6 @@ export default class MyGroups extends React.Component {
</div>
</div>*/ }
</div>
<BetaCard featureId="feature_spaces" title={_t("Communities are changing to Spaces")} />
<div className="mx_MyGroups_content">
{ contentHeader }
{ content }
Expand Down
18 changes: 7 additions & 11 deletions src/components/structures/SpaceRoomView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,10 @@ const SpaceInfo = ({ space }) => {
</div>;
};

const onBetaClick = () => {
const onPreferencesClick = () => {
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
initialTabId: UserTab.Preferences,
});
};

Expand Down Expand Up @@ -286,15 +286,11 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp
if (!spacesEnabled) {
footer = <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
{ myMembership === "join"
? _t("To view %(spaceName)s, turn on the <a>Spaces beta</a>", {
spaceName: space.name,
}, {
a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
? _t("To view this Space, hide communities in your <a>preferences</a>", {}, {
a: sub => <AccessibleButton onClick={onPreferencesClick} kind="link">{ sub }</AccessibleButton>,
})
: _t("To join %(spaceName)s, turn on the <a>Spaces beta</a>", {
spaceName: space.name,
}, {
a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
: _t("To join this Space, hide communities in your <a>preferences</a>", {}, {
a: sub => <AccessibleButton onClick={onPreferencesClick} kind="link">{ sub }</AccessibleButton>,
})
}
</div>;
Expand Down Expand Up @@ -731,7 +727,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
</div>

<div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
<BetaPill onClick={onBetaClick} />
<BetaPill />
{ _t("<b>This is an experimental feature.</b> For now, " +
"new users receiving an invite will have to open the invite on <link/> to actually join.", {}, {
b: sub => <b>{ sub }</b>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { replaceableComponent } from "../../../../../utils/replaceableComponent"
import SettingsFlag from '../../../elements/SettingsFlag';
import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
import AccessibleButton from "../../../elements/AccessibleButton";
import SpaceStore from "../../../../../stores/SpaceStore";
import GroupAvatar from "../../../avatars/GroupAvatar";
import dis from "../../../../../dispatcher/dispatcher";
import GroupActions from "../../../../../actions/GroupActions";
Expand Down Expand Up @@ -145,7 +144,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
];

static COMMUNITIES_SETTINGS = [
// TODO: part of delabsing move the toggle here - https://github.com/vector-im/element-web/issues/18088
"showCommunitiesInsteadOfSpaces",
];

static KEYBINDINGS_SETTINGS = [
Expand Down Expand Up @@ -286,9 +285,17 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
};

private renderGroup(settingIds: string[]): React.ReactNodeArray {
return settingIds.filter(SettingsStore.isEnabled).map(i => {
return <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />;
private renderGroup(
settingIds: string[],
level = SettingLevel.ACCOUNT,
includeDisabled = false,
): React.ReactNodeArray {
if (!includeDisabled) {
settingIds = settingIds.filter(SettingsStore.isEnabled);
}

return settingIds.map(i => {
return <SettingsFlag key={i} name={i} level={level} />;
});
}

Expand Down Expand Up @@ -334,10 +341,10 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
{ this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
</div>

{ SpaceStore.spacesEnabled && <div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{ _t("Spaces") }</span>
{ this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
</div> }
{ this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT, true) }
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{ _t("Communities") }</span>
Expand All @@ -349,7 +356,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
<p>{ _t("If a community isn't shown you may not have permission to convert it.") }</p>
<CommunityMigrator onFinished={this.props.closeSettingsFn} />
</details>
{ this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS) }
{ this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS, SettingLevel.DEVICE) }
</div>

<div className="mx_SettingsTab_section">
Expand Down
Loading

0 comments on commit bbc8e4d

Please sign in to comment.