wip wip spike popup

bpmn-io · Jul 13, 2023 · fdec666 · fdec666
1 parent dba70a6
commit fdec666
Show file tree

Hide file tree

Showing 16 changed files with 1,148 additions and 268 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -1086,7 +1086,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1112,4 +1112,172 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
 .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
   margin-left: auto;
-}
+}
+
+.bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
+  display: none;
+  justify-content: center;
+  flex-direction: column;
+  color: hsla(0, 0%, 9%, 0.25);
+}
+
+.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
+  display: none;
+}
+
+.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
+  display: flex;
+}
+
+.bio-properties-panel-popup {
+  --popup-background-color: hsla(0, 0%, 96%, 1);
+  --popup-header-background-color: white;
+  --popup-font-color: hsla(0, 0%, 0%, 1);
+  --popup-title-color: hsla(0, 0%, 0%, 1);
+  --popup-min-height: auto;
+  --popup-min-width: auto;
+
+  position: absolute;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+
+  font-family: IBM Plex Sans;
+
+  width: 300px;
+
+  padding: 0;
+  z-index: 1001;
+
+  box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
+
+  background-color: var(--popup-background-color);
+  color: var(--popup-font-color);
+
+  min-height: var(--popup-min-height);
+  min-width: var(--popup-min-width);
+  overflow-y: auto;
+
+  font-size: 14px;
+}
+
+.bio-properties-panel-popup h1, h2, h3, h4 {
+  font-weight: 500;
+  font-size: inherit;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header,
+.bio-properties-panel-popup .bio-properties-panel-popup__body,
+.bio-properties-panel-popup .bio-properties-panel-popup__footer {
+  padding: 12px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
+  padding-top: 0;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header {
+  display: flex;
+  background-color: var(--popup-header-background-color);
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.3199999928474426px;
+  text-align: left;
+  color: var(--popup-title-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
+  cursor: grab;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
+  display: flex;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  top: 0;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__title {
+  margin-left: 8px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
+  text-transform: capitalize;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+  margin-left: -4px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__body {
+  font-size: inherit;
+  display: flex;
+  overflow: auto;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__footer {
+  position: absolute;
+  bottom: 0;
+  right: 8px;
+}
+
+.bio-properties-panel-feel-popup {
+  min-height: 400px;
+  width: fit-content;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
+  position: absolute;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  height: 80%;
+  width: 97%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
+  display: flex;
+  min-width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-input {
+  width: 100%;
+  resize: none;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 6px;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
+  display: none;
+}
+
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  background: none;
+  border: none;
+  color: hsla(0, 0%, 32%, 1);
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
+  color: hsla(219, 99%, 53%, 1);
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
+  background: hsla(219, 99%, 53%, 1);
+  width: 66px;
+  font-weight: 400;
+  font-size: 14px;
+  color: white;
+  border: none;
+  height: 32px;
+}