panel clean up

browser/vue-flow/src/assets/default-theme.css

@@ -7,6 +7,8 @@
   --normal: #333;
   --normal-secondary: #999;
   --primary: #5060a0;
+  --primary-darker: #405090;
+  --primary-lighter: #6080b0;
   --primary-inverse: #fff;
   --secondary: #666;
   --secondary-inverse: #fff;

browser/vue-flow/src/components/flow/node-activity.vue

@@ -85,7 +85,7 @@ export default {
 
   }
 }
-
+// Golang 0 date
 const invalidDate = -62135596800000
 function dateIsValid (d) {
   if (Object.prototype.toString.call(d) === '[object Date]') {

browser/vue-flow/src/components/panel-funcs.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flow-funcs__container"
-    :class="{active:active}">
+  <div class="flow-funcs__container">
     <!--<div class="flow-funcs__control">
     <button
       class="item"
@@ -15,32 +13,36 @@
     </button>
   </div>-->
     <div class="flow-funcs__search">
-      <input type="text" placeholder="search" v-model="search">
+      <input
+        type="text"
+        placeholder="search"
+        v-model="search">
     </div>
 
     <div class="flow-funcs__inner">
-      <hx-collapsible
-        v-for="g in funcsGroups"
-        :key="g">
-        <div
-          class="flow-funcs__header"
-          slot="header">{{ g }}</div>
-        <div
-          class="flow-funcs__group"
-          :class="{blocks:funcsViewBlocks}">
+      <div class="flow-funcs__collapsible"
+           v-for="g in funcsGroups"
+           :key="g">
+        <hx-collapsible :active="search!=''">
           <div
-            ref="src"
-            v-for="k in funcsGroupItems(g)"
-            :key="k.src"
-            class="flow-funcs__src hover"
-            draggable="true"
-            @dragstart="fnDrag($event,k.src)"
-            :style="{ 'background': registry[k.src].style && registry[k.src].style.color, }"
-            :title="k.src"
-            v-html="k.label"
-          />
-        </div>
-      </hx-collapsible>
+            class="flow-funcs__header"
+            slot="header">{{ g }}</div>
+          <div
+          class="flow-funcs__group">
+            <div
+              ref="src"
+              v-for="k in funcsGroupItems(g)"
+              :key="k.src"
+              class="flow-funcs__src hover"
+              draggable="true"
+              @dragstart="fnDrag($event,k.src)"
+              :style="{ 'background': registry[k.src].style && registry[k.src].style.color, }"
+              :title="k.src"
+              v-html="k.label"
+            />
+          </div>
+        </hx-collapsible>
+      </div>
     </div>
   </div>
 </template>
@@ -52,13 +54,11 @@ export default {
   name: 'FlowPanel',
   components: {HxCollapsible},
   props: {
-    active: {type: Boolean, default: true},
     registry: {type: Object, default: () => {}}
   },
   data () {
     return {
-      search: null,
-      funcsViewBlocks: true
+      search: null
     }
   },
   computed: {
@@ -105,39 +105,30 @@ export default {
 </script>
 <style>
 .flow-funcs {
-  opacity:1;
+  font-size:12px;
+  flex:1;
+  overflow:hidden;
+  height: available;
+  display:flex;
+  flex-flow:column;
+  color: var(--normal);
+  padding:10px;
+
 }
 
 .flow-funcs__container {
+  display:flex;
+  flex-flow:column;
   white-space: nowrap;
-  width:0;
-  transition: all var(--transition-speed);
-  height:100%;
-  overflow-x:hidden;
-  overflow-y:auto;
-}
-
-.flow-funcs__container.active {
   width:100%;
-}
-
-.flow-funcs__control {
-  display:flex;
-  flex-flow:row;
+  flex-basis:100%;
+  transition: all var(--transition-speed);
+  overflow:hidden;
 
 }
 
-.flow-funcs__control .item{
-  font-size:14px;
-  padding:13px;
-  flex:1;
-  height:100%;
-  text-align:center;
-  color:black;
-  text-overflow: ellipsis;
-  min-width:50px;
-  height:50px;
-  overflow:hidden;
+.flow-funcs__search {
+  flex:0;
 }
 
 .flow-funcs__search input {
@@ -149,8 +140,11 @@ export default {
 }
 
 .flow-funcs__inner {
-  overflow:hidden;
-  margin-top:20px;
+  display:flex;
+  flex-flow:column;
+  justify-content: flex-start;
+  overflow-x:hidden;
+  overflow-y:auto;
 }
 
 .flow-funcs__header {
@@ -164,53 +158,30 @@ export default {
 }
 
 .flow-funcs__group{
-  display:flex;
-  flex-flow:column;
+  display:grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px,auto));
   padding:10px;
   transition: all var(--transition-speed);
 }
 
 .flow-funcs__src {
-  font-size:14px;
-  padding:12px 4px;
-  margin-top:1px;
+  display:block;
+  font-size:10px;
+  padding:18px 4px;
+  margin:1px;
+  text-overflow: ellipsis;
   text-align:center;
   transition: all var(--transition-speed);
   position:relative;
-  display:flex;
-  justify-content: center;
-  align-items: center;
   cursor: move;
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
-}
-
-.flow-funcs__src b{
-  font-weight:bold;
-  color: var(--primary);
-}
-
-.flow-funcs__group.blocks {
-  flex-flow: row;
-  flex-wrap: wrap;
-  align-content: center;
-}
-
-.flow-funcs__group.blocks .flow-funcs__src {
-  display:block;
-  font-size:10px;
-  width: calc(50% - 2px);
-  padding:18px 4px;
-  text-overflow: ellipsis;
-  margin:1px;
-  word-wrap: break-all;
   overflow:hidden;
 }
 
-.flow-funcs__toggle {
-  margin:0;
-  position:relative;
+.flow-funcs__src b{
+  color: var(--primary-lighter);
 }
 
 </style>

browser/vue-flow/src/components/panel-inspector.vue

@@ -2,7 +2,7 @@
   <div class="flow-inspector">
     <template v-if="nodeInspect">
       <!-- VIEWER -->
-      <div class="flow-inspector__content">
+      <div class="flow-inspector__container">
         <svg
           class="flow-view preview activity flow-node--detail flow-node--activity flow-linking flow-inspector__area flow-inspector--view "
           width="100%"
@@ -57,12 +57,13 @@
           </div>
         </div>
 
+        <!-- STATIC PARAM -->
         <div class="flow-inspector__area  flow-inspector--static">
           <label>label</label>
           <input ref="labelInput" type="text" v-model="nodeInspect.label">
         </div>
-      <!-- STATIC PARAM -->
-      </div>
+      </div><!-- /container -->
+
       <div class="flow-inspector__area flow-inspector--control">
         <button
           class="primary-inverse"
@@ -106,6 +107,16 @@ export default {
   padding:10px;
 }
 
+.flow-inspector__container {
+  display:flex;
+  flex-flow:column;
+  white-space: nowrap;
+  width:100%;
+  flex-basis:100%;
+  transition: all var(--transition-speed);
+  overflow:hidden;
+}
+
 .flow-inspector input {
   background: var(--background);
   color: var(--normal);
@@ -130,14 +141,6 @@ export default {
   border-bottom: solid 1px rgba(150,150,150,0.2);
 }
 
-.flow-inspector__content {
-  display:flex;
-  flex-flow:column;
-  overflow-y:auto;
-  overflow-x: hidden;
-  flex:1;
-}
-
 .flow-inspector--view {
   flex-basis:150px;
   flex-shrink: 0;