mirror of https://github.com/vector-im/riot-web
Create flexbox layout helper (#11411)
parent
ad73b0c16e
commit
373a34c3d1
|
@ -52,6 +52,8 @@
|
|||
@import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
|
||||
@import "./components/views/spaces/_QuickThemeSwitcher.pcss";
|
||||
@import "./components/views/typography/_Caption.pcss";
|
||||
@import "./components/views/utils/_Box.pcss";
|
||||
@import "./components/views/utils/_Flex.pcss";
|
||||
@import "./compound/_Icon.pcss";
|
||||
@import "./compound/_SuccessDialog.pcss";
|
||||
@import "./structures/_AutoHideScrollbar.pcss";
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_Box {
|
||||
flex: var(--mx-box-flex, initial);
|
||||
flex-shrink: var(--mx-box-shrink, initial);
|
||||
flex-grow: var(--mx-box-grow, initial);
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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_Flex {
|
||||
display: var(--mx-flex-display, initial);
|
||||
flex-direction: var(--mx-flex-direction, initial);
|
||||
align-items: var(--mx-flex-align, initial);
|
||||
justify-content: var(--mx-flex-justify, initial);
|
||||
gap: var(--mx-flex-gap, initial);
|
||||
}
|
|
@ -15,10 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
gap: var(--cpd-space-3x);
|
||||
padding: 0 var(--cpd-space-3x);
|
||||
border-bottom: 1px solid $separator;
|
||||
background-color: $background;
|
||||
|
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
import classNames from "classnames";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
type FlexProps = {
|
||||
/**
|
||||
* The type of the HTML element
|
||||
* @default div
|
||||
*/
|
||||
as?: string;
|
||||
/**
|
||||
* The CSS class name.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* the on click event callback
|
||||
*/
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
/**
|
||||
* The flex space to use
|
||||
* @default null
|
||||
*/
|
||||
flex?: string | null;
|
||||
/**
|
||||
* The flex shrink factor
|
||||
* @default null
|
||||
*/
|
||||
shrink?: string | null;
|
||||
/**
|
||||
* The flex grow factor
|
||||
* @default null
|
||||
*/
|
||||
grow?: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set or remove a CSS property
|
||||
* @param ref the reference
|
||||
* @param name the CSS property name
|
||||
* @param value the CSS property value
|
||||
*/
|
||||
function addOrRemoveProperty(
|
||||
ref: React.MutableRefObject<HTMLElement | undefined>,
|
||||
name: string,
|
||||
value?: string | null,
|
||||
): void {
|
||||
const style = ref.current!.style;
|
||||
if (value) {
|
||||
style.setProperty(name, value);
|
||||
} else {
|
||||
style.removeProperty(name);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A flex child helper
|
||||
*/
|
||||
export function Box({
|
||||
as = "div",
|
||||
flex = null,
|
||||
shrink = null,
|
||||
grow = null,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.PropsWithChildren<FlexProps>): JSX.Element {
|
||||
const ref = useRef<HTMLElement>();
|
||||
|
||||
useEffect(() => {
|
||||
addOrRemoveProperty(ref, `--mx-box-flex`, flex);
|
||||
addOrRemoveProperty(ref, `--mx-box-shrink`, shrink);
|
||||
addOrRemoveProperty(ref, `--mx-box-grow`, grow);
|
||||
}, [flex, grow, shrink]);
|
||||
|
||||
return React.createElement(as, { ...props, className: classNames("mx_Box", className), ref }, children);
|
||||
}
|
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
import classNames from "classnames";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
type FlexProps = {
|
||||
/**
|
||||
* The type of the HTML element
|
||||
* @default div
|
||||
*/
|
||||
as?: string;
|
||||
/**
|
||||
* The CSS class name.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The type of flex container
|
||||
* @default flex
|
||||
*/
|
||||
display?: "flex" | "inline-flex";
|
||||
/**
|
||||
* The flow direction of the flex children
|
||||
* @default row
|
||||
*/
|
||||
direction?: "row" | "column" | "row-reverse" | "column-reverse";
|
||||
/**
|
||||
* The alingment of the flex children
|
||||
* @default start
|
||||
*/
|
||||
align?: "start" | "center" | "end" | "baseline" | "stretch";
|
||||
/**
|
||||
* The justification of the flex children
|
||||
* @default start
|
||||
*/
|
||||
justify?: "start" | "center" | "end" | "between";
|
||||
/**
|
||||
* The spacing between the flex children, expressed with the CSS unit
|
||||
* @default 0
|
||||
*/
|
||||
gap?: string;
|
||||
/**
|
||||
* the on click event callback
|
||||
*/
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* A flexbox container helper
|
||||
*/
|
||||
export function Flex({
|
||||
as = "div",
|
||||
display = "flex",
|
||||
direction = "row",
|
||||
align = "start",
|
||||
justify = "start",
|
||||
gap = "0",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.PropsWithChildren<FlexProps>): JSX.Element {
|
||||
const ref = useRef<HTMLElement>();
|
||||
|
||||
useEffect(() => {
|
||||
ref.current!.style.setProperty(`--mx-flex-display`, display);
|
||||
ref.current!.style.setProperty(`--mx-flex-direction`, direction);
|
||||
ref.current!.style.setProperty(`--mx-flex-align`, align);
|
||||
ref.current!.style.setProperty(`--mx-flex-justify`, justify);
|
||||
ref.current!.style.setProperty(`--mx-flex-gap`, gap);
|
||||
}, [align, direction, display, gap, justify]);
|
||||
|
||||
return React.createElement(as, { ...props, className: classNames("mx_Flex", className), ref }, children);
|
||||
}
|
|
@ -23,13 +23,18 @@ import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
|
|||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { useTopic } from "../../../hooks/room/useTopic";
|
||||
import { Flex } from "../../utils/Flex";
|
||||
import { Box } from "../../utils/Box";
|
||||
|
||||
export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
||||
const roomName = useRoomName(room);
|
||||
const roomTopic = useTopic(room);
|
||||
|
||||
return (
|
||||
<header
|
||||
<Flex
|
||||
as="header"
|
||||
align="center"
|
||||
gap="var(--cpd-space-3x)"
|
||||
className="mx_RoomHeader light-panel"
|
||||
onClick={() => {
|
||||
const rightPanel = RightPanelStore.instance;
|
||||
|
@ -39,7 +44,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
}}
|
||||
>
|
||||
<DecoratedRoomAvatar room={room} avatarSize={40} displayBadge={false} />
|
||||
<div className="mx_RoomHeader_info">
|
||||
<Box flex="1" className="mx_RoomHeader_info">
|
||||
<BodyText
|
||||
as="div"
|
||||
size="lg"
|
||||
|
@ -56,7 +61,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
|
|||
{roomTopic.text}
|
||||
</BodyText>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue