f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-27 09:33:08 +00:00
Code Wiki Activity

adjust field/checkbox styles

Browse Source
This commit is contained in:
Charlie Humphreys
2023-07-15 00:07:17 -05:00
parent 23f2f1f53b
commit 18c94f95f3
4 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
View File

@@ -1,6 +1,7 @@
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
require('./checkbox.less');
const Checkbox = createClass({ const Checkbox = createClass({
getDefaultProps : function() { getDefaultProps : function() {
@@ -31,8 +32,10 @@ const Checkbox = createClass({
const { text } = cm.lineInfo(n); const { text } = cm.lineInfo(n);
const id = [prefix, value, n].join('-'); const id = [prefix, value, n].join('-');
return <React.Fragment> return <React.Fragment>
<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/> <div className='widget-checkbox'>
<label htmlFor={id}>{_.startCase(value)}</label> <input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
<label htmlFor={id}>{_.startCase(value)}</label>
</div>
</React.Fragment>; </React.Fragment>;
} }
}); });

7
shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less Normal file
View File

@@ -0,0 +1,7 @@
.widget-checkbox {
display: inline-block;
flex: 0 0 auto;
background-color: #ddd;
border-radius: 10px;
padding: 4px 2px;
}

4
shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less
View File

@@ -1,7 +1,7 @@
.widget-field { .widget-field {
display: inline-block; display: inline-block;
flex: 0 0 auto; flex: 0 0 auto;
background-color: #22d4f6; background-color: #ddd;
border-radius: 10px; border-radius: 10px;
padding: 4px 2px; padding: 4px 2px;
@@ -12,7 +12,7 @@
} }
>input { >input {
background-color: #22d4f6; background-color: #ddd;
border: none; border: none;
} }

3
shared/naturalcrit/codeEditor/helpers/widgets.js
View File

@@ -2,7 +2,7 @@ const React = require('react');
const ReactDOM = require('react-dom'); const ReactDOM = require('react-dom');
const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants'); const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
require('./widget-elements/hints/hints.jsx'); require('./widget-elements/hints/hints.jsx');
const { Checkbox, Field } = require('./widget-elements'); const { Field, Checkbox } = require('./widget-elements');
// See https://codemirror.net/5/addon/hint/css-hint.js for code reference // See https://codemirror.net/5/addon/hint/css-hint.js for code reference
const pseudoClasses = { 'active' : 1, 'after' : 1, 'before' : 1, 'checked' : 1, 'default' : 1, const pseudoClasses = { 'active' : 1, 'after' : 1, 'before' : 1, 'checked' : 1, 'default' : 1,
@@ -75,7 +75,6 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
return result; return result;
}; };
const { Field, Checkbox } = require('./widget-elements');
const widgetOptions = widgets.map((widget)=>({ const widgetOptions = widgets.map((widget)=>({
name : widget.name, name : widget.name,
pattern : PATTERNS.snippet[widget.type](widget.name), pattern : PATTERNS.snippet[widget.type](widget.name),