nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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
43 changed files with 132 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/ErrorMessage.tsx
View File

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

2
src/components/structures/UserMenu.tsx
View File

@@ -48,7 +48,7 @@ import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
import PosthogTrackers from "../../PosthogTrackers";
import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
import { Icon as LiveIcon } from "../../../res/img/element-icons/live.svg";
import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
import { SDKContext } from "../../contexts/SDKContext";

4
src/components/structures/auth/ForgotPassword.tsx
View File

@@ -32,13 +32,13 @@ import AuthBody from "../../views/auth/AuthBody";
import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
import StyledCheckbox from "../../views/elements/StyledCheckbox";
import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
import { Icon as LockIcon } from "../../../../res/img/element-icons/lock.svg";
import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg";
import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg";
import QuestionDialog from "../../views/dialogs/QuestionDialog";
import { EnterEmail } from "./forgot-password/EnterEmail";
import { CheckEmail } from "./forgot-password/CheckEmail";
import Field from "../../views/elements/Field";
import { ErrorMessage } from "../ErrorMessage";
import { Icon as CheckboxIcon } from "../../../../res/img/element-icons/Checkbox.svg";
import { VerifyEmailModal } from "./forgot-password/VerifyEmailModal";
import Spinner from "../../views/elements/Spinner";
import { formatSeconds } from "../../../DateUtils";

2
src/components/structures/auth/forgot-password/CheckEmail.tsx
View File

@@ -18,7 +18,7 @@ import React, { ReactNode } from "react";
import AccessibleButton from "../../../views/elements/AccessibleButton";
import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
import { _t } from "../../../../languageHandler";
import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";

2
src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
View File

@@ -18,7 +18,7 @@ import React, { ReactNode } from "react";
import { _t } from "../../../../languageHandler";
import AccessibleButton from "../../../views/elements/AccessibleButton";
import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";

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;