ywana-core8 0.0.619 → 0.0.622

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.619",
+  "version": "0.0.622",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/CollectionPage.css

@@ -25,12 +25,12 @@ menu.collection-page>main.collection-filters {
 }
 
 menu.collection-page>.list {
-    overflow:auto;
+    overflow: auto;
 }
 
 menu.collection-page>main {
     flex: 1;
-    overflow:auto;
+    overflow: auto;
 }
 
 menu.collection-page>footer>.search-box {
@@ -47,4 +47,21 @@ main.collection-page>.content-editor {
     flex: 1;
 }
 
+main.collection-page.dock-to-right {
+    display: grid;
+    grid-template-areas: "header header" "main dock" "footer dock";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr auto;
+}
+
+main.collection-page.dock-to-right>header {
+    grid-area: header;
+}
+
+main.collection-page.dock-to-right>main {
+    grid-area: main;
+}
 
+main.collection-page.dock-to-right>article {
+    grid-area: dock;
+}

package/src/domain/CollectionPage.js

@@ -24,6 +24,7 @@ export const CollectionPage = (props) => {
         autosave = false, delay = 1000,
         groupBy, levels, sorter,
         editor,
+        footer,
         children
     } = props
 
@@ -88,6 +89,9 @@ export const CollectionPage = (props) => {
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} canDelete={canDelete} canEdit={canEdit} onReload={reloadSelection} />
                 {children ? <article>{children}</article> : null}
             </main>
+            <footer>
+                {footer}
+            </footer>
         </Fragment>
     )
 }
@@ -235,11 +239,12 @@ export const CollectionTree = (props) => {
             let node = nodes.find(n => n.name === field[by])
             if (!node) {
                 let name = field[by]
+                let title = field[by]
                 if (options) {
                     const opt = options.find(option => option.value === field[by])
-                    if (opt) name = opt.label
+                    if (opt) title = opt.label
                 }
-                node = { name, items: [], field: by }
+                node = { name, items: [], field: by, title }
                 nodes.push(node)
             }
             node.items.push(field)
@@ -256,7 +261,7 @@ export const CollectionTree = (props) => {
 
     function renderNodes(nodes) {
         return nodes.map(node => {
-            const title = typeof node.name === 'boolean' ? `${node.field} = ${node.name}` : node.name
+            const title = typeof node.name === 'boolean' ? `${node.field} = ${node.name}` : node.title
             return (
                 <TreeNode key={node.name} icon={null} label={title} open={true}>
                     {node.nodes ? renderNodes(node.nodes) : node.items.map(item => {

package/src/html/button.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Icon } from './icon'
+import { Text } from './text'
 import './button.css'
 
 /**
@@ -20,7 +21,7 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     return (
         <button className={`btn ${style}`} onClick={click}>
             { icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
-            <span>{ label }</span>
+            <Text>{ label }</Text>
         </button>
     )
 }