From 40f38970d03476a08fc6699270bf49b10cf047a7 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 12 Nov 2019 19:27:40 +0200
Subject: [PATCH] move funcionality to styled components
---
editors/editoria/src/Editoria.js | 38 +++++++++----------
.../src/components/button/Button.js | 23 ++++++++---
.../src/components/button/Button.module.css | 23 -----------
.../src/mainMenuBar/MainMenuBar.js | 3 +-
.../src/mainMenuBar/MenuBar.css | 0
.../src/sideMenuBar/SideMenu.css | 0
.../src/coko-theme/index.js | 2 +
7 files changed, 39 insertions(+), 50 deletions(-)
delete mode 100644 wax-prosemirror-components/src/components/button/Button.module.css
delete mode 100644 wax-prosemirror-components/src/mainMenuBar/MenuBar.css
delete mode 100644 wax-prosemirror-components/src/sideMenuBar/SideMenu.css
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 04eed035a..0ab88f6d6 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -55,21 +55,21 @@ const text = `<ul><li><p class="paragraph">this is the li content</p></li><li><p
class Editoria extends Component {
render() {
return (
- <ThemeProvider theme={cokoTheme}>
- <React.Fragment>
- <GlobalStyle />
- <StyledWax
- options={options}
- autoFocus
- placeholder="Type Something..."
- theme="editoria"
- layout="editoria"
- fileUpload={file => renderImage(file)}
- debug
- value=""
- user={user}
- >
- {({ editor, view, ...props }) => (
+ <React.Fragment>
+ <GlobalStyle />
+ <StyledWax
+ options={options}
+ autoFocus
+ placeholder="Type Something..."
+ theme="editoria"
+ layout="editoria"
+ fileUpload={file => renderImage(file)}
+ debug
+ value=""
+ user={user}
+ >
+ {({ editor, view, ...props }) => (
+ <ThemeProvider theme={cokoTheme}>
<React.Fragment>
<MainMenuBar view={view} {...props} />
<div className="wax-surface-container">
@@ -77,10 +77,10 @@ class Editoria extends Component {
{editor}
</div>
</React.Fragment>
- )}
- </StyledWax>
- </React.Fragment>
- </ThemeProvider>
+ </ThemeProvider>
+ )}
+ </StyledWax>
+ </React.Fragment>
);
}
}
diff --git a/wax-prosemirror-components/src/components/button/Button.js b/wax-prosemirror-components/src/components/button/Button.js
index 3fc8366c6..322d1154c 100644
--- a/wax-prosemirror-components/src/components/button/Button.js
+++ b/wax-prosemirror-components/src/components/button/Button.js
@@ -1,20 +1,31 @@
import React from "react";
import styled from "styled-components";
-import classnames from "classnames";
-import classes from "./Button.module.css";
const ButtonStyled = styled.button`
opacity: ${props => (props.select ? 1 : 0.4)};
pointer-events: ${props => (props.select ? "default" : "none")};
+ background: #fff;
+ border: none;
+ font-size: inherit;
+ cursor: pointer;
+ color: ${props =>
+ props.isActive ? props.theme.colorPrimary : props.theme.colorButton};
+ border-radius: 0;
+ padding: 5px 10px;
+ &:disabled {
+ color: #ccc;
+ pointer-events: none;
+ }
+ &:hover {
+ color: #000;
+ background: #f6f6f6;
+ }
`;
const Button = ({ view = {}, item }) => (
<ButtonStyled
type="button"
- className={classnames({
- [classes.button]: true,
- [classes.active]: item.active && item.active(view.state)
- })}
+ isActive={item.active && item.active(view.state)}
title={item.title}
disabled={item.enable && !item.enable(view.state)}
onMouseDown={e => {
diff --git a/wax-prosemirror-components/src/components/button/Button.module.css b/wax-prosemirror-components/src/components/button/Button.module.css
deleted file mode 100644
index 96e3f3744..000000000
--- a/wax-prosemirror-components/src/components/button/Button.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.button {
- background: #fff;
- border: none;
- font-size: inherit;
- cursor: pointer;
- color: #777;
- border-radius: 0;
- padding: 5px 10px;
-}
-
-.button:hover {
- color: #000;
- background: #f6f6f6;
-}
-
-.button.active {
- color: #4990e2;
-}
-
-.button:disabled {
- color: #ccc;
- pointer-events: none;
-}
diff --git a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js b/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
index 814180cd8..030726a4b 100644
--- a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
+++ b/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
@@ -1,6 +1,5 @@
import React from "react";
import { forEach, map } from "lodash";
-import classes from "./MenuBar.css";
import MainMenuBarItems from "./MainMenuBarItems";
const filtered = (menu, menuItems) =>
@@ -32,7 +31,7 @@ const MainMenuBar = ({
<div className="main-menu-inner">
<div className="main-menu">
{
- <span className={classes.group}>
+ <span>
{map(setMenuItems(MainMenuBarItems, menuItems), item =>
item.menu({ view, item, fileUpload })
)}
diff --git a/wax-prosemirror-components/src/mainMenuBar/MenuBar.css b/wax-prosemirror-components/src/mainMenuBar/MenuBar.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/wax-prosemirror-components/src/sideMenuBar/SideMenu.css b/wax-prosemirror-components/src/sideMenuBar/SideMenu.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
index 724eeaaef..c430fb03e 100644
--- a/wax-prosemirror-themes/src/coko-theme/index.js
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -17,6 +17,8 @@ const cokoTheme = {
colorTextPlaceholder: "#595959",
colorWarning: "#ffc107",
+ /*Buttons*/
+ colorButton: "#777",
/* Text variables */
// fonts
--
GitLab