Add server type selector component

This commit is contained in:
J. Ryan Stinnett 2019-01-24 14:22:25 -06:00
parent eb7112cbc0
commit 0bee324e48
7 changed files with 236 additions and 0 deletions

View file

@ -33,6 +33,7 @@
@import "./views/auth/_InteractiveAuthEntryComponents.scss"; @import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss"; @import "./views/auth/_LanguageSelector.scss";
@import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerConfig.scss";
@import "./views/auth/_ServerTypeSelector.scss";
@import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss";

View file

@ -0,0 +1,69 @@
/*
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.
*/
.mx_ServerTypeSelector {
display: flex;
margin-bottom: 28px;
}
.mx_ServerTypeSelector_type {
margin: 0 5px;
}
.mx_ServerTypeSelector_type:first-child {
margin-left: 0;
}
.mx_ServerTypeSelector_type:last-child {
margin-right: 0;
}
.mx_ServerTypeSelector_label {
text-align: center;
font-weight: 600;
color: $primary-fg-color;
margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
padding: 10px;
border: 1px solid $input-border-color;
border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
border-color: $input-valid-border-color;
}
.mx_ServerTypeSelector_logo {
display: flex;
justify-content: center;
height: 18px;
margin-bottom: 12px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_ServerTypeSelector_logo > div {
display: flex;
width: 70%;
align-items: center;
justify-content: space-evenly;
}
.mx_ServerTypeSelector_description {
font-size: 10px;
}

View file

@ -0,0 +1,7 @@
<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:#454545;stroke-width:.8;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" transform="translate(1 1)">
<circle cx="5" cy="5" r="5"/>
<path d="m0 5h10"/>
<path d="m5 0c1.25064019 1.36917645 1.96137638 3.14601693 2 5-.03862362 1.85398307-.74935981 3.63082355-2 5-1.25064019-1.36917645-1.96137638-3.14601693-2-5 .03862362-1.85398307.74935981-3.63082355 2-5z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 524 B

View file

@ -0,0 +1,13 @@
<svg height="18" viewBox="0 0 66 18" width="66" xmlns="http://www.w3.org/2000/svg">
<g fill="#454545" fill-rule="evenodd">
<path d="m.57375773.51260411v16.96465689h1.22032333v.4070323h-1.68861516v-17.77866867h1.68861516v.40697948z"/>
<path d="m5.27530002 5.89064516v.85851027h.02442757c.22886998-.32679766.50453749-.58053959.82747736-.76043402.32272883-.17957771.69267726-.26973607 1.10937046-.26973607.4003378 0 .76611825.07785923 1.09702477.23304985.33101205.15545455.5823575.42920235.75398361.82171848.18782322-.27791789.44317838-.52326687.76611825-.73583578.32272886-.21246334.70475916-.31893255 1.14614376-.31893255.3350745 0 .6454576.04096187.9317297.12272727.2858501.0817654.5310227.21256891.7353596.39241056.2041259.18.363459.41505572.4781051.70506158.1143294.29053373.1716261.63987097.1716261 1.04880352v4.24324923l-1.7407414-.0000527v-3.59334902c0-.21246335-.0081249-.41278593-.0245331-.60096774-.0165137-.18791789-.0612536-.35134311-.1348001-.49053959-.0735993-.13887977-.1820197-.24936071-.3248392-.33117889-.1430305-.08144868-.3371849-.12256891-.5823047-.12256891-.2451199 0-.4433367.04729618-.59454494.1409912-.15131376.09417009-.2697057.21689736-.35543961.36797067-.08578668.15144282-.14303055.32304986-.17157335.51529619-.02875383.19203519-.04294609.38628739-.04294609.58249267v3.53190612h-1.7405831v-3.55645158c0-.18802346-.00427351-.37409384-.01213465-.55794721-.00833598-.18406452-.0429461-.35366569-.10435796-.50912023-.06130634-.15519062-.16350117-.27997654-.30647895-.37414663-.14303055-.09369502-.35343476-.1409912-.6312654-.1409912-.08182973 0-.19009187.01842228-.32478645.05531964-.13485285.03679179-.26569599.10641643-.39226563.20845162-.12683343.10229912-.23499006.24946627-.32489196.44144868-.08995466.19224633-.13485285.44350733-.13485285.75415249v3.67923172l-1.74053034.0000527v-6.34059234z"/>
<path d="m14.4319985 6.82284457c.1796456-.26989442.4085683-.48642228.6865045-.65011143.2777251-.16347801.5901658-.27992376.937586-.3494956.347262-.06941349.696687-.10430499 1.0480641-.10430499.3187719 0 .641448.02259238.9683448.06740763.3268441.04513196.6251981.1331261.8949038.26377126.2696529.13075073.4902397.31280938.6619186.54570088.1716261.23299706.2574127.54168915.2574127.92602346v3.29880352c0 .286522.0163554.5601114.049119.8217185.032447.2617654.0897436.4579706.1715206.5887214h-1.7650635c-.0327635-.0981818-.059407-.1982112-.0797193-.3005103-.0205762-.1020352-.0348739-.2062874-.0428933-.312651-.2778834.2862053-.6048858.4865278-.9805322.6010205-.3760158.114176-.7601037.1716071-1.1523693.1716071-.3024693 0-.5844152-.0368446-.8458904-.1103226-.2615808-.0736364-.4902925-.1880235-.6863989-.3436364-.1961592-.155085-.3493723-.3513431-.4596921-.5884047-.1103197-.2370616-.1655587-.5194135-.1655587-.8463167 0-.3596305.0632584-.65612903.1901446-.88891495.1265696-.23315543.2899125-.41906745.490398-.55821115.2001161-.13893255.4288806-.24318475.6863989-.31265102.25736-.06941349.5167776-.12446921.7783056-.16558945.261528-.04075073.5188881-.07353079.7722911-.09802346.2532976-.02459824.4781051-.06144281.6742115-.11048094.1961592-.04903812.3512717-.12045747.4658122-.21457478.1142239-.09401173.1673526-.23093841.1593331-.41093841 0-.18791789-.0306004-.33724927-.0919067-.44757185-.0612536-.11032258-.1430306-.19631085-.2451199-.25759531-.1021948-.06128445-.2206922-.10219355-.3554396-.12272727-.1349056-.02016422-.2800993-.03061584-.4351589-.03061584-.3432523 0-.6129052.07363637-.8090644.22080352-.1960537.14716716-.3106997.39256892-.3432522.73583578h-1.7405831c.0243748-.40866862.1263586-.7481349.3063734-1.0177654zm3.4382729 2.45892669c-.110267.036739-.2288172.06730205-.3553869.09190029-.1267279.02454546-.2594703.0450264-.3983857.06128446-.1390208.016522-.2779361.03684458-.4167459.06139003-.1308432.02433431-.2595232.05732551-.3860401.09802346-.1268334.04112024-.2371531.09617595-.331012.16564223-.0941226.06951906-.169674.15756598-.2268651.26361287-.0572439.1063109-.0857867.2412845-.0857867.4047625 0 .1551906.0285428.2862053.0857867.3922522.0571911.1064692.1349583.1902405.2329852.2515249.0980268.0612845.2123563.104305.343305.1286921.1305793.0245982.2654321.0368446.4044002.0368446.3431995 0 .6086844-.0571144.7968242-.1717126.187876-.1143343.3266858-.2513666.416746-.4109384.0897963-.1593608.1450354-.3205162.165506-.4842581.0202596-.163478.0306004-.29433432.0306004-.39241057v-.65011144c-.073652.06561291-.1655588.1166569-.2759313.15350147z" fill-rule="nonzero"/>
<path d="m24.4710969 5.89064516v1.16509091h-1.2747182v3.13965393c0 .294176.0489606.4904868.147093.5885103.0979213.098129.294186.1471671.588372.1471671.0980796 0 .1919385-.0040117.2818931-.0122463.0898492-.0080234.1756886-.0204809.2573601-.036739v1.3490499c-.1470931.0245454-.3105942.0408035-.4902925.0491437-.179751.0078651-.3554396.0121407-.5270657.0121407-.269653 0-.5251136-.0184751-.7661183-.0553196-.2411629-.0366862-.4535719-.1080528-.6373855-.2144692-.183919-.1061525-.3290071-.2575953-.4351589-.4538006-.1063628-.1960469-.159386-.453695-.159386-.7727332v-3.74035773h-1.0541314v-1.16509091h1.0541314v-1.90092668h1.7406359v1.90092668z"/>
<path d="m26.9593852 5.89064516v1.17739003h.0245331c.0815659-.19636364.1918329-.37810557.3309065-.54585924.1389681-.16743695.2981958-.31064516.4779996-.42920234.1796455-.11834604.371795-.21035191.5762901-.27596481.2040731-.06529619.4166932-.09812903.6373855-.09812903.1143823 0 .2408991.02058651.3799727.06139002v1.61894429c-.0818297-.01646921-.1799093-.03082698-.294186-.04296775-.1144878-.01229912-.2247548-.01847507-.331012-.01847507-.3187192 0-.5883721.05331378-.8089061.15946628-.2206395.10631085-.398333.25131378-.5332386.43532551-.1348001.18406452-.2310331.39853372-.2881714.6438827-.0571384.24519061-.085734.51107331-.085734.79717302v2.85746043h-1.7405831v-6.34043404z"/>
<path d="m30.121885 4.90946041v-1.43487976h1.7407414v1.43487976zm1.7407414.98118475v6.34048684h-1.7407414v-6.34048684z" fill-rule="nonzero"/>
<path d="m32.7696121 5.89064516h1.9857029l1.1155433 1.6556305 1.1032504-1.6556305h1.9244494l-2.0837826 2.96794135 2.3413009 3.37259829h-1.9858612l-1.3238899-1.999003-1.3239427 1.999003h-1.9488242l2.279889-3.33570093z"/>
<path d="m65.2811695 17.477261v-16.96465689h-1.2203233v-.40697948h1.6887206v17.77866867h-1.6887206v-.4070323z"/>
<text font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12.109091" font-weight="bold"><tspan x="40.181818" y="12.327273">.org</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.3 KiB

View file

@ -0,0 +1,18 @@
<svg height="12" viewBox="0 0 71 12" width="71" xmlns="http://www.w3.org/2000/svg">
<g fill="#454545" fill-rule="evenodd">
<g transform="translate(18.551433 2)">
<path d="m.06753266 7.63333335v-5.66666669h1.65455009v.63333334c.30389695-.5 1.01298984-.83333333 1.65455008-.83333333.81039188 0 1.41818577.33333333 1.68831641.9.43896227-.63333333 1.01298982-.9 1.7896154-.9 1.08052251 0 2.1272787.63333333 2.1272787 2.16666667v3.66666666h-1.68831643v-3.26666666c0-.53333334-.30389694-.96666667-.91169086-.96666667-.60779387 0-.94545718.46666667-.94545718.96666667v3.26666666h-1.72208276v-3.26666666c0-.53333334-.30389696-.96666667-.91169086-.96666667-.60779391 0-.94545719.46666667-.94545719.96666667v3.26666666h-1.7896154z"/>
<path d="m16.9844631 4.8c0 1.76666665-1.3168868 3-3.0389695 3-1.6883165 0-3.0389695-1.26666665-3.0389695-3 0-1.76666666 1.350653-3 3.0389695-3 1.7220827 0 3.0389695 1.26666667 3.0389695 3m-1.755849 0c0-.96666666-.6077939-1.4-1.2831205-1.4-.6415602 0-1.2831205.43333334-1.2831205 1.4 0 .93333335.6415603 1.4 1.2831205 1.4.6753266.03333335 1.2831205-.43333335 1.2831205-1.4" fill-rule="nonzero"/>
<path d="m30.9974894 7.06666665c-.303897.5-.9454572.7-1.5194848.7-1.3844195 0-2.161045-1-2.161045-2.2v-3.56666665h1.7558491v3.2c0 .53333335.3038969.96666665.9116908.96666665.5740276 0 .9454572-.4.9454572-.96666665v-3.2h1.7558491v4.63333335c0 .5.0337663.9333333.0675327 1h-1.6883165c-.0337663-.1-.0675326-.4-.0675326-.5666667"/>
<path d="m43.2209002 6.9c-.2701306.53333335-.8441582.9-1.553251.9-1.6883165 0-2.8363717-1.26666665-2.8363717-3 0-1.66666666 1.0805225-2.96666666 2.8026053-2.96666666 1.0129899 0 1.4857184.56666666 1.5870174.83333333v-.66666667h1.6883166v4.63333335c0 .5333333.0337662.9.0337662 1h-1.6883165c-.0337663-.13333335-.0337663-.43333335-.0337663-.6666667zm-1.3168868-.6c.7090929 0 1.3168868-.53333335 1.3168868-1.5 0-.96666667-.5740275-1.5-1.3168868-1.5-.7428592 0-1.3168868.5-1.3168868 1.5 0 .93333335.6077939 1.5 1.3168868 1.5z" fill-rule="nonzero"/>
<path d="m50.8520906 1.9c.6415599 0 1.1480552.5 1.1480552 1.13333334 0 .63333333-.5064953 1.1-1.1480552 1.1-.6415602 0-1.1142889-.5-1.1142889-1.1 0-.66666667.4727287-1.13333334 1.1142889-1.13333334zm-1.7558494 5.73333335h-1.7558491v-5.66666669h1.7558491z" fill-rule="nonzero"/>
<path d="m35.083215.266667h1.755849v7.4h-1.755849z"/>
<path d="m24.9195503.26666667h-1.7220828v2.16666666c-.1350653-.2-.5740276-.56666667-1.5532511-.56666667-1.6207837 0-2.7688389 1.26666667-2.7688389 2.93333334 0 1.73333335 1.2155878 2.96666665 2.8363716 2.96666665.6753266 0 1.2831204-.3 1.5194848-.66666665 0 .23333335.0337663.46666665.0337663.53333335h1.6883164c0-.13333335-.0337663-.5-.0337663-1zm-3.0052032 5.96666668c-.6753266 0-1.2831205-.4666667-1.2831205-1.40000001 0-.93333334.6077939-1.4 1.2831205-1.4.6753265 0 1.2831204.46666666 1.2831204 1.4 0 .90000001-.6077939 1.40000001-1.2831204 1.40000001z" fill-rule="nonzero"/>
</g>
<g>
<path d="m14.0349329 1.05652174-1.7385268-.97826087-1.7385268.97826087-.0132712 9.88695656 1.751798.9913043 1.7385268-.9782608z"/>
<path d="m3.59050092 6-1.751798-.9782609-1.73852679.9782609v4.9434783l1.75179799.9913043 1.7385268-.9913043z"/>
<path d="m7.0675545 6.99130435 2.60115457-1.47391305v-1.98260869l-1.73852676-.97826087-.86262781.50869565-3.49032478-1.99565217-1.7385268-.99130435-1.73852679.99130435v1.96956521z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -0,0 +1,122 @@
/*
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 React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import sdk from '../../../index';
import classnames from 'classnames';
const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
const TYPES = [
{
id: 'Free',
label: () => _t('Free'),
logo: () => <img src={require('../../../../res/img/feather-icons/matrix-org-bw-logo.svg')} />,
description: () => _t('Join millions for free on the largest public server'),
},
{
id: 'Premium',
label: () => _t('Premium'),
logo: () => <img src={require('../../../../res/img/feather-icons/modular-bw-logo.svg')} />,
description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
{sub}
</a>,
}),
},
{
id: 'Advanced',
label: () => _t('Advanced'),
logo: () => <div>
<img src={require('../../../../res/img/feather-icons/globe.svg')} />
{_t('Other')}
</div>,
description: () => _t('Find other public servers or use a custom server'),
},
];
export default class ServerTypeSelector extends React.PureComponent {
static propTypes = {
// ID of the initial type to show as selected or null for none.
selected: PropTypes.string,
// Handler called when the selected type changes.
onChange: PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.state = {
selected: null,
};
}
componentWillReceiveProps(props) {
const { selected } = props;
this.setState({
selected,
});
}
onClick = (e) => {
e.stopPropagation();
const id = e.currentTarget.dataset.id;
if (this.state.selected === id) {
return;
}
this.setState({
selected: id,
});
if (this.props.onChange) {
this.props.onChange(id);
}
}
render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const serverTypes = TYPES.map(type => {
const { id, label, logo, description } = type;
const classes = classnames(
"mx_ServerTypeSelector_type",
`mx_ServerTypeSelector_type_${id}`,
{
"mx_ServerTypeSelector_type_selected": id === this.state.selected,
},
);
return <div className={classes} key={id} >
<div className="mx_ServerTypeSelector_label">
{label()}
</div>
<AccessibleButton onClick={this.onClick} data-id={id}>
<div className="mx_ServerTypeSelector_logo">
{logo()}
</div>
<div className="mx_ServerTypeSelector_description">
{description()}
</div>
</AccessibleButton>
</div>;
});
return <div className="mx_ServerTypeSelector">
{serverTypes}
</div>;
}
}

View file

@ -1198,6 +1198,12 @@
"Home server URL": "Home server URL", "Home server URL": "Home server URL",
"Identity server URL": "Identity server URL", "Identity server URL": "Identity server URL",
"What does this mean?": "What does this mean?", "What does this mean?": "What does this mean?",
"Free": "Free",
"Join millions for free on the largest public server": "Join millions for free on the largest public server",
"Premium": "Premium",
"Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
"Other": "Other",
"Find other public servers or use a custom server": "Find other public servers or use a custom server",
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.", "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.", "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.", "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",