Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add rudimentary responsive layout, rework ui in macros #1190

Merged
merged 4 commits into from
Oct 9, 2024
Merged

Add rudimentary responsive layout, rework ui in macros #1190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
348b054
Add rudimentary responsive layout, rework ui in macros
Pelsin Oct 7, 2024
0ff5938
Collapse pin mapping to one column
Pelsin Oct 7, 2024
b27b460
Remove left over id
Pelsin Oct 8, 2024
263c9f6
Make some inputs smaller on macro page
Pelsin Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const App = () => {
<AppContextProvider>
<Router>
<Navigation />
<div className="container-fluid body-content">
<div className="body-content container-lg">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/settings" element={<SettingsPage />} />
Expand Down
3 changes: 0 additions & 3 deletions www/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.body-content {
min-width: 400px;
display: flex;
margin-top: 58px;
flex-direction: column;
padding: 10px 20px;
}
4 changes: 4 additions & 0 deletions www/src/Components/Navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
$nav-outer-margin: 0.75rem;

.nav {
padding-bottom: 1.5rem;
}

nav.navbar {
padding: 0;

Expand Down
246 changes: 108 additions & 138 deletions www/src/Pages/InputMacroAddonPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Button,
Col,
Form,
InputGroup,
Nav,
OverlayTrigger,
Row,
Expand Down Expand Up @@ -111,23 +112,23 @@ const ButtonMasksComponent = (props) => {
buttonMasks,
} = props;
return (
<div key={key} className={className}>
<Form.Select
size="sm"
name={`${key}.buttonMask`}
className="form-control col-sm-auto"
value={value}
error={error}
isInvalid={isInvalid}
onChange={onChange}
>
{buttonMasks.map((o, i2) => (
<option key={`${key}.mask[${i2}]`} value={o.value}>
{(buttonLabelType && BUTTONS[buttonLabelType][o.label]) || o.label}
</option>
))}
</Form.Select>
</div>
// <div key={key} className={className}>
<Form.Select
size="sm"
name={`${key}.buttonMask`}
// className="form-control"
value={value}
error={error}
isInvalid={isInvalid}
onChange={onChange}
>
{buttonMasks.map((o, i2) => (
<option key={`${key}.mask[${i2}]`} value={o.value}>
{(buttonLabelType && BUTTONS[buttonLabelType][o.label]) || o.label}
</option>
))}
</Form.Select>
// </div>
);
};

Expand All @@ -146,77 +147,46 @@ const MacroInputComponent = (props) => {
} = props;

return (
<Row key={key} className="py-2 flex-nowrap">
<Col
style={{
minWidth: '150px',
maxWidth: '150px',
}}
>
<Row className="d-flex justify-content-center">
<Col sm={6} className="px-0">
<Form.Control
className="text-center"
size="sm"
type="number"
placeholder={t('InputMacroAddon:input-macro-duration-label')}
name={`${key}.duration`}
value={duration / (showFrames ? ONE_FRAME_US : 1000)}
step="any"
error={errors?.duration}
isInvalid={errors?.duration}
onChange={(e) => {
setFieldValue(
`${key}.duration`,
e.target.value * (showFrames ? ONE_FRAME_US : 1000),
);
}}
min={0}
/>
</Col>
<Col sm={5} className="px-1 text-nowrap">
<Row className="align-content-start align-items-center row-gap-2 pb-2">
<Col xs="auto" style={{ width: 180 }}>
<InputGroup size="sm">
<Form.Control
className="text-center"
type="number"
placeholder={t('InputMacroAddon:input-macro-duration-label')}
name={`${key}.duration`}
value={duration / (showFrames ? ONE_FRAME_US : 1000)}
step="any"
error={errors?.duration}
isInvalid={errors?.duration}
onChange={(e) => {
setFieldValue(
`${key}.duration`,
e.target.value * (showFrames ? ONE_FRAME_US : 1000),
);
}}
min={0}
/>
<InputGroup.Text>
{t(
showFrames
? 'InputMacroAddon:input-macro-time-label-frames'
: 'InputMacroAddon:input-macro-time-label-ms',
)}
</Col>
</Row>
</InputGroup.Text>
</InputGroup>
</Col>
<Col sm={'auto'}>
<Row className="d-flex justify-content-center">
{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
(mask, i1) => (
<Col
key={`${key}.buttonMask[${i1}]`}
sm={'auto'}
className="px-1"
>
<ButtonMasksComponent
id={`${key}.buttonMask[${i1}]`}
value={buttonMask & mask.value}
onChange={(e) => {
setFieldValue(
`${key}.buttonMask`,
(buttonMask ^ mask.value) | e.target.value,
);
}}
error={errors?.buttonMask}
isInvalid={errors?.buttonMask}
translation={t}
buttonLabelType={buttonLabelType}
buttonMasks={BUTTON_MASKS_OPTIONS}
/>
</Col>
),
)}
<Col sm={'auto'} className="px-1">
{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
(mask, i1) => (
<Col xs="auto" key={`${key}.buttonMask[${i1}]`}>
<ButtonMasksComponent
id={`${key}.buttonMaskPlaceholder`}
className="col-sm-auto"
value={0}
id={`${key}.buttonMask[${i1}]`}
value={buttonMask & mask.value}
onChange={(e) => {
setFieldValue(`${key}.buttonMask`, buttonMask | e.target.value);
setFieldValue(
`${key}.buttonMask`,
(buttonMask ^ mask.value) | e.target.value,
);
}}
error={errors?.buttonMask}
isInvalid={errors?.buttonMask}
Expand All @@ -225,68 +195,68 @@ const MacroInputComponent = (props) => {
buttonMasks={BUTTON_MASKS_OPTIONS}
/>
</Col>
</Row>
</Col>
<Col
style={{
minWidth: '125px',
maxWidth: '125px',
}}
className="d-flex justify-content-center text-nowrap"
>
{' '}
{t('InputMacroAddon:input-macro-release-and-wait-label')}{' '}
),
)}
<Col xs="auto">
<ButtonMasksComponent
id={`${key}.buttonMaskPlaceholder`}
className="col-sm-auto"
value={0}
onChange={(e) => {
setFieldValue(`${key}.buttonMask`, buttonMask | e.target.value);
}}
error={errors?.buttonMask}
isInvalid={errors?.buttonMask}
translation={t}
buttonLabelType={buttonLabelType}
buttonMasks={BUTTON_MASKS_OPTIONS}
/>
</Col>
<Col
style={{
minWidth: '150px',
maxWidth: '150px',
}}
>
<Row className="d-flex justify-content-center">
<Col sm={6} className="px-0">
<Form.Control
className="text-center"
size="sm"
type="number"
placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
name={`${key}.waitDuration`}
value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
step="any"
error={errors?.waitDuration}
isInvalid={errors?.waitDuration}
onChange={(e) => {
setFieldValue(
`${key}.waitDuration`,
e.target.value * (showFrames ? ONE_FRAME_US : 1000),
);
}}
min={0}
/>
</Col>
<Col sm={5} className="px-1 text-nowrap">
<Col xs="auto" style={{ width: 290 }}>
<InputGroup size="sm">
<InputGroup.Text>
{t('InputMacroAddon:input-macro-release-and-wait-label')}
</InputGroup.Text>
<Form.Control
className="text-center d-flex"
type="number"
placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
name={`${key}.waitDuration`}
value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
step="any"
error={errors?.waitDuration}
isInvalid={errors?.waitDuration}
onChange={(e) => {
setFieldValue(
`${key}.waitDuration`,
e.target.value * (showFrames ? ONE_FRAME_US : 1000),
);
}}
min={0}
/>
<InputGroup.Text>
{t(
showFrames
? 'InputMacroAddon:input-macro-time-label-frames'
: 'InputMacroAddon:input-macro-time-label-ms',
)}
</Col>
<Col sm={1} className="px-0 text-nowrap">
<OverlayTrigger
placement="right"
overlay={tooltip}
delay={{ show: 500, hide: 100 }}
>
<Button
variant="transparent"
size="sm"
onDoubleClick={deleteMacroInput}
>
💥
</Button>
</OverlayTrigger>
</Col>
</Row>
</InputGroup.Text>
</InputGroup>
</Col>
<Col xs="auto">
<OverlayTrigger
placement="right"
overlay={tooltip}
delay={{ show: 500, hide: 100 }}
>
<Button
variant="transparent"
size="sm"
onDoubleClick={deleteMacroInput}
>
💥
</Button>
</OverlayTrigger>
</Col>
</Row>
);
Expand Down Expand Up @@ -553,7 +523,7 @@ export default function MacrosPage() {
<Form noValidate onSubmit={handleSubmit}>
<Tab.Container defaultActiveKey="settings">
<Row>
<Col sm={2}>
<Col md={3}>
<Nav variant="pills" className="flex-column text-nowrap">
<Nav.Item key="pills-header">
<Nav.Link eventKey="settings">
Expand All @@ -575,7 +545,7 @@ export default function MacrosPage() {
))}
</Nav>
</Col>
<Col sm={10}>
<Col md={9}>
<Tab.Content>
<Tab.Pane eventKey="settings">
<Section
Expand Down
7 changes: 7 additions & 0 deletions www/src/Pages/PinMapping.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,10 @@
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(15, auto);
}

