devproje/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
return (
<div>
<div className="vcd-screen-picker">
<div className="vcd-screen-picker-content">
<Forms.FormTitle>What you're streaming</Forms.FormTitle>
<Card className="vcd-screen-picker-card vcd-screen-picker-preview">
<img src={thumb} alt="" />
<Text variant="text-sm/normal">{source.name}</Text>
</Card>
</div>
<div className="vcd-screen-picker-content">
<Forms.FormTitle>Stream Settings</Forms.FormTitle>
<Card className="vcd-screen-picker-card">
<div className="vcd-screen-picker-quality">
<section>
<Forms.FormTitle>Resolution</Forms.FormTitle>
<div className="vcd-screen-picker-radios">
{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>
<input
type="radio"
@ -233,8 +237,11 @@ function StreamSettings({
<section>
<Forms.FormTitle>Content Type</Forms.FormTitle>
<div>
<div className="vcd-screen-picker-radios">
<label className="vcd-screen-picker-radio" data-checked={settings.contentHint === "motion"}>
<div className="vcd-screen-picker-radios vcd-screen-picker-hints">
<label
className="vcd-screen-picker-radio"
data-checked={settings.contentHint === "motion"}
>
<Text variant="text-sm/bold">Prefer Smoothness</Text>
<input
type="radio"
@ -244,7 +251,10 @@ function StreamSettings({
onChange={() => setSettings(s => ({ ...s, contentHint: "motion" }))}
/>
</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>
<input
type="radio"
@ -257,8 +267,8 @@ function StreamSettings({
</div>
<div className="vcd-screen-picker-hint-description">
<p>
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for
a much sharper and clearer image.
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange
for a much sharper and clearer image.
</p>
</div>
</div>
@ -284,6 +294,7 @@ function StreamSettings({
)}
</Card>
</div>
</div>
);
}
@ -370,9 +381,13 @@ function ModalComponent({
contentHint: "motion",
audio: true
});
const newModalProps = {
...modalProps,
size: "large"
};
return (
<Modals.ModalRoot {...modalProps}>
<Modals.ModalRoot {...newModalProps}>
<Modals.ModalHeader className="vcd-screen-picker-header">
<Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
<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 {
padding: 1em;
}
@ -125,7 +135,10 @@
.vcd-screen-picker-hint-description {
font-size: 14px;
color: var(--header-secondary);
color: var(--text-normal);
width: 100%;
font-weight: 400;
}
.vcd-screen-picker-hints {
white-space: nowrap;
}