From f07b3ecb455776bbe14116f89e4b8d7174f03912 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 13 Nov 2019 10:33:10 +0200
Subject: [PATCH] side and top menu
---
.../src/mainMenuBar/MainMenuBar.js | 40 ++++++++++++++++---
.../src/sideMenuBar/SideMenuBar.js | 39 +++++++++++++++---
.../src/layouts/EditoriaLayout.js | 10 ++++-
3 files changed, 75 insertions(+), 14 deletions(-)
diff --git a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js b/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
index 6bc776470..cb6a88d02 100644
--- a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
+++ b/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
@@ -1,7 +1,35 @@
import React from "react";
+import styled from "styled-components";
+
import { forEach, map } from "lodash";
import MainMenuBarItems from "./MainMenuBarItems";
+const MainMenuContainer = styled.div`
+ background: #fff;
+ height: 52px;
+ line-height: 32px;
+ position: relative;
+ user-select: none;
+`;
+const MainMenuInner = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background: transparent;
+ z-index: 9999;
+`;
+const MainMenu = styled.div`
+ background: #fff;
+ padding: 2px 2px 2px 0;
+ position: relative;
+ background: transparent;
+`;
+
const filtered = (menu, menuItems) =>
Object.keys(menu)
.filter(key => menuItems.includes(key))
@@ -27,9 +55,9 @@ const MainMenuBar = ({
className,
fileUpload
}) => (
- <div>
- <div>
- <div>
+ <MainMenuContainer>
+ <MainMenuInner>
+ <MainMenu>
{
<span>
{map(setMenuItems(MainMenuBarItems, menuItems), item =>
@@ -37,9 +65,9 @@ const MainMenuBar = ({
)}
</span>
}
- </div>
- </div>
- </div>
+ </MainMenu>
+ </MainMenuInner>
+ </MainMenuContainer>
);
export default MainMenuBar;
diff --git a/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js b/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js
index 7e2acf749..225c310b0 100644
--- a/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js
+++ b/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js
@@ -1,7 +1,34 @@
import React from "react";
+import styled from "styled-components";
import { forEach, map } from "lodash";
import SideMenuItems from "./SideMenuItems";
+const SideMenuContainer = styled.div`
+ display: flex;
+ width: 12%;
+ height: 98%;
+`;
+
+const SideMenuInner = styled.div`
+ display: flex;
+ width: 100%;
+`;
+
+const SideMenu = styled.div`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ margin-top: 15px;
+ button {
+ display: flex;
+ margin-left: 5%;
+ flex-direction: column;
+ width: 90%;
+ background: transparent;
+ }
+`;
+
const filtered = (menu, menuItems) =>
Object.keys(menu)
.filter(key => menuItems.includes(key))
@@ -27,9 +54,9 @@ const SideMenuBar = ({
className,
fileUpload
}) => (
- <div>
- <div>
- <div>
+ <SideMenuContainer>
+ <SideMenuInner>
+ <SideMenu>
{
<span>
{map(setMenuItems(SideMenuItems, menuItems), item =>
@@ -37,9 +64,9 @@ const SideMenuBar = ({
)}
</span>
}
- </div>
- </div>
- </div>
+ </SideMenu>
+ </SideMenuInner>
+ </SideMenuContainer>
);
export default SideMenuBar;
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 1391398c8..4efef0f26 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -2,6 +2,12 @@ import styled from "styled-components";
import React, { Fragment } from "react";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+const LayoutWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`;
+
const WaxSurfaceContainer = styled.div`
flex: 1;
position: relative;
@@ -9,13 +15,13 @@ const WaxSurfaceContainer = styled.div`
`;
const EditoriaLayout = ({ editor, view, ...props }) => (
- <Fragment>
+ <LayoutWrapper>
<MainMenuBar view={view} {...props} />
<WaxSurfaceContainer>
<SideMenuBar view={view} {...props} />
{editor}
</WaxSurfaceContainer>
- </Fragment>
+ </LayoutWrapper>
);
export default EditoriaLayout;
--
GitLab