mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 09:46:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve styling of SSO Buttons for multiple IdPs

Browse source
This commit is contained in:
Michael Telatynski 2021-01-21 13:33:25 +00:00
parent 3115c4f3f3
commit 928ddeb718
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 {
display: flex;
flex-wrap: wrap;
justify-content: center;
.mx_SSOButtons_row {
& + .mx_SSOButtons_row {
margin-top: 16px;
}
}
.mx_SSOButton {
position: relative;
width: 100%;
@ -36,6 +43,8 @@ limitations under the License.
box-sizing: border-box;
width: 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 {
left: 12px;
@ -43,7 +52,7 @@ limitations under the License.
}
& + .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 { chunk } from "lodash";
import classNames from "classnames";
import {MatrixClient} from "matrix-js-sdk/src/client";
import PlatformPeg from "../../../PlatformPeg";
import AccessibleButton from "./AccessibleButton";
import {_t} from "../../../languageHandler";
import {IIdentityProvider, ISSOFlow} from "../../../Login";
import classNames from "classnames";
interface ISSOButtonProps extends Omit<IProps, "flow"> {
idp: IIdentityProvider;
@ -83,6 +84,8 @@ interface IProps {
primary?: boolean;
}
const MAX_PER_ROW = 6;
const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
const providers = flow["org.matrix.msc2858.identity_providers"] || [];
if (providers.length < 2) {
@ -97,17 +100,24 @@ const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAf
</div>;
}
const rows = Math.ceil(providers.length / MAX_PER_ROW);
const size = Math.ceil(providers.length / rows);
return <div className="mx_SSOButtons">
{ providers.map(idp => (
<SSOButton
key={idp.id}
matrixClient={matrixClient}
loginType={loginType}
fragmentAfterLogin={fragmentAfterLogin}
idp={idp}
mini={true}
primary={primary}
/>
{ chunk(providers, size).map(chunk => (
<div key={chunk[0].id} className="mx_SSOButtons_row">
{ chunk.map(idp => (
<SSOButton
key={idp.id}
matrixClient={matrixClient}
loginType={loginType}
fragmentAfterLogin={fragmentAfterLogin}
idp={idp}
mini={true}
primary={primary}
/>
)) }
</div>
)) }
</div>;
};