@kitconcept/volto-light-theme 1.0.0-rc.5 → 1.0.0-rc.7

package/src/components/Theme/EventView.jsx

@@ -0,0 +1,301 @@
+/**
+ * EventView view component.
+ * @module components/theme/View/EventView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  hasBlocksData,
+  flattenHTMLToAppURL,
+  expandToBackendURL,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import { Image, Grid, Button } from 'semantic-ui-react';
+import { FormattedDate } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { map } from 'lodash';
+import { UniversalLink } from '@plone/volto/components';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+const EventTextfieldView = ({ content }) => (
+  <React.Fragment>
+    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
+    {content.description && (
+      <p className="documentDescription">{content.description}</p>
+    )}
+    {content.image && (
+      <Image
+        className="document-image"
+        src={content.image.scales.thumb.download}
+        floated="right"
+      />
+    )}
+    {content.text && (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: flattenHTMLToAppURL(content.text.data),
+        }}
+      />
+    )}
+  </React.Fragment>
+);
+
+/**
+ * EventView view component class.
+ * @function EventView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const EventView = (props) => {
+  const { content } = props;
+  const dateOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  };
+
+  const blocksFieldname = getBlocksFieldname(content);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
+
+  return (
+    <div id="page-document" className="view-wrapper event-view">
+      <Grid>
+        <Grid.Column width={12}>
+          <div>
+            <div className="dates">
+              {content?.start ? (
+                <span className="day">
+                  <FormattedDate date={content?.start} format={dateOptions} />{' '}
+                  {props.intl.locale === 'de' ? ' Uhr' : ''}
+                </span>
+              ) : (
+                <span className="day">
+                  <FormattedMessage id="No date" defaultMessage="No date" />
+                </span>
+              )}{' '}
+              &mdash;&nbsp;
+              {content?.end ? (
+                <span className="day">
+                  <FormattedDate date={content?.end} format={dateOptions} />{' '}
+                  {props.intl.locale === 'de' ? ' Uhr' : ''}
+                </span>
+              ) : (
+                <span className="day">
+                  <FormattedMessage id="No date" defaultMessage="No date" />
+                </span>
+              )}
+            </div>
+          </div>
+          {hasBlocksData(content) ? (
+            <div>
+              {map(content[blocksLayoutFieldname].items, (block) => {
+                const Block =
+                  config.blocks.blocksConfig[
+                    content[blocksFieldname]?.[block]?.['@type']
+                  ]?.['view'] || null;
+                if (
+                  config.blocks.blocksConfig[
+                    content[blocksFieldname]?.[block]?.['@type']
+                  ]?.['id'] === 'title'
+                ) {
+                  return (
+                    <>
+                      <Block
+                        key={block}
+                        id={block}
+                        properties={content}
+                        data={content[blocksFieldname][block]}
+                        path={getBaseUrl(props.location?.pathname || '')}
+                      />
+                      <Grid>
+                        <Grid.Row columns={2}>
+                          <Grid.Column>
+                            <div>
+                              <div className="event-title">
+                                <span className="event-heading">
+                                  <FormattedMessage
+                                    id="Start"
+                                    defaultMessage="Start"
+                                  />
+                                </span>
+                                <div className="event-detail">
+                                  {' '}
+                                  <FormattedDate
+                                    date={content?.start}
+                                    format={dateOptions}
+                                  />{' '}
+                                  {props.intl.locale === 'de' ? ' Uhr' : ''}
+                                </div>
+                                <div className="separator"></div>
+                              </div>
+                              <div className="event-title">
+                                <span className="event-heading">
+                                  {' '}
+                                  <FormattedMessage
+                                    id="End"
+                                    defaultMessage="End"
+                                  />
+                                </span>
+                                <div className="event-detail">
+                                  {' '}
+                                  <FormattedDate
+                                    date={content?.end}
+                                    format={dateOptions}
+                                  />{' '}
+                                  {props.intl.locale === 'de' ? ' Uhr' : ''}
+                                </div>
+                                <div className="separator"></div>
+                              </div>
+                              <div className="event-title">
+                                <span className="event-heading">
+                                  {' '}
+                                  <FormattedMessage
+                                    id="Location"
+                                    defaultMessage="Location"
+                                  />
+                                </span>
+                                <div className="event-detail">
+                                  {content?.location}
+                                </div>
+                              </div>
+                            </div>
+                          </Grid.Column>
+                          <Grid.Column>
+                            <div>
+                              <div className="event-title">
+                                <span className="event-heading">
+                                  <FormattedMessage
+                                    id="Website"
+                                    defaultMessage="Website"
+                                  />
+                                </span>
+                                <div className="event-detail">
+                                  <UniversalLink
+                                    className="event-url"
+                                    href={content.event_url}
+                                  >
+                                    {content.event_url}
+                                  </UniversalLink>
+                                </div>
+                                <div className="separator"></div>
+                              </div>
+                              <div className="event-title">
+                                <span className="event-heading">
+                                  <FormattedMessage
+                                    id="Contact"
+                                    defaultMessage="Contact"
+                                  />
+                                </span>
+                                <div className="event-detail">
+                                  <div>
+                                    {content?.contact_name && (
+                                      <p>{content.contact_name}</p>
+                                    )}
+                                    {content?.contact_email && (
+                                      <p>
+                                        <a
+                                          href={`mailto:${content.contact_email}`}
+                                        >
+                                          {content.contact_email}
+                                        </a>
+                                      </p>
+                                    )}
+                                    {content?.contact_phone && (
+                                      <p>
+                                        <FormattedMessage
+                                          id="Phone"
+                                          defaultMessage="Phone"
+                                        />{' '}
+                                        <a
+                                          href={`tel:${content.contact_phone}`}
+                                        >
+                                          {content.contact_phone}
+                                        </a>
+                                      </p>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </Grid.Column>
+                          <div className="event-button">
+                            <Button className="event-btn">
+                              <a
+                                className="ics-download"
+                                target="_blank"
+                                rel="noreferrer"
+                                href={`${expandToBackendURL(
+                                  content['@id'],
+                                )}/ics_view`}
+                              >
+                                <FormattedMessage
+                                  id="ICS-Download"
+                                  defaultMessage="ICS Download"
+                                />
+                              </a>
+                            </Button>
+                          </div>
+                        </Grid.Row>
+                      </Grid>
+                    </>
+                  );
+                }
+                return Block !== null ? (
+                  <Block
+                    key={block}
+                    id={block}
+                    properties={content}
+                    data={content[blocksFieldname][block]}
+                    path={getBaseUrl(props.location?.pathname || '')}
+                  />
+                ) : (
+                  <div key={block}>
+                    <FormattedMessage
+                      id="Unknown block"
+                      defaultMessage="Unknown block"
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <EventTextfieldView {...props} />
+          )}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EventView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+    attendees: PropTypes.arrayOf(PropTypes.string).isRequired,
+    contact_email: PropTypes.string,
+    contact_name: PropTypes.string,
+    contact_phone: PropTypes.string,
+    end: PropTypes.string.isRequired,
+    event_url: PropTypes.string,
+    location: PropTypes.string,
+    open_end: PropTypes.bool,
+    recurrence: PropTypes.any,
+    start: PropTypes.string.isRequired,
+    subjects: PropTypes.arrayOf(PropTypes.string).isRequired,
+    whole_day: PropTypes.bool,
+  }).isRequired,
+};
+export default injectIntl(EventView);

package/src/customizations/volto/components/theme/View/FileView.jsx

@@ -0,0 +1,132 @@
+/**
+ * OVERRIDE FileView.jsx
+ * REASON: BFS theme
+ * DATE: 2023-07-11
+ * DEVELOPER: @iRohitSingh
+ */
+
+/**
+ * File view component.
+ * @module components/theme/View/FileView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from 'semantic-ui-react';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * File view component class.
+ * @function FileView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FileView = ({ content }) => (
+  <Container className="view-wrapper">
+    <h1 className="documentFirstHeading">
+      {content.title}
+      {content.subtitle && ` - ${content.subtitle}`}
+    </h1>
+    <div className="file-detail">
+      {content.description && (
+        <p className="documentDescription">{content.description}iRohitSingh</p>
+      )}
+      {content.file?.download && (
+        <>
+          <a href={flattenToAppURL(content.file.download)}>
+            {content.file.filename}
+          </a>{' '}
+          <span>
+            (
+            {(() => {
+              switch (content?.file['content-type']) {
+                case 'image/jpeg':
+                  return 'JPEG';
+                case 'image/png':
+                  return 'PNG';
+                case 'image/svg+xml':
+                  return 'SVG';
+                case 'image/gif':
+                  return 'GIF';
+                case 'application/pdf':
+                  return 'PDF';
+                case 'application/msexcel':
+                  return 'XLS';
+                case 'application/vnd.ms-excel':
+                  return 'XLS';
+                case 'application/msword':
+                  return 'DOC';
+                case 'application/mspowerpoint':
+                  return 'PPT';
+                case 'audio/mp4':
+                  return 'MP4';
+                case 'application/zip':
+                  return 'ZIP';
+                case 'video/webm':
+                  return 'WEBM';
+                case 'video/x-msvideo':
+                  return 'AVI';
+                case 'video/x-sgi-movie':
+                  return 'MOVIE';
+                case 'text/xml':
+                  return 'XML';
+                case 'text/plain':
+                  return 'TXT';
+                case 'text/calendar':
+                  return 'ICS';
+                case 'image/x-icon':
+                  return 'ICO';
+                case 'image/bmp':
+                  return 'BMP';
+                case 'audio/mpeg':
+                  return 'MP3';
+                case 'audio/wav':
+                  return 'WAV';
+                case 'application/json':
+                  return 'JSON';
+                case 'application/postscript':
+                  return 'PS';
+                case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+                  return 'XLSX';
+                case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                  return 'DOCX';
+                case 'application/xml':
+                  return 'XML';
+                case 'application/mshelp':
+                  return 'HLP';
+                case 'application/gzip':
+                  return 'GZ';
+                default:
+                  return '';
+              }
+            })()}{' '}
+            /{' '}
+            {content.file?.size < 1000000
+              ? Math.round(content.file.size / 1000)
+              : Math.round(content.file.size / 1000000)}
+            {content.file?.size < 1000000 ? 'KB' : 'MB'})
+          </span>
+        </>
+      )}
+    </div>
+  </Container>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    file: PropTypes.shape({
+      download: PropTypes.string,
+      filename: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default FileView;

package/src/index.js

@@ -16,6 +16,7 @@ import { AccordionSchemaEnhancer } from './components/Blocks/Accordion/schema';
 
 import gridSVG from './icons/block_icn_grid.svg';
 import accordionSVG from './icons/block_icn_accordion.svg';
+import EventView from './components/Theme/EventView';
 
 const BG_COLORS = [
   { name: 'transparent', label: 'Transparent' },
@@ -251,6 +252,7 @@ const applyConfig = (config) => {
       },
     ],
   };
+  config.views.contentTypesViews.Event = EventView;
 
   return config;
 };

package/src/theme/_breadcrumbs.scss

@@ -7,7 +7,7 @@ body.view-contentsview {
 }
 
 #main .breadcrumbs {
-  padding: 2em 0;
+  padding: 20px 0;
   background-color: $lightgrey;
 
   .breadcrumb {
@@ -26,6 +26,10 @@ body.view-contentsview {
 
     .home {
       margin-right: 0.5em;
+
+      svg {
+        margin-bottom: -4px;
+      }
     }
 
     .section {

package/src/theme/_content.scss

@@ -31,8 +31,117 @@
   }
 }
 
+// Event content type
+
+.contenttype-event {
+  .documentFirstHeading {
+    margin-top: 0px;
+    @include default-container-width();
+  }
+  .blocks-group-wrapper {
+    padding-top: 0px;
+  }
+  .dates {
+    margin-top: 40px;
+    margin-bottom: 40px;
+    @include default-container-width();
+
+    .day {
+      font-size: 18px;
+
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 24px;
+      text-transform: uppercase;
+    }
+  }
+
+  .two.column.row {
+    @include default-container-width();
+    margin-bottom: 50px;
+  }
+}
+.event-title {
+  margin-bottom: 25px;
+  .event-heading {
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 16px;
+    text-transform: uppercase;
+  }
+  .event-detail {
+    margin-top: 10px;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 33px;
+    p,
+    a {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 300;
+      line-height: 33px;
+    }
+  }
+  .separator {
+    width: 170px;
+    height: 30px;
+    border-right: none;
+    border-bottom: 1px solid #000;
+  }
+}
+
+.event-button {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-start;
+  padding-top: 50px;
+  gap: 10px;
+  .button.event-btn {
+    padding: 8px 20px;
+    border: 1px solid #000;
+    background-color: transparent;
+    color: #000;
+    font-size: 16px;
+    font-weight: 900;
+    line-height: 20px;
+    a {
+      color: #000;
+      font-size: 16px;
+      font-weight: 900;
+      line-height: 20px;
+    }
+  }
+}
+
 .contenttype-file {
-  .content-area a {
-    text-decoration: underline;
+  .content-area {
+    .documentFirstHeading {
+      max-width: var(--default-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+    }
+    .file-detail {
+      max-width: var(--narrow-container-width) !important;
+      margin-right: auto;
+      margin-left: auto;
+      .documentDescription {
+        padding-top: 40px;
+        padding-bottom: 40px;
+        margin-bottom: 0;
+      }
+
+      a {
+        text-decoration: underline;
+      }
+      span {
+        color: #808080;
+      }
+    }
   }
 }