From 36ebd91f07352f7e533cbdfad73c256e9e1dfb58 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 23 Jan 2019 09:10:49 -0600 Subject: [PATCH 1/4] Move language selector to auth header --- src/components/structures/auth/ForgotPassword.js | 3 --- src/components/structures/auth/Login.js | 3 --- src/components/structures/auth/Registration.js | 3 --- src/components/views/auth/AuthHeader.js | 2 ++ 4 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js index 87e8c7d131..b2dc2a47eb 100644 --- a/src/components/structures/auth/ForgotPassword.js +++ b/src/components/structures/auth/ForgotPassword.js @@ -234,8 +234,6 @@ module.exports = React.createClass({ errorText =
{ err }
; } - const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); - resetPasswordJsx = (
@@ -271,7 +269,6 @@ module.exports = React.createClass({ { _t('Create an account') } -
); diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index 28bed9af05..28c4a3e960 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -555,8 +555,6 @@ module.exports = React.createClass({ ); } - const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); - return ( @@ -569,7 +567,6 @@ module.exports = React.createClass({ { _t('Create an account') } { loginAsGuestJsx } - ); diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index fe6fb078e3..fb913b22e1 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -471,8 +471,6 @@ module.exports = React.createClass({ ); } - const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); - return ( ); diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.js index c1d831a70a..cc70d126e8 100644 --- a/src/components/views/auth/AuthHeader.js +++ b/src/components/views/auth/AuthHeader.js @@ -25,10 +25,12 @@ module.exports = React.createClass({ render: function() { const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo'); + const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector'); return (
+
); }, From f9793fa5676001a6dea37a6f605df12f9581bc2e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 23 Jan 2019 09:11:37 -0600 Subject: [PATCH 2/4] Extract language selector styles --- .../structures/auth/_LanguageSelector.scss | 27 +++++++++++++++++++ res/css/structures/auth/_Login.scss | 13 --------- .../structures/auth/LanguageSelector.js | 4 +-- 3 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 res/css/structures/auth/_LanguageSelector.scss diff --git a/res/css/structures/auth/_LanguageSelector.scss b/res/css/structures/auth/_LanguageSelector.scss new file mode 100644 index 0000000000..26a8207b20 --- /dev/null +++ b/res/css/structures/auth/_LanguageSelector.scss @@ -0,0 +1,27 @@ +/* +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 { + margin-left: auto; + margin-right: auto; + min-width: 60%; +} + +.mx_Auth_language_div { + display: flex; + margin-top: 12px; + margin-bottom: 12px; +} diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index c4eebc48a1..09af69183b 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -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; -} - diff --git a/src/components/structures/auth/LanguageSelector.js b/src/components/structures/auth/LanguageSelector.js index 965d8334d9..60b369c303 100644 --- a/src/components/structures/auth/LanguageSelector.js +++ b/src/components/structures/auth/LanguageSelector.js @@ -32,7 +32,7 @@ export default function LanguageSelector() { if (SdkConfig.get()['disable_login_language_selector']) return
; const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); - return
- + return
+
; } From 05254f0e8284bfed770c8422c3f2e317ee88029e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 23 Jan 2019 09:57:31 -0600 Subject: [PATCH 3/4] Tweak language selector to match design --- res/css/_components.scss | 1 + res/css/structures/auth/_LanguageSelector.scss | 13 ++++++------- res/css/views/auth/_AuthHeader.scss | 2 ++ res/css/views/auth/_AuthHeaderLogo.scss | 1 + res/themes/dharma/css/_dharma.scss | 1 + res/themes/light/css/_base.scss | 1 + src/components/structures/auth/LanguageSelector.js | 7 ++++--- 7 files changed, 16 insertions(+), 10 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index 2617cd7c4c..133324529b 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -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"; diff --git a/res/css/structures/auth/_LanguageSelector.scss b/res/css/structures/auth/_LanguageSelector.scss index 26a8207b20..5193fa98ed 100644 --- a/res/css/structures/auth/_LanguageSelector.scss +++ b/res/css/structures/auth/_LanguageSelector.scss @@ -15,13 +15,12 @@ limitations under the License. */ .mx_Auth_language { - margin-left: auto; - margin-right: auto; - min-width: 60%; + width: 100%; } -.mx_Auth_language_div { - display: flex; - margin-top: 12px; - margin-bottom: 12px; +.mx_Auth_language .mx_Dropdown_input { + border: none; + font-size: 14px; + font-weight: 600; + color: $authpage-lang-color; } diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss index 376864d268..e1e8802437 100644 --- a/res/css/views/auth/_AuthHeader.scss +++ b/res/css/views/auth/_AuthHeader.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_AuthHeader { + display: flex; + flex-direction: column; width: 206px; padding: 25px 50px; box-sizing: border-box; diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss index 3d8ab29325..b6f107d9c4 100644 --- a/res/css/views/auth/_AuthHeaderLogo.scss +++ b/res/css/views/auth/_AuthHeaderLogo.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_AuthHeaderLogo { margin-top: 15px; + flex: 1; } .mx_AuthHeaderLogo img { diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 235eb02e3c..22aa018b5e 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -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 ***/ diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 1522ee82a0..438ab69856 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -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! ***** diff --git a/src/components/structures/auth/LanguageSelector.js b/src/components/structures/auth/LanguageSelector.js index 60b369c303..d964af184c 100644 --- a/src/components/structures/auth/LanguageSelector.js +++ b/src/components/structures/auth/LanguageSelector.js @@ -32,7 +32,8 @@ export default function LanguageSelector() { if (SdkConfig.get()['disable_login_language_selector']) return
; const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); - return
- -
; + return ; } From 523d910c6618ff4225260217732cd0422efb6838 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 23 Jan 2019 10:14:45 -0600 Subject: [PATCH 4/4] Use new dropdown arrow for language selector --- .../structures/auth/_LanguageSelector.scss | 20 +++++++++++++++++++ res/img/feather-icons/dropdown-arrow.svg | 6 ++++++ 2 files changed, 26 insertions(+) create mode 100644 res/img/feather-icons/dropdown-arrow.svg diff --git a/res/css/structures/auth/_LanguageSelector.scss b/res/css/structures/auth/_LanguageSelector.scss index 5193fa98ed..e73dd4ac64 100644 --- a/res/css/structures/auth/_LanguageSelector.scss +++ b/res/css/structures/auth/_LanguageSelector.scss @@ -24,3 +24,23 @@ limitations under the License. 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; +} diff --git a/res/img/feather-icons/dropdown-arrow.svg b/res/img/feather-icons/dropdown-arrow.svg new file mode 100644 index 0000000000..a1d46fa61a --- /dev/null +++ b/res/img/feather-icons/dropdown-arrow.svg @@ -0,0 +1,6 @@ + + + + + +