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

Use compound icons (#10292)

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/voice-broadcast/components/atoms/LiveBadge.tsx
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 {

8
src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
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>
);
};

2
src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
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;

8
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
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";

14
src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx
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;
}

2
src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
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 = () => {

2
src/voice-broadcast/components/atoms/VoiceBroadcastRoomSubtitle.tsx
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 = () => {

4
src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
View file

@ -25,8 +25,8 @@ import {
VoiceBroadcastPlaybackState,
} from "../..";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
import { Icon as Back30sIcon } from "../../../../res/img/element-icons/Back30s.svg";
import { Icon as Forward30sIcon } from "../../../../res/img/element-icons/Forward30s.svg";
import { Icon as Back30sIcon } from "../../../../res/img/compound/back-30s-24px.svg";
import { Icon as Forward30sIcon } from "../../../../res/img/compound/forward-30s-24px.svg";
import { _t } from "../../../languageHandler";
import Clock from "../../../components/views/audio_messages/Clock";
import SeekBar from "../../../components/views/audio_messages/SeekBar";

2
src/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip.tsx
View file

@ -19,7 +19,7 @@ import React, { useRef, useState } from "react";
import { VoiceBroadcastHeader } from "../..";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { VoiceBroadcastPreRecording } from "../../models/VoiceBroadcastPreRecording";
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";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";

22
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
View file

@ -25,10 +25,10 @@ import {
} from "../..";
import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/mic.svg";
import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg";
import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
import { _t } from "../../../languageHandler";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
@ -75,11 +75,15 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
<VoiceBroadcastControl
className="mx_VoiceBroadcastControl-recording"
onClick={toggleRecording}
icon={RecordIcon}
icon={<RecordIcon className="mx_Icon mx_Icon_12" />}
label={_t("resume voice broadcast")}
/>
) : (
<VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />
<VoiceBroadcastControl
onClick={toggleRecording}
icon={<PauseIcon className="mx_Icon mx_Icon_12" />}
label={_t("pause voice broadcast")}
/>
);
const controls =
@ -94,7 +98,11 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
>
<MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
</AccessibleTooltipButton>
<VoiceBroadcastControl icon={StopIcon} label="Stop Recording" onClick={stopRecording} />
<VoiceBroadcastControl
icon={<StopIcon className="mx_Icon mx_Icon_16" />}
label="Stop Recording"
onClick={stopRecording}
/>
</div>
);

2
src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
View file

@ -24,7 +24,7 @@ import {
} from "../..";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
interface VoiceBroadcastSmallPlaybackBodyProps {
playback: VoiceBroadcastPlayback;