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 createClass = require('create-react-class');
const _ = require('lodash');
require('./checkbox.less');
const Checkbox = createClass({
getDefaultProps : function() {
@@ -31,8 +32,10 @@ const Checkbox = createClass({
const { text } = cm.lineInfo(n);
const id = [prefix, value, n].join('-');
return <React.Fragment>
<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
<label htmlFor={id}>{_.startCase(value)}</label>
<div className='widget-checkbox'>
<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
<label htmlFor={id}>{_.startCase(value)}</label>
</div>
</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 {
display: inline-block;
flex: 0 0 auto;
background-color: #22d4f6;
background-color: #ddd;
border-radius: 10px;
padding: 4px 2px;
@@ -12,7 +12,7 @@
}
>input {
background-color: #22d4f6;
background-color: #ddd;
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 { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
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
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;
};
const { Field, Checkbox } = require('./widget-elements');
const widgetOptions = widgets.map((widget)=>({
name : widget.name,
pattern : PATTERNS.snippet[widget.type](widget.name),