use common CSS

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
@@ -1,5 +1,5 @@
/* eslint-disable max-lines */
import './metadataEditor.less';
import '../uiEditor.less';
import React from 'react';
import createReactClass from 'create-react-class';
import _ from 'lodash';
@@ -355,7 +355,7 @@ const MetadataEditor = createReactClass({
},
render : function(){
return <div className='metadataEditor'>
return <div className='metadataEditor ui-editor'>
<h1>Properties Editor</h1>
<div className='field title'>
@@ -1,4 +1,4 @@
import './settingsEditor.less';
import '../uiEditor.less';
import React, { useState } from 'react';
const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
@@ -50,7 +50,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
};
return (
<div className='settingsEditor'>
<div className='settingsEditor ui-editor'>
<h1>Editor Settings</h1>
{/*
<div className='field title'>
@@ -66,10 +66,11 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
/>
</div> */}
<div className='field title'>
<div className='field'>
<label htmlFor='autoCloseBrackets'>
Automatically close brackets
</label>
<div className='value'>
<input
id='autoCloseBrackets'
type='checkbox'
@@ -78,11 +79,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
onChange={(e)=>handleFieldChange('autoCloseBrackets', e)}
/>
</div>
</div>
<div className='field title'>
<div className='field'>
<label htmlFor='showImagePreviews'>
Show Image Previews when hovering a link
</label>
<div className='value'>
<input
id='showImagePreviews'
type='checkbox'
@@ -91,11 +94,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
onChange={(e)=>handleFieldChange('showImagePreviews', e)}
/>
</div>
</div>
<div className='field title'>
<div className='field'>
<label htmlFor='activeLineShading'>
Background shading of active line
</label>
<div className='value'>
<input
id='activeLineShading'
type='checkbox'
@@ -105,8 +110,11 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
/>
</div>
<div className='field title'>
</div>
<div className='field'>
<label htmlFor='lineNumbers'>Show Line Numbers</label>
<div className='value'>
<input
id='lineNumbers'
type='checkbox'
@@ -115,11 +123,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
onChange={(e)=>handleFieldChange('lineNumbers', e)}
/>
</div>
</div>
<div className='field title'>
<div className='field'>
<label htmlFor='fontSize'>
Editor Font Size (in px)
</label>
<div className='value'>
<input
id='fontSize'
type='number'
@@ -131,6 +141,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
/>
</div>
</div>
</div>
);
};
@@ -5,7 +5,7 @@
padding-left : 10px;
}
.metadataEditor {
.ui-editor {
position : absolute;
box-sizing : border-box;
width : 100%;
@@ -60,6 +60,7 @@
& > .value {
flex : 1 1 auto;
width : 50px;
justify-self: end;
&[data-tooltip-right] { max-width : 380px; }
&:invalid { background : #FFB9B9; }
small {
@@ -68,6 +69,11 @@
font-style : italic;
line-height : 1.4em;
}
input[type='checkbox'] {
display:block;
margin-left:auto;
}
}
input[type='text'], textarea {
border : 1px solid gray;
@@ -372,3 +378,10 @@
}
}
}
.settingsEditor .field {
> label {
width:200px;
}
}