suzanne.soy/pagraphcontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Appearance tweaks

Browse Source
This commit is contained in:
futpib 2018-11-12 21:18:01 +03:00
parent f756bc9626
commit 79f3ce458a
3 changed files with 24 additions and 8 deletions
components
checkbox
index.js
preferences
index.js
index.css

6
components/checkbox/index.js
View File

@ -1,9 +1,9 @@
const r = require('r-dom'); const r = require('r-dom');
const Checkbox = props => r.label({ const Label = require('../label');
classSet: { checkbox: true },
}, [ const Checkbox = props => r(Label, [
r.input({ r.input({
...props, ...props,
type: 'checkbox', type: 'checkbox',

10
components/preferences/index.js
View File

@ -37,6 +37,8 @@ const Preferences = withStateHandlers(
}, 'Close'), }, 'Close'),
]), ]),
r.hr(),
r.div([ r.div([
r(Checkbox, { r(Checkbox, {
checked: props.preferences.hideDisconnectedClients, checked: props.preferences.hideDisconnectedClients,
@ -65,6 +67,8 @@ const Preferences = withStateHandlers(
}, 'Hide disconnected sinks'), }, 'Hide disconnected sinks'),
]), ]),
r.hr(),
r.div([ r.div([
r(Checkbox, { r(Checkbox, {
checked: props.preferences.hideMonitors, checked: props.preferences.hideMonitors,
@ -79,6 +83,8 @@ const Preferences = withStateHandlers(
}, 'Hide pulseaudio applications'), }, 'Hide pulseaudio applications'),
]), ]),
r.hr(),
r.div([ r.div([
r(Checkbox, { r(Checkbox, {
checked: props.preferences.hideVolumeThumbnails, checked: props.preferences.hideVolumeThumbnails,
@ -104,6 +110,8 @@ const Preferences = withStateHandlers(
}, 'Maximum volume: '), }, 'Maximum volume: '),
]), ]),
r.hr(),
r.div([ r.div([
r(Checkbox, { r(Checkbox, {
checked: props.preferences.showDebugInfo, checked: props.preferences.showDebugInfo,
@ -111,6 +119,8 @@ const Preferences = withStateHandlers(
}, 'Show debug info'), }, 'Show debug info'),
]), ]),
r.hr(),
r.div([ r.div([
r(Button, { r(Button, {
style: { width: '100%' }, style: { width: '100%' },

16
index.css
View File

@ -35,12 +35,14 @@ button:active {
.label { .label {
user-select: none; user-select: none;
cursor: pointer;
display: block;
padding: 0.5rem 0;
} }
.checkbox { .checkbox {
user-select: none;
padding: 8px;
} }
.input { .input {
@ -49,6 +51,9 @@ button:active {
border: 1px solid var(--borders); border: 1px solid var(--borders);
padding: 4px; padding: 4px;
} }
.input:hover {
border-color: var(--themeSelectedBgColor);
}
.input:focus { .input:focus {
outline: none; outline: none;
border-color: var(--themeSelectedBgColor); border-color: var(--themeSelectedBgColor);
@ -154,8 +159,9 @@ button:active {
background: var(--themeBgColor); background: var(--themeBgColor);
} }
.preferences > div { .preferences > hr {
margin-bottom: 1rem; border: none;
border-top: 1px solid var(--borders);
} }
.view-wrapper .graph .edge-mouse-handler { .view-wrapper .graph .edge-mouse-handler {