PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #2750 from matrix-org/dbkr/shameless_plugging_2

Browse source 
Support linking to hosting providers
This commit is contained in:
David Baker 2019-03-05 18:34:54 +00:00 committed by GitHub
commit ff4963e662
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 168 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_GroupView.scss
View file

@ -62,6 +62,10 @@ limitations under the License.
mask-image: url('$(res)/img/icons-share.svg');
}
.mx_GroupView_hostingSignup img {
margin-left: 5px;
}
.mx_GroupView_editable {
border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;

28
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -15,17 +15,39 @@ limitations under the License.
*/
.mx_TopLeftMenu {
min-width: 180px;
min-width: 210px;
border-radius: 4px;
.mx_TopLeftMenu_greyedText {
font-size: 12px;
opacity: 0.5;
}
.mx_TopLeftMenu_upgradeLink {
font-size: 12px;
img {
margin-left: 5px;
}
}
.mx_TopLeftMenu_section:not(:last-child) {
border-bottom: 1px solid $menu-border-color;
}
.mx_TopLeftMenu_section {
list-style: none;
.mx_TopLeftMenu_section_noIcon {
margin: 5px 0;
padding: 5px 20px 5px 15px;
div:not(:first-child) {
margin-top: 5px;
}
}
.mx_TopLeftMenu_section_withIcon {
margin: 5px 0;
padding: 0;
list-style: none;
li.mx_TopLeftMenu_icon_home::after {
mask-image: url('$(res)/img/feather-customised/home.svg');

8
res/css/views/settings/_ProfileSettings.scss
View file

@ -35,6 +35,14 @@ limitations under the License.
margin-top: 0;
}
.mx_ProfileSettings_hostingSignup {
margin-left: 20px;
img {
margin-left: 5px;
}
}
.mx_ProfileSettings_avatar {
width: 88px;
height: 88px;

5
res/img/external-link.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" viewBox="0 0 11 10">
<g fill="none" fill-rule="evenodd" stroke="#9E9E9E" stroke-linecap="round" stroke-linejoin="round">
<path d="M8.5 5.5v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7 .5h3v3M4.5 6L10 .5"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 304 B

19
src/components/structures/GroupView.js
View file

@ -21,6 +21,7 @@ import Promise from 'bluebird';
import MatrixClientPeg from '../../MatrixClientPeg';
import sdk from '../../index';
import dis from '../../dispatcher';
import { getHostingLink } from '../../utils/HostingLink';
import { sanitizedHtmlNode } from '../../HtmlUtils';
import { _t, _td } from '../../languageHandler';
import AccessibleButton from '../views/elements/AccessibleButton';
@ -816,6 +817,23 @@ export default React.createClass({
});
const header = this.state.editing ? <h2> { _t('Community Settings') } </h2> : <div />;
const hostingSignupLink = getHostingLink('community-settings');
let hostingSignup = null;
if (hostingSignupLink) {
hostingSignup = <div className="mx_GroupView_hostingSignup">
{_t(
"Want more than a community? <a>Get your own server</a>", {},
{
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
},
)}
<a href={hostingSignupLink} target="_blank" rel="noopener">
<img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
</a>
</div>;
}
const changeDelayWarning = this.state.editing && this.state.isUserPrivileged ?
<div className="mx_GroupView_changeDelayWarning">
{ _t(
@ -830,6 +848,7 @@ export default React.createClass({
</div> : <div />;
return <div className={groupSettingsSectionClasses}>
{ header }
{ hostingSignup }
{ changeDelayWarning }
{ this._getJoinableNode() }
{ this._getLongDescriptionNode() }

23
src/components/structures/TopLeftMenuButton.js
View file

@ -68,17 +68,18 @@ export default class TopLeftMenuButton extends React.Component {
}
}
render() {
const fallbackUserId = MatrixClientPeg.get().getUserId();
const profileInfo = this.state.profileInfo;
let name;
_getDisplayName() {
if (MatrixClientPeg.get().isGuest()) {
name = _t("Guest");
} else if (profileInfo) {
name = profileInfo.name;
return _t("Guest");
} else if (this.state.profileInfo) {
return this.state.profileInfo.name;
} else {
name = fallbackUserId;
return MatrixClientPeg.get().getUserId();
}
}
render() {
const name = this._getDisplayName();
let nameElement;
if (!this.props.collapsed) {
nameElement = <div className="mx_TopLeftMenuButton_name">
@ -89,9 +90,9 @@ export default class TopLeftMenuButton extends React.Component {
return (
<AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
<BaseAvatar
idName={fallbackUserId}
idName={MatrixClientPeg.get().getUserId()}
name={name}
url={profileInfo && profileInfo.avatarUrl}
url={this.state.profileInfo && this.state.profileInfo.avatarUrl}
width={AVATAR_SIZE}
height={AVATAR_SIZE}
resizeMethod="crop"
@ -114,6 +115,8 @@ export default class TopLeftMenuButton extends React.Component {
chevronFace: "none",
left: x,
top: y,
userId: MatrixClientPeg.get().getUserId(),
displayName: this._getDisplayName(),
onFinished: () => {
this.setState({ menuDisplayed: false });
},

37
src/components/views/context_menus/TopLeftMenu.js
View file

@ -15,14 +15,22 @@ limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import dis from '../../../dispatcher';
import { _t } from '../../../languageHandler';
import LogoutDialog from "../dialogs/LogoutDialog";
import Modal from "../../../Modal";
import SdkConfig from '../../../SdkConfig';
import { getHostingLink } from '../../../utils/HostingLink';
import MatrixClientPeg from '../../../MatrixClientPeg';
export class TopLeftMenu extends React.Component {
static propTypes = {
displayName: PropTypes.string.isRequired,
userId: PropTypes.string.isRequired,
onFinished: PropTypes.func,
};
constructor() {
super();
this.viewHomePage = this.viewHomePage.bind(this);
@ -46,27 +54,48 @@ export class TopLeftMenu extends React.Component {
render() {
const isGuest = MatrixClientPeg.get().isGuest();
const hostingSignupLink = getHostingLink('user-context-menu');
let hostingSignup = null;
if (hostingSignupLink) {
hostingSignup = <div className="mx_TopLeftMenu_upgradeLink">
{_t(
"<a>Upgrade</a> to your own domain", {},
{
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
},
)}
<a href={hostingSignupLink} target="_blank" rel="noopener">
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
</a>
</div>;
}
let homePageSection = null;
if (this.hasHomePage()) {
homePageSection = <ul className="mx_TopLeftMenu_section">
homePageSection = <ul className="mx_TopLeftMenu_section_withIcon">
<li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>{_t("Home")}</li>
</ul>;
}
let signInOutSection;
if (isGuest) {
signInOutSection = <ul className="mx_TopLeftMenu_section">
signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
<li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>{_t("Sign in")}</li>
</ul>;
} else {
signInOutSection = <ul className="mx_TopLeftMenu_section">
signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
<li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
</ul>;
}
return <div className="mx_TopLeftMenu">
<div className="mx_TopLeftMenu_section_noIcon">
<div>{this.props.displayName}</div>
<div className="mx_TopLeftMenu_greyedText">{this.props.userId}</div>
{hostingSignup}
</div>
{homePageSection}
<ul className="mx_TopLeftMenu_section">
<ul className="mx_TopLeftMenu_section_withIcon">
<li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
</ul>
{signInOutSection}

23
src/components/views/settings/ProfileSettings.js
View file

@ -20,6 +20,8 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
import Field from "../elements/Field";
import AccessibleButton from "../elements/AccessibleButton";
import classNames from 'classnames';
import {User} from "matrix-js-sdk";
import { getHostingLink } from '../../../utils/HostingLink';
export default class ProfileSettings extends React.Component {
constructor() {
@ -129,13 +131,32 @@ export default class ProfileSettings extends React.Component {
</div>
);
const hostingSignupLink = getHostingLink('user-settings');
let hostingSignup = null;
if (hostingSignupLink) {
hostingSignup = <span className="mx_ProfileSettings_hostingSignup">
{_t(
"<a>Upgrade</a> to your own domain", {},
{
a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
},
)}
<a href={hostingSignupLink} target="_blank" rel="noopener">
<img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
</a>
</span>;
}
return (
<form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
<input type="file" ref="avatarUpload" className="mx_ProfileSettings_avatarUpload"
onChange={this._onAvatarChanged} accept="image/*" />
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_controls">
<p>{this.state.userId}</p>
<p>
{this.state.userId}
{hostingSignup}
</p>
<Field id="profileDisplayName" label={_t("Display Name")}
type="text" value={this.state.displayName} autoComplete="off"
onChange={this._onDisplayNameChanged} />

2
src/i18n/strings/en_EN.json
View file

@ -500,6 +500,7 @@
"Phone Number": "Phone Number",
"Profile picture": "Profile picture",
"Upload profile picture": "Upload profile picture",
"<a>Upgrade</a> to your own domain": "<a>Upgrade</a> to your own domain",
"Display Name": "Display Name",
"Save": "Save",
"Flair": "Flair",
@ -1314,6 +1315,7 @@
"Leave %(groupName)s?": "Leave %(groupName)s?",
"Unable to leave community": "Unable to leave community",
"Community Settings": "Community Settings",
"Want more than a community? <a>Get your own server</a>": "Want more than a community? <a>Get your own server</a>",
"Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.": "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.",
"These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.": "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.",
"Featured Rooms:": "Featured Rooms:",

37
src/utils/HostingLink.js Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2019 New Vector Ltd.
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 url from 'url';
import qs from 'qs';
import SdkConfig from '../SdkConfig';
export function getHostingLink(campaign) {
const hostingLink = SdkConfig.get().hosting_signup_link;
if (!hostingLink) return null;
if (!campaign) return hostingLink;
try {
const hostingUrl = url.parse(hostingLink);
const params = qs.parse(hostingUrl.query);
params.utm_campaign = campaign;
hostingUrl.search = undefined;
hostingUrl.query = params;
return hostingUrl.format();
} catch (e) {
return hostingLink;
}
}