Skip to content

Commit f3082e7

Browse files
EvieePyEvieePy
committed
Added various additions including a language selector for saved pastes.
1 parent 15d99c2 commit f3082e7

File tree

9 files changed

+332
-190
lines changed

9 files changed

+332
-190
lines changed

‎mystbin/frontend/components/EditorTabs.tsx‎

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,59 @@
1-
import { useEffect, useState } from "react";
1+
import {useEffect, useRef, useState} from "react";
22
import MonacoEditor from "./MonacoEditor";
33
import styles from "../styles/EditorTabs.module.css";
4-
import { Toast } from "react-bootstrap";
4+
import {Dropdown, Toast} from "react-bootstrap";
55
import PasswordModal from "./PasswordModal";
66
import Tab from "./Tab";
77
import NewTabButton from "./NewTabButton";
88
import pasteDispatcher from "../dispatchers/PasteDispatcher";
99
import getLanguage from "../stores/languageStore";
1010
import config from "../config.json";
11+
import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
12+
import {Button} from "@material-ui/core";
13+
import DropdownItem from "react-bootstrap/DropdownItem";
14+
import React from "react";
15+
import InsertPhotoIcon from '@material-ui/icons/InsertPhoto';
16+
17+
const languages = {
18+
py: "python",
19+
python: "python",
20+
pyi: "python",
21+
js: "javascript",
22+
javascript: "javascript",
23+
jsx: "javascript",
24+
ts: "typescript",
25+
typescript: "typescript",
26+
tsx: "typescript",
27+
html: "html",
28+
swift: "swift",
29+
json: "json",
30+
rs: "rust",
31+
rust: "rust",
32+
ex: "elixir",
33+
elixir: "elixir",
34+
md: "markdown",
35+
markdown: "markdown",
36+
go: "go",
37+
cpp: "cpp",
38+
c: "cpp",
39+
h: "cpp",
40+
cs: "csharp",
41+
css: "css",
42+
hs: "haskell",
43+
perl: "perl",
44+
pl: "perl",
45+
pm: "perl",
46+
bash: "bash",
47+
zsh: "bash",
48+
sh: "bash",
49+
sql: "sql",
50+
nginx: "nginx",
51+
ini: "ini",
52+
toml: "toml",
53+
xml: "xml",
54+
yml: "yml",
55+
yaml: "yml",
56+
};
1157

1258
interface TabInfo {
1359
initialData?: any;
@@ -31,6 +77,10 @@ export default function EditorTabs({
3177
const [lang, setLang] = useState<string[]>([]);
3278
const id = pid;
3379
const [initialState, setInitialState] = useState(false);
80+
const [langDropDown, setLangDropDown] = useState(false);
81+
const [dropLang, setDropLang] = useState(null)
82+
83+
const tabRef = useRef();
3484

3585
pasteDispatcher.dispatch({ paste: value });
3686
const maxCharCount = config["paste"]["character_limit"];
@@ -59,6 +109,13 @@ export default function EditorTabs({
59109
}
60110
}, [value]);
61111

112+
useEffect(() => {
113+
let newLang = [...lang]
114+
newLang.splice(currTab, 1, dropLang)
115+
setLang(newLang)
116+
117+
}, [langDropDown]);
118+
62119
useEffect(() => {
63120
let initialLangs = [];
64121
value.map(function (v) {
@@ -129,8 +186,33 @@ export default function EditorTabs({
129186
let newValue = [...value];
130187
newValue.splice(i, 1);
131188
setValue(newValue);
132-
}}
133-
/>
189+
}} >
190+
{!!pid ?
191+
<div className={styles.dropdownContainer} ref={tabRef}>
192+
<Button type="submit" className={styles.langButton} onClick={() => setLangDropDown(!langDropDown)}>
193+
<ArrowDownwardIcon/>
194+
</Button>
195+
{langDropDown ?
196+
<div className={styles.langParent}>
197+
<Dropdown className={styles.dropDown} autoClose>
198+
{Object.keys(languages).map((v, index) => {
199+
if (i !== currTab) {
200+
return <></>
201+
}
202+
return(<DropdownItem
203+
key={v}
204+
className={styles.dropdownItem}
205+
onBlur={(e) => {e.preventDefault()}}
206+
onClick={() => {
207+
setLangDropDown(false)
208+
setDropLang(v)
209+
}}>{v}</DropdownItem>)})}
210+
</Dropdown>
211+
</div>
212+
: null}
213+
</div>
214+
: null }
215+
</Tab>
134216
))}
135217
<NewTabButton
136218
onClick={() => {
@@ -141,6 +223,14 @@ export default function EditorTabs({
141223
}}
142224
enabled={value.length <= 4 && !id}
143225
/>
226+
{!pid ?
227+
<div className={styles.addAttachmentIconContainer}>
228+
<Button>
229+
<InsertPhotoIcon className={styles.addAttachmentIcon} />
230+
</Button>
231+
<span className={styles.addAttachmentsText}>Add Images</span>
232+
</div>
233+
: null }
144234
</div>
145235

146236
{value.map((v, i, arr) => (

‎mystbin/frontend/components/OptsBar.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { OverlayTrigger, Popover, Spinner, Toast } from "react-bootstrap";
2-
import React, { useEffect, useRef, useState } from "react";
1+
import { OverlayTrigger, Popover, Spinner, Toast} from "react-bootstrap";
2+
import PopoverBody from "react-bootstrap/PopoverBody";
3+
import PopoverHeader from "react-bootstrap/PopoverHeader";
4+
import { useEffect, useRef, useState } from "react";
35
import EnhancedEncryptionIcon from "@material-ui/icons/EnhancedEncryption";
46
import HourglassFullIcon from "@material-ui/icons/HourglassFull";
57
import SaveIcon from "@material-ui/icons/Save";
@@ -342,7 +344,7 @@ function OptsButton(obj: {
342344
placement={"left"}
343345
overlay={
344346
<Popover id={`opt-${obj.title}`} className={styles.popoverBody}>
345-
<Popover.Title className={styles.popoverHeader} as="h3">
347+
<PopoverHeader className={styles.popoverHeader} as="h3">
346348
{obj.title}
347349
{obj.hotKey && (
348350
<span
@@ -354,13 +356,13 @@ function OptsButton(obj: {
354356
{obj.hotKey}
355357
</span>
356358
)}
357-
</Popover.Title>
358-
<Popover.Content>
359-
{obj.content}{" "}
359+
</PopoverHeader>
360+
<PopoverBody>
361+
{obj.content}
360362
{obj.optional !== undefined && (
361363
<strong>{obj.optional ? "Optional" : "Required"}</strong>
362364
)}
363-
</Popover.Content>
365+
</PopoverBody>
364366
</Popover>
365367
}
366368
>

‎mystbin/frontend/components/Tab.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useState } from "react";
22
import styles from "../styles/Tab.module.css";
33
import CloseIcon from "@material-ui/icons/Close";
4+
import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
45

56
export default function Tab({
67
current,
8+
children,
79
onFocus,
810
onChange,
911
onDelete,
@@ -18,6 +20,7 @@ export default function Tab({
1820
filename: string;
1921
deletable: boolean;
2022
editable: boolean;
23+
children: any;
2124
}) {
2225
const spanRef = React.createRef<HTMLSpanElement>();
2326

@@ -64,6 +67,7 @@ export default function Tab({
6467
<CloseIcon className={styles.tabsCloseButton} />
6568
</button>
6669
)}
70+
{children}
6771
</div>
6872
);
6973
}

‎mystbin/frontend/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@
1212
"dependencies": {
1313
"@material-ui/core": "^4.11.0",
1414
"@material-ui/icons": "^4.9.1",
15-
"@material-ui/x-grid": "^4.0.0-alpha.20",
1615
"@monaco-editor/react": "^3.7.0",
1716
"@types/crypto-js": "^4.0.1",
18-
"bootstrap": "^4.5.3",
17+
"boostrap": "^2.0.0",
18+
"bootstrap": "^5.2.0",
1919
"cookie-cutter": "^0.2.0",
2020
"cookies": "^0.8.0",
2121
"crypto-js": "^4.0.0",
2222
"file-loader": "^6.2.0",
2323
"flux": "^4.0.1",
2424
"http-proxy": "^1.18.1",
25+
"install": "^0.13.0",
2526
"next": "10.0.1",
2627
"react": "17.0.1",
27-
"react-bootstrap": "^1.4.0",
28+
"react-bootstrap": "^2.5.0",
2829
"react-dom": "17.0.1",
30+
"react-dropdown": "^1.10.0",
2931
"react-hotkeys-hook": "^3.0.1",
3032
"react-loader-spinner": "^5.1.7-beta.1",
3133
"react-popout": "^1.0.3",

‎mystbin/frontend/styles/EditorTabs.module.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,86 @@
2222
.maxCountToastHeader > button {
2323
outline: none;
2424
}
25+
26+
.langButton {
27+
position: relative;
28+
color: #3C94DF!important;
29+
display: flex;
30+
align-self: center;
31+
justify-content: center;
32+
}
33+
34+
.langButton:hover {
35+
filter: brightness(120%);
36+
color: #3C94DF;
37+
outline: none;
38+
border: none;
39+
}
40+
41+
.dropdownContainer {
42+
position: relative;
43+
display: flex;
44+
align-self: center;
45+
height: 100%;
46+
width: 100%;
47+
}
48+
49+
.dropDown {
50+
background-color: #3b3b3b;
51+
color: #e3e3e3!important;
52+
font-size: 0.9em!important;
53+
border-radius: 5px;
54+
overflow-y: scroll;
55+
position: absolute;
56+
height: 30vh;
57+
z-index: 99999;
58+
margin-top: 3rem;
59+
text-align: left;
60+
width: fit-content;
61+
overflow-x: hidden;
62+
}
63+
64+
.dropdownItem {
65+
background-color: #3b3b3b;
66+
color: #e3e3e3;
67+
font-size: 0.9em;
68+
padding: 0.25rem;
69+
margin-left: 0.25rem;
70+
}
71+
72+
.dropdownItem:hover {
73+
filter: brightness(120%);
74+
}
75+
76+
.langParent {
77+
width: 100%;
78+
position: relative;
79+
}
80+
81+
.addAttachmentIcon {
82+
color: #e3e3e3;
83+
height: 1.75rem!important;
84+
width: 1.75rem!important;
85+
}
86+
87+
.addAttachmentIconContainer {
88+
background-color: #3C94DF;
89+
display: flex;
90+
flex-direction: row;
91+
border-radius: 0 0 5px 5px;
92+
width: fit-content;
93+
}
94+
95+
.addAttachmentsText {
96+
font-size: 0.8em;
97+
color: #e3e3e3;
98+
padding: 0.5rem;
99+
margin-right: 1rem;
100+
margin-left: -0.5rem;
101+
align-self: center;
102+
}
103+
104+
.addAttachmentIconContainer:hover {
105+
cursor: pointer;
106+
filter: brightness(120%);
107+
}

‎mystbin/frontend/styles/OptsBar.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,8 @@
128128
.optsNavContainer {
129129
flex-direction: column!important;
130130
}
131+
}
132+
133+
.blank {
134+
131135
}

‎mystbin/frontend/styles/Tab.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
}
5656

5757
.tabsCloseButton > svg {
58-
font-size: 1.2em;
58+
font-size: 1.2em!important;
5959
display: flex;
6060
align-self: center;
6161
}

‎mystbin/frontend/styles/globals.css‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ body .monaco-aria-container {
103103
}
104104

105105
.maxed > section {
106-
max-height: 87.5vh;
106+
max-height: 85.5vh;
107107
}
108108

109109
@media only screen and (max-width: 768px) {
@@ -201,6 +201,20 @@ input[type=radio] {
201201
font-size: 1.25rem!important;
202202
}
203203

204-
.popover .arrow::after, .popover .arrow::before {
204+
.popover-arrow::after, .popover-arrow::before {
205205
content: none!important;
206+
}
207+
208+
.dropdown::-webkit-scrollbar {
209+
width: 10px;
210+
}
211+
212+
/* Track */
213+
.dropdown::-webkit-scrollbar-track {
214+
background: rgba(200, 200, 255, 0.3);
215+
}
216+
217+
/* Handle */
218+
.dropdown::-webkit-scrollbar-thumb {
219+
background: #0070f3;
206220
}

0 commit comments

Comments
 (0)