Change layout of config window (#90)

* Add linter script and fix errors * Apply prettier * Add workflow executing linters * Add working directory for npm ci * Remove unknown working-directory from linting action * Update linting workflow * Fix linting command * Fix NOTICE file * Fix licence years * Fix name in Github workflow * Enable unused variable linting rule * Run prettier * Enable unnecessary espace rule * Add .eslintignore * Adapt path to public folder * Update ignore rules for linters * Lint changes after merging master * Start fixing Readme * Lint changes from merge * Lint master merge * Lint changes after merge with origin/master * Replace renderer with correct file * Lint changes * Lint changes * Run linter * Fix lint error * Add badges to readme * change layout of config window, increase text field size, adjust config size Co-Authored-By: LaviniaStiliadou <livia_16@live.de> * move resizing logic from js function to css * New diagram dialog (#89) * dialog for new diagram, isExecutable to true Co-Authored-By: LaviniaStiliadou <livia_16@live.de> * fix lint * adjust label for canceling dialog --------- Co-authored-by: SharonNaemi <naemi_17@live.de> Co-authored-by: mbeisel <beiselmn@gmail.com> * Fix plugin handling (#87) * fix plugin handling * fix lint * remove useEffect as it overwrites the transformed workflow after opening it * Fix transformation bugs * Fix linting errors * Temporarily add OpenTOSCAUtils to QuantME plugin * Fix codestyle * fix open modal * Add name for Dockerhub GitHub workflow * Bump quantum workflow modeler version for upcoming release * Add Dockerhub build for tags * Add zip to supported files for Artifact (#101) * change layout of config window, increase text field size, adjust config size Co-Authored-By: LaviniaStiliadou <livia_16@live.de> * move resizing logic from js function to css --------- Co-authored-by: Benjamin Weder <benjamin.weder@iaas.uni-stuttgart.de> Co-authored-by: LaviniaStiliadou <livia_16@live.de> Co-authored-by: mbeisel <beiselmn@gmail.com> Co-authored-by: Maximilian Kuhn <maximilian.kuhn@ymail.com>
PlanQK · Oct 24, 2023 · 853754d · 853754d
1 parent 864e676
commit 853754d
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 11 deletions.
diff --git a/components/bpmn-q/modeler-component/editor/config/ConfigModal.js b/components/bpmn-q/modeler-component/editor/config/ConfigModal.js
@@ -9,7 +9,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/* eslint-disable no-unused-vars */
 import React from "react";
 import Modal from "../ui/modal/Modal";
 import "./config-modal.css";
@@ -60,7 +59,7 @@ export default function ConfigModal({ onClose, configTabs }) {
 
       <Body>
         <form id="configForm" onSubmit={onSubmit}>
-          <div style={{ display: "flex" }}>
+          <div style={{ display: "flex", flexDirection: "column" }}>
             <div id="configButtons" className="qwm-tabButtonsContainer">
               {React.Children.toArray(
                 configTabs.map((tab, index) => (
@@ -96,7 +95,7 @@ export default function ConfigModal({ onClose, configTabs }) {
         <div id="configFormButtons">
           <button
             type="submit"
-            className="qwm-btn qwm-btn-primary"
+            className="qwm-btn qwm-btn-save"
             form="configForm"
           >
             Save

diff --git a/components/bpmn-q/modeler-component/editor/config/config-modal.css b/components/bpmn-q/modeler-component/editor/config/config-modal.css
@@ -1,8 +1,6 @@
 .qwm-innerConfig {
   min-width: 100px;
-  max-width: 100px;
-  min-height: auto;
-  height: auto;
+  max-width: 500px;
   border-radius: 3px;
   font-size: 13px;
   font-weight: bold;
@@ -12,6 +10,7 @@
   letter-spacing: normal;
   text-align: center;
   padding: 5px;
+  margin: 5px;
 }
 
 .qwm-innerConfig + .qwm-innerConfig {
@@ -44,10 +43,9 @@
 
 .qwm-tabButtonsContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
   overflow: auto;
   min-width: 120px;
   max-height: 263px;
-  direction: rtl;
 }
diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css b/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css
@@ -11,45 +11,87 @@
   text-align: center;
   padding-left: 15px;
   padding-right: 15px;
+  margin-right: 5px;
+  margin-left: 5px;
 }
+
 .qwm-btn-primary {
+  min-width: 120px;
   color: #fdfdfe;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
   border: solid 1px var(--blue-darken-62);
   background-color: var(--blue-base-65);
+  height: 45px;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }
+
 .qwm-btn-primary:hover {
   border: solid 1px var(--blue-darken-55);
   background-color: var(--blue-darken-62);
 }
+
 .qwm-btn-primary:active {
   border: solid 1px var(--blue-darken-48);
   background-color: var(--blue-darken-55);
 }
+
 .qwm-btn-primary:disabled {
   box-shadow: none;
   border: solid 1px var(--blue-lighten-82);
   background-color: var(--blue-lighten-75);
   color: rgba(253, 253, 254, 0.8);
 }
+
 .qwm-btn-secondary {
   color: var(--grey-darken-33);
   box-shadow: 0 2px 2px 0 var(--color-000000-opacity-10);
   border: solid 1px var(--silver-darken-80);
   background-color: var(--silver-base-97);
 }
+
+.qwm-btn-save {
+  color: #fdfdfe;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: solid 1px var(--blue-darken-62);
+  background-color: var(--blue-base-65);
+}
+
+.qwm-btn-save:hover {
+  border: solid 1px var(--blue-darken-55);
+  background-color: var(--blue-darken-62);
+}
+
+.qwm-btn-save:active {
+  border: solid 1px var(--blue-darken-48);
+  background-color: var(--blue-darken-55);
+}
+
+.qwm-btn-save:disabled {
+  box-shadow: none;
+  border: solid 1px var(--blue-lighten-82);
+  background-color: var(--blue-lighten-75);
+  color: rgba(253, 253, 254, 0.8);
+}
+
 .qwm-btn-secondary:hover {
   background-color: var(--silver-darken-94);
 }
+
 .qwm-btn-secondary:active {
   background-color: var(--silver-darken-87);
 }
+
 .qwm-btn-secondary:disabled {
   box-shadow: none;
   border: solid 1px var(--silver-darken-87);
   background-color: var(--silver-base-97);
   color: var(--color-535353-opacity-50);
 }
+
 .qwm-btn + .qwm-btn {
   margin-left: 15px;
 }
diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_modal.css b/components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_modal.css
@@ -68,16 +68,18 @@ body,
   position: fixed;
   left: 0;
   right: 0;
-  width: 638px;
+  width: 40%;
+  max-width: 750px;
+  min-width: 591px;
   margin: 10vh auto 6vh;
   padding: 0;
   z-index: 1001;
-  overflow: hidden;
   border: solid 1px var(--silver-darken-87);
   border-radius: 3px;
   box-shadow: 0 1px 4px var(--color-000000-opacity-30);
   background-color: var(--silver-lighten-99);
   color: var(--grey-darken-33);
+  overflow-y: scroll;
 }
 .qwm-modal-content,
 .qwm-modal-content > form {
@@ -99,7 +101,6 @@ body,
 }
 .qwm-modal-body {
   padding: 16px 20px 20px 20px;
-  overflow-y: auto;
   font-size: 14px;
   background-color: var(--silver-lighten-99);
 }

diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css b/components/bpmn-q/modeler-component/editor/resources/styling/modeler.css
@@ -147,3 +147,9 @@
   position: relative;
   top: 10px;
 }
+
+input,
+select {
+  width: 100%;
+  box-sizing: border-box;
+}