Skip to content

Commit 3b8de03

Browse files
AuraOfDivinityAuraOfDivinity
authored
Fixing modal issues (#531)
1 parent c526369 commit 3b8de03

File tree

2 files changed

+196
-114
lines changed

2 files changed

+196
-114
lines changed

‎src/css/components/_modals.scss‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
border-radius: 20px;
33
.modal-content {
44
border-radius: 10px;
5-
5+
max-height: 70vh;
66
// width: 66%;
77
border: 0px;
88
// overflow-y: scroll;
99
overflow-x: hidden;
10-
background: #FFFFFF;
10+
background: #ffffff;
1111
/* border: 1px solid #CCCCCC; */
1212
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
1313
}
14-
14+
1515
.modal__header {
1616
.modal__title {
1717
.modal__main-title {
@@ -39,7 +39,7 @@
3939
height: 5vh;
4040
background: rgb(250, 251, 252);
4141
border-radius: 100px;
42-
color: #1A73E8;
42+
color: #1a73e8;
4343
padding: 0.3em;
4444
margin-left: 1em;
4545
}
@@ -52,12 +52,12 @@
5252
text-decoration: underline;
5353
}
5454
.delete__post__option {
55-
float: right;
56-
margin-left: 1vw;
57-
font-size: 15px;
58-
cursor: pointer;
59-
border: 0px;
60-
text-decoration: underline;
55+
float: right;
56+
margin-left: 1vw;
57+
font-size: 15px;
58+
cursor: pointer;
59+
border: 0px;
60+
text-decoration: underline;
6161
}
6262
}
6363
.modal__search {
@@ -80,6 +80,50 @@
8080
}
8181
.modal__body {
8282
overflow-y: scroll;
83+
.tabs__container {
84+
width: 100%;
85+
margin-left: 0px;
86+
margin-top: -20px;
87+
.nav__tab {
88+
.nav__list__container {
89+
display: flex;
90+
justify-content: flex-start;
91+
align-items: center;
92+
list-style: none;
93+
border-bottom: 2px solid #eee;
94+
transition: all 0.5s;
95+
font-weight: 300;
96+
color: #262727;
97+
98+
.nav__single__tab {
99+
display: inline-block;
100+
font-family: Inter;
101+
font-style: normal;
102+
font-weight: 500;
103+
font-size: 18px;
104+
line-height: 22px;
105+
padding-left: 11px;
106+
padding-right: 15px;
107+
padding-bottom: 5px;
108+
margin-left: 19px;
109+
text-align: center;
110+
cursor: pointer;
111+
112+
&.selected {
113+
border-bottom: 3px solid #337ab7;
114+
color: #1a73e8;
115+
.tab__icon {
116+
margin-right: 5px;
117+
}
118+
}
119+
.tab__icon {
120+
margin-right: 5px;
121+
font-size: 15px;
122+
}
123+
}
124+
}
125+
}
126+
}
83127
.modal__mini-title {
84128
font-family: $font-family-Inter;
85129
font-style: normal;

‎src/user/dashboard/news-feed/popups/AddPostModal.js‎

Lines changed: 142 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { connect } from "react-redux";
55
import { createPost } from "../../../../actions/dashboardAction";
66
import { Editor } from "@tinymce/tinymce-react";
77
import showdown from "showdown";
8+
import { FaPen, FaEye } from "react-icons/fa";
89

910
const AddPostModal = (props) => {
1011
const [content, setContent] = useState("");
12+
const [type, changeType] = useState("Write");
1113

1214
let converter = new showdown.Converter();
1315

@@ -29,6 +31,11 @@ const AddPostModal = (props) => {
2931
props.onHide();
3032
};
3133

34+
let handleClick = (atrb) => () => {
35+
console.log("attr ", atrb);
36+
changeType(atrb);
37+
};
38+
3239
return (
3340
<Modal
3441
show={props.show}
@@ -44,112 +51,143 @@ const AddPostModal = (props) => {
4451
<div className="modal__mini-title">POST DETAILS</div>
4552
</Modal.Title>
4653
</Modal.Header>
47-
<Tabs defaultActiveKey="write" style={{ marginTop: "10px" }}>
48-
<Tab eventKey="write" title="Write">
49-
<Modal.Body className="modal__body" style={props.borderStyle}>
50-
<Form className="modal__form" style={props.borderStyle}>
51-
<Form.Row className="modal__row">
52-
<Form.Group
53-
as={Col}
54-
controlId="formGridEmail"
55-
className="modal__group"
56-
>
57-
<Editor
58-
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
59-
initialValue="Write a post..."
60-
init={{
61-
height: 300,
62-
width: "100%",
63-
menubar: false,
64-
plugins: [
65-
"advlist autolink lists link image charmap print preview anchor",
66-
"searchreplace visualblocks code fullscreen",
67-
"insertdatetime media table paste code help wordcount",
68-
"textpattern",
69-
],
70-
textpattern_patterns: [
71-
{ start: "#", format: "h1" },
72-
{ start: "##", format: "h2" },
73-
{ start: "###", format: "h3" },
74-
{ start: "####", format: "h4" },
75-
{ start: "#####", format: "h5" },
76-
{ start: "######", format: "h6" },
77-
{ start: "* ", cmd: "InsertUnorderedList" },
78-
{ start: "- ", cmd: "InsertUnorderedList" },
79-
{
80-
start: "1. ",
81-
cmd: "InsertOrderedList",
82-
value: { "list-style-type": "decimal" },
83-
},
84-
{
85-
start: "1) ",
86-
cmd: "InsertOrderedList",
87-
value: { "list-style-type": "decimal" },
88-
},
89-
{
90-
start: "a. ",
91-
cmd: "InsertOrderedList",
92-
value: { "list-style-type": "lower-alpha" },
93-
},
94-
{
95-
start: "a) ",
96-
cmd: "InsertOrderedList",
97-
value: { "list-style-type": "lower-alpha" },
98-
},
99-
{
100-
start: "i. ",
101-
cmd: "InsertOrderedList",
102-
value: { "list-style-type": "lower-roman" },
103-
},
104-
{
105-
start: "i) ",
106-
cmd: "InsertOrderedList",
107-
value: { "list-style-type": "lower-roman" },
108-
},
109-
],
110-
toolbar:
111-
"undo redo | formatselect | bold italic backcolor | \
54+
55+
<Modal.Body className="modal__body" style={props.borderStyle}>
56+
<div className="tabs__container">
57+
<span className="nav__tab container" style={{ width: "100%" }}>
58+
<ul className="nav__list__container">
59+
<li
60+
className={
61+
type === "Write"
62+
? "nav__single__tab selected"
63+
: "nav__single__tab"
64+
}
65+
onClick={handleClick("Write")}
66+
>
67+
<FaPen className="tab__icon" />
68+
Write
69+
</li>
70+
<li
71+
className={
72+
type === "Preview"
73+
? "nav__single__tab selected"
74+
: "nav__single__tab"
75+
}
76+
onClick={handleClick("Preview")}
77+
>
78+
<FaEye className="tab__icon" />
79+
Preview
80+
</li>
81+
</ul>
82+
</span>
83+
</div>
84+
{type === "Write" ? (
85+
<Form className="modal__form" style={{ marginTop: "-20px" }}>
86+
<Form.Row className="modal__row">
87+
<Form.Group
88+
as={Col}
89+
controlId="formGridEmail"
90+
className="modal__group"
91+
>
92+
<Editor
93+
value={content}
94+
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
95+
initialValue="Write a post..."
96+
init={{
97+
height: 250,
98+
width: "100%",
99+
menubar: false,
100+
plugins: [
101+
"advlist autolink lists link image charmap print preview anchor",
102+
"searchreplace visualblocks code fullscreen",
103+
"insertdatetime media table paste code help wordcount",
104+
"textpattern",
105+
],
106+
textpattern_patterns: [
107+
{ start: "#", format: "h1" },
108+
{ start: "##", format: "h2" },
109+
{ start: "###", format: "h3" },
110+
{ start: "####", format: "h4" },
111+
{ start: "#####", format: "h5" },
112+
{ start: "######", format: "h6" },
113+
{ start: "* ", cmd: "InsertUnorderedList" },
114+
{ start: "- ", cmd: "InsertUnorderedList" },
115+
{
116+
start: "1. ",
117+
cmd: "InsertOrderedList",
118+
value: { "list-style-type": "decimal" },
119+
},
120+
{
121+
start: "1) ",
122+
cmd: "InsertOrderedList",
123+
value: { "list-style-type": "decimal" },
124+
},
125+
{
126+
start: "a. ",
127+
cmd: "InsertOrderedList",
128+
value: { "list-style-type": "lower-alpha" },
129+
},
130+
{
131+
start: "a) ",
132+
cmd: "InsertOrderedList",
133+
value: { "list-style-type": "lower-alpha" },
134+
},
135+
{
136+
start: "i. ",
137+
cmd: "InsertOrderedList",
138+
value: { "list-style-type": "lower-roman" },
139+
},
140+
{
141+
start: "i) ",
142+
cmd: "InsertOrderedList",
143+
value: { "list-style-type": "lower-roman" },
144+
},
145+
],
146+
toolbar:
147+
"undo redo | formatselect | bold italic backcolor | \
112148
alignleft aligncenter alignright alignjustify | \
113149
bullist numlist outdent indent | removeformat | help",
114-
}}
115-
onEditorChange={handleEditorChange}
116-
/>
117-
</Form.Group>
118-
</Form.Row>
119-
</Form>
120-
</Modal.Body>
121-
</Tab>
122-
<Tab eventKey="preview" title="Preview">
123-
<Modal.Body className="modal__body" style={props.borderStyle}>
124-
<Form className="modal__form" style={props.borderStyle}>
125-
<Form.Row className="modal__row">
126-
<Form.Group
127-
as={Col}
128-
controlId="formGridEmail"
129-
className="modal__group"
130-
>
131-
<Editor
132-
disabled={true}
133-
value={converter.makeHtml(content)}
134-
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
135-
init={{
136-
height: 300,
137-
width: "100%",
138-
menubar: false,
139-
plugins: [
140-
"advlist autolink lists link image charmap print preview anchor",
141-
"searchreplace visualblocks code fullscreen",
142-
"insertdatetime media table paste code help wordcount",
143-
],
144-
toolbar: false,
145-
}}
146-
/>
147-
</Form.Group>
148-
</Form.Row>
149-
</Form>
150-
</Modal.Body>
151-
</Tab>
152-
</Tabs>
150+
}}
151+
onEditorChange={handleEditorChange}
152+
/>
153+
</Form.Group>
154+
</Form.Row>
155+
</Form>
156+
) : (
157+
<></>
158+
)}
159+
{type === "Preview" ? (
160+
<Form className="modal__form" style={{ marginTop: "-20px" }}>
161+
<Form.Row className="modal__row">
162+
<Form.Group
163+
as={Col}
164+
controlId="formGridEmail"
165+
className="modal__group"
166+
>
167+
<Editor
168+
disabled={true}
169+
value={converter.makeHtml(content)}
170+
apiKey="lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
171+
init={{
172+
height: 250,
173+
width: "100%",
174+
menubar: false,
175+
plugins: [
176+
"advlist autolink lists link image charmap print preview anchor",
177+
"searchreplace visualblocks code fullscreen",
178+
"insertdatetime media table paste code help wordcount",
179+
],
180+
toolbar: false,
181+
}}
182+
/>
183+
</Form.Group>
184+
</Form.Row>
185+
</Form>
186+
) : (
187+
<></>
188+
)}
189+
</Modal.Body>
190+
153191
<div className="modal__buttons">
154192
<Button
155193
onClick={createPostClick.bind(this, content)}

0 commit comments

Comments
 (0)