Skip to content

Commit ebed0d3

Browse files
snatalenkosnatalenko
committed
Tweak editor styles
1 parent 15355c5 commit ebed0d3

6 files changed

Lines changed: 74 additions & 19 deletions

File tree

‎docs/images/morphos_logo.svg‎

Lines changed: 9 additions & 9 deletions
Loading

‎playground/dist/index.js‎

Lines changed: 29 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎playground/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Morphos Playground</title>
6+
<title>Morphos · Playground</title>
7+
<link rel="icon" type="image/svg+xml" href="../docs/images/morphos_logo.svg" />
78
</head>
89
<body>
910
<div id="root"></div>

‎playground/main.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,34 @@ function App() {
475475
.dm-mapping-value {
476476
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
477477
}
478+
.dm-mapping-editor .form-control,
479+
.dm-mapping-editor .form-select,
480+
.dm-mapping-editor .control-label,
481+
.dm-mapping-editor .col-form-label,
482+
.dm-mapping-editor .btn {
483+
font-size: 12px;
484+
line-height: 1.25;
485+
padding-top: 3px;
486+
padding-bottom: 3px;
487+
height: auto;
488+
}
489+
.dm-mapping-editor .btn {
490+
padding-left: 5px;
491+
padding-right: 5px;
492+
}
493+
.dm-mapping-editor .form-group {
494+
margin-bottom: 5px;
495+
}
496+
.dm-mapping-editor .panel-body,
497+
.dm-mapping-editor .card-body {
498+
padding: 7px;
499+
}
500+
.dm-mapping-editor .panel-body .form-group:last-child {
501+
margin-bottom: 0;
502+
}
503+
.panel-body > .panel {
504+
margin-bottom: 5px;
505+
}
478506
`}
479507
</style>
480508
<header style={{ marginBottom: '1.5rem' }}>

‎src/react/bootstrap34/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export const RemoveButton: ComponentType<RemoveButtonProps> = ({ onClick }) => {
224224
return (
225225
<button
226226
type="button"
227-
className="btn btn-sm btn-default"
227+
className="btn btn-default"
228228
onClick={onClick}
229229
aria-label={labels.removeField}
230230
style={{ paddingLeft: 5, paddingRight: 5 }}
@@ -255,14 +255,13 @@ export const TypeSelector: ComponentType<TypeSelectorProps> = ({ kind, onChange
255255
export const Reorder: ComponentType<ReorderProps> = ({ canMoveUp, canMoveDown, onMoveUp, onMoveDown }) => {
256256
const labels = useContext(LabelsContext);
257257
return (
258-
<div className="btn-group btn-group-sm" role="group" aria-label={labels.reorder} style={{ minWidth: '47px' }}>
258+
<div className="btn-group" role="group" aria-label={labels.reorder} style={{ minWidth: '47px' }}>
259259
<button
260260
type="button"
261261
className="btn btn-default"
262262
onClick={onMoveUp}
263263
disabled={!canMoveUp}
264264
aria-label={labels.moveUp}
265-
style={{ paddingLeft: 5, paddingRight: 5 }}
266265
>
267266
<span className="glyphicon glyphicon-chevron-up" aria-hidden="true" />
268267
</button>
@@ -272,7 +271,6 @@ export const Reorder: ComponentType<ReorderProps> = ({ canMoveUp, canMoveDown, o
272271
onClick={onMoveDown}
273272
disabled={!canMoveDown}
274273
aria-label={labels.moveDown}
275-
style={{ paddingLeft: 5, paddingRight: 5 }}
276274
>
277275
<span className="glyphicon glyphicon-chevron-down" aria-hidden="true" />
278276
</button>

‎src/react/bootstrap53/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useContext, useEffect, useRef, useState, type ComponentType } from 'react';
1+
import { useContext, useEffect, useRef, useState, type ComponentType, Fragment } from 'react';
22
import { LabelsContext } from '../LabelsContext.ts';
33
import { ComponentsContext } from '../ComponentsContext.ts';
44
import type {
@@ -26,7 +26,7 @@ import type {
2626
} from '../types.ts';
2727

2828
export const Container: ComponentType<ContainerProps> = ({ children }) => (
29-
<div className="dm-bs53-container">{children}</div>
29+
<Fragment>{children}</Fragment>
3030
);
3131

3232
export const Row: ComponentType<RowProps> = ({ keyInput, typeSelector, value, remove, reorder }) => {
@@ -257,7 +257,7 @@ export const RemoveButton: ComponentType<RemoveButtonProps> = ({ onClick }) => {
257257
return (
258258
<button
259259
type="button"
260-
className="btn btn-sm btn-outline-danger"
260+
className="btn btn-outline-danger"
261261
onClick={onClick}
262262
aria-label={labels.removeField}
263263
>
@@ -287,7 +287,7 @@ export const TypeSelector: ComponentType<TypeSelectorProps> = ({ kind, onChange
287287
export const Reorder: ComponentType<ReorderProps> = ({ canMoveUp, canMoveDown, onMoveUp, onMoveDown }) => {
288288
const labels = useContext(LabelsContext);
289289
return (
290-
<div className="btn-group btn-group-sm" role="group" aria-label={labels.reorder}>
290+
<div className="btn-group" role="group" aria-label={labels.reorder}>
291291
<button
292292
type="button"
293293
className="btn btn-outline-secondary"

0 commit comments

Comments
 (0)