Fixed css issues

TIER · Apr 21, 2022 · 6884424 · 6884424
1 parent 7d5d84e
commit 6884424
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 23 deletions.
diff --git a/ui/src/app/form/component/templates/ArrayFieldTemplate.js b/ui/src/app/form/component/templates/ArrayFieldTemplate.js
@@ -5,21 +5,22 @@ import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Accordion from 'react-bootstrap/Accordion';
 import Button from 'react-bootstrap/Button';
+import { useAccordionButton } from "react-bootstrap/AccordionButton";
+import AccordionContext from "react-bootstrap/AccordionContext";
 
 import AddButton from "../AddButton";
 import IconButton from "../IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import Translate from "../../../i18n/components/translate";
 
+
 const { isMultiSelect, getDefaultRegistry } = utils;
 
 const ArrayFieldTemplate = (props) => {
     const { schema, registry = getDefaultRegistry() } = props;
-
     // TODO: update types so we don't have to cast registry as any
     if (isMultiSelect(schema, (registry).rootSchema)) {
-
         return <DefaultFixedArrayFieldTemplate {...props} />;
     } else {
         return <DefaultNormalArrayFieldTemplate {...props} />;
@@ -57,6 +58,21 @@ const ArrayFieldDescription = ({
 
 // Used in the two templates
 
+const CustomToggle = ({children, eventKey, type, callback}) => {
+    const { activeEventKey } = React.useContext(AccordionContext);
+
+    const decoratedOnClick = useAccordionButton(eventKey, () => callback && callback(eventKey));
+    const isCurrentEventKey = activeEventKey === eventKey;
+
+    return (
+        <Button variant="icon" eventKey="0" className="px-0" onClick={decoratedOnClick}>
+            <FontAwesomeIcon icon={ isCurrentEventKey ? faCaretDown : faCaretRight } />&nbsp;
+            {children}
+        </Button>
+    );
+}
+
+
 const ObjectArrayItem = ({type, ...props}) => {
     const btnStyle = {
         flex: 1,
@@ -65,14 +81,13 @@ const ObjectArrayItem = ({type, ...props}) => {
         fontWeight: "bold",
     };
     return (
-        <div key={props.key} className={`mt-2 bg-light border rounded p-2 list-group`}>
+        <div key={props.key} className={`mt-2 mb-3 bg-light border rounded p-2 list-group`}>
             <Accordion defaultActiveKey="0">
             <div className={`list-group-item`}>
                 <div className="mb-4 pb-2 d-flex justify-content-between align-items-center border-bottom">
-                    <Accordion.Toggle as={Button} variant="link" eventKey="0" className="px-0">
-                        <FontAwesomeIcon icon={faCaretDown} />&nbsp;
+                    <CustomToggle eventKey={'0'} type={type}>
                         <Translate value={'label.new-of-type'} params={{type}} />
-                    </Accordion.Toggle>
+                    </CustomToggle>
                     {props.hasToolbar && (
                         <div className="d-flex flex-row align-items-start">
                             {(props.hasMoveUp || props.hasMoveDown) && (
@@ -140,7 +155,7 @@ const DefaultArrayItem = (props) => {
     const uiSchemaOptions = props.uiSchema ? props.uiSchema['ui:options'] || {} : {};
 
     return (
-        <div key={props.key} className={`mt-2 `}>
+        <div key={props.key} className={`mt-2 mb-3`}>
             <div className="mb-2  d-flex align-items-start">
                 <div className={`me-2 flex-grow-1 ${uiSchemaOptions.classNames}`}>{props.children}</div>
                 {props.hasToolbar && (
@@ -239,7 +254,7 @@ const DefaultNormalArrayFieldTemplate = (props) => {
     const showTitle = props.uiSchema.hasOwnProperty("ui:title") ? props.uiSchema["ui:title"] === false && !props.canAdd ? false : true : true;
 
     return (
-        <Row className="p-0 m-0">
+        <Row className="p-0 m-0 mb-3">
             <Col className="p-0 m-0">
                 <div className="d-flex align-items-center">
                     {showTitle && <ArrayFieldTitle

diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -143,7 +143,7 @@ const AttributeReleaseWidget = ({
                                 <td className="align-middle"><Translate value={`label.attribute-${option.label}`}>{option.label}</Translate></td>
                                 <td className="">
                                     <fieldset className="d-flex justify-content-end">
-                                        <div className="custom-control custom-checkbox bordered-custom-checkbox">
+                                        <div className="custom-control custom-checkbox bordered-custom-checkbox pe-2">
                                             <Form.Check
                                                 custom
                                                 required={required}

diff --git a/ui/src/app/form/component/widgets/CheckboxWidget.js b/ui/src/app/form/component/widgets/CheckboxWidget.js
@@ -31,7 +31,7 @@ const CheckboxWidget = (props) => {
 
     // const desc = label || schema.description;
     return (
-        <Form.Group className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
+        <Form.Group className={`checkbox mb-3 ${disabled || readonly ? "disabled" : ""}`}>
             <Form.Check
                 id={id}
                 label={<span className="d-flex justify-content-start">

diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -91,7 +91,7 @@ const OptionWidget = ({
     };
 
     return (
-        <Form.Group className="mb-0">
+        <Form.Group className="mb-3">
             <Form.Label className={`${(touched && rawErrors?.length > 0) ? "text-danger" : ""}`} htmlFor={`option-selector-${id}`}>
                 <span>
                     <Translate value={label || schema.title} />

diff --git a/ui/src/app/form/component/widgets/RadioWidget.js b/ui/src/app/form/component/widgets/RadioWidget.js
@@ -34,7 +34,7 @@ const RadioWidget = ({
     const inline = Boolean(options && options.inline);
 
     return (
-        <Form.Group className="mb-0">
+        <Form.Group className="mb-3">
             <Form.Label className="d-block">
                 <span>
                     <Translate value={label || schema.title} />

diff --git a/ui/src/app/form/component/widgets/SelectWidget.js b/ui/src/app/form/component/widgets/SelectWidget.js
@@ -85,17 +85,15 @@ const SelectWidget = ({
     const [touched, setTouched] = React.useState(false);
 
     return (
-        <Form.Group>
+        <Form.Group className="mb-3">
             <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`} htmlFor={id}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="ms-2 text-danger" size="sm" /> : null}
                 </span>
                 {schema.description && <InfoIcon value={schema.description} className="ms-2" />}
             </Form.Label>
-            <Form.Control
-                as="select"
-                custom
+            <Form.Select
                 id={id}
                 value={typeof value === "undefined" ? emptyValue : value}
                 required={required}
@@ -131,7 +129,7 @@ const SelectWidget = ({
                     {translator(label)}
                 </option>
                 )}
-            </Form.Control>
+            </Form.Select>
             {rawErrors?.length > 0 && touched && (
                 <ListGroup as="ul">
                     {rawErrors.map((error, i) => {

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -38,8 +38,6 @@ const TextWidget = ({
         _onBlur(evt);
     };
 
-    console.log(schema.description);
-
     // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
         <Form.Group className="mb-3">

diff --git a/ui/src/app/form/component/widgets/TextareaWidget.js b/ui/src/app/form/component/widgets/TextareaWidget.js
@@ -45,7 +45,7 @@ const TextareaWidget = ({
     };
 
     return (
-        <>
+        <div className="mb-3">
             <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
@@ -82,7 +82,7 @@ const TextareaWidget = ({
                     })}
                 </ListGroup>
             )}
-        </>
+        </div>
     );
 };
 

diff --git a/ui/src/theme/project/tags.scss b/ui/src/theme/project/tags.scss
@@ -18,7 +18,7 @@
 .tag {
     $text-space: 8px;
     $left-offset: 32px;
-
+    $line-height-lg: 1.3rem;
     font-size: $font-size-sm;
     line-height: $line-height-lg;
     position: relative;