xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: xt:d2a854490fb5b417f3bff5dce45a4bede0973623
Branches Tags
xt:main
..
compare: xt:32d6e0c875d4dfcfc7c9063096cab52b1855de38
Branches Tags
xt:main

No commits in common. "d2a854490fb5b417f3bff5dce45a4bede0973623" and "32d6e0c875d4dfcfc7c9063096cab52b1855de38" have entirely different histories.
d2a854490f ... 32d6e0c875

13 changed files with 12 additions and 254 deletions
Show Stats Expand all files Collapse all files

14
src-tauri/src/cmd/mod.rs
View File

@ -143,17 +143,3 @@ pub async fn list_patterns(
.map_err(|e| errors::AppError::StorageFailure(e.to_string()))?;
Ok(patterns)
}
#[tauri::command]
pub async fn save_pattern(
app_state: State<'_, Arc<RwLock<AppState>>>,
pattern: Pattern,
) -> Result<(), errors::AppError> {
let state = app_state.read().await;
state
.db
.store_pattern(&pattern)
.await
.map_err(|e| errors::AppError::StorageFailure(e.to_string()))?;
Ok(())
}

3
src-tauri/src/lib.rs
View File

@ -65,8 +65,7 @@ pub fn run() {
cmd::activate_central_adapter,
cmd::start_scan_devices,
cmd::stop_scan_devices,
cmd::list_patterns,
cmd::save_pattern
cmd::list_patterns
])
.run(tauri::generate_context!())
.expect("error while running tauri application");

40
src/components.css
View File

