perf(webbuilder): update webbuilder (#4331)

erxes · Mar 29, 2023 · 6c8c074 · 6c8c074
1 parent 9dfe3ce
commit 6c8c074
Show file tree

Hide file tree

Showing 25 changed files with 1,188 additions and 677 deletions.
diff --git a/packages/core-ui/public/images/previews/blank.png b/packages/core-ui/public/images/previews/blank.png
diff --git a/packages/plugin-webbuilder-ui/src/components/WebBuilder.tsx b/packages/plugin-webbuilder-ui/src/components/WebBuilder.tsx
@@ -51,8 +51,8 @@ function WebBuilder(props: Props) {
         onChange={search}
         value={searchValue}
       />
-      <Link to="/webbuilder/sites/create">
-        <Button btnStyle="success" size="small" icon="plus-circle">
+      <Link to="/xbuilder/sites/create">
+        <Button btnStyle="success" icon="plus-circle">
           New website
         </Button>
       </Link>
@@ -64,8 +64,8 @@ function WebBuilder(props: Props) {
       <Wrapper
         header={
           <Wrapper.Header
-            title={__('Webbuilder Workspace')}
-            breadcrumb={[{ title: __('Webbuilder') }]}
+            title={__('X Builder Workspace')}
+            breadcrumb={[{ title: __('X Builder') }]}
           />
         }
         actionBar={

diff --git a/packages/plugin-webbuilder-ui/src/components/contentTypes/List.tsx b/packages/plugin-webbuilder-ui/src/components/contentTypes/List.tsx
@@ -42,14 +42,15 @@ class ContentTypesList extends React.Component<Props> {
           </li>
         ))}
         <li
+          className="link"
           onClick={() =>
             handleItemSettings(
               { displayName: '', code: '', fields: [] },
               'contenttype'
             )
           }
         >
-          <div className="link">
+          <div>
             <Icon icon="plus-1" /> &nbsp;
             {__('Create content type')}
           </div>

diff --git a/packages/plugin-webbuilder-ui/src/components/contentTypes/styles.tsx b/packages/plugin-webbuilder-ui/src/components/contentTypes/styles.tsx
@@ -18,6 +18,7 @@ export const TypeFormContainer = styled.div`
 
 export const ContentTypeItem = styled.div`
   margin-left: ${dimensions.unitSpacing - 5}px;
+  flex: 1;
 
   i {
     color: ${colors.colorCoreGray};

diff --git a/packages/plugin-webbuilder-ui/src/components/pages/List.tsx b/packages/plugin-webbuilder-ui/src/components/pages/List.tsx
@@ -2,48 +2,67 @@ import 'grapesjs/dist/css/grapes.min.css';
 
 import { IPageDoc } from '../../types';
 import Icon from '@erxes/ui/src/components/Icon';
+import { Link } from 'react-router-dom';
 import { List } from './styles';
 import React from 'react';
 import { __ } from '@erxes/ui/src/utils/core';
 
 type Props = {
   siteId?: string;
   pages: IPageDoc[];
-  queryParams: any;
+  pageId: string;
+  showDarkMode: boolean;
+  onLoad: (isLoading?: boolean) => void;
   handleItemSettings: (item: any, type: string) => void;
 };
 
 class PageList extends React.Component<Props> {
   render() {
-    const { pages, handleItemSettings, siteId = '', queryParams } = this.props;
+    const {
+      pages,
+      handleItemSettings,
+      siteId = '',
+      pageId,
+      onLoad,
+      showDarkMode
+    } = this.props;
 
     return (
-      <List>
-        {pages.map(page => (
-          <li key={page._id}>
-            <a
-              className={
-                queryParams.pageId && queryParams.pageId === page._id
-                  ? 'active'
-                  : ''
-              }
-              href={`/webbuilder/sites/edit/${siteId}?pageId=${page._id}`}
-            >
-              <Icon icon="file-1" />
-              {page.name}
-            </a>
-            <Icon
-              icon="settings"
-              onClick={() => handleItemSettings(page, 'page')}
-            />
-          </li>
-        ))}
+      <List showDarkMode={showDarkMode}>
+        {pages.map(page => {
+          const isActive = pageId === page._id;
+
+          const onClick = () => {
+            onLoad(true);
+            handleItemSettings({}, '');
+          };
+
+          return (
+            <li key={page._id}>
+              <Link
+                className={isActive ? 'active' : ''}
+                to={`/xbuilder/sites/edit/${siteId}?pageId=${page._id}`}
+                onClick={onClick}
+              >
+                <Icon icon="file-1" />
+                {page.name}
+              </Link>
+              {isActive && (
+                <Icon
+                  icon="settings"
+                  onClick={() => handleItemSettings(page, 'page')}
+                />
+              )}
+            </li>
+          );
+        })}
         <li
+          className="link"
           onClick={() =>
             handleItemSettings({ name: '', description: '' }, 'page')
           }
         >
-          <div className="link">
+          <div>
             <Icon icon="plus-1" /> &nbsp;
             {__('Create page')}
           </div>

diff --git a/packages/plugin-webbuilder-ui/src/components/pages/PageForm.tsx b/packages/plugin-webbuilder-ui/src/components/pages/PageForm.tsx
@@ -1,5 +1,3 @@
-import 'grapesjs/dist/css/grapes.min.css';
-
 import Button from '@erxes/ui/src/components/Button';
 import ControlLabel from '@erxes/ui/src/components/form/Label';
 import { FlexPad } from '@erxes/ui/src/components/step/styles';
@@ -65,7 +63,6 @@ class PageForm extends React.Component<Props, State> {
       <Button
         btnStyle="simple"
         icon="times-circle"
-        size="small"
         onClick={() => onCancel(null, '')}
       >
         Cancel
@@ -76,7 +73,6 @@ class PageForm extends React.Component<Props, State> {
       <Button
         btnStyle="danger"
         icon="trash-alt"
-        size="small"
         onClick={() => remove(page._id, onCancel(null, ''))}
       >
         Delete
@@ -88,12 +84,7 @@ class PageForm extends React.Component<Props, State> {
         {page.name && deleteButton}
         {cancelButton}
 
-        <Button
-          btnStyle="success"
-          icon={'check-circle'}
-          onClick={this.save}
-          size="small"
-        >
+        <Button btnStyle="success" icon={'check-circle'} onClick={this.save}>
           Save
         </Button>
       </Button.Group>
@@ -106,8 +97,7 @@ class PageForm extends React.Component<Props, State> {
     return (
       <PageFormContainer className="gjs-one-bg gjs-two-color">
         <SubTitle flexBetween={true}>
-          {__('Page Settings')}
-          {this.renderButtons()}
+          {__('Page Settings')} {this.renderButtons()}
         </SubTitle>
         <FlexPad direction="column" overflow="auto">
           <FormGroup>

diff --git a/packages/plugin-webbuilder-ui/src/components/pages/styles.tsx b/packages/plugin-webbuilder-ui/src/components/pages/styles.tsx
@@ -1,8 +1,10 @@
 import { colors, dimensions } from '@erxes/ui/src/styles';
 
+import { FlexItem } from '@erxes/ui/src/components/step/styles';
 import styled from 'styled-components';
+import styledTS from 'styled-components-ts';
 
-export const List = styled.ul`
+export const List = styledTS<{ showDarkMode: boolean }>(styled.ul)`
   margin: 0;
   padding: 0;
   list-style: none;
@@ -11,11 +13,13 @@ export const List = styled.ul`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px 0;
     font-size: 12px;
     text-transform: capitalize;
     line-height: 15px;
     transition: all ease 0.3s;
+    cursor: pointer;
+    border-bottom: 1px solid ${props =>
+      props.showDarkMode ? '#666' : colors.borderPrimary};
 
     > i {
       visibility: hidden;
@@ -25,7 +29,12 @@ export const List = styled.ul`
     > a {
       display: flex;
       color: inherit;
-      cursor: pointer;
+      padding: 8px 0;
+      flex: 1;
+
+      > div {
+        flex: 1;
+      }
 
       &.active {
         color: ${colors.colorSecondary};
@@ -36,14 +45,25 @@ export const List = styled.ul`
       }
     }
 
-    .link,
-    .link > i:before {
+    &.link,
+    &.link > i:before {
       font-weight: 600;
       cursor: pointer;
+      padding: 8px 0;
+    }
+
+    &:last-child {
+      border: 0;
     }
 
     &: hover {
-      color: ${colors.colorSecondary};
+      color: ${colors.textPrimary};
+      background: ${colors.bgActive};
+
+      &.link {
+        background: none;
+        color: ${props => props.showDarkMode && colors.colorShadowGray};
+      }
 
       > i {
         visibility: visible;
@@ -63,4 +83,5 @@ export const PageHeader = styled.div`
 export const PageFormContainer = styled.div`
   width: 500px;
   height: 100%;
+  position: relative;
 `;