Merge pull request #2488 from jryans/auth-lang
Restyle auth page language selector
This commit is contained in:
commit
3503562162
13 changed files with 64 additions and 25 deletions
|
@ -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
46
res/css/structures/auth/_LanguageSelector.scss
Normal 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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -15,6 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_AuthHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 206px;
|
||||
padding: 25px 50px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
@ -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
6
res/img/feather-icons/dropdown-arrow.svg
Normal 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>
|
After Width: | Height: | Size: 335 B |
|
@ -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 ***/
|
||||
|
||||
|
|
|
@ -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! *****
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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()}
|
||||
/>;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue