wip wip add link icon to header

Related to bpmn-io/bpmn-js-properties-panel#616
bpmn-io · Mar 22, 2022 · b2a0f9f · b2a0f9f
1 parent f158b24
commit b2a0f9f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -169,6 +169,10 @@
   user-select: none;
 }
 
+.bio-properties-panel-header-actions {
+  margin-left: auto;
+}
+
 .bio-properties-panel-header-type {
   font-size: var(--text-size-smallest);
   font-weight: 600;

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,5 +1,12 @@
+import { LinkIcon } from './icons';
+
 /**
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
+ * @typedef { {
+ *  getElementLabel: (element: djs.model.base) => string,
+ *  getTypeLabel: (element: djs.model.base) => string,
+ *  getElementIcon: (element: djs.model.base) => import('preact').Component,
+ *  getDocumentationRef: (element: djs.model.base) => string
+ * } } HeaderProvider
  */
 
 /**
@@ -15,25 +22,36 @@ export default function Header(props) {
   } = props;
 
   const {
+    getElementIcon,
+    getDocumentationRef,
     getElementLabel,
     getTypeLabel,
-    getElementIcon
   } = headerProvider;
 
   const label = getElementLabel(element);
   const type = getTypeLabel(element);
+  const documentationRef = getDocumentationRef && getDocumentationRef(element);
+
   const ElementIcon = getElementIcon(element);
 
+  // todo: properly style icon
+  // todo: add linkage
   return (<div class="bio-properties-panel-header">
     <div class="bio-properties-panel-header-icon">
       { ElementIcon && <ElementIcon width="32" height="32" viewBox="0 0 32 32" /> }
     </div>
     <div class="bio-properties-panel-header-labels">
       <div title={ type } class="bio-properties-panel-header-type">{ type }</div>
-      { getElementLabel(element) ?
+      { label ?
         <div title={ label } class="bio-properties-panel-header-label">{ label }</div> :
         null
       }
     </div>
+    <div class="bio-properties-panel-actions">
+      { documentationRef ?
+        <div class="bio-properties-panel-header-link"><LinkIcon /></div> :
+        null
+      }
+    </div>
   </div>);
 }
diff --git a/src/components/icons/Link.svg b/src/components/icons/Link.svg
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -2,4 +2,5 @@ export { default as ArrowIcon } from './Arrow.svg';
 export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';
 export { default as FeelRequiredIcon } from './FeelRequired.svg';
-export { default as FeelOptionalIcon } from './FeelOptional.svg';
+export { default as FeelOptionalIcon } from './FeelOptional.svg';
+export { default as LinkIcon } from './Link.svg';