PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Improve styling of SSO Buttons for multiple IdPs
This commit is contained in:
Michael Telatynski 2021-01-22 10:37:46 +00:00 committed by GitHub
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>;
}; };