ywana-core8 0.0.66 → 0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.66",
+  "version": "0.0.70",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/TablePage.css

@@ -26,4 +26,5 @@ aside.table-page {
 main.table-editor {
     flex: 1;
     overflow: auto;
-}
+}
+

package/src/domain/TablePage.js

@@ -252,10 +252,13 @@ const TableEditor = (props) => {
             }
 
             table.columns.push({ id: "actions" })
-
+            const groupSize = groups[groupName].length
+            
             return (
                 <Fragment key={groupName}>
-                    <Header title={groupName} />
+                    <Header title={groupName} >
+                        <span className="size">{groupSize}</span>
+                    </Header>
                     <DataTable {...table} onRowSelection={select} editable={editable} />
                 </Fragment>
             )
@@ -373,7 +376,6 @@ const TableAPI = (url) => {
                             param = param.concat(`${key}=${item}&`)
                             return param
                         }, "")
-                        console.log(param)
                         return query.concat(param)
                     } else {
                         return query.concat(`${key}=%${filters[key]}%&`)

package/src/html/list.css

@@ -13,7 +13,6 @@
 }
 
 .list > ul {
-  flex: 1;
   overflow: auto;
   list-style: none;
   margin: 0;
@@ -24,7 +23,7 @@
 }
 
 .list > ul li {
-  flex: 1;
+  flex: 0;
   overflow: hidden;
   min-height: 3rem;
   padding: .3rem 0.5rem;

package/src/html/tab.js

@@ -22,7 +22,7 @@ export const Tabs = (props) => {
   })
 
   return (
-    <div class="tabs">
+    <div className="tabs">
       {tabs}
       <div className="tab-filler" />
     </div>

package/src/widgets/avatar/Avatar.css

@@ -0,0 +1,11 @@
+.avatar {
+    background-color: rgba(200,200,200,.1);
+    border: solid 3px transparent;
+    border-radius: 100%;
+    overflow: hidden;
+}
+
+.avatar.small {
+    width: 3rem;
+    height: 3rem;
+}

package/src/widgets/avatar/Avatar.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './Avatar.css'
+
+/**
+ * Avatar
+ */
+export const Avatar = (props) => {
+
+    const { id, name, className, src, size="small", clickable=false, action} = props
+
+    function click() {
+        if (clickable) {
+            action(id)
+        }
+    }
+
+    const clickableStyle = clickable ? 'clickable' : ''
+    const style = `avatar ${size} ${clickableStyle} ${className}`
+    return (
+        <div className={style} onClick={click}>
+            { src ? <img src={src} /> : <span>{name}</span>}
+        </div>
+    )
+}

package/src/widgets/index.js

@@ -1,4 +1,5 @@
 export * from './login/LoginBox'
 export * from './login/ResetPasswordBox'
 export * from './viewer/Viewer'
-export * from './kanban/Kanban'
+export * from './kanban/Kanban'
+export * from './avatar/avatar'