ywana-core8 0.0.719 → 0.0.721

package/package.json

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

package/src/css/html.css

@@ -54,4 +54,8 @@ td.actions {
   justify-content: center;
   align-items: center;
   color: var(--text-color-lighter)
+}
+
+.btn {
+  background-color: red !important;
 }

package/src/domain2/CollectionEditor.js

@@ -5,10 +5,14 @@ import React, { useContext } from 'react'
  */
  export const CollectionEditor = (props) => {
 
+    const context = useContext(CollectionContext)
+    const { selected } = context
     const { customEditor } = props
 
+    const style = selected ? 'selected' : ''
+
     return (
-        <div className="collection-editor">
+        <div className={`collection-editor ${selected}`}>
             {customEditor}
         </div>
     )

package/src/domain2/CollectionList.js

@@ -13,8 +13,6 @@ export const CollectionList = (props) => {
     const { all = [], selected, filters, customFilters } = context
     const [search, setSearch] = useState('')
 
-
-
     function changeSearch(id, value) {
         setSearch(value)
     }
@@ -39,8 +37,10 @@ export const CollectionList = (props) => {
             }
         })
 
+    const style = selected ? 'selected' : ''
+
     return (
-        <div className="collection-list">
+        <div className={`collection-list ${style}`}>
             <List items={items} onSelect={select} groupBy={groupBy} />
             {searchBy.length > 0 ? (
                 <div className="search-box">

package/src/domain2/CollectionPage.css

@@ -1,10 +1,11 @@
 .collection-page {
-  border: solid 3px red;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
+/*************** IDE LAYOUT ***************/ 
+
 .collection-page.ide {
   display: grid;
   grid-template-areas: "header  header" 
@@ -14,6 +15,14 @@
   grid-template-rows: auto auto 1fr;
 }
 
+.collection-page.full-list {
+  grid-template-columns: 1fr 0;
+}
+
+.collection-page.full-editor {
+  grid-template-columns: 0 1fr;
+}
+
 .collection-page.ide .header {
   grid-area: header;
   border-bottom: solid 1px var(--divider-color);
@@ -21,10 +30,12 @@
 
 .collection-page.ide .collection-filters {
   grid-area: filters;
+  overflow: hidden;
 }
 
 .collection-page.ide .collection-editor {
   grid-area: main;
+  overflow: hidden;
 }
 
 .collection-page.ide .collection-aside {
@@ -33,6 +44,7 @@
 
 .collection-page.ide .collection-list {
   grid-area: list;
+  overflow: hidden;
 }
 
 .collection-page.ide .collection-console {
@@ -41,4 +53,16 @@
 
 .collection-page.ide .footer {
   grid-area: footer;
-}
+}
+
+
+/*************** FULLPAGE LAYOUT ***************/
+.collection-page.fullpage {
+  display: grid;
+  grid-template-areas: "header" 
+                       "nav" 
+                       "main";
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr;
+}
+

package/src/domain2/CollectionPage.js

@@ -19,7 +19,7 @@ export const CollectionPage = (props) => {
         listGroupBy, listSearchBy, listItemRenderer,
         customEditor,
     } = props
-
+    
     return (
         <div className={`collection-page ${layout}`}>
             <CollectionContextProvider host={host} url={url} filtersValue={filtersValue}>