wh64/project-client
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

begin reworking screenshare modal to properly fit all elements

Browse source
This commit is contained in:
kaitlynkittyy 2024-04-08 23:40:24 -04:00
parent c9229d7cc1
commit 419bfd0fd1
2 changed files with 128 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/renderer/components/ScreenSharePicker.tsx
View file

@ -183,22 +183,26 @@ function StreamSettings({
); );
// the source's name is not properly being displayed // the source's name is not properly being displayed
return ( return (
<div> <div className="vcd-screen-picker">
<div className="vcd-screen-picker-content">
<Forms.FormTitle>What you're streaming</Forms.FormTitle> <Forms.FormTitle>What you're streaming</Forms.FormTitle>
<Card className="vcd-screen-picker-card vcd-screen-picker-preview"> <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
<img src={thumb} alt="" /> <img src={thumb} alt="" />
<Text variant="text-sm/normal">{source.name}</Text> <Text variant="text-sm/normal">{source.name}</Text>
</Card> </Card>
</div>
<div className="vcd-screen-picker-content">
<Forms.FormTitle>Stream Settings</Forms.FormTitle> <Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Card className="vcd-screen-picker-card"> <Card className="vcd-screen-picker-card">
<div className="vcd-screen-picker-quality"> <div className="vcd-screen-picker-quality">
<section> <section>
<Forms.FormTitle>Resolution</Forms.FormTitle> <Forms.FormTitle>Resolution</Forms.FormTitle>
<div className="vcd-screen-picker-radios"> <div className="vcd-screen-picker-radios">
{StreamResolutions.map(res => ( {StreamResolutions.map(res => (
<label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}> <label
className="vcd-screen-picker-radio"
data-checked={settings.resolution === res}
>
<Text variant="text-sm/bold">{res}</Text> <Text variant="text-sm/bold">{res}</Text>
<input <input
type="radio" type="radio"
@ -233,8 +237,11 @@ function StreamSettings({
<section> <section>
<Forms.FormTitle>Content Type</Forms.FormTitle> <Forms.FormTitle>Content Type</Forms.FormTitle>
<div> <div>
<div className="vcd-screen-picker-radios"> <div className="vcd-screen-picker-radios vcd-screen-picker-hints">
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}> <label
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "motion"}
>
<Text variant="text-sm/bold">Prefer Smoothness</Text> <Text variant="text-sm/bold">Prefer Smoothness</Text>
<input <input
type="radio" type="radio"
@ -244,7 +251,10 @@ function StreamSettings({
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))} onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
/> />
</label> </label>
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "detail"}> <label
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "detail"}
>
<Text variant="text-sm/bold">Prefer Clarity</Text> <Text variant="text-sm/bold">Prefer Clarity</Text>
<input <input
type="radio" type="radio"
@ -257,8 +267,8 @@ function StreamSettings({
</div> </div>
<div className="vcd-screen-picker-hint-description"> <div className="vcd-screen-picker-hint-description">
<p> <p>
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange
a much sharper and clearer image. for a much sharper and clearer image.
</p> </p>
</div> </div>
</div> </div>
@ -284,6 +294,7 @@ function StreamSettings({
)} )}
</Card> </Card>
</div> </div>
</div>
); );
} }
@ -370,9 +381,13 @@ function ModalComponent({
contentHint: "motion", contentHint: "motion",
audio: true audio: true
}); });
const newModalProps = {
...modalProps,
size: "large"
};
return ( return (
<Modals.ModalRoot {...modalProps}> <Modals.ModalRoot {...newModalProps}>
<Modals.ModalHeader className="vcd-screen-picker-header"> <Modals.ModalHeader className="vcd-screen-picker-header">
<Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle> <Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
<Modals.ModalCloseButton onClick={close} /> <Modals.ModalCloseButton onClick={close} />

17
src/renderer/components/screenSharePicker.css
View file

@ -1,3 +1,13 @@
.vcd-screen-picker {
display: flex;
flex-direction: row;
}
.vcd-screen-picker-content {
margin: 1em;
align-self: center;
}
.vcd-screen-picker-modal { .vcd-screen-picker-modal {
padding: 1em; padding: 1em;
} }
@ -125,7 +135,10 @@
.vcd-screen-picker-hint-description { .vcd-screen-picker-hint-description {
font-size: 14px; font-size: 14px;
color: var(--header-secondary); color: var(--text-normal);
width: 100%; width: 100%;
font-weight: 400;
}
.vcd-screen-picker-hints {
white-space: nowrap;
} }