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

Merge pull request #2488 from jryans/auth-lang 

Restyle auth page language selector
pull/21833/head
J. Ryan Stinnett 2019-01-23 15:49:42 -06:00 committed by GitHub
parent 103460870a 523d910c66
commit 3503562162
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 64 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_components.scss
View File

@ -23,6 +23,7 @@
@import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_LanguageSelector.scss";
@import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";

46
res/css/structures/auth/_LanguageSelector.scss Normal file
View File

@ -0,0 +1,46 @@
/*
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_Auth_language {
width: 100%;
}
.mx_Auth_language .mx_Dropdown_input {
border: none;
font-size: 14px;
font-weight: 600;
color: $authpage-lang-color;
}
/* TODO: Consider using this new arrow for all dropdowns */
.mx_Auth_language .mx_Dropdown_arrow {
width: 10px;
height: 6px;
border: none;
right: 6px;
}
.mx_Auth_language .mx_Dropdown_arrow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
mask-repeat: no-repeat;
background: $authpage-lang-color;
}

13
res/css/structures/auth/_Login.scss
View File

@ -233,16 +233,3 @@ limitations under the License.
margin: 3px;
vertical-align: top;
}
.mx_Login_language {
margin-left: auto;
margin-right: auto;
min-width: 60%;
}
.mx_Login_language_div {
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}

2
res/css/views/auth/_AuthHeader.scss
View File

@ -15,6 +15,8 @@ limitations under the License.
*/
.mx_AuthHeader {
display: flex;
flex-direction: column;
width: 206px;
padding: 25px 50px;
box-sizing: border-box;

1
res/css/views/auth/_AuthHeaderLogo.scss
View File

@ -16,6 +16,7 @@ limitations under the License.
.mx_AuthHeaderLogo {
margin-top: 15px;
flex: 1;
}
.mx_AuthHeaderLogo img {

6
res/img/feather-icons/dropdown-arrow.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
<g fill="none" fill-rule="evenodd" stroke="#4e5054" stroke-linecap="round" stroke-width="1.3" transform="translate(1 1)">
<path d="m.5.5 3.85868526 3.25422271"/>
<path d="m8.13193273.56042139-3.77324747 3.19380132"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

1
res/themes/dharma/css/_dharma.scss
View File

@ -216,6 +216,7 @@ $memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
$authpage-lang-color: #4e5054;
/*** form elements ***/

1
res/themes/light/css/_base.scss
View File

@ -212,6 +212,7 @@ $memberstatus-placeholder-color: $roomtile-name-color;
$authpage-bg-color: #2e3649;
$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
$authpage-body-bg-color: #ffffff;
$authpage-lang-color: #4e5054;
// ***** Mixins! *****

3
src/components/structures/auth/ForgotPassword.js
View File

@ -234,8 +234,6 @@ module.exports = React.createClass({
errorText = <div className="mx_Login_error">{ err }</div>;
}
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
resetPasswordJsx = (
<div>
<div className="mx_Login_prompt">
@ -271,7 +269,6 @@ module.exports = React.createClass({
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
<LanguageSelector />
</div>
</div>
);

7
src/components/structures/auth/LanguageSelector.js
View File

@ -32,7 +32,8 @@ export default function LanguageSelector() {
if (SdkConfig.get()['disable_login_language_selector']) return <div />;
const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
return <div className="mx_Login_language_div">
<LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
</div>;
return <LanguageDropdown className="mx_Auth_language"
onOptionChange={onChange}
value={getCurrentLanguage()}
/>;
}

3
src/components/structures/auth/Login.js
View File

@ -555,8 +555,6 @@ module.exports = React.createClass({
);
}
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<AuthPage>
<AuthHeader />
@ -569,7 +567,6 @@ module.exports = React.createClass({
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
<LanguageSelector />
</AuthBody>
</AuthPage>
);

3
src/components/structures/auth/Registration.js
View File

@ -471,8 +471,6 @@ module.exports = React.createClass({
);
}
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<AuthPage>
<AuthHeader
@ -486,7 +484,6 @@ module.exports = React.createClass({
{ registerBody }
{ signIn }
{ errorText }
<LanguageSelector />
</AuthBody>
</AuthPage>
);

2
src/components/views/auth/AuthHeader.js
View File

@ -25,10 +25,12 @@ module.exports = React.createClass({
render: function() {
const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<div className="mx_AuthHeader">
<AuthHeaderLogo />
<LanguageSelector />
</div>
);
},