ywana-core8 0.0.608 → 0.0.611

package/package.json

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

package/src/domain/CollectionPage.js

@@ -66,9 +66,11 @@ export const CollectionPage = (props) => {
         })
     }
 
+    const total = all ? all.length : 0
+    const title2 = <><span className="size">{total}</span> {title}</>
     return (
         <Fragment>
-            <Header className={`collection-page ${className}`} title={<Text>{title}</Text>}>
+            <Header className={`collection-page ${className}`} title={<Text>{title2}</Text>}>
                 {canAdd ? <Button icon="add" label="Add" action={add} /> : false}
                 &nbsp;
                 <Button icon="refresh" label="Reload" action={reload} />

package/src/domain/ContentViewer.js

@@ -60,7 +60,7 @@ const FieldViewer = (props) => {
         case TYPES.ENTITY:
             return <EntityViewer field={field} value={value} />
         case TYPES.ARRAY:
-            return item === TYPES.STRING ? <ListViewer label={label} value={value} /> : <ArrayViewer label={label} item={item} value={value} />
+            return item === TYPES.STRING ? <ListViewer field={field} value={value} /> : <ArrayViewer label={label} item={item} value={value} />
         default:
             return <div>{label}</div>
     }

package/src/widgets/explorer/Explorer.css

@@ -3,19 +3,13 @@
     height: 100%;
     display: grid;
     grid-template-areas: 
-        "header header header"
-        "nav nav nav"
-        "menu main aside"
-        "footer footer footer";
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto 1fr auto;
+        "header header"
+        "main aside";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
     padding: 2px;
 }
 
-.file-explorer>* {
-    margin: 2px;
-}
-
 .file-explorer>header {
     grid-area: header;
 }

package/src/widgets/explorer/Explorer.js

@@ -1,22 +1,26 @@
 import React, {useState} from 'react'
-import { MenuIcon, MenuItem, Icon } from '../../html'
+import { Icon } from '../../html'
 import './Explorer.css'
 
 /**
  * File Explorer
  */
 export const FileExplorer = (props) => {
-    const { files = [], onSelect } = props
+
+    const { title, files = [] } = props
+    
     return (
         <div className="file-explorer">
-            <header>header</header>
-            <nav>nav</nav>
-            <menu>menu</menu>
+            <header>
+                {title}
+                <nav>
+                    <Icon icon="info" />
+                </nav>
+            </header>
             <main>
-                <FileIconsView files={files} />
+                <FilesGrid files={files} />
             </main>
             <aside></aside>
-            <footer>footer</footer>
         </div>
     )
 }
@@ -24,7 +28,7 @@ export const FileExplorer = (props) => {
 /**
  * File Icons View
  */
-export const FileIconsView = (props) => {
+export const FilesGrid = (props) => {
     const { files = [], onSelect } = props
     const [selected, setSelected] = useState()
 
@@ -59,16 +63,11 @@ const FileIcon = (props) => {
     const style = selected ? 'file-icon--selected'  :''
     return (
         <div className={`file-icon ${style}`} onClick={select}>
-            <header>
-                {icon? <Icon size="small" icon={icon} /> : null }
-                <MenuIcon size="small">
-                    {actions.map(action => <MenuItem icon={action.icon} label={action.label} onSelect={action.execute} />)}
-                </MenuIcon>
-            </header>
             <picture>
                 <img src={src}></img>
             </picture>
             <main>
+                {icon? <Icon size="small" icon={icon} /> : null }
                 <label>{label}</label>
             </main>
             { footer ? <footer>{footer}</footer> : null }

package/src/widgets/explorer/Explorer.test.js

@@ -20,16 +20,7 @@ const files = [
 const FileExplorerTest = (props) => {
     return (
         <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
-            <FileExplorer files={files} />
+            <FileExplorer title="File Explorer Test" files={files} />
         </div>
     )
 }
-
-
-const FileIconViewTest = (props) => {
-    return (
-        <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
-            <FileIconsView files={files} />
-        </div>
-    )
-}

package/src/widgets/planner/Planner.js

@@ -71,7 +71,7 @@ export const Planner = ({ title, events = [], lanes = [], navigation = true, onS
         if (element) element.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
-            inline: 'start'
+            inline: 'start',
         })
     }
 

package/src/widgets/viewer/Viewer.css

@@ -30,7 +30,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    overflow: auto;
+    overflow: hidden;
 }
 
 .viewer>main>.resizer {

package/src/widgets/viewer/Viewer.js

@@ -16,7 +16,8 @@ export const Viewer = ({ title, src, info, actions = [], tools = false, onClose
     const headerTitle = <Text use="headline6">{title}</Text>
     return (
         <div className="viewer">
-            <Header icon={{ icon: 'close', clickable: true, action: onClose }} title={headerTitle} >
+            <Header icon="view" title={headerTitle} >
+                {onClose ? <Icon icon="close" clickable action={onClose} /> : null}
                 {showDetails ? '' : <Icon icon="info" clickable action={toggleDetails} />}
                 {actions}
             </Header>