From 71649f37490d5b46124696ee2854c36d4b474981 Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Tue, 22 Sep 2020 20:30:27 +0300
Subject: [PATCH] fix top bar ui
---
.eslintrc.js | 11 +++-
.../src/components/Button.js | 24 +------
.../src/components/ToolGroupComponent.js | 66 ++++++++-----------
.../src/ui/buttons/Dropdown.js | 5 +-
.../src/ui/buttons/MenuButton.js | 11 ++--
.../src/layouts/EditoriaLayout.js | 37 +++--------
.../src/BaseService/RedoService/Redo.js | 4 +-
.../src/BaseService/UndoService/Undo.js | 4 +-
.../src/MenuService/MenuWrapper.js | 15 +----
9 files changed, 59 insertions(+), 118 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 6ed1d951b..816f4b09f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,7 +34,16 @@ eslint.rules = {
'react/prop-types': [
2,
- { ignore: ['children', 'className', 'onClick', 'onMouseEnter', 'theme'] },
+ {
+ ignore: [
+ 'children',
+ 'className',
+ 'onClick',
+ 'onMouseDown',
+ 'onMouseEnter',
+ 'theme',
+ ],
+ },
],
// 'import/no-named-as-default': 0,
};
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index d5c254ef3..b11a5787b 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -20,8 +20,6 @@ import MenuButton from '../ui/buttons/MenuButton';
const Button = ({ view = {}, item }) => {
const { active, enable, icon, onlyOnMain, run, title } = item;
- // let view = {};
-
const {
view: { main },
// activeViewId,
@@ -31,7 +29,7 @@ const Button = ({ view = {}, item }) => {
const { dispatch, state } = view;
- const handleClick = e => {
+ const handleMouseDown = e => {
e.preventDefault();
run(state, dispatch);
};
@@ -43,30 +41,12 @@ const Button = ({ view = {}, item }) => {
// item.select &&
// item.select(view.state, activeViewId);
- // console.log(item);
-
- // return (
- // <ButtonStyled
- // type="button"
- // isActive={item.active && item.active(view.state)}
- // title={item.title}
- // disabled={item.enable && !item.enable(view.state)}
- // onMouseDown={e => {
- // e.preventDefault();
- // item.run(view.state, view.dispatch);
- // }}
- // select={item.select && item.select(view.state, activeViewId)}
- // >
- // {item.content}
- // </ButtonStyled>
- // );
-
return (
<MenuButton
active={isActive}
disabled={isDisabled}
iconName={icon}
- onClick={e => handleClick(e)}
+ onMouseDown={handleMouseDown}
title={title}
/>
);
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index f6861aabf..8f8b32807 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,39 +1,30 @@
-import React, { useState } from 'react';
+import React from 'react';
import { isFunction } from 'lodash';
import styled from 'styled-components';
-import icons from '../icons/icons';
-const ToolGroupStyled = styled.div`
- border-right: 1px solid #ecedf1;
- &:last-child {
- border-right: none;
- }
-`;
+import Dropdown from '../ui/buttons/Dropdown';
+
+const Wrapper = styled.div`
+ background: #fff;
+ display: inline-flex;
+ align-items: center;
+ padding: 0 4px;
-const MoreButton = styled.button`
- background: none;
- border: none;
- cursor: pointer;
- &:active {
- outline: none;
+ > button,
+ > div {
+ margin: 0 2px;
}
`;
-const InnerStyled = styled.div`
- display: flex;
- width: 0;
- top: 40px;
- position: relative;
- right: 100%;
+const DropWrapper = styled(Wrapper)`
+ border: 1px solid gray;
+ padding: 4px;
`;
-const MoreIcon = icons.more;
-
const ToolGroupComponent = ({ view, tools, name, title }) => {
- const [more, showHide] = useState(false),
- toolsShown = [],
- rest = [],
- DisplayTitle = isFunction(title) ? title : () => title;
+ const toolsShown = [];
+ const rest = [];
+ const DisplayTitle = isFunction(title) ? title : () => title;
tools.forEach(tool => {
tool.isIntoMoreSection() && tool.isDisplayed()
@@ -42,23 +33,18 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
});
return (
- <ToolGroupStyled data-name={name}>
+ <Wrapper data-name={name}>
<DisplayTitle />
{toolsShown}
- {rest.length && !more ? (
- <MoreButton title="show more tools" onClick={() => showHide(!more)}>
- <MoreIcon />
- </MoreButton>
- ) : null}
- {more && (
- <div>
- <MoreButton title="hide" onClick={() => showHide(!more)}>
- <MoreIcon />
- </MoreButton>
- <InnerStyled>{rest}</InnerStyled>
- </div>
+
+ {rest.length > 0 && (
+ <Dropdown
+ iconName="more"
+ dropComponent={<DropWrapper>{rest}</DropWrapper>}
+ title="Show more tools"
+ />
)}
- </ToolGroupStyled>
+ </Wrapper>
);
};
diff --git a/wax-prosemirror-components/src/ui/buttons/Dropdown.js b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
index 6548f8e70..241820d81 100644
--- a/wax-prosemirror-components/src/ui/buttons/Dropdown.js
+++ b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
@@ -4,13 +4,16 @@ import styled from 'styled-components';
import MenuButton from './MenuButton';
+// font size 0 reason: https://stackoverflow.com/a/19212391
const Wrapper = styled.div`
+ font-size: 0;
position: relative;
`;
const DropWrapper = styled.div`
margin-top: 4px;
position: absolute;
+ z-index: 2;
`;
const Dropdown = props => {
@@ -26,7 +29,7 @@ const Dropdown = props => {
active={isOpen}
iconName={iconName}
label={label}
- onClick={() => setIsOpen(!isOpen)}
+ onMouseDown={() => setIsOpen(!isOpen)}
title={title}
/>
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
index ef7f5dad8..09feb60c9 100644
--- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -33,16 +33,13 @@ const Wrapper = styled.button.attrs(props => ({
title: props.title,
type: 'button',
}))`
- align-items: center;
background: none;
border: none;
border-radius: 2px;
cursor: pointer;
- display: flex;
- height: 24px;
+ height: 28px;
outline: none;
- padding: 0;
- /* padding: 4px 8px; */
+ padding: 2px;
transition: all 0.1s ease-in;
> svg {
@@ -75,7 +72,7 @@ const MenuButton = props => {
iconName,
label,
title,
- onClick,
+ onMouseDown,
} = props;
return (
@@ -83,7 +80,7 @@ const MenuButton = props => {
active={active}
className={className}
disabled={disabled}
- onMouseDown={e => onClick(e)}
+ onMouseDown={onMouseDown}
title={title}
>
{iconName && (
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 361b9ce6d..777535a46 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -14,6 +14,7 @@ const LayoutWrapper = styled.div`
height: 100%;
width: 100%;
overflow: hidden;
+
.divider {
&:before {
content: 'Notes';
@@ -112,12 +113,12 @@ const WaxSurfaceScroll = styled.div`
const MainMenuContainer = styled.div`
background: #fff;
- min-height: 52px;
- line-height: 32px;
- position: relative;
- width: 100%;
+ display: flex;
+ justify-content: center;
+ min-height: 40px;
user-select: none;
border-bottom: 2px solid #ecedf1;
+
@media (max-width: 600px) {
position: absolute;
/* width: 100%; */
@@ -125,26 +126,9 @@ const MainMenuContainer = styled.div`
min-height: 72px;
line-height: 0px;
}
-`;
-const MainMenuInner = styled.div`
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- height: 100%;
- background: #fff;
- z-index: 9999;
- div {
- align-items: center;
- justify-content: center;
- @media (max-width: 600px) {
- justify-content: start;
- }
+
+ > div:not(:last-child) {
+ border-right: 1px solid #ecedf1;
}
`;
@@ -265,9 +249,7 @@ const EditoriaLayout = ({ editor }) => {
<ThemeProvider theme={cokoTheme}>
<LayoutWrapper>
<MainMenuContainer>
- <MainMenuInner>
- <TopBar />
- </MainMenuInner>
+ <TopBar />
</MainMenuContainer>
<LeftMenuSurfaceContainer>
@@ -297,6 +279,7 @@ const EditoriaLayout = ({ editor }) => {
{AreasWithNotes}
</PanelGroup>
</LeftMenuSurfaceContainer>
+
<InfoArea />
<WaxOverlays />
</LayoutWrapper>
diff --git a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
index a0e60fdff..7d0a8b008 100644
--- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
+++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
@@ -1,13 +1,11 @@
import { redo } from 'prosemirror-history';
import { injectable } from 'inversify';
-// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Redo extends Tools {
- title = 'Redo last undone change';
- // content = icons.redo;
+ title = 'Redo';
icon = 'redo';
onlyOnMain = true;
name = 'Redo';
diff --git a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
index 04699b390..e593e832c 100644
--- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
+++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
@@ -1,13 +1,11 @@
import { undo } from 'prosemirror-history';
import { injectable } from 'inversify';
-// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Undo extends Tools {
- title = 'Undo last change';
- // content = icons.undo;
+ title = 'Undo';
icon = 'undo';
onlyOnMain = true;
name = 'Undo';
diff --git a/wax-prosemirror-services/src/MenuService/MenuWrapper.js b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
index e546894e6..60480e8d3 100644
--- a/wax-prosemirror-services/src/MenuService/MenuWrapper.js
+++ b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
@@ -1,22 +1,9 @@
import React from 'react';
-import styled from 'styled-components';
import { map } from 'lodash';
-const MainMenu = styled.div`
- display: flex;
- flex-wrap: wrap;
- background: #fff;
- padding: 2px 2px 2px 0;
- position: relative;
-`;
-
const MainMenuBar = ({ items = [], view }) => {
- return (
- <MainMenu key="MainMenu">
- {map(items, item => item.renderTools(view))}
- </MainMenu>
- );
+ return <>{map(items, item => item.renderTools(view))}</>;
};
export default MainMenuBar;
--
GitLab