Skip to content

Commit

Permalink
fix: node button styles lost during page changes
Browse files Browse the repository at this point in the history 
refactor: additional styles to support core v2 use
  • Loading branch information
@dmijatovic
dmijatovic authored and Dusan Mijatovic (Mac2023) committed Mar 19, 2024
1 parent 05b8e55 commit a76a080
Show file tree
Hide file tree
Showing 7 changed files with 332 additions and 250 deletions.
31 changes: 15 additions & 16 deletions app/builder/Form.client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import "./Form.css";
import "./core2.css";

import {
CatalogPanel,
NodePanel,
Expand Down Expand Up @@ -35,29 +38,25 @@ const App = () => {
}, [archive, activetCatalog]); // eslint-disable-line react-hooks/exhaustive-deps

return (
<div className="workflow-builder-app">
<div className="page grid h-full w-full gap-2 p-4">
<div>
<CatalogPanel></CatalogPanel>
</div>
<div>
<WorkflowPanel>
<WorkflowUploadButton />
</WorkflowPanel>
</div>
<div>
<NodePanel />
</div>
<>
<div className="page">
<CatalogPanel></CatalogPanel>

<WorkflowPanel>
<WorkflowUploadButton />
</WorkflowPanel>

<NodePanel />
</div>
<div className="page sticky inset-x-0 bottom-0 grid h-14">
<div className="page sticky inset-x-0 bottom-0 p-4">
<div></div>
<div role="group" className="flex flex-row">
<div role="group" className="flex flex-row gap-4">
<WorkflowSubmitButton submitAllowed={submitAllowed} />
<WorkflowDownloadButton />
</div>
<FormActions />
</div>
</div>
</>
);
};

Expand Down
186 changes: 173 additions & 13 deletions app/builder/Form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,6 @@ Btn classes are copied from app/components/ui/button.tsx
@apply mr-3 inline;
}

.workflow-builder-app .form-group {
@apply mb-4 p-1;
}

.workflow-builder-app .form-label {
@apply mb-2 inline-block;
}
Expand All @@ -106,10 +102,6 @@ Btn classes are copied from app/components/ui/button.tsx
@apply rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
}

.workflow-builder-app .custom-select {
@apply ml-2 bg-background text-base;
}

.workflow-builder-app .array-item-add,
.workflow-builder-app .object-property-expand {
/* TODO full width + center plus sign */
Expand All @@ -121,7 +113,7 @@ Btn classes are copied from app/components/ui/button.tsx
}

.workflow-builder-app .container-fluid {
@apply w-full;
@apply m-auto w-full;
}

.workflow-builder-app .row {
Expand All @@ -133,17 +125,38 @@ Btn classes are copied from app/components/ui/button.tsx
}

.workflow-builder-app .col-2 {
@apply w-full max-w-[16.666667%] basis-2/12 px-3;
@apply max-w-[16.666667%] flex-1 basis-2/12 px-3;
word-wrap: break-word;
}

.workflow-builder-app .col-3 {
@apply w-full max-w-[25%] basis-3/12 px-3;
}

.workflow-builder-app .col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}

.workflow-builder-app .col-5 {
@apply max-w-[41.666667%] basis-5/12;
}

.workflow-builder-app .col-6 {
flex: 0 0 50%;
max-width: 50%;
}

.workflow-builder-app .col-7 {
flex: 0 0 58.333333%;
max-width: 58.333333%;
}

.workflow-builder-app .col-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}

.workflow-builder-app .col-9 {
@apply max-w-[75%] basis-9/12;
}
Expand All @@ -152,8 +165,14 @@ Btn classes are copied from app/components/ui/button.tsx
@apply max-w-[85%] basis-10/12;
}

.workflow-builder-app .col-11 {
flex: 0 0 91.666667%;
max-width: 91.666667%;
}

.workflow-builder-app .col-12 {
@apply max-w-full basis-full;
flex: 0 0 100%;
max-width: 100%;
}

.workflow-builder-app .offset-9 {
Expand Down Expand Up @@ -214,7 +233,9 @@ Btn classes are copied from app/components/ui/button.tsx
}

.workflow-builder-app .page {
grid-template-columns: 1fr 1fr 4fr;
display: grid;
grid-template-columns: 9rem minmax(16rem, 1fr) 3fr;
gap: 1rem;
}

.workflow-builder-app .page > .action-row {
Expand All @@ -237,7 +258,7 @@ code .table {

/* Exclude styling of upload button in workflow column */
.workflow-builder-app .form-group input[type="file"] {
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
@apply flex h-10 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

.workflow-builder-app .border-danger {
Expand All @@ -247,3 +268,142 @@ code .table {
.workflow-builder-app .alert-danger {
@apply border-destructive bg-destructive text-destructive-foreground;
}

/* card body */
.card-body {
flex: 1 1 auto;
padding: 1rem;
overflow: auto;
}

/* bootstrap custom select styles */
.custom-select {
/* display: inline-block; */
display: block;
width: 100%;
flex: 1;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
/* color: #495057; */
/* vertical-align: middle; */
background: #fff
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
right 0.75rem center / 8px 10px no-repeat;
background-color: var(--background, "#fff");
border: 1px solid #ced4da;
border-radius: 0.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}

.form-group {
padding: 0.25rem;
}

.text-muted {
opacity: 0.7;
}

/* Bootstrap popover - used on table question mark */
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: block;
max-width: 276px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}

.fade {
transition: opacity 0.15s linear;
}

.popover-header {
padding: 0.5rem 0.75rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}

.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1rem;
margin-left: -0.5rem;
content: "";
border-bottom: 1px solid #f7f7f7;
}

.popover .arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
margin: 0 0.3rem;
}

.bs-popover-auto[x-placement^="bottom"] > .arrow,
.bs-popover-bottom > .arrow {
top: calc(-0.5rem - 1px);
}

.popover .arrow::after,
.popover .arrow::before {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}

.bs-popover-auto[x-placement^="bottom"] > .arrow::before,
.bs-popover-bottom > .arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
.bs-popover-bottom > .arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
}

.popover-body {
padding: 0.5rem 0.75rem;
color: #212529;
}
Loading

0 comments on commit a76a080

Please sign in to comment.