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

UI tweaks & colors #1255

Merged
merged 9 commits into from
Jan 4, 2025
+247 −193
Merged

UI tweaks & colors #1255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9b20437
Start most colors the same as in docs, fixed navigation issue and blu…
Pelsin Dec 27, 2024
d96dfa8
Remove unused rule
Pelsin Jan 2, 2025
9a475dc
Add some navbar colors
Pelsin Jan 2, 2025
ba753cf
Merge branch 'main' into docs-colors
Pelsin Jan 3, 2025
4f2c906
Add gp2040-ce primary color
Pelsin Jan 3, 2025
c2ed623
Make dropdown default size, and improve mobile version
Pelsin Jan 3, 2025
450e9ea
Remove unused variables, format and tidy up macro rows ui
Pelsin Jan 3, 2025
4934a71
Tidy up hotkeys ui a bit and format settingsPage
Pelsin Jan 3, 2025
28a6deb
Fix a background issue on language selector and color selector mobile…
Pelsin Jan 4, 2025
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
Binary file modified www/public/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 10 additions & 14 deletions www/src/Components/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,19 @@ const Navigation = () => {
let eventKey = 0;

return (
<Navbar
collapseOnSelect
bg="primary"
variant="dark"
expand="md"
fixed="top"
>
<Navbar.Brand href="/" title={`GP2040-CE ${t('Navigation:home-label')}`}>
<img
src="images/logo.png"
className="title-logo"
alt="GP2040-CE logo"
/>{' '}
<Navbar collapseOnSelect expand="md" fixed="top">
<Navbar.Brand title={`GP2040-CE ${t('Navigation:home-label')}`}>
<Nav.Link as={NavLink} to="/" eventKey={eventKey++}>
<img
src="images/logo.png"
className="title-logo"
alt="GP2040-CE logo"
/>
</Nav.Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav className="me-auto nav-menu">
<Nav.Link as={NavLink} to="/settings" eventKey={eventKey++}>
{t('Navigation:settings-label')}
</Nav.Link>
Expand Down
21 changes: 16 additions & 5 deletions www/src/Components/Navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ $nav-outer-margin: 0.75rem;

nav.navbar {
padding: 0;
background-color: white;
box-shadow: 0 1px 2px 0 #0000001a;

.navbar-brand {
margin-right: $nav-outer-margin;
Expand All @@ -30,17 +32,17 @@ nav.navbar {
color: #ff0000;
}
}
[data-bs-theme="dark"] {
nav.navbar {
background-color: #242526;
}
}

.title-logo {
height: 40px;
margin: 0.25rem 0rem 0.25rem $nav-outer-margin;
}

.nav-link,
.nav-item * {
font-size: 0.875rem;
}

@media (max-width: 767.98px) {
nav.navbar {
.navbar-actions {
Expand All @@ -51,5 +53,14 @@ nav.navbar {
.nav-link {
margin-left: $nav-outer-margin;
}
.nav-menu {
.dropdown-menu {
background-color: transparent;
border: none;
.dropdown-item {
padding-left: 1.5rem;
}
}
}
}
}
63 changes: 22 additions & 41 deletions www/src/Pages/InputMacroAddonPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
import React, { useContext, useEffect, useState } from 'react';
import { AppContext } from '../Contexts/AppContext';
import {
Badge,
Button,
Col,
Form,
InputGroup,
Nav,
OverlayTrigger,
Row,
Tab,
Table,
Tooltip,
} from 'react-bootstrap';
import { Formik, useFormikContext } from 'formik';
import * as yup from 'yup';
import { Trans, useTranslation } from 'react-i18next';
import omit from 'lodash/omit';

import { AppContext } from '../Contexts/AppContext';
import Section from '../Components/Section';
import WebApi from '../Services/WebApi';
import {
Expand Down Expand Up @@ -83,11 +81,8 @@ const defaultValues = {
const ONE_FRAME_US = 16666;

const FormContext = () => {
const { values, setValues } = useFormikContext();
const { buttonLabels, setLoading } = useContext(AppContext);
const { buttonLabelType, swapTpShareLabels } = buttonLabels;

const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
const { setValues } = useFormikContext();
const { setLoading } = useContext(AppContext);

useEffect(() => {
async function fetchData() {
Expand Down Expand Up @@ -132,8 +127,6 @@ const ButtonMasksComponent = (props) => {
);
};

const tooltip = <Tooltip id="tooltip">Double click to delete.</Tooltip>;

const MacroInputComponent = (props) => {
const {
value: { duration, buttonMask, waitDuration },
Expand All @@ -147,8 +140,8 @@ const MacroInputComponent = (props) => {
} = props;

return (
<Row className="align-content-start align-items-center row-gap-2 pb-2">
<Col xs="auto" style={{ width: 180 }}>
<Row className="align-content-start align-items-center row-gap-2 gx-2 pb-2">
<Col xs="auto" style={{ width: 150 }}>
<InputGroup size="sm">
<Form.Control
className="text-center"
Expand Down Expand Up @@ -244,19 +237,9 @@ const MacroInputComponent = (props) => {
</InputGroup>
</Col>
<Col xs="auto">
<OverlayTrigger
placement="right"
overlay={tooltip}
delay={{ show: 500, hide: 100 }}
>
<Button
variant="transparent"
size="sm"
onDoubleClick={deleteMacroInput}
>
💥
</Button>
</OverlayTrigger>
<Button size="sm" onClick={deleteMacroInput}>
{'✕'}
</Button>
</Col>
</Row>
);
Expand Down Expand Up @@ -437,22 +420,20 @@ const MacroComponent = (props) => {
/>
</Col>
</Row>
<Row>
{macroInputs.map((macroInput, a) => (
<MacroInputComponent
key={`${key}.macroInputs[${a}]`}
id={`${key}.macroInputs[${a}]`}
value={macroInput}
errors={errors?.macroInputs?.at(a)}
showFrames={showFrames}
translation={t}
buttonLabelType={buttonLabelType}
deleteMacroInput={() => deleteMacroInput(a)}
handleChange={handleChange}
setFieldValue={setFieldValue}
/>
))}
</Row>
{macroInputs.map((macroInput, a) => (
<MacroInputComponent
key={`${key}.macroInputs[${a}]`}
id={`${key}.macroInputs[${a}]`}
value={macroInput}
errors={errors?.macroInputs?.at(a)}
showFrames={showFrames}
translation={t}
buttonLabelType={buttonLabelType}
deleteMacroInput={() => deleteMacroInput(a)}
handleChange={handleChange}
setFieldValue={setFieldValue}
/>
))}
<Row>
<Col sm={3}>
{macroInputs.length < MACRO_INPUTS_MAX ? (
Expand Down
Loading
Loading