f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-23 03:12:56 +00:00
Code Wiki Activity

use common CSS

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-08-27 19:37:37 +02:00
parent 2fc135724f
commit 2695cfdaf0
3 changed files with 80 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/editor/metadataEditor/metadataEditor.jsx
+2 -2
View File
@@ -1,5 +1,5 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
import './metadataEditor.less'; import '../uiEditor.less';
import React from 'react'; import React from 'react';
import createReactClass from 'create-react-class'; import createReactClass from 'create-react-class';
import _ from 'lodash'; import _ from 'lodash';
@@ -355,7 +355,7 @@ const MetadataEditor = createReactClass({
}, },
render : function(){ render : function(){
return <div className='metadataEditor'> return <div className='metadataEditor ui-editor'>
<h1>Properties Editor</h1> <h1>Properties Editor</h1>
<div className='field title'> <div className='field title'>
client/homebrew/editor/settingsEditor/settingsEditor.jsx
+64 -53
View File
@@ -1,15 +1,15 @@
import './settingsEditor.less'; import '../uiEditor.less';
import React, { useState } from 'react'; import React, { useState } from 'react';
const SettingsEditor = ({settings, updateSettings = () => {} }) => { const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
const [currentSettings, setCurrentSettings] = useState(settings); const [currentSettings, setCurrentSettings] = useState(settings);
const validations = { const validations = {
fontSize: [ fontSize : [
(value) => { (value)=>{
const number = Number(value); const number = Number(value);
if (number < 9 || number > 30) { if(number < 9 || number > 30) {
return 'Font size must be between 9 and 30.'; return 'Font size must be between 9 and 30.';
} }
@@ -18,7 +18,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
], ],
}; };
const handleFieldChange = (setting, e) => { const handleFieldChange = (setting, e)=>{
const value = const value =
e.target.type === 'checkbox' e.target.type === 'checkbox'
? e.target.checked ? e.target.checked
@@ -27,10 +27,10 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
const inputRules = validations[setting] ?? []; const inputRules = validations[setting] ?? [];
const validationErrors = inputRules const validationErrors = inputRules
.map((rule) => rule(value)) .map((rule)=>rule(value))
.filter(Boolean); .filter(Boolean);
if (validationErrors.length > 0) { if(validationErrors.length > 0) {
e.target.setCustomValidity(validationErrors.join('\n')); e.target.setCustomValidity(validationErrors.join('\n'));
e.target.reportValidity(); e.target.reportValidity();
return; return;
@@ -40,7 +40,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
const updatedSettings = { const updatedSettings = {
...currentSettings, ...currentSettings,
[setting]: e.target.type === 'number' [setting] : e.target.type === 'number'
? Number(value) ? Number(value)
: value, : value,
}; };
@@ -50,9 +50,9 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
}; };
return ( return (
<div className='settingsEditor'> <div className='settingsEditor ui-editor'>
<h1>Editor Settings</h1> <h1>Editor Settings</h1>
{/* {/*
<div className='field title'> <div className='field title'>
<label htmlFor='blockShading'> <label htmlFor='blockShading'>
Background Shading of blocks in editor Background Shading of blocks in editor
@@ -66,69 +66,80 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
/> />
</div> */} </div> */}
<div className='field title'> <div className='field'>
<label htmlFor='autoCloseBrackets'> <label htmlFor='autoCloseBrackets'>
Automatically close brackets Automatically close brackets
</label> </label>
<input <div className='value'>
id='autoCloseBrackets' <input
type='checkbox' id='autoCloseBrackets'
name='autoCloseBrackets' type='checkbox'
checked={currentSettings.autoCloseBrackets} name='autoCloseBrackets'
onChange={(e) => handleFieldChange('autoCloseBrackets', e)} checked={currentSettings.autoCloseBrackets}
/> onChange={(e)=>handleFieldChange('autoCloseBrackets', e)}
/>
</div>
</div> </div>
<div className='field title'> <div className='field'>
<label htmlFor='showImagePreviews'> <label htmlFor='showImagePreviews'>
Show Image Previews when hovering a link Show Image Previews when hovering a link
</label> </label>
<input <div className='value'>
id='showImagePreviews' <input
type='checkbox' id='showImagePreviews'
name='showImagePreviews' type='checkbox'
checked={currentSettings.showImagePreviews} name='showImagePreviews'
onChange={(e) => handleFieldChange('showImagePreviews', e)} checked={currentSettings.showImagePreviews}
/> onChange={(e)=>handleFieldChange('showImagePreviews', e)}
/>
</div>
</div> </div>
<div className='field title'> <div className='field'>
<label htmlFor='activeLineShading'> <label htmlFor='activeLineShading'>
Background shading of active line Background shading of active line
</label> </label>
<input <div className='value'>
id='activeLineShading' <input
type='checkbox' id='activeLineShading'
name='activeLineShading' type='checkbox'
checked={currentSettings.activeLineShading} name='activeLineShading'
onChange={(e) => handleFieldChange('activeLineShading', e)} checked={currentSettings.activeLineShading}
/> onChange={(e)=>handleFieldChange('activeLineShading', e)}
/>
</div>
</div> </div>
<div className='field title'> <div className='field'>
<label htmlFor='lineNumbers'>Show Line Numbers</label> <label htmlFor='lineNumbers'>Show Line Numbers</label>
<input <div className='value'>
id='lineNumbers' <input
type='checkbox' id='lineNumbers'
name='lineNumbers' type='checkbox'
checked={currentSettings.lineNumbers} name='lineNumbers'
onChange={(e) => handleFieldChange('lineNumbers', e)} checked={currentSettings.lineNumbers}
/> onChange={(e)=>handleFieldChange('lineNumbers', e)}
/>
</div>
</div> </div>
<div className='field title'> <div className='field'>
<label htmlFor='fontSize'> <label htmlFor='fontSize'>
Editor Font Size (in px) Editor Font Size (in px)
</label> </label>
<input <div className='value'>
id='fontSize' <input
type='number' id='fontSize'
min={9} type='number'
max={30} min={9}
name='fontSize' max={30}
value={currentSettings.fontSize} name='fontSize'
onChange={(e) => handleFieldChange('fontSize', e)} value={currentSettings.fontSize}
/> onChange={(e)=>handleFieldChange('fontSize', e)}
/>
</div>
</div> </div>
</div> </div>
); );
client/homebrew/editor/metadataEditor/metadataEditor.less → client/homebrew/editor/uiEditor.less
+14 -1
View File
@@ -5,7 +5,7 @@
padding-left : 10px; padding-left : 10px;
} }
.metadataEditor { .ui-editor {
position : absolute; position : absolute;
box-sizing : border-box; box-sizing : border-box;
width : 100%; width : 100%;
@@ -60,6 +60,7 @@
& > .value { & > .value {
flex : 1 1 auto; flex : 1 1 auto;
width : 50px; width : 50px;
justify-self: end;
&[data-tooltip-right] { max-width : 380px; } &[data-tooltip-right] { max-width : 380px; }
&:invalid { background : #FFB9B9; } &:invalid { background : #FFB9B9; }
small { small {
@@ -68,6 +69,11 @@
font-style : italic; font-style : italic;
line-height : 1.4em; line-height : 1.4em;
} }
input[type='checkbox'] {
display:block;
margin-left:auto;
}
} }
input[type='text'], textarea { input[type='text'], textarea {
border : 1px solid gray; border : 1px solid gray;
@@ -372,3 +378,10 @@
} }
} }
} }
.settingsEditor .field {
> label {
width:200px;
}
}