djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

시나리오 관리 추가

Browse Source
This commit is contained in:
현성필
2024-01-07 17:34:19 +09:00
parent e65a55693f
commit b4c43a2138
31 changed files with 25435 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/custom.css
+376 -31
View File
@@ -6,6 +6,13 @@ body {
font-weight: bold;
}
:root {
--border-color: #cacaca;
--background-color: #ffffff;
--background-box-title: #f7f7f7;
}
a {
color: #000 !important;
text-decoration: none !important;
@@ -52,6 +59,7 @@ a.btn.btn-primary {
color: #fff !important;
text-decoration: none !important;
}
.btn-primary {
background-color: #39077A;
border-color: #39077A;
@@ -63,7 +71,7 @@ a.btn.btn-primary {
}
.list-group-item.active > a {
color : #fff !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
@@ -525,7 +533,7 @@ a.btn.btn-primary {
display: block;
position: relative;
min-width: 1170px;
background-color : #D4ECF1;
background-color: #D4ECF1;
}
.pt-masthead h1 {
@@ -638,13 +646,13 @@ a.btn.btn-primary {
}
}
@media (max-width: 849px){
@media (max-width: 849px) {
.hide {
display: none !important;
}
}
@media (min-width: 850px){
@media (min-width: 850px) {
.main_menu {
display: none !important;
}
@@ -680,23 +688,19 @@ a.btn.btn-primary {
font-weight: 600
}
@media (min-width: 768px) {
.pt-links {
top: 5rem;
display: block !important;
height: calc(100vh - 7rem);
padding-left: .25rem;
margin-left: -.25rem;
overflow-y: auto
}
.pt-links {
top: 5rem;
display: block !important;
height: calc(100vh - 7rem);
padding-left: .25rem;
margin-left: -.25rem;
overflow-y: auto
}
@media (max-width: 767.98px) {
.pt-links > ul {
padding: 1.5rem .75rem;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef
}
.pt-links > ul {
/*padding: 1.5rem .75rem;*/
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef
}
.pt-links a {
@@ -756,6 +760,123 @@ a.btn.btn-primary {
color: rgba(0, 0, 0, 0.85)
}
.full-screen {
background-color: #ffffff;
position: fixed; /* Fixed position to cover the whole screen */
top: 0;
left: 0;
width: 100vw; /* Full viewport width */
height: 100vh; /* Full viewport height */
z-index: 9999; /* High z-index to be on top of other content */
overflow: auto; /* Add scroll for overflowing content */
}
.api-tester-layout {
display: flex;
flex-direction: column;
overflow: hidden;
}
.api-tester-layout .tester {
display: flex;
}
.api-scenario, .api-catalog, .api-tester {
transition: transform 0.5s ease; /* Add transition to each child */
min-height: 100px; /* Adjust as needed */
}
.api-catalog {
flex: 0 0 200px; /* Fixed width, not flexible */
/*order: 1; !* Keep the catalog in the middle *!*/
}
.api-scenario {
flex: 1; /* Flexible size */
display: flex;
}
.api-scenario-toolbar {
margin: 5px;
}
.api-scenario .api-scenario-sidebar {
width: 200px;
}
.tester-toolbar {
height: 40px;
background: rgba(0, 0, 0, .03);
padding: 5px;
}
.api-scenario .api-scenario-view {
display: flex;
flex: 1;
flex-direction: column;
padding: 5px;
width: calc(100vw - 400px);
}
.api-scenario .api-scenario-content {
flex: 1;
padding: 5px;
display: flex;
flex-direction: column;
}
.api-scenario .api-scenario-content .api-scenario-editor {
flex: 1;
padding: 5px;
display: flex;
flex-direction: column;
}
.scenario_editor {
flex: 1;
display: flex;
flex-direction: row;
}
.hidden {
display: none;
}
.fullHeight {
height: 100%;
}
.halfHeight {
height: 50%;
}
.api-scenario-output {
flex: 1;
display: flex;
flex-direction: column;
padding: 5px;
}
.api-scenario-output-header {
height: 50px;
border: 1px solid grey;
padding: 5px;
}
.api-scenario-output-body {
flex: 1;
height: 50px;
border: 1px solid grey;
padding: 5px;
}
.api-tester {
flex: 1; /* Flexible size */
order: 2; /* Positions to the right of .api-catalog */
}
@media (min-width: 768px) {
.pt-layout {
display: grid;
@@ -1452,13 +1573,14 @@ footer div.foot_info span {
letter-spacing: .2px;
}
@media(max-width: 1459px){
.header{
@media (max-width: 1459px) {
.header {
max-width: 100% !important;
}
}
@media(min-width: 1460px){
.header{
@media (min-width: 1460px) {
.header {
max-width: 1460px !important;
}
}
@@ -1467,7 +1589,7 @@ footer div.foot_info span {
overflow: hidden;
}
@media(max-width: 1919px){
@media (max-width: 1919px) {
.figure_img {
width: 100%;
@@ -1477,7 +1599,8 @@ footer div.foot_info span {
object-position: center;
}
}
@media(min-width: 1920px){
@media (min-width: 1920px) {
.figure_img {
width: 1900px;
display: block;
@@ -1589,7 +1712,10 @@ footer div.foot_info span {
.CodeMirror-fullscreen {
position: fixed !important;
top: 0; left: 0; right: 0; bottom: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto !important;
z-index: 1000;
}
@@ -1615,17 +1741,17 @@ footer div.foot_info span {
}
.dev {
background-color : #f74140 !important;
color : white !important;
background-color: #f74140 !important;
color: white !important;
}
.prod {
background-color : #49cc90 !important;
color : white !important;
background-color: #49cc90 !important;
color: white !important;
}
.current {
color : #39077A !important;
color: #39077A !important;
}
.reset-button {
@@ -1641,4 +1767,223 @@ footer div.foot_info span {
/* Style the icon */
display: inline-block;
margin-right: 5px; /* Adjust this value as per your requirement */
}
#drawflow {
position: relative;
width: calc(100vw - 440px);
height: calc(100vh - 520px);
background: var(--background-color);
background-size: 25px 25px;
background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
overflow: auto;
}
.drag-drawflow {
line-height: 50px;
border-bottom: 1px solid var(--border-color);
padding-left: 20px;
cursor: move;
user-select: none;
}
.drawflow .drawflow-node {
background: var(--background-color);
/*border: 1px solid var(--border-color);*/
-webkit-box-shadow: 0 2px 15px 2px var(--border-color);
box-shadow: 0 2px 15px 2px var(--border-color);
/*padding: 0px;*/
/*width: 200px;*/
}
.drawflow .drawflow-node.selected {
background: white;
border: 1px solid #4ea9ff;
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
box-shadow: 0 2px 20px 2px #4ea9ff;
}
.drawflow .drawflow-node.start {
width: 100px; /* or any size */
height: 100px; /* should be the same as width for a perfect diamond */
border-radius: 50%;
}
.drawflow .drawflow-node.api {
padding: 0;
}
.drawflow .drawflow-node.api .output {
right: 10px;
}
.drawflow .drawflow-node.api .input {
left: -10px;
background: white;
}
.drawflow .drawflow-node.selected .title-box {
color: #22598c;
}
.drawflow .connection .main-path {
stroke: #4ea9ff;
stroke-width: 3px;
}
/*.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {*/
/* height: 15px;*/
/* width: 15px;*/
/* border: 2px solid var(--border-color);*/
/*}*/
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
background: #4ea9ff;
}
/*.drawflow .drawflow-node .output {*/
/* right: 10px;*/
/*}*/
/*.drawflow .drawflow-node .input {*/
/* left: -10px;*/
/* background: white;*/
/*}*/
.drawflow > .drawflow-delete {
border: 2px solid #43b993;
background: white;
color: #43b993;
-webkit-box-shadow: 0 2px 20px 2px #43b993;
box-shadow: 0 2px 20px 2px #43b993;
}
.drawflow-delete {
border: 2px solid #4ea9ff;
background: white;
color: #4ea9ff;
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
box-shadow: 0 2px 20px 2px #4ea9ff;
}
.drawflow-node .title-box {
height: 50px;
line-height: 50px;
background: var(--background-box-title);
border-bottom: 1px solid #e9e9e9;
border-radius: 4px 4px 0px 0px;
padding-left: 10px;
}
.drawflow .title-box svg {
position: initial;
}
.drawflow-node .box {
padding: 10px 20px 20px 20px;
font-size: 14px;
color: #555555;
}
.drawflow-node .box p {
margin-top: 5px;
margin-bottom: 5px;
}
.drawflow-node input, .drawflow-node select, .drawflow-node textarea {
border-radius: 4px;
border: 1px solid var(--border-color);
height: 30px;
line-height: 30px;
font-size: 16px;
width: 158px;
color: #555555;
}
.drawflow-node textarea {
height: 100px;
}
.drawflow .connection .point {
stroke: var(--border-color);
stroke-width: 2;
fill: white;
}
.drawflow .connection .point.selected, .drawflow .connection .point:hover {
fill: #4ea9ff;
}
.btn-export {
float: right;
position: absolute;
top: 10px;
right: 10px;
color: white;
font-weight: bold;
border: 1px solid #0e5ba3;
background: #4ea9ff;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
z-index: 5;
}
.btn-clear {
float: right;
position: absolute;
top: 10px;
right: 85px;
color: white;
font-weight: bold;
border: 1px solid #96015b;
background: #e3195a;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
z-index: 5;
}
.btn-lock {
float: right;
position: absolute;
bottom: 10px;
right: 140px;
display: flex;
font-size: 24px;
color: white;
padding: 5px 10px;
background: #555555;
border-radius: 4px;
border-right: 1px solid var(--border-color);
z-index: 5;
cursor: pointer;
}
.bar-zoom {
float: right;
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
font-size: 24px;
color: white;
padding: 5px 10px;
background: #555555;
border-radius: 4px;
border-right: 1px solid var(--border-color);
z-index: 5;
}
.bar-zoom svg {
cursor: pointer;
padding-left: 20px;
}
.bar-zoom svg:nth-child(1) {
padding-left: 20px;
}