Skip to content

Commit

Permalink
🎉 Add scrollbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@Schneegans
Schneegans committed Jan 28, 2025
1 parent 0cf2ae6 commit 1e4da5c
Show file tree
Hide file tree
Showing 4 changed files with 248 additions and 132 deletions.
268 changes: 137 additions & 131 deletions src/settings-renderer/components/GeneralSettingsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { TbReload, TbCode } from 'react-icons/tb';
import Button from './widgets/Button';
import Modal from './widgets/Modal';
import Swirl from './widgets/Swirl';
import Scrollbox from './widgets/Scrollbox';
import Note from './widgets/Note';
import ManagedSpinbutton from './widgets/ManagedSpinbutton';
import ManagedCheckbox from './widgets/ManagedCheckbox';
Expand Down Expand Up @@ -48,147 +49,152 @@ export default (props: IProps) => {
title="General Settings"
visible={props.visible}
onClose={props.onClose}
maxWidth={500}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
gap: 5,
}}>
<Note marginTop={20} center>
All settings of Kando are stored in a JSON file which you can also edit, share,
or backup. Click{' '}
<a ref={configLinkRef} target="_blank">
here
</a>{' '}
to open the directory where the config.json file is stored.
</Note>
maxWidth={500}
paddingTop={0}
paddingBottom={0}
paddingRight={5}>
<Scrollbox maxHeight={600}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
gap: 5,
}}>
<Note center>
All settings of Kando are stored in a JSON file which you can also edit,
share, or backup. Click{' '}
<a ref={configLinkRef} target="_blank">
here
</a>{' '}
to open the directory where the config.json file is stored.
</Note>

<Swirl marginTop={10} marginBottom={20} />
<Swirl marginTop={10} marginBottom={20} />

<h1>App Behavior</h1>
<ManagedCheckbox
label="Check for new versions"
info="If enabled, Kando will show a notification when a new version is available."
settingsKey="enableVersionCheck"
/>
<ManagedCheckbox
label="Transparent settings window"
info="Reopen the settings window to fully apply the effect."
settingsKey="transparentSettingsWindow"
/>
<ManagedCheckbox
label="Hide settings button"
info="The button in the screen corner that opens the settings will still be there, but invisible."
settingsKey="hideSettingsButton"
/>
<ManagedDropdown
label="Tray icon flavor"
info="You can also choose to hide the tray icon completely."
settingsKey="trayIconFlavor"
options={[
{ value: 'none', label: 'Hidden' },
{ value: 'color', label: 'Color' },
{ value: 'white', label: 'White' },
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'black', label: 'Black' },
]}
/>

<h1>Menu Behavior</h1>
<ManagedCheckbox
label="Enable Marking Mode"
info="With Marking Mode enabled, you can select items by dragging the mouse over them."
settingsKey="enableMarkingMode"
/>
<ManagedCheckbox
label="Enable Turbo Mode"
info="With Turbo Mode enabled, you can perform gestures as long as you hold down a modifier key such as Shift or Ctrl."
settingsKey="enableTurboMode"
/>
<ManagedCheckbox
label="Right mouse button selects parent"
info="If unchecked, the right mouse button will close the menu instead."
settingsKey="rmbSelectsParent"
/>
<ManagedSpinbutton
label="Fade-in duration"
info="The time in milliseconds for the fade-in animation of the menu. Set to zero to disable the animation. Default is 150."
settingsKey="fadeInDuration"
min={0}
max={500}
step={10}
/>
<ManagedSpinbutton
label="Fade-out duration"
info="The time in milliseconds for the fade-out animation of the menu. Some actions are only executed after this animation is finished, so setting this to zero makes them execute faster. Default is 200."
settingsKey="fadeOutDuration"
min={0}
max={500}
step={10}
/>
<h1>App Behavior</h1>
<ManagedCheckbox
label="Check for new versions"
info="If enabled, Kando will show a notification when a new version is available."
settingsKey="enableVersionCheck"
/>
<ManagedCheckbox
label="Transparent settings window"
info="Reopen the settings window to fully apply the effect."
settingsKey="transparentSettingsWindow"
/>
<ManagedCheckbox
label="Hide settings button"
info="The button in the screen corner that opens the settings will still be there, but invisible."
settingsKey="hideSettingsButton"
/>
<ManagedDropdown
label="Tray icon flavor"
info="You can also choose to hide the tray icon completely."
settingsKey="trayIconFlavor"
options={[
{ value: 'none', label: 'Hidden' },
{ value: 'color', label: 'Color' },
{ value: 'white', label: 'White' },
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'black', label: 'Black' },
]}
/>

