From 8d3ce72565983218f31e88804d9a20e51c379e3d Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 3 Feb 2020 18:25:31 +0200
Subject: [PATCH] replace fontAwsome library plus some styles
---
wax-prosemirror-components/package.json | 2 +-
.../src/components/ImageUpload.js | 1 +
.../src/components/TableDropDown.js | 6 +++
.../src/components/ToolGroupComponent.js | 26 +++++++++++--
wax-prosemirror-components/src/icons/icons.js | 10 +++--
.../src/layouts/EditorElements.js | 37 +------------------
.../src/layouts/EditoriaLayout.js | 5 +++
.../AnnotationToolGroupService/Annotations.js | 10 ++---
8 files changed, 48 insertions(+), 49 deletions(-)
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index 294d5bbb2..44486eca2 100644
--- a/wax-prosemirror-components/package.json
+++ b/wax-prosemirror-components/package.json
@@ -10,8 +10,8 @@
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.2",
- "@fortawesome/fontawesome-free-solid": "^5.0.4",
"@fortawesome/react-fontawesome": "^0.0.17",
+ "@fortawesome/free-solid-svg-icons": "^5.12.0",
"lodash": "^4.17.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 8c3995cb9..a82798f32 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/wax-prosemirror-components/src/components/ImageUpload.js
@@ -4,6 +4,7 @@ import styled from "styled-components";
const UploadImage = styled.div`
color: #777;
display: inline-flex;
+ padding: 0px 10px;
.custom-file-upload {
cursor: pointer;
}
diff --git a/wax-prosemirror-components/src/components/TableDropDown.js b/wax-prosemirror-components/src/components/TableDropDown.js
index 4115ece99..950c1a53e 100644
--- a/wax-prosemirror-components/src/components/TableDropDown.js
+++ b/wax-prosemirror-components/src/components/TableDropDown.js
@@ -18,6 +18,12 @@ const DropdownStyled = styled(Dropdown)`
}
.Dropdown-menu {
width: 120%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .Dropdown-option {
+ width: 100%;
+ }
}
`;
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index d1a90b093..26c069f4b 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,6 +1,20 @@
import React, { useState } 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;
+ }
+`;
+
+const MoreButton = styled.button`
+ background: none;
+ border: none;
+ cursor: pointer;
+`;
const InnerStyled = styled.div`
display: flex;
@@ -23,19 +37,23 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
});
return (
- <div>
+ <ToolGroupStyled data-name={name}>
<DisplayTitle />
{toolsShown}
{rest.length && !more ? (
- <button onClick={() => showHide(!more)}>...</button>
+ <MoreButton title="show more tools" onClick={() => showHide(!more)}>
+ {icons.ellipses}
+ </MoreButton>
) : null}
{more && (
<div>
- <button onClick={() => showHide(!more)}>...</button>
+ <MoreButton title="hide" onClick={() => showHide(!more)}>
+ {icons.ellipses}
+ </MoreButton>
<InnerStyled>{rest}</InnerStyled>
</div>
)}
- </div>
+ </ToolGroupStyled>
);
};
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 847dfe8cf..b2671d2fa 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -20,10 +20,11 @@ import {
faRedo,
faOutdent,
faAngleUp,
- faAsterisk,
+ faStickyNote,
faVial,
- faWheelchair
-} from "@fortawesome/fontawesome-free-solid";
+ faWheelchair,
+ faEllipsisH
+} from "@fortawesome/free-solid-svg-icons";
export default {
em: <FontAwesomeIcon icon={faItalic} />,
@@ -44,12 +45,13 @@ export default {
bullet_list: <FontAwesomeIcon icon={faListUl} />,
image: <FontAwesomeIcon icon={faImage} />,
table: <FontAwesomeIcon icon={faTable} />,
- footnote: <FontAwesomeIcon icon={faAsterisk} />,
+ footnote: <FontAwesomeIcon icon={faStickyNote} />,
undo: <FontAwesomeIcon icon={faUndo} />,
redo: <FontAwesomeIcon icon={faRedo} />,
lift: <FontAwesomeIcon icon={faOutdent} />,
join_up: <FontAwesomeIcon icon={faAngleUp} />,
source: <FontAwesomeIcon icon={faVial} />,
+ ellipses: <FontAwesomeIcon icon={faEllipsisH} />,
small_caps: (
<span className="small-caps">
<svg
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index 295527906..303aa6dce 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -16,43 +16,10 @@ export default css`
counter-increment: footnote;
}
- .ProseMirror-hideselection .footnote-tooltip *::selection {
- background-color: transparent;
- }
-
- .ProseMirror-hideselection .footnote-tooltip *::-moz-selection {
- background-color: transparent;
- }
-
- .ProseMirror .footnote-tooltip {
- cursor: auto;
- position: absolute;
- left: -30px;
- top: calc(100% + 10px);
- background: silver;
- padding: 3px;
- border-radius: 2px;
- width: 500px;
- }
-
- .ProseMirror .footnote-tooltip::before {
- border: 5px solid silver;
- border-top-width: 0;
- border-left-color: transparent;
- border-right-color: transparent;
- position: absolute;
- top: -5px;
- left: 27px;
- content: " ";
- height: 0;
- width: 0;
- }
-
.ProseMirror {
- -moz-box-shadow: 0 0 3px #ccc;
+ ${"" /* -moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
- box-shadow: 0 0 3px #ccc;
- width: 65%;
+ box-shadow: 0 0 3px #ccc;*/} width: 65%;
min-height: 90%;
padding: 40px;
font-family: ${props => props.theme.fontReading};
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 771dcf12d..5baa27732 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -40,6 +40,7 @@ const MainMenuContainer = styled.div`
line-height: 32px;
position: relative;
user-select: none;
+ border-bottom: 2px solid #ecedf1;
`;
const MainMenuInner = styled.div`
display: flex;
@@ -63,6 +64,7 @@ const SideMenuContainer = styled.div`
display: flex;
width: 14%;
height: 98%;
+ border-right: 2px solid #ecedf1;
`;
const SideMenuInner = styled.div`
@@ -81,6 +83,9 @@ const SideMenuInner = styled.div`
margin-left: 5%;
width: 90%;
}
+ [data-name="Display"] {
+ border-right: none;
+ }
}
`;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js b/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
index baebfef16..e1577ad21 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js
@@ -8,17 +8,17 @@ class Annotations extends ToolGroup {
@inject("Code") code,
@inject("Emphasis") emphasis,
@inject("Link") link,
- @inject("SmallCaps") smallcaps,
@inject("StrikeThrough") strikethrough,
@inject("Strong") strong,
@inject("Subscript") subscript,
@inject("Superscript") superscript,
- @inject("Underline") underline
+ @inject("Underline") underline,
+ @inject("SmallCaps") smallcaps
) {
super();
- smallcaps.hideOnToolbar = true;
subscript.hideOnToolbar = true;
superscript.hideOnToolbar = true;
+ smallcaps.hideOnToolbar = true;
this.tools = [
strong,
emphasis,
@@ -26,9 +26,9 @@ class Annotations extends ToolGroup {
link,
strikethrough,
underline,
- smallcaps,
subscript,
- superscript
+ superscript,
+ smallcaps
];
}
}
--
GitLab