Add server type selector component
This commit is contained in:
J. Ryan Stinnett
parent
eb7112cbc0
commit
0bee324e48
7 changed files with 236 additions and 0 deletions
|
|
@ -33,6 +33,7 @@
|
|||
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
|
||||
@import "./views/auth/_LanguageSelector.scss";
|
||||
@import "./views/auth/_ServerConfig.scss";
|
||||
@import "./views/auth/_ServerTypeSelector.scss";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
|
|
|
|||
69
res/css/views/auth/_ServerTypeSelector.scss
Normal file
69
res/css/views/auth/_ServerTypeSelector.scss
Normal 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;
|
||||
}
|
||||
7
res/img/feather-icons/globe.svg
Normal file
7
res/img/feather-icons/globe.svg
Normal 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 |
13
res/img/feather-icons/matrix-org-bw-logo.svg
Normal file
13
res/img/feather-icons/matrix-org-bw-logo.svg
Normal 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 |
18
res/img/feather-icons/modular-bw-logo.svg
Normal file
18
res/img/feather-icons/modular-bw-logo.svg
Normal 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 |
122
src/components/views/auth/ServerTypeSelector.js
Normal file
122
src/components/views/auth/ServerTypeSelector.js
Normal 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>;
|
||||
}
|
||||
}
|
||||
|
|
@ -1198,6 +1198,12 @@
|
|||
"Home server URL": "Home server URL",
|
||||
"Identity server URL": "Identity server URL",
|
||||
"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.",
|
||||
"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.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue