Merge pull request #472 from sirraminyavari/dev-redesign

feat: ✨ update `Template Settings` view navigation and bread…
sirraminyavari · May 6, 2023 · 06840b1 · 06840b1
2 parents 5d9430a + 934115c
commit 06840b1
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 20 deletions.
diff --git a/src/views/Templates/TemplateSinglePage/TemplateSinglePage.js b/src/views/Templates/TemplateSinglePage/TemplateSinglePage.js
@@ -17,6 +17,7 @@ import { TemplateProvider } from './TemplateProvider';
 import { useDispatch } from 'react-redux';
 import { TEMPLATE_CONTENT } from '../../../constant/constants';
 import { useThemeSlice } from 'store/slice/theme';
+import TemplateSinglePageTopMenu from './TemplateSinglePageTopMenu';
 
 const TemplateSinglePage = () => {
   const dispatch = useDispatch();
@@ -73,11 +74,12 @@ const TemplateSinglePage = () => {
   }, []);
 
   return (
-    <Container>
+    <>
       {loading ? (
         <LogoLoader />
       ) : (
         <TemplateProvider extensions={extensions} service={service}>
+          <TemplateSinglePageTopMenu templatePath={path} />
           <Switch>
             <Route
               exact
@@ -96,7 +98,7 @@ const TemplateSinglePage = () => {
           </Switch>
         </TemplateProvider>
       )}
-    </Container>
+    </>
   );
 };
 const Container = styled.div`

diff --git a/src/views/Templates/TemplateSinglePage/TemplateSinglePageTopMenu.jsx b/src/views/Templates/TemplateSinglePage/TemplateSinglePageTopMenu.jsx
@@ -0,0 +1,88 @@
+import { RVVariantProp, Typography } from '@cliqmind/rv-components';
+import Button from 'components/Buttons/Button';
+import { decodeBase64 } from 'helpers/helpers';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import { useTemplateContext } from './TemplateProvider';
+
+const TemplateSinglePageTopMenu = ({ templatePath }) => {
+  const history = useHistory();
+  const { Title, NodeTypeID } = useTemplateContext();
+  const gotoPath = (path) => () => history.push(path);
+  return (
+    <Container>
+      <Typography type="H3">{decodeBase64(Title)}</Typography>
+      <NavContainer>
+        <NavButton
+          active={history.location.pathname.endsWith('/basic')}
+          onClick={gotoPath(`${templatePath.replace(':id', NodeTypeID)}/basic`)}
+        >
+          General
+        </NavButton>
+        <NavButton
+          active={history.location.pathname.endsWith('/forms')}
+          onClick={gotoPath(`${templatePath.replace(':id', NodeTypeID)}/forms`)}
+        >
+          Form builder
+        </NavButton>
+        <NavButton
+          active={history.location.pathname.endsWith('/advanced')}
+          onClick={gotoPath(
+            `${templatePath.replace(':id', NodeTypeID)}/advanced`
+          )}
+        >
+          Advanced
+        </NavButton>
+        <NavButton
+          active={history.location.pathname.endsWith('/items')}
+          onClick={gotoPath(`${templatePath.replace(':id', NodeTypeID)}/items`)}
+        >
+          Items
+        </NavButton>
+      </NavContainer>
+      <Button
+        variant={RVVariantProp.white}
+        onClick={gotoPath(`${templatePath.replace(':id', '')}`)}
+      >
+        Back to templates
+      </Button>
+    </Container>
+  );
+};
+TemplateSinglePageTopMenu.displayName = 'TemplateSinglePageTopMenu';
+export default TemplateSinglePageTopMenu;
+
+const Container = styled.div`
+  padding-inline: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+`;
+const NavContainer = styled.div`
+  padding-inline: 2rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+const NavButton = styled(Button).attrs({ variant: RVVariantProp.white })`
+  box-shadow: none !important;
+  background-color: transparent !important;
+  position: relative;
+  color: ${({ active }) => (active ? 'hsl(var(--base))' : '')};
+  ::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 0.25rem;
+    background: ${({ active }) =>
+      active ? 'hsl(var(--base))' : 'transparent'};
+    border-start-start-radius: 1rem;
+    border-start-end-radius: 1rem;
+  }
+`;
diff --git a/.../Templates/TemplateSinglePage/items/TemplateAdvancedSettings/CMTemplateAdvancedSetting.js b/.../Templates/TemplateSinglePage/items/TemplateAdvancedSettings/CMTemplateAdvancedSetting.js
@@ -36,7 +36,7 @@ const CMTemplateAdvancedSetting = () => {
     {
       id: 3,
       title: `قالب ${decodeBase64(Title)}`,
-      linkTo: TEMPLATES_SETTING_SINGLE_PATH.replace(':id', NodeTypeID),
+      linkTo: TEMPLATES_SETTING_SINGLE_PATH.replace(':id', ''),
     },
     {
       id: 4,
@@ -46,11 +46,6 @@ const CMTemplateAdvancedSetting = () => {
 
   return (
     <Styles.Container>
-      <Styles.HeaderContainer>
-        <Breadcrumb items={breadItems} />
-        <ReturnButton onClick={returnToTemplates} />
-      </Styles.HeaderContainer>
-
       <Styles.CMContentContainer>
         <Styles.InputContainer>
           <Styles.InputLabel>{'شناسه تمپلیت'}</Styles.InputLabel>

diff --git a/...ews/Templates/TemplateSinglePage/items/TemplateFormSettings/TemplateFormSettingsStyles.js b/...ews/Templates/TemplateSinglePage/items/TemplateFormSettings/TemplateFormSettingsStyles.js
@@ -21,6 +21,7 @@ export const Container = styled.div`
 
 export const ActionHeader = styled.div`
   ${FLEX_RCB};
+  margin-block-start: 2rem;
   width: 110%;
   height: 6rem;
   background-color: ${CV_WHITE};

diff --git a/...iews/Templates/TemplateSinglePage/items/TemplateGeneralSetting/TemplateGeneralSettings.js b/...iews/Templates/TemplateSinglePage/items/TemplateGeneralSetting/TemplateGeneralSettings.js
@@ -51,11 +51,6 @@ const TemplateGeneralSettings = () => {
   return (
     <Styled.Container>
       <Styled.MainForm>
-        <Styled.HeaderContainer>
-          <Breadcrumb items={breadItems} />
-
-          <ReturnButton onClick={returnToTemplates} />
-        </Styled.HeaderContainer>
         <MainFormContainer>
           <div>
             <TemplateUploadIcon />

diff --git a/...emplates/TemplateSinglePage/items/TemplateGeneralSetting/TemplateGeneralSettingsStyles.js b/...emplates/TemplateSinglePage/items/TemplateGeneralSetting/TemplateGeneralSettingsStyles.js
@@ -17,8 +17,8 @@ export const Container = styled.div`
 export const MainForm = styled.div`
   position: relative;
   border-radius: 0.625rem;
-  box-shadow: 1px 5px 15px #0000001f;
-  background-color: ${CV_GRAY_LIGHT};
+  // box-shadow: 1px 5px 15px #0000001f;
+  // background-color: ${CV_GRAY_LIGHT};
   flex: 4.5;
   min-height: calc(100vh - 8rem);
   padding: 1.25rem 1.5rem 1.5rem 1.5rem;

diff --git a/src/views/Templates/TemplateSinglePage/items/TemplateItemsSettings/TemplateItems.js b/src/views/Templates/TemplateSinglePage/items/TemplateItemsSettings/TemplateItems.js
@@ -99,11 +99,6 @@ const TemplateItems = () => {
   return (
     <>
       <Styles.TemplateItemContainer>
-        <Styles.HeaderContainer>
-          <Breadcrumb items={breadItems} />
-
-          <ReturnButton onClick={returnToTemplates} />
-        </Styles.HeaderContainer>
         <Styles.TemplateItemRowSection>
           <Styles.TitleIcon src={icon} />