wip wip spike popup

bpmn-io · Jul 14, 2023 · 7df754a · 7df754a
1 parent dba70a6
commit 7df754a
Show file tree

Hide file tree

Showing 17 changed files with 1,252 additions and 275 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -106,6 +106,8 @@
   --feel-hover-background-color: var(--color-grey-225-10-97);
   --feel-active-background-color: transparent;
   --feel-required-color: var(--color-grey-225-10-55);
+  --feel-open-popup-color: hsla(0, 0%, 32%, 1);
+  --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
 
   --feel-indicator-background-color: var(--color-grey-225-10-90);
 
@@ -1086,7 +1088,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 +1114,214 @@ 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-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
+.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-feelers-editor-container.popupOpen .bio-properties-panel-input,
+.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
+  display: none;
+}
+
+.bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
+.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;
+
+  --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
+  --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
+
+  position: absolute;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+
+  font-family: IBM Plex Sans, sans-serif;
+
+  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: hidden;
+
+  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: 100%;
+  width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
+  display: flex;
+  min-width: 100%;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
+  width: 100%;
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
+  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-feelers-editor.bio-properties-panel-input {
+  padding-top: 0;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
+  display: none;
+}
+
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  background: none;
+  border: none;
+  color: var(--feel-open-popup-color);
+  cursor: pointer;
+}
+
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
+  bottom: 0;
+}
+
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
+  color: var(--feel-open-popup-hover-color);
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
+  background: var(--feel-popup-close-background-color);
+  width: 66px;
+  font-weight: 400;
+  font-size: 14px;
+  color: white;
+  border: none;
+  height: 32px;
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor .cm-scroller {
+  margin-left: -12px;
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor .cm-gutters {
+  background-color: var(--feel-popup-gutters-background-color);
+}
+
+.bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor .cm-gutters .cm-lineNumbers .cm-gutterElement {
+  text-align: center;
+}