@kitconcept/volto-light-theme 1.0.0-rc.8 → 1.0.0-rc.9

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

@@ -1,132 +1,10 @@
 /**
  * OVERRIDE FileView.jsx
- * REASON: BFS theme
+ * REASON: Adding size of file.
  * 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}</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,
-};
+import FileView from '../../../../../components/Theme/FileView';
 
 export default FileView;

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

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE ImageView.jsx
+ * REASON: Using custom component to render Image and Caption.
+ * DATE: 2023-07-19
+ * DEVELOPER: @IFlameing
+ */
+
+import ImageView from '../../../../../components/Theme/ImageView';
+
+export default ImageView;

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

@@ -1,57 +1,10 @@
 /**
  * OVERRIDE NewsItemView.jsx
- * REASON: BFS theme
+ * REASON: Adding dates and headtitle above the title of page.
  * DATE: 2023-07-04
  * DEVELOPER: @IFlameing
  */
 
-/**
- * NewsItemView view component.
- * @module components/theme/View/NewsItemView
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { FormattedDate } from '@plone/volto/components';
-
-/**
- * NewsItemView view component class.
- * @function NewsItemView
- * @params {object} content Content object.
- * @returns {string} Markup of the component.
- */
-const NewsItemView = ({ content }) => {
-  return (
-    <div id="page-document" className="ui container viewwrapper event-view">
-      <div className="dates">
-        {content?.effective ? (
-          <span className="day">
-            <FormattedDate date={content?.effective} />{' '}
-          </span>
-        ) : (
-          <span className="day">No date</span>
-        )}{' '}
-        <span className="headtitle">| {content?.head_title}</span>
-      </div>
-      <RenderBlocks content={content} />
-    </div>
-  );
-};
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-NewsItemView.propTypes = {
-  content: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    text: PropTypes.shape({
-      data: PropTypes.string,
-    }),
-  }).isRequired,
-};
+import NewsItemView from '../../../../../components/Theme/NewsItemView';
 
 export default NewsItemView;

package/src/helpers/Filetype.js

@@ -0,0 +1,64 @@
+const Filetype = (mime_type) => {
+  switch (mime_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 '';
+  }
+};
+
+export default Filetype;

package/src/index.js

@@ -47,21 +47,6 @@ const applyConfig = (config) => {
     component: Container,
   });
 
-  config.settings.apiExpanders = [
-    ...config.settings.apiExpanders,
-    {
-      match: '',
-      GET_CONTENT: ['breadcrumbs', 'actions', 'types'],
-    },
-    {
-      match: '',
-      GET_CONTENT: ['navigation'],
-      querystring: {
-        'expand.navigation.depth': config.settings.navDepth,
-      },
-    },
-  ];
-
   // Register custom StyleWrapper ClassNames
   config.settings.styleClassNameExtenders = [
     ({ block, content, data, classNames }) => {

package/src/theme/_content.scss

@@ -13,19 +13,15 @@
   .blocks-group-wrapper {
     padding-top: 0px;
   }
-  .dates {
-    max-width: var(--default-container-width) !important;
-    margin-top: 40px;
-    margin-right: auto;
-    margin-bottom: 40px;
-    margin-left: auto;
+  #page-document .dates {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+    margin-top: $spacing-medium;
+    margin-bottom: $spacing-medium;
     .day,
     .headtitle {
-      font-size: 18px;
-
-      font-weight: 700;
+      @include body-text-bold();
       letter-spacing: 1px;
-      line-height: 24px;
       text-transform: uppercase;
     }
   }
@@ -121,47 +117,22 @@
 
 .contenttype-file {
   .content-area {
-    .documentFirstHeading {
-      max-width: var(--default-container-width) !important;
-      margin-right: auto;
-      margin-left: auto;
+    a {
+      text-decoration: underline;
     }
-    .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;
-      }
+    span {
+      color: #808080;
     }
   }
 }
 .contenttype-image {
   .content-area {
-    max-width: var(--default-container-width) !important;
-    margin-right: auto;
-    margin-bottom: 0;
-    margin-left: auto;
-    .documentFirstHeading {
-      @media only screen and (max-width: 769px) {
-        margin-bottom: 60px;
-      }
-    }
     figure {
       img {
         aspect-ratio: $aspect-ratio;
       }
       figcaption {
-        margin-top: 20px;
+        margin-top: $spacing-small;
         margin-bottom: 0;
         .title {
           margin-bottom: 5px;
@@ -170,7 +141,7 @@
           margin-bottom: 5px;
         }
         .credits {
-          padding-bottom: 20px;
+          padding-bottom: $spacing-small;
           margin-bottom: 0;
           color: #0066cc;
         }
@@ -178,3 +149,24 @@
     }
   }
 }
+
+.contenttype-link,
+.contenttype-file,
+.contenttype-image {
+  #page-document > *,
+  #page-edit > *,
+  #page-add > * {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+  }
+
+  #page-document > p {
+    @include narrow-container-width();
+    @include adjustMarginsToContainer($narrow-container-width);
+  }
+  .documentDescription {
+    margin-bottom: $spacing-medium;
+    color: $black;
+    @include body-text();
+  }
+}

package/src/customizations/volto/components/manage/Blocks/Grid/View.jsx

@@ -1,44 +0,0 @@
-// TODO: Remove after this is merged: https://github.com/plone/volto/pull/4932
-import { Grid } from 'semantic-ui-react';
-import cx from 'classnames';
-import { RenderBlocks } from '@plone/volto/components';
-import { withBlockExtensions } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-
-const GridBlockView = (props) => {
-  const { data, path, className } = props;
-  const metadata = props.metadata || props.properties;
-  const columns = data.blocks_layout.items;
-  const blocksConfig =
-    config.blocks.blocksConfig[data['@type']].blocksConfig ||
-    props.blocksConfig;
-  const location = {
-    pathname: path,
-  };
-  return (
-    <div
-      className={cx('block', data['@type'], className, {
-        one: columns?.length === 1,
-        two: columns?.length === 2,
-        three: columns?.length === 3,
-        four: columns?.length === 4,
-      })}
-    >
-      {data.headline && <h2 className="headline">{data.headline}</h2>}
-
-      <Grid stackable stretched columns={columns.length}>
-        <RenderBlocks
-          {...props}
-          blockWrapperTag={Grid.Column}
-          metadata={metadata}
-          content={data}
-          location={location}
-          blocksConfig={blocksConfig}
-          isContainer
-        />
-      </Grid>
-    </div>
-  );
-};
-
-export default withBlockExtensions(GridBlockView);