Merge branch 'list-cubbles'

css/sidebar_style.css

@@ -1,140 +1,128 @@
-.hidden {
-    display: none;
-}
-
-#noCubblesMessage {
-    color: #999999;
-}
-
 pre {
-    max-height: 40em;
+    max-height: 25em;
     overflow: auto
 }
 
-.slot-value-element-container {
-    min-height: 5em;
+.CodeMirror-focused {
+    outline: auto 5px -webkit-focus-ring-color;
+    outline-offset: 0;
 }
 
-td {
-    height:100%;
-    position: relative;
+.CodeMirror {
+    border: 1px solid #ddd;
+    height: auto !important;
 }
 
-textarea.set-slot-input {
-    overflow-y: auto;
-    position: absolute;
-    width: 100%;
-    top: 2px;
-    bottom: 2em;
+.CodeMirror-scroll {
+    max-height: 20em;
 }
 
-.slot-value-element {
-    border: 1px solid #aaa;
-    padding: 0.5em 1.5em;
+.body .row, .bottom-border {
+    border-bottom: 1px solid #ddd;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
 }
 
-.right-button:not([data-slot-type='boolean']):not([data-slot-type='number']) {
-    bottom: 2px;
-    right: 0;
-    position: absolute;
+div.head {
+    background-color: #ddd;
 }
 
-.right-button{
-    float: right;
+div.body, div.head{
+    padding: 0.5em;
 }
 
-.set-slot-input, .set-slot-container {
-    width: 100%;
-    box-sizing: border-box;
+.jstree-anchor {
+    /*enable wrapping*/
+    white-space : normal !important;
+    /*ensure lower nodes move down*/
+    height : auto !important;
+    /*offset icon width*/
+    padding-right : 1px;
+    padding-bottom : 5px;
+    line-height: 15px !important;
+    font-size: 12px !important;
+    font-family: Consolas, Lucida Console, Courier New, monospace;
 }
 
-.set-slot-container [type=checkbox] {
-    width: auto !important;
+.no-gutter > [class*='col-'] {
+    padding-right:0;
+    padding-left:0;
 }
 
-.set-slot-container {
-    overflow-y: auto;
+.hidden {
+    position: absolute !important;
+    top: -9999px !important;
+    left: -9999px !important;
 }
 
-
-#slotsInfo, #inputSlotsTable, #outputSlotsTable {
-    width: 100%;
+.tag-name {
+    color: #881280;
 }
 
-#slotsInfo th, #slotsInfo td {
-    text-align: left;
-    margin: 0.5em;
-    vertical-align: top;
+.attribute-name {
+    color: #994500; 
 }
 
-#slotsInfo table {
-    border-collapse: collapse;
-    table-layout: fixed
+.attribute-value {
+    color: #1C23A6;
 }
 
-#slotsInfo tr:nth-child(even){
-    background-color: #f2f2f2
+#cubblesTree {
+    padding-right: 2em;
 }
 
-.slot-id-col {
-    width: 20%;
+#cubblesTreeConfigContainer {
+    padding-left: 1em;
 }
 
-.current-value-col {
-    width: 35%;
+#cubblesTreeContainer > hr {
+    margin: 0 !important;
 }
 
-.use-current-col {
-    width: 10%;
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 5px 1fr;
 }
-
-.use-current-container {
-    text-align: center;
-    width: 100%;
+  
+.vertical-gutter {
+    grid-area: 1 / 2 / 2 / 2;
+    cursor: ew-resize;
 }
 
-.set-value-col {
-    width: 35%;
+#cubblesTreeContainer, #inspectorSidebar {
+    max-height: 85vh;
+    overflow: auto;
 }
 
-.tooltip {
-    position: relative;
-    display: inline-block;
-    padding-left: 0.5em;
+.slot-init-value-element {
+    padding: 0 0 0 1em;
+    border-radius: 0px;
 }
 
-.tooltip .tooltiptext {
-    display: none;
-    background: #fff;
-    box-shadow: 0 0 5px #999999;
-    color: #333;
-    padding: 5px;
-    max-width: 20em;
-    min-width: 10em;
-
-    /* Position the tooltip text */
-    position: absolute;
-    z-index: 10;
-    top: 125%;
-    left: 50%;
+.collapse-header.collapsed:before {
+    /* symbol for "collapsed" panels */
+    content:"\e250";    /* adjust as needed, taken from bootstrap.css */
+}
 
-    /* Fade in tooltip */
-    opacity: 0;
-    transition: opacity 1s;
+.collapse-header:before {
+    /* symbol for "opening" panels */
+    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
+    content:"\e252";    /* adjust as needed, taken from bootstrap.css */
+    font-size: 10px;
+    padding-right: 0.5em;
 }
 
-.tooltip .tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
+.slot-value-container {
+    padding-left: 1em;
+    padding-top: 1em;
+    padding-bottom: 1em;
 }
 
-.tooltip:hover {
-    cursor: pointer;
+input[type="checkbox"].set-slot-input:after {
+    content: 'False';
+    margin-left: 1.5em;
 }
 
-.tooltip:hover .tooltiptext {
-    display: inline-block;
-    opacity: 1;
+input[type="checkbox"].set-slot-input:checked:after {
+    content: 'True';
 }

cubbles/dep-tree-viewer@1.3.1/cubx-dep-tree-viewer/cubx-dep-tree-viewer.js → cubbles/dep-tree-viewer@1.3.2/cubx-dep-tree-viewer/cubx-dep-tree-viewer.js

@@ -99,11 +99,11 @@
      * @private
      */
     _clearViewer: function () {
-      d3.select('#' + this.VIEW_HOLDER_ID).html('');
+      d3.select(this.$$('#' + this.VIEW_HOLDER_ID)).html('');
     },
 
     _createTreePanel: function () {
-      var viewerDiv = d3.select('#' + this.VIEW_HOLDER_ID);
+      var viewerDiv = d3.select(this.$$('#' + this.VIEW_HOLDER_ID));
       var panel;
       panel = viewerDiv
         .append('div')

cubbles/dep-tree-viewer@1.3.1/cubx-dep-tree-viewer/demo/index.html → cubbles/dep-tree-viewer@1.3.2/cubx-dep-tree-viewer/demo/index.html

@@ -29,7 +29,8 @@
         <h1>&lt;cubx-dep-tree-viewer&gt; Demo</h1>
     </div>
     <div cubx-core-crc class="row">
-        <cubx-dep-tree-viewer cubx-webpackage-id="this"></cubx-dep-tree-viewer>
+        <cubx-dep-tree-viewer cubx-webpackage-id="this" id="depTree1"></cubx-dep-tree-viewer>
+        <cubx-dep-tree-viewer cubx-webpackage-id="this" id="depTree2"></cubx-dep-tree-viewer>
     </div>
 </div>
 
@@ -56,8 +57,12 @@ <h1>&lt;cubx-dep-tree-viewer&gt; Demo</h1>
             depMgr._buildRawDependencyTree(deps, 'https://cubbles.world/sandbox/')
                     .then(function (depTree) {
                         depTree._rootNodes.push(depTree._rootNodes[0]);
-                        document.querySelector('cubx-dep-tree-viewer').setScale('auto');
-                        document.querySelector('cubx-dep-tree-viewer').setDepTree(depTree);
+                        let depTree1 = document.getElementById('depTree1');
+                        depTree1.setScale('auto');
+                        depTree1.setDepTree(depTree);
+                        let depTree2 = document.getElementById('depTree1');
+                        depTree2.setScale('auto');
+                        depTree2.setDepTree(depTree);
                     });
         });
     })();

cubbles/dep-tree-viewer@1.3.2/cubx-dep-tree-viewer/docs/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>&lt;cubx-dep-tree-viewer&gt; generated documentation</title>
+
+    <script src="../../../cubx.core.rte@2.4.0/webcomponents-lite/webcomponents-lite.js"></script>
+    <script src="../../../cubx.core.rte@2.4.0/crc-loader/js/main.js" data-crcinit-loadcif="true"></script>
+
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <h1>&lt;cubx-dep-tree-viewer&gt; generated documentation</h1>
+    </div>
+    <div cubx-core-crc class="row">
+        <cubx-component-docs-viewer cubx-webpackage-id="com.incowia.cubx-webpackage-viewer@1.5.0">
+            <cubx-core-init style="display:none">
+                <cubx-core-slot-init slot="manifestUrl">"../../manifest.webpackage"</cubx-core-slot-init>
+                <cubx-core-slot-init slot="componentArtifactId">"cubx-dep-tree-viewer"</cubx-core-slot-init>
+            </cubx-core-init>
+        </cubx-component-docs-viewer>
+    </div>
+</div>
+</body>
+</html>