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

Merge pull request #5558 from matrix-org/t3hcguy/socialloginfixup 

Improve styling of SSO Buttons for multiple IdPs
pull/21833/head
Michael Telatynski 2021-01-22 10:37:46 +00:00 committed by GitHub
parent 35bee5c5ea 928ddeb718
commit bb50cd56ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/views/elements/_SSOButtons.scss
View File

@ -16,8 +16,15 @@ limitations under the License.
.mx_SSOButtons { .mx_SSOButtons {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center; justify-content: center;
.mx_SSOButtons_row {
& + .mx_SSOButtons_row {
margin-top: 16px;
}
}
.mx_SSOButton { .mx_SSOButton {
position: relative; position: relative;
width: 100%; width: 100%;
@ -36,6 +43,8 @@ limitations under the License.
box-sizing: border-box; box-sizing: border-box;
width: 50px; // 48px + 1px border on all sides width: 50px; // 48px + 1px border on all sides
height: 50px; // 48px + 1px border on all sides height: 50px; // 48px + 1px border on all sides
min-width: 50px; // prevent crushing by the flexbox
padding: 12px;
> img { > img {
left: 12px; left: 12px;
@ -43,7 +52,7 @@ limitations under the License.
} }
& + .mx_SSOButton_mini { & + .mx_SSOButton_mini {
margin-left: 24px; margin-left: 16px;
} }
} }
} }

32
src/components/views/elements/SSOButtons.tsx
View File

@ -15,13 +15,14 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import { chunk } from "lodash";
import classNames from "classnames";
import {MatrixClient} from "matrix-js-sdk/src/client"; import {MatrixClient} from "matrix-js-sdk/src/client";
import PlatformPeg from "../../../PlatformPeg"; import PlatformPeg from "../../../PlatformPeg";
import AccessibleButton from "./AccessibleButton"; import AccessibleButton from "./AccessibleButton";
import {_t} from "../../../languageHandler"; import {_t} from "../../../languageHandler";
import {IIdentityProvider, ISSOFlow} from "../../../Login"; import {IIdentityProvider, ISSOFlow} from "../../../Login";
import classNames from "classnames";
interface ISSOButtonProps extends Omit<IProps, "flow"> { interface ISSOButtonProps extends Omit<IProps, "flow"> {
idp: IIdentityProvider; idp: IIdentityProvider;
@ -83,6 +84,8 @@ interface IProps {
primary?: boolean; primary?: boolean;
} }
const MAX_PER_ROW = 6;
const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => { const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
const providers = flow["org.matrix.msc2858.identity_providers"] || []; const providers = flow["org.matrix.msc2858.identity_providers"] || [];
if (providers.length < 2) { if (providers.length < 2) {
@ -97,17 +100,24 @@ const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAf
</div>; </div>;
} }
const rows = Math.ceil(providers.length / MAX_PER_ROW);
const size = Math.ceil(providers.length / rows);
return <div className="mx_SSOButtons"> return <div className="mx_SSOButtons">
{ providers.map(idp => ( { chunk(providers, size).map(chunk => (
<SSOButton <div key={chunk[0].id} className="mx_SSOButtons_row">
key={idp.id} { chunk.map(idp => (
matrixClient={matrixClient} <SSOButton
loginType={loginType} key={idp.id}
fragmentAfterLogin={fragmentAfterLogin} matrixClient={matrixClient}
idp={idp} loginType={loginType}
mini={true} fragmentAfterLogin={fragmentAfterLogin}
primary={primary} idp={idp}
/> mini={true}
primary={primary}
/>
)) }
</div>
)) } )) }
</div>; </div>;
}; };