rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1264 from robintown/settings-tab-order

Browse Source 
Put the settings tabs back in the right order
This commit is contained in:
Robin
2023-07-21 00:40:26 -04:00
committed by GitHub
parent e4f2d86fcc 8903930d56
commit 0d89f497aa
1 changed files with 80 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/settings/SettingsModal.tsx
View File

@@ -118,7 +118,7 @@ export const SettingsModal = (props: Props) => {
const devices = props.mediaDevicesSwitcher; const devices = props.mediaDevicesSwitcher;
const tabs = [ const audioTab = (
<TabItem <TabItem
key="audio" key="audio"
title={ title={
@@ -130,7 +130,10 @@ export const SettingsModal = (props: Props) => {
> >
{devices && generateDeviceSelection(devices.audioIn, t("Microphone"))} {devices && generateDeviceSelection(devices.audioIn, t("Microphone"))}
{devices && generateDeviceSelection(devices.audioOut, t("Speaker"))} {devices && generateDeviceSelection(devices.audioOut, t("Speaker"))}
</TabItem>, </TabItem>
);
const videoTab = (
<TabItem <TabItem
key="video" key="video"
title={ title={
@@ -141,7 +144,24 @@ export const SettingsModal = (props: Props) => {
} }
> >
{devices && generateDeviceSelection(devices.videoIn, t("Camera"))} {devices && generateDeviceSelection(devices.videoIn, t("Camera"))}
</TabItem>, </TabItem>
);
const profileTab = (
<TabItem
key="profile"
title={
<>
<UserIcon width={15} height={15} />
<span>{t("Profile")}</span>
</>
}
>
<ProfileSettingsTab client={props.client} />
</TabItem>
);
const feedbackTab = (
<TabItem <TabItem
key="feedback" key="feedback"
title={ title={
@@ -152,7 +172,10 @@ export const SettingsModal = (props: Props) => {
} }
> >
<FeedbackSettingsTab roomId={props.roomId} /> <FeedbackSettingsTab roomId={props.roomId} />
</TabItem>, </TabItem>
);
const moreTab = (
<TabItem <TabItem
key="more" key="more"
title={ title={
@@ -188,73 +211,61 @@ export const SettingsModal = (props: Props) => {
}} }}
/> />
</FieldRow> </FieldRow>
</TabItem>, </TabItem>
]; );
if (!isEmbedded) { const developerTab = (
tabs.push( <TabItem
<TabItem key="developer"
key="profile" title={
title={ <>
<> <DeveloperIcon width={16} height={16} />
<UserIcon width={15} height={15} /> <span>{t("Developer")}</span>
<span>{t("Profile")}</span> </>
</> }
} >
> <FieldRow>
<ProfileSettingsTab client={props.client} /> <Body className={styles.fieldRowText}>
</TabItem> {t("Version: {{version}}", {
); version: import.meta.env.VITE_APP_VERSION || "dev",
} })}
</Body>
</FieldRow>
<FieldRow>
<InputField
id="showInspector"
name="inspector"
label={t("Show call inspector")}
type="checkbox"
checked={showInspector}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowInspector(e.target.checked)
}
/>
</FieldRow>
<FieldRow>
<InputField
id="showConnectionStats"
name="connection-stats"
label={t("Show connection stats")}
type="checkbox"
checked={showConnectionStats}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowConnectionStats(e.target.checked)
}
/>
</FieldRow>
<FieldRow>
<Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
</FieldRow>
</TabItem>
);
if (developerSettingsTab) { const tabs: JSX.Element[] = [];
tabs.push( tabs.push(audioTab, videoTab);
<TabItem if (!isEmbedded) tabs.push(profileTab);
key="developer" tabs.push(feedbackTab, moreTab);
title={ if (developerSettingsTab) tabs.push(developerTab);
<>
<DeveloperIcon width={16} height={16} />
<span>{t("Developer")}</span>
</>
}
>
<FieldRow>
<Body className={styles.fieldRowText}>
{t("Version: {{version}}", {
version: import.meta.env.VITE_APP_VERSION || "dev",
})}
</Body>
</FieldRow>
<FieldRow>
<InputField
id="showInspector"
name="inspector"
label={t("Show call inspector")}
type="checkbox"
checked={showInspector}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowInspector(e.target.checked)
}
/>
</FieldRow>
<FieldRow>
<InputField
id="showConnectionStats"
name="connection-stats"
label={t("Show connection stats")}
type="checkbox"
checked={showConnectionStats}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setShowConnectionStats(e.target.checked)
}
/>
</FieldRow>
<FieldRow>
<Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
</FieldRow>
</TabItem>
);
}
return ( return (
<Modal <Modal