sonderau/leagues-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit of os-league-tools-master

Browse Source
This commit is contained in:
sonderau
2025-10-27 08:36:10 +08:00
parent a5aab68ea4
commit 31ee652bff
528 changed files with 114970 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
os-league-tools-master/src/pages/Settings.js Normal file
View File

@@ -0,0 +1,156 @@
import React from 'react';
import { useSelector, useDispatch, batch } from 'react-redux';
import { Tooltip as ReactTooltip } from 'react-tooltip';
import { update } from '../store/settings/settings';
import LabeledCheckbox from '../components/common/LabeledCheckbox';
import TabbedCard from '../components/common/TabbedCard';
import PageWrapper from '../components/PageWrapper';
import images from '../assets/images';
export default function Settings() {
const settingsState = useSelector(state => state.settings);
const dispatch = useDispatch();
return (
<PageWrapper>
<div className='mx-auto'>
<TabbedCard defaultActiveTab='interface'>
<TabbedCard.Tab id='interface' label='Interface'>
<div className='grid xl:grid-cols-2'>
<div>
<span className='heading-block-md small-caps mb-2 text-accent'>
General{' '}
<span className='icon-outline text-xs inline mr-1' data-tip data-for='general'>
info
</span>
</span>
<ReactTooltip id='general'>
<p className='text-sm italic'>
On large screens, site content will be limited to a maximum of 1500px.
</p>
<p className='text-sm italic'>Uncheck if you wish to use the full width of your browser window.</p>
</ReactTooltip>
<div className='ml-2'>
<LabeledCheckbox
label='Limit maximum content width'
checked={settingsState.limitContentWidth}
onClick={e => dispatch(update({ field: 'limitContentWidth', value: e.target.checked }))}
/>
</div>
<span className='heading-block-md small-caps mb-2 mt-2 text-accent'>
Task tracker{' '}
<span className='icon-outline text-xs inline mr-1' data-tip data-for='taskTracker'>
info
</span>
</span>
<ReactTooltip id='taskTracker'>
<p className='text-sm italic'>Choose which columns to show on the task tracker.</p>
<p className='text-sm italic'>
Note that on small screens, some columns may be hidden regardless of this setting.
</p>
</ReactTooltip>
<div className='ml-2'>
<LabeledCheckbox
label='Show "Priority" column'
checked={settingsState.taskColumns.priority}
onClick={e =>
dispatch(update({ field: 'taskColumns', subfield: 'priority', value: e.target.checked }))
}
/>
<LabeledCheckbox
label='Show "Category" column'
checked={settingsState.taskColumns.category}
onClick={e =>
dispatch(update({ field: 'taskColumns', subfield: 'category', value: e.target.checked }))
}
/>
<LabeledCheckbox
label='Show "Completed At" column'
checked={settingsState.taskColumns.completedAt}
onClick={e =>
dispatch(update({ field: 'taskColumns', subfield: 'completedAt', value: e.target.checked }))
}
/>
<LabeledCheckbox
label='Show "Regions" column'
checked={settingsState.taskColumns.regions}
onClick={e =>
dispatch(update({ field: 'taskColumns', subfield: 'regions', value: e.target.checked }))
}
/>
</div>
</div>
<div>
<span className='heading-block-md small-caps my-2 text-accent'>Mode</span>
<div className='ml-2 mb-4 flex flex-row flex-wrap gap-4'>
<ModeSelectCard label='Dark' mode='dark' />
<ModeSelectCard label='Light' mode='light' />
</div>
<span className='heading-block-md small-caps my-2 text-accent'>Theme</span>
<div className='ml-2 flex flex-row flex-wrap gap-4'>
<ThemeSelectCard label='Twisted' theme='tl' />
<ThemeSelectCard label='Trailblazer' theme='tb' />
<ThemeSelectCard label='Shattered' theme='sl' />
<ThemeSelectCard label='Reloaded' theme='tr' />
<ThemeSelectCard label='Echoes' theme='re' />
<ThemeSelectCard label='Mono' theme='mono' />
</div>
</div>
</div>
</TabbedCard.Tab>
</TabbedCard>
</div>
</PageWrapper>
);
}
function ModeSelectCard({ label, mode }) {
const activeTheme = useSelector(state => state.settings.theme);
const activeMode = useSelector(state => state.settings.mode);
const dispatch = useDispatch();
const themeMode = `${activeTheme.split('-')[0]}-${mode}`;
const selected = activeMode === mode;
const selectedStyle = selected ? 'border-x-2 border-accent bg-secondary-alt' : 'cursor-pointer bg-hover';
return (
<div
className={`rounded p-2 w-[100px] min-w-[100px] ${selectedStyle}`}
onClick={() =>
batch(() => {
dispatch(update({ field: 'theme', value: themeMode }));
dispatch(update({ field: 'mode', value: mode }));
})
}
>
<img className='h-9 w-9 mx-auto' src={images[`icon-blank-${mode}.png`]} alt='' />
<span className={`text-center heading-block-sm pt-2 small-caps force-wrap ${selected && 'text-accent'}`}>
{label}
</span>
</div>
);
}
function ThemeSelectCard({ label, theme }) {
const activeTheme = useSelector(state => state.settings.theme);
const activeMode = useSelector(state => state.settings.mode);
const dispatch = useDispatch();
const themeMode = `${theme}-${activeMode}`;
const selected = activeTheme === themeMode;
const selectedStyle = selected ? 'border-x-2 border-accent bg-secondary-alt' : 'cursor-pointer bg-hover';
return (
<div
className={`rounded p-2 my-auto w-[100px] min-w-[100px] ${selectedStyle}`}
onClick={() =>
batch(() => {
dispatch(update({ field: 'theme', value: themeMode }));
})
}
>
<img className='h-9 w-9 mx-auto' src={images[`icon-${theme}-split.png`]} alt='' />
<span className={`text-center heading-block-sm pt-2 small-caps force-wrap ${selected && 'text-accent'}`}>
{label}
</span>
</div>
);
}