<h1>Advanced Menu Options</h1>
<Note marginTop={-10}>
Usually, you can leave these settings at their default values.
</Note>
<ManagedSpinbutton
label="Center click zone radius"
info="The size of the area in the middle of the menu which will either close or navigate a level up when clicked. Default is 50."
settingsKey="centerDeadZone"
min={0}
max={999}
step={10}
/>
<ManagedSpinbutton
label="Minimum submenu distance"
info="If a submenu is opened close to the parent menu, the parent will be moved away to this distance. Default is 150."
settingsKey="minParentDistance"
min={0}
max={999}
step={10}
/>
<ManagedSpinbutton
label="Movement threshold"
info="Smaller mouse movements will not be considered in Marking or Turbo mode. Default is 15."
settingsKey="dragThreshold"
min={0}
max={999}
step={10}
/>
<h1>Menu Behavior</h1>
<ManagedCheckbox
label="Enable Marking Mode"
info="With Marking Mode enabled, you can select items by dragging the mouse over them."
settingsKey="enableMarkingMode"
/>
<ManagedCheckbox
label="Enable Turbo Mode"
info="With Turbo Mode enabled, you can perform gestures as long as you hold down a modifier key such as Shift or Ctrl."
settingsKey="enableTurboMode"
/>
<ManagedCheckbox
label="Right mouse button selects parent"
info="If unchecked, the right mouse button will close the menu instead."
settingsKey="rmbSelectsParent"
/>
<ManagedSpinbutton
label="Fade-in duration"
info="The time in milliseconds for the fade-in animation of the menu. Set to zero to disable the animation. Default is 150ms."
settingsKey="fadeInDuration"
min={0}
max={500}
step={10}
/>
<ManagedSpinbutton
label="Fade-out duration"
info="The time in milliseconds for the fade-out animation of the menu. Some actions are only executed after this animation is finished, so setting this to zero makes them execute faster. Default is 200ms."
settingsKey="fadeOutDuration"
min={0}
max={500}
step={10}
/>

<h1>Developer Options</h1>
<div style={{ display: 'flex' }}>
<Button
label="Reload menu theme"
icon={<TbReload />}
grouped
grow
onClick={() => {
window.settingsAPI.reloadMenuTheme();
}}
<h1>Advanced Menu Options</h1>
<Note marginTop={-10}>
Usually, you can leave these settings at their default values.
</Note>
<ManagedSpinbutton
label="Center click zone radius"
info="The size of the area in the middle of the menu which will either close or navigate a level up when clicked. Default is 50px."
settingsKey="centerDeadZone"
min={0}
max={999}
step={10}
/>
<ManagedSpinbutton
label="Minimum submenu distance"
info="If a submenu is opened close to the parent menu, the parent will be moved away to this distance. Default is 150px."
settingsKey="minParentDistance"
min={0}
max={999}
step={10}
/>
<ManagedSpinbutton
label="Movement threshold"
info="Smaller mouse movements will not be considered in Marking or Turbo mode. Default is 15px."
settingsKey="dragThreshold"
min={0}
max={999}
step={10}
/>

<h1>Developer Options</h1>
<div style={{ display: 'flex' }}>
<Button
label="Reload menu theme"
icon={<TbReload />}
grouped
grow
onClick={() => {
window.settingsAPI.reloadMenuTheme();
}}
/>
<Button
label="Reload sound theme"
icon={<TbReload />}
grouped
grow
onClick={() => {
window.settingsAPI.reloadSoundTheme();
}}
/>
</div>
<Button
label="Reload sound theme"
icon={<TbReload />}
grouped
grow
label="Show developer tools"
icon={<TbCode />}
onClick={() => {
window.settingsAPI.reloadSoundTheme();
window.settingsAPI.showDevTools();
}}
/>
</div>
<Button
label="Show developer tools"
icon={<TbCode />}
onClick={() => {
window.settingsAPI.showDevTools();
}}
/>
</div>
</Scrollbox>
</Modal>
);
};
15 changes: 14 additions & 1 deletion src/settings-renderer/components/widgets/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ interface IProps {
children: React.ReactNode;
title?: string;
maxWidth?: number;
paddingTop?: number;
paddingBottom?: number;
paddingLeft?: number;
paddingRight?: number;
}

export default (props: IProps) => {
Expand Down Expand Up @@ -51,7 +55,16 @@ export default (props: IProps) => {
right={!cIsMac ? closeButton : null}
paddingLeft={cIsMac ? 0 : 15}
/>
<div className={classes.content}>{props.children}</div>
<div
className={classes.content}
style={{
paddingTop: props.paddingTop,
paddingBottom: props.paddingBottom,
paddingLeft: props.paddingLeft,
paddingRight: props.paddingRight,
}}>
{props.children}
</div>
</div>
</div>
</CSSTransition>
Expand Down
71 changes: 71 additions & 0 deletions src/settings-renderer/components/widgets/Scrollbox.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
//////////////////////////////////////////////////////////////////////////////////////////
// _ _ ____ _ _ ___ ____ //
// |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform //
// | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando //
// //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

// This is used for scrolling content. The mask image ensures that the content is
// beautifully faded to transparency at the top and at the bottom. We also apply some
// custom styling to the scrollbar

.scrollbox {
-webkit-mask-image:
-webkit-linear-gradient(
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 1) 15px,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 0) 49%
),
-webkit-linear-gradient(
bottom,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 1) 15px,
rgba(255, 255, 255, 1) 49%,
rgba(255, 255, 255, 0) 49%
),
-webkit-linear-gradient(
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 40%,
rgba(255, 255, 255, 1) 60%,
rgba(255, 255, 255, 0) 70%
);
overflow-y: auto;
overflow-x: hidden;

.content {
margin: 15px 0;
padding-right: 4px;
}

&::-webkit-scrollbar-track {
background-color: rgba(128, 128, 128, 0);
border-radius: 3px;
margin: 15px 0;
}

&:hover::-webkit-scrollbar-track {
background-color: rgba(128, 128, 128, 0.1);
}

&::-webkit-scrollbar {
width: 6px;
cursor: pointer;
}

&::-webkit-scrollbar-thumb {
background-color: rgba(128, 128, 128, 0);
border-radius: 3px;
}

&:hover::-webkit-scrollbar-thumb {
background-color: rgba(128, 128, 128, 0.5);
}

&::-webkit-scrollbar-thumb:hover {
background-color: rgba(128, 128, 128, 0.9);
}
}
Loading

0 comments on commit 1e4da5c

Please sign in to comment.