Use compound icons (#10292)
This commit is contained in:
parent
0db0d4b09d
commit
6fa00a20b0
43 changed files with 132 additions and 57 deletions
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue