Use compound icons (#10292)

This commit is contained in:
Michael Weimann 2023-03-08 11:11:01 +01:00 committed by GitHub
parent 0db0d4b09d
commit 6fa00a20b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 132 additions and 57 deletions

View file

@ -17,7 +17,7 @@ limitations under the License.
import classNames from "classnames";
import React from "react";
import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
import { _t } from "../../../languageHandler";
interface Props {

View file

@ -15,25 +15,25 @@ limitations under the License.
*/
import classNames from "classnames";
import React from "react";
import React, { ReactElement } from "react";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
interface Props {
className?: string;
icon: React.FC<React.SVGProps<SVGSVGElement>>;
icon: ReactElement;
label: string;
onClick: () => void;
}
export const VoiceBroadcastControl: React.FC<Props> = ({ className = "", icon: Icon, label, onClick }) => {
export const VoiceBroadcastControl: React.FC<Props> = ({ className = "", icon, label, onClick }) => {
return (
<AccessibleButton
className={classNames("mx_VoiceBroadcastControl", className)}
onClick={onClick}
aria-label={label}
>
<Icon className="mx_Icon mx_Icon_16" />
{icon}
</AccessibleButton>
);
};

View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg";
import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
interface Props {
message: string;

View file

@ -16,13 +16,13 @@ import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { LiveBadge, VoiceBroadcastLiveness } from "../..";
import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg";
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
import { _t } from "../../../languageHandler";
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
import Clock from "../../../components/views/audio_messages/Clock";
import { formatTimeLeft } from "../../../DateUtils";
import Spinner from "../../../components/views/elements/Spinner";

View file

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { ReactElement } from "react";
import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg";
import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
import { _t } from "../../../languageHandler";
import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../..";
@ -27,24 +27,24 @@ interface Props {
}
export const VoiceBroadcastPlaybackControl: React.FC<Props> = ({ onClick, state }) => {
let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
let controlIcon: ReactElement;
let controlLabel: string;
let className = "";
switch (state) {
case VoiceBroadcastPlaybackState.Stopped:
controlIcon = PlayIcon;
controlIcon = <PlayIcon className="mx_Icon mx_Icon_16" />;
className = "mx_VoiceBroadcastControl-play";
controlLabel = _t("play voice broadcast");
break;
case VoiceBroadcastPlaybackState.Paused:
controlIcon = PlayIcon;
controlIcon = <PlayIcon className="mx_Icon mx_Icon_16" />;
className = "mx_VoiceBroadcastControl-play";
controlLabel = _t("resume voice broadcast");
break;
case VoiceBroadcastPlaybackState.Buffering:
case VoiceBroadcastPlaybackState.Playing:
controlIcon = PauseIcon;
controlIcon = <PauseIcon className="mx_Icon mx_Icon_12" />;
controlLabel = _t("pause voice broadcast");
break;
}

View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { Icon as WarningIcon } from "../../../../res/img/element-icons/warning.svg";
import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
import { _t } from "../../../languageHandler";
export const VoiceBroadcastRecordingConnectionError: React.FC = () => {

View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
import { _t } from "../../../languageHandler";
export const VoiceBroadcastRoomSubtitle: React.FC = () => {