@media only screen and (max-width: 680px) {
.pin-grid {
display: flex;
flex-direction: column;
}
}
8 changes: 4 additions & 4 deletions www/src/Pages/PinMapping.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ const PinSelectList = memo(function PinSelectList({
[buttonNames],
);
return Object.entries(pins).map(([pin, pinData], index) => (
<div key={`select-${index}`} className="d-flex col align-items-center">
<div key={`select-${index}`} className="d-flex align-items-center">
<div className="d-flex flex-shrink-0" style={{ width: '4rem' }}>
<label>{pin.toUpperCase()}</label>
</div>
Expand Down Expand Up @@ -393,7 +393,7 @@ export default function PinMapping() {
return (
<Tab.Container defaultActiveKey="profile-0">
<Row>
<Col sm={2}>
<Col md={3}>
{loadingProfiles && (
<div className="d-flex justify-content-center">
<span className="spinner-border" />
Expand Down Expand Up @@ -427,7 +427,7 @@ export default function PinMapping() {
</Nav>
<hr />
<p className="text-center">{t('PinMapping:sub-header-text')}</p>
<div className="d-flex justify-content-center">
<div className="d-flex justify-content-center pb-3">
<CaptureButton
buttonLabel={t('PinMapping:pin-viewer')}
labels={['']}
Expand All @@ -440,7 +440,7 @@ export default function PinMapping() {
</div>
)}
</Col>
<Col sm={10}>
<Col md={9}>
<Tab.Content>
{profiles.map((_, index) => (
<Tab.Pane key={`profile-${index}`} eventKey={`profile-${index}`}>
Expand Down
Loading