@ -227,12 +227,10 @@
--button-text: var(--color-info);
}
&:hover {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0);
}
&:active {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
@ -262,13 +260,11 @@
--button-text: var(--color-info);
}
&:hover {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0);
}
&:active {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.text:disabled {
@ -278,7 +274,6 @@
&.icon:not(:disabled) {
--button-text: var(--color-on-surface-variant);
--button-surface: transparent;
padding: calc(var(--spacing) * 1);
&.selected {
--button-text: var(--color-primary);
&.secondary {
@ -301,24 +296,20 @@
}
}
&:hover {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0);
}
&:active {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: transparent;
padding: calc(var(--spacing) * 1);
}
&.filled_icon:not(:disabled) {
--button-text: var(--color-on-primary);
--button-surface: var(--color-primary);
padding: calc(var(--spacing) * 1);
&.secondary {
--button-text: var(--color-on-secondary);
--button-surface: var(--color-secondary);
@ -351,12 +342,10 @@
&.filled_icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
}
&.tonal_icon:not(:disabled) {
--button-text: var(--color-on-primary-container);
--button-surface: var(--color-primary-container);
padding: calc(var(--spacing) * 1);
&.secondary {
--button-text: var(--color-on-secondary-container);
--button-surface: var(--color-secondary-container);
@ -371,59 +360,52 @@
}
&.warn {
--button-text: var(--color-on-warning-container);
--button-surface: var(--color-warning-container);
--button-surface: var(--color-warning);
}
&.success {
--button-text: var(--color-on-success-container);
--button-surface: var(--color-success-container);
}
&.info {
--button-text: var(--color-on-info-container);
--button-surface: var(--color-info-container);
--button-text: var(--color-on-info);
--button-surface: var(--color-info);
}
&.unselected {
--button-text: var(--color-on-surface-variant);
--button-surface: var(--color-surface-container-highest);
}
&:hover {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0);
}
&:active {
color: var(--button-surface);
background-color: color-mix(in oklch, var(--button-surface) 18%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.tonal_icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
}
&.outlined_icon:not(:disabled) {
--button-text: var(--color-on-surface-variant);
--button-surface: transparent;
border: 1px solid var(--button-outline);
padding: calc(var(--spacing) * 1);
&.selected {
--button-text: var(--color-inverse-on-surface);
--button-surface: var(--color-inverse-surface);
}
&:hover {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
box-shadow: var(--elevation-0);
}
&:active {
color: var(--button-text);
background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
--button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
}
}
&.outlined_icon:disabled {
--button-text: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
--button-surface: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
border: 1px solid color-mix(in oklch, var(--color-on-surface) 12%, transparent);
padding: calc(var(--spacing) * 1);
}
}

47
src/components/Switch.module.css
View File

@ -1,47 +0,0 @@
@layer components {
.switch {
display: inline-flex;
align-items: center;
gap: 1em;
cursor: pointer;
&[aria-disabled='true'] {
cursor: not-allowed;
}
}
.switch_handle {
position: relative;
width: calc(var(--spacing) * 9);
height: calc(var(--spacing) * 5);
border: 1px solid var(--color-primary);
border-radius: calc(var(--border-radius) * 2);
background-color: color-mix(in oklch, var(--color-surface-container-high) 38%, transparent);
&::before {
content: '';
position: absolute;
transform: translate(2px, 3px);
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
border-radius: calc(var(--border-radius) * 2);
background-color: var(--color-primary);
transition: transform 0.2s ease-in-out;
}
&.checked {
background-color: color-mix(in oklch, var(--color-primary) 38%, transparent);
&::before {
background-color: var(--color-primary);
transform: translate(calc(var(--spacing) * 5 - 2px), 3px);
}
}
[aria-disabled='true'] & {
--disabled-color: var(--color-on-surface);
background-color: color-mix(in oklch, var(--disabled-color) 8%, transparent);
border-color: var(--disabled-color);
&.checked {
background-color: color-mix(in oklch, var(--disabled-color) 20%, transparent);
}
&::before {
background-color: color-mix(in oklch, var(--disabled-color) 38%, transparent);
}
}
}
}

40
src/components/Switch.tsx
View File

@ -1,40 +0,0 @@
import cx from 'clsx';
import { FC, useCallback, useEffect, useState } from 'react';
import styles from './Switch.module.css';
type SwitchProps = {
name?: string;
checked?: boolean;
disabled?: boolean;
onChange?: (checked: boolean) => void;
};
const Switch: FC<SwitchProps> = ({ name, checked = false, disabled = false, onChange }) => {
const [isChecked, setChecked] = useState(checked);
const handleChange = useCallback(() => {
if (!disabled) {
setChecked((prev) => !prev);
onChange?.(!isChecked);
}
}, [disabled, onChange, isChecked]);
useEffect(() => {
if (checked !== isChecked) {
setChecked(checked);
}
}, [checked]);
return (
<div aria-disabled={disabled} className={styles.switch}>
<div
className={cx(styles.switch_handle, isChecked && styles.checked)}
onClick={handleChange}
/>
{name !== undefined && (
<input type="hidden" name={name} value={isChecked ? 'true' : 'false'} />
)}
</div>
);
};
export default Switch;

3
src/page-components/pattern-editor/PatternHeader.module.css
View File

@ -9,8 +9,5 @@
border-radius: calc(var(--border-radius) * 2);
color: var(--color-light-on-surface);
background-color: var(--color-surface-container);
.content {
max-width: 300px;
}
}
}

19
src/page-components/pattern-editor/PatternHeader.tsx
View File

@ -1,19 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { FC } from 'react';
import EditableContent from '../../components/EditableContent';
import styles from './PatternHeader.module.css';
const PatternHeader: FC = () => {
return (
<div className={styles.pattern_header}>
<EditableContent as="h3" placeholder="Pattern Name" additionalClassName={styles.content} />
<div className="spacer" />
<button className="tonal">
<Icon icon="material-symbols-light:close" />
Close Edit
</button>
</div>
);
};
export default PatternHeader;

19
src/page-components/pattern-editor/PatternOverview.module.css
View File

@ -1,19 +0,0 @@
@layer pages {
.pattern_overview {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: calc(var(--spacing));
padding: calc(var(--spacing) * 2) calc(var(--spacing));
border-radius: calc(var(--border-radius) * 2);
color: var(--color-on-surface);
background-color: var(--color-surface-container);
}
.attribute_row {
display: flex;
flex-direction: row;
align-items: center;
gap: calc(var(--spacing) * 2);
}
}

18
src/page-components/pattern-editor/PatternOverview.tsx
View File

@ -1,18 +0,0 @@
import { FC } from 'react';
import Switch from '../../components/Switch';
import styles from './PatternOverview.module.css';
import PulseList from './PulseList';
const PatternOverview: FC = () => {
return (
<div className={styles.pattern_overview}>
<div className={styles.attribute_row}>
<label>Smooth Repeat</label>
<Switch />
</div>
<PulseList />
</div>
);
};
export default PatternOverview;

13
src/page-components/pattern-editor/PulseAttributes.module.css
View File

@ -1,13 +0,0 @@
@layer pages {
.pulse_attributes {
flex: 2;
display: flex;
flex-direction: column;
align-items: stretch;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 2) calc(var(--spacing));
border-radius: calc(var(--border-radius) * 2);
color: var(--color-on-surface);
background-color: var(--color-surface-container);
}
}

8
src/page-components/pattern-editor/PulseAttributes.tsx
View File

@ -1,8 +0,0 @@
import { FC } from 'react';
import styles from './PulseAttributes.module.css';
const PulseAttributes: FC = () => {
return <div className={styles.pulse_attributes}></div>;
};
export default PulseAttributes;

20
src/page-components/pattern-editor/PulseList.module.css
View File

@ -1,20 +0,0 @@
@layer page {
.pulse_tools {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: calc(var(--spacing) * 2);
}
.pulses {
min-width: 0;
min-height: 0;
overflow: hidden;
flex: 1;
padding-inline: calc(var(--spacing) * 2);
padding-block-end: calc(var(--spacing));
display: flex;
flex-direction: column;
align-items: stretch;
}
}

22
src/page-components/pattern-editor/PulseList.tsx
View File

@ -1,22 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { FC } from 'react';
import { ScrollArea } from '../../components/ScrollArea';
import styles from './PulseList.module.css';
const PulseList: FC = () => {
return (
<>
<div className={styles.pulse_tools}>
<button className="text">
<Icon icon="material-symbols-light:add" />
<span>Add Pulse</span>
</button>
</div>
<div className={styles.pulses}>
<ScrollArea enableY></ScrollArea>
</div>
</>
);
};
export default PulseList;