wip TabsView component

eea · May 6, 2020 · ce7bd80 · ce7bd80
1 parent 025cfea
commit ce7bd80
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 65 deletions.
diff --git a/src/components/theme/ChildrenTabsView/ChildrenTabsView.jsx b/src/components/theme/ChildrenTabsView/ChildrenTabsView.jsx
@@ -1,14 +1,16 @@
-import { Tab } from 'semantic-ui-react';
 import React, { Component } from 'react';
 import { getContent } from '@plone/volto/actions';
-import { DefaultView } from '@plone/volto/components';
 import { map } from 'lodash';
+import { Portal } from 'react-portal';
+import { Tab, Container } from 'semantic-ui-react';
+import { DefaultView } from '@plone/volto/components';
 
 import { settings, blocks } from '~/config';
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   getBaseUrl,
+  hasBlocksData,
 } from '@plone/volto/helpers';
 
 const renderTab = content => {
@@ -18,8 +20,8 @@ const renderTab = content => {
     .replace(settings.apiPath, '')
     .replace(settings.internalApiPath, '');
 
-  return (
-    <div className="ui container">
+  return hasBlocksData(content) ? (
+    <div>
       {map(content[blocksLayoutFieldname].items, block => {
         const Block =
           blocks.blocksConfig[(content[blocksFieldname]?.[block]?.['@type'])]?.[
@@ -38,20 +40,64 @@ const renderTab = content => {
         );
       })}
     </div>
+  ) : (
+    <Container id="page-document">
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: content.text.data.replace(
+              /a href="([^"]*\.[^"]*)"/g,
+              `a href="${settings.apiPath}$1/download/file"`,
+            ),
+          }}
+        />
+      )}
+    </Container>
   );
 };
 
 class ChildrenTabsView extends Component {
   render() {
     return (
-      <Tab
-        panes={this.props.content.items.map(child => ({
-          menuItem: child.title,
-          render: () => (
-            <Tab.Pane key={child['@id']}>{renderTab(child)}</Tab.Pane>
-          ),
-        }))}
-      />
+      <div className="children-tabs-view">
+        {this.props.content.image && (
+          <Portal
+            node={__CLIENT__ && document.querySelector('#header-leadimage')}
+          >
+            <div className="leadimage-header">
+              <div className="leadimage-container">
+                <div className="leadimage-wrapper">
+                  <div
+                    className="leadimage document-image"
+                    style={{
+                      backgroundImage: `url(${this.props.content.image.download})`,
+                    }}
+                  />
+                  <div className="image-layer" />
+                  <div className="ui container image-content">
+                    <h1 className="leadimage-title">{this.props.content.title}</h1>
+                    <p>{this.props.content.description}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Portal>
+        )}
+        <div id="page-document" className="ui container">
+          <Tab
+            menu={{ attached: false, tabular: false }}
+            panes={this.props.content.items && this.props.content.items.map(child => ({
+              menuItem: child.title,
+              render: () => (
+                <Tab.Pane key={child['@id']}>{renderTab(child)}</Tab.Pane>
+              ),
+            }))}
+          />
+        </div>
+      </div>
     );
   }
 }

diff --git a/src/components/theme/FactsheetDatabaseListing/FactsheetDatabaseListing.jsx b/src/components/theme/FactsheetDatabaseListing/FactsheetDatabaseListing.jsx
@@ -24,30 +24,30 @@ const FactsheetDatabaseListing = props => {
   return (
     <div>
       <div>
-        <Portal
-          node={__CLIENT__ && document.querySelector('#header-leadimage')}
-        >
-          {props.content.image && (
-            <div className="leadimage-header">
-              <div className="leadimage-container">
-                <div className="leadimage-wrapper">
-                  <div
-                    className="leadimage document-image"
-                    style={{
-                      backgroundImage: `url(${props.content.image.download})`,
-                    }}
-                  />
-                  <div className="image-layer" />
-                  <div className="ui container image-content">
-                    <h1 className="leadimage-title">
-                      Discover biodiversity in Europe
-                    </h1>
+        {props.content.image && (
+          <Portal
+            node={__CLIENT__ && document.querySelector('#header-leadimage')}
+            >
+              <div className="leadimage-header">
+                <div className="leadimage-container">
+                  <div className="leadimage-wrapper">
+                    <div
+                      className="leadimage document-image"
+                      style={{
+                        backgroundImage: `url(${props.content.image.download})`,
+                      }}
+                    />
+                    <div className="image-layer" />
+                    <div className="ui container image-content">
+                      <h1 className="leadimage-title">
+                        Discover biodiversity in Europe
+                      </h1>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          )}
-        </Portal>
+          </Portal>
+        )}
       </div>
 
       <div className="factsheet-view">

diff --git a/src/customizations/volto/components/theme/View/DefaultView.jsx b/src/customizations/volto/components/theme/View/DefaultView.jsx
@@ -40,25 +40,26 @@ const DefaultView = ({ content, intl, location }) => {
 
   return hasBlocksData(content) ? (
     <div>
-      <Portal node={__CLIENT__ && document.querySelector('#header-leadimage')}>
-        {content.image && (
-          <div className="leadimage-header">
-            <div className="leadimage-container">
-              <div className="leadimage-wrapper">
-                <div
-                  className="leadimage document-image"
-                  style={{ backgroundImage: `url(${content.image.download})` }}
-                />
-                <div className="image-layer" />
-                <div className="ui container image-content">
-                  <h1 className="leadimage-title">{content.title}</h1>
-                  <p>{content.description}</p>
+      {content.image && (
+        <Portal
+          node={__CLIENT__ && document.querySelector('#header-leadimage')}>
+            <div className="leadimage-header">
+              <div className="leadimage-container">
+                <div className="leadimage-wrapper">
+                  <div
+                    className="leadimage document-image"
+                    style={{ backgroundImage: `url(${content.image.download})` }}
+                  />
+                  <div className="image-layer" />
+                  <div className="ui container image-content">
+                    <h1 className="leadimage-title">{content.title}</h1>
+                    <p>{content.description}</p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        )}
-      </Portal>
+        </Portal>
+      )}
       <div id="page-document" className="ui container">
         <Helmet title={content.title} />
         {map(content[blocksLayoutFieldname].items, block => {

diff --git a/src/customizations/volto/components/theme/View/ListingView.jsx b/src/customizations/volto/components/theme/View/ListingView.jsx
@@ -17,25 +17,26 @@ import { Portal } from 'react-portal';
  */
 const ListingView = ({ content }) => (
   <div>
-    <Portal node={__CLIENT__ && document.querySelector('#header-leadimage')}>
-      {content.image && (
-        <div className="leadimage-header">
-          <div className="leadimage-container">
-            <div className="leadimage-wrapper">
-              <div
-                className="leadimage document-image"
-                style={{ backgroundImage: `url(${content.image.download})` }}
-              />
-              <div className="image-layer" />
-              <div className="ui container image-content">
-                <h1 className="leadimage-title">{content.title}</h1>
-                <p>{content.description}</p>
+    {content.image && (
+      <Portal
+        node={__CLIENT__ && document.querySelector('#header-leadimage')}>
+          <div className="leadimage-header">
+            <div className="leadimage-container">
+              <div className="leadimage-wrapper">
+                <div
+                  className="leadimage document-image"
+                  style={{ backgroundImage: `url(${content.image.download})` }}
+                />
+                <div className="image-layer" />
+                <div className="ui container image-content">
+                  <h1 className="leadimage-title">{content.title}</h1>
+                  <p>{content.description}</p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
-    </Portal>
+      </Portal>
+    )}
     <Container id="page-home">
       <Helmet title={content.title} />
       <section id="content-core">

diff --git a/theme/site/extras/custom.overrides b/theme/site/extras/custom.overrides
@@ -11,6 +11,7 @@
   @import 'leadimage';
   @import 'toolbar';
   @import 'tocnav';
+  @import 'tabsview';
 
   /* keyfacts block; */
   @import 'keyfacts';

diff --git a/theme/site/extras/leadimage.less b/theme/site/extras/leadimage.less
@@ -22,4 +22,35 @@
     background-size: cover;
   }
 
+  .image-layer {
+    background-color:rgba(0,0,0,0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    bottom: 25%;
+    z-index: 997;
+    text-align: left;
+    color: #fff;
+
+    h1 {
+      margin-bottom: 1rem;
+      font-weight: 700;
+      font-size: 48px;
+    }
+    p {
+      font-size: 24px;
+      font-weight: 200;
+      max-width: 770px;
+    }
+  }
 }
diff --git a/theme/site/extras/tabsview.less b/theme/site/extras/tabsview.less
@@ -0,0 +1,18 @@
+.children-tabs-view {
+  position: relative;
+  top: -50px;
+
+  .ui.menu,
+  .ui.vertical.menu{
+    width: max-content;
+  }
+
+  .ui.menu .item:hover,
+  .ui.menu .active.item {
+    color: @lightGreenColor;
+    background-color: rgba(0, 0, 0, 0.04)!important;
+  }
+  .ui.menu .active.item:hover {
+    background-color: transparent;
+  }
+}