From dd2310cf5f22320722791fe9764ea3c4e67899ea Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sun, 15 May 2022 15:44:01 +0300
Subject: [PATCH] active Styles
---
.../CreateDropDownService/CreateDropDown.js | 2 +-
.../components/DropDownComponent.js | 2 +-
.../components/MultipleDropDownComponent.js | 26 +++++++++++++++----
3 files changed, 23 insertions(+), 7 deletions(-)
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
index 87ca8ac23..e1e717b1d 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
@@ -15,7 +15,7 @@ class CreateDropDown extends Tools {
const content = Fragment.empty;
const { tr } = state;
const createGap = state.config.schema.nodes.multiple_drop_down_option.create(
- { id: uuidv4() },
+ { id: uuidv4(), options: [] },
content,
);
tr.replaceSelectionWith(createGap);
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
index 9dd75335e..e1442effb 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -98,7 +98,7 @@ export default ({ setPosition, position }) => {
const WaxSurface = activeView.dom.getBoundingClientRect();
const start = activeView.coordsAtPos(from);
const left = start.left - WaxSurface.left - 75;
- const top = start.top - WaxSurface.top + 25;
+ const top = start.top - WaxSurface.top + 30;
setPosition({ ...position, left, top });
}, [position.left]);
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
index 0ad1b17d0..a5a8da136 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -2,13 +2,29 @@
import React, { useContext, useEffect, useState } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { Icon } from 'wax-prosemirror-components';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+const activeStylesContainer = css`
+ background: #535e76;
+ border-radis: 8px;
+`;
+
+const activeStylesSvg = css`
+ fill: white !important;
+`;
+
+const StyledIconActionContainer = styled.div`
+ display: inline-block;
+ padding: 2px;
+ ${props => props.isActive && activeStylesContainer}
+`;
const StyledIconAction = styled(Icon)`
height: 24px;
width: 24px;
- outline: 1px solid black;
cursor: pointer;
+
+ ${props => props.isActive && activeStylesSvg}
`;
export default ({ node, view, getPos }) => {
@@ -30,14 +46,14 @@ export default ({ node, view, getPos }) => {
useEffect(() => {
setIsActive(false);
- if (getPos() + 2 === posFrom) {
+ if (getPos() === posFrom) {
setIsActive(true);
}
}, [posFrom]);
return (
- <>
+ <StyledIconActionContainer isActive={isActive}>
<StyledIconAction isActive={isActive} name="mulitpleDropDown" />
- </>
+ </StyledIconActionContainer>
);
};
--
GitLab