OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Iterate styling and decoration for the beta prompts

pull/21833/head
Michael Telatynski 2021-04-28 22:47:08 +01:00
parent 5a921bf38a
commit 1802adb4d2
7 changed files with 65 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
res/css/structures/_SpaceRoomView.scss
View File

@ -81,6 +81,7 @@ $SpaceRoomViewInnerWidth: 428px;
color: $secondary-fg-color;
margin-top: 12px;
margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth;
}
.mx_SpaceRoomView_buttons {
@ -374,6 +375,23 @@ $SpaceRoomViewInnerWidth: 428px;
}
.mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
padding: 58px 16px 16px;
position: relative;
border-radius: 8px;
background-color: $header-panel-bg-color;
max-width: $SpaceRoomViewInnerWidth;
margin: 20px 0 30px;
box-sizing: border-box;
.mx_BetaCard_betaPill {
position: absolute;
left: 16px;
top: 16px;
}
}
.mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-fg-color;
margin-top: 28px;

5
res/css/views/beta/_BetaCard.scss
View File

@ -29,6 +29,10 @@ limitations under the License.
line-height: $font-22px;
color: $primary-fg-color;
margin: 4px 0 14px;
.mx_BetaCard_betaPill {
margin-left: 12px;
}
}
.mx_BetaCard_caption {
@ -62,7 +66,6 @@ limitations under the License.
background-color: $accent-color-alt;
padding: 4px 10px;
border-radius: 8px;
margin-left: 12px;
text-transform: uppercase;
font-size: 12px;
line-height: 15px;

BIN
res/img/betas/spaces.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

18
src/components/structures/SpaceRoomView.tsx
View File

@ -438,11 +438,13 @@ const SpaceSetupPublicShare = ({ space, onFinished }) => {
</div>;
};
const SpaceSetupPrivateScope = ({ space, onFinished }) => {
const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
return <div className="mx_SpaceRoomView_privateScope">
<h1>{ _t("Who are you working with?") }</h1>
<div className="mx_SpaceRoomView_description">
{ _t("Make sure the right people have access to %(name)s", { name: space.name }) }
{ _t("Make sure the right people have access to %(name)s", {
name: justCreatedOpts?.createOpts?.name || space.name,
}) }
</div>
<AccessibleButton
@ -539,6 +541,17 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
{ _t("Make sure the right people have access. You can invite more later.") }
</div>
<div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
<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>,
link: () => <a href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
app.element.io
</a>,
}) }
</div>
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
{ fields }
@ -703,6 +716,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
case Phase.PrivateScope:
return <SpaceSetupPrivateScope
space={this.props.space}
justCreatedOpts={this.props.justCreatedOpts}
onFinished={(invite: boolean) => {
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
}}

2
src/components/views/beta/BetaCard.tsx
View File

@ -56,7 +56,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
{ value ? _t("Leave the beta") : _t("Join the beta") }
</AccessibleButton>
{ disclaimer && <div className="mx_BetaCard_disclaimer">
{ typeof disclaimer === "string" ? _t(disclaimer) : disclaimer() }
{ disclaimer(value) }
</div> }
</div>
<img src={image} alt="" />

6
src/i18n/strings/en_EN.json
View File

@ -786,7 +786,10 @@
"Change notification settings": "Change notification settings",
"Spaces": "Spaces",
"Spaces are a new way to group people and rooms for fun, work, yourself or anything in between.": "Spaces are a new way to group people and rooms for fun, work, yourself or anything in between.",
"%(brand)s will reload with Spaces enabled, and communities and custom tags disabled. You can leave the beta at anytime. Certain features will require a compatible homeserver. Beta only available for Web, Desktop, and Android.": "%(brand)s will reload with Spaces enabled, and communities and custom tags disabled. You can leave the beta at anytime. Certain features will require a compatible homeserver. Beta only available for Web, Desktop, and Android.",
"%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.",
"Beta available for web, desktop and Android. Thank you for trying the beta.": "Beta available for web, desktop and Android. Thank you for trying the beta.",
"%(brand)s will reload with Spaces enabled, communities and custom tags hidden.": "%(brand)s will reload with Spaces enabled, communities and custom tags hidden.",
"Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
"Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
"Send and receive voice messages (in development)": "Send and receive voice messages (in development)",
"Render LaTeX maths in messages": "Render LaTeX maths in messages",
@ -2683,6 +2686,7 @@
"Inviting...": "Inviting...",
"Invite your teammates": "Invite your teammates",
"Make sure the right people have access. You can invite more later.": "Make sure the right people have access. You can invite more later.",
"<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>This is an experimental feature.</b> For now, new users receiving an invite will have to open the invite on <link/> to actually join.",
"Invite by username": "Invite by username",
"What are some things you want to discuss in %(spaceName)s?": "What are some things you want to discuss in %(spaceName)s?",
"Let's create a room for each of them.": "Let's create a room for each of them.",

28
src/settings/Settings.ts → src/settings/Settings.tsx
View File

@ -16,7 +16,7 @@ limitations under the License.
*/
import { MatrixClient } from 'matrix-js-sdk/src/client';
import type { ReactNode } from "react";
import React, { ReactNode } from "react";
import { _t, _td } from '../languageHandler';
import {
@ -123,7 +123,7 @@ export interface ISetting {
betaInfo?: {
title: string; // _td
caption: string; // _td
disclaimer?: (() => ReactNode) | string; // _td
disclaimer?: (enabled: boolean) => ReactNode;
image: string; // require(...)
};
}
@ -138,11 +138,25 @@ export const SETTINGS: {[setting: string]: ISetting} = {
title: _td("Spaces"),
caption: _td("Spaces are a new way to group people and rooms for fun, " +
"work, yourself or anything in between."),
disclaimer: () => _t("%(brand)s will reload with Spaces enabled, " +
"and communities and custom tags disabled. " +
"You can leave the beta at anytime. " +
"Certain features will require a compatible homeserver. " +
"Beta only available for Web, Desktop, and Android.", { brand: SdkConfig.get().brand }),
disclaimer: (enabled) => {
if (enabled) {
return <>
<p>{ _t("%(brand)s will reload with Spaces disabled. " +
"Communities and custom tags will be visible again.", {
brand: SdkConfig.get().brand,
}) }</p>
<p>{ _t("Beta available for web, desktop and Android. Thank you for trying the beta.") }</p>
</>;
}
return <>
<p>{ _t("%(brand)s will reload with Spaces enabled, communities and custom tags hidden.", {
brand: SdkConfig.get().brand,
}) }</p>
<p>{ _t("Beta available for web, desktop and Android. " +
"Some features may be unavailable on your homeserver.") }</p>
</>;
},
image: require("../../res/img/betas/spaces.png"),
},
},