imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update styling of UserInfo right panel card (#12788)

Browse source 
* Add colour to PresenceLabel in UserInfo

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update button positions & styles in UserInfo

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update UserInfo styles

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert Ignore->Block copy change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-18 15:24:44 +01:00 • committed by GitHub
parent 2920e76b64
commit f706ac4fa1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 670 additions and 419 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/rooms/PresenceLabel.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { formatDuration } from "../../../DateUtils";
@ -31,6 +32,9 @@ interface IProps {
currentlyActive?: boolean;
// offline, online, etc
presenceState?: string;
// whether to apply colouring to the label
coloured?: boolean;
className?: string;
}
export default class PresenceLabel extends React.Component<IProps> {
@ -62,7 +66,11 @@ export default class PresenceLabel extends React.Component<IProps> {
public render(): React.ReactNode {
return (
<div className="mx_PresenceLabel">
<div
className={classNames("mx_PresenceLabel", this.props.className, {
mx_PresenceLabel_online: this.props.coloured && this.props.presenceState === "online",
})}
>
{this.getPrettyPresence(this.props.presenceState, this.props.activeAgo, this.props.currentlyActive)}
</div>
);