Skip to content

Commit

Permalink
Adjust setting page style.
Browse files Browse the repository at this point in the history 
Fix editor page.
  • Loading branch information
@am009
am009 committed Jul 18, 2024
1 parent 2bfe803 commit e20b8a3
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 61 deletions.
54 changes: 35 additions & 19 deletions frontend/app/editor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Col, Layout, Row, Tree, message, Upload } from "antd";
import { Button, Col, Layout, Row, Tree, message, Upload, Divider } from "antd";
import { UploadOutlined, DownOutlined } from '@ant-design/icons';
import type { TreeDataNode, TreeProps } from 'antd';
import {
gzip, zlib, AsyncGzip, zip, unzip, strFromU8,
Zip, AsyncZipDeflate, Unzip, AsyncUnzipInflate,
Unzipped
} from 'fflate';
import { useState, useEffect } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { useState, useEffect, Key } from 'react';
import { InboxOutlined, CheckOutlined, UndoOutlined } from '@ant-design/icons';
import type { ChangeHandler, MonacoDiffEditorProps } from './monaco';
import type { UploadProps } from 'antd';
import Text from "antd/es/typography/Text";
import { saveAs } from 'file-saver';
const { DirectoryTree } = Tree;


// import MonacoDiffEditor from './monaco';
import dynamic from "next/dynamic";
Expand All @@ -29,6 +31,8 @@ export default function DiffEditor() {
const [oldTreeData, setOldTreeData] = useState<Unzipped | null>(null)
const [newTreeData, setNewTreeData] = useState<Unzipped | null>(null)
const [selectedKey, setSelectedKey] = useState('')
const [expandedKeysOld, setExpandedKeysOld] = useState<Key[]>([])
const [expandedKeysNew, setExpandedKeysNew] = useState<Key[]>([])

const makeOrGetDir = (children: TreeDataNode[], key: string, name: string) => {
const node = children.find((child) => child.title === name)
Expand All @@ -53,6 +57,7 @@ export default function DiffEditor() {
let current = root
let currentKey = ''
for (let i = 0; i < dirs.length - 1; i++) {
if (dirs[i].length === 0) { continue }
const t = makeOrGetDir(current, currentKey.toString(), dirs[i])
if (t.children === undefined) {
message.error(`Folder and file name collision: ${t.key}.`)
Expand All @@ -61,10 +66,12 @@ export default function DiffEditor() {
currentKey = t.key as string
current = t.children as TreeDataNode[]
}
if (dirs.length === 0 || dirs[dirs.length-1].length === 0) { continue }
const leaf: TreeDataNode = {
title: dirs[dirs.length - 1],
key: path,
disabled: other !== null && other[path] === undefined
disabled: other !== null && other[path] === undefined,
isLeaf: true,
}
current.push(leaf)
}
Expand Down Expand Up @@ -108,6 +115,7 @@ export default function DiffEditor() {
}

const onSelectTree: TreeProps['onSelect'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
if (selectedKeys.length === 0) {
setSelectedKey('')
} else {
Expand Down Expand Up @@ -159,27 +167,27 @@ export default function DiffEditor() {

const UploadWindow = () => (<>
<Row>
<Col span={12} style={{ display: 'flex', justifyContent: 'center' }}>
<Col span={12}>
<Dragger {...commonProps} {...uploadPropsOld}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
{oldTreeData === null ? <InboxOutlined /> : <CheckOutlined />}
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-text">Old Project</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibited from uploading company data or other
banned files.
Click or drag file to this area to upload. <br />
Support zip latex project. You can download from overleaf.
</p>
</Dragger>
</Col>
<Col span={12} style={{ display: 'flex', justifyContent: 'center' }}>
<Col span={12}>
<Dragger {...commonProps} {...uploadPropsNew}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
{newTreeData === null ? <InboxOutlined /> : <CheckOutlined />}
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-text">New Project</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibited from uploading company data or other
banned files.
Click or drag file to this area to upload. <br />
Support zip latex project. You can download from overleaf.
</p>
</Dragger>
</Col>
Expand All @@ -189,12 +197,14 @@ export default function DiffEditor() {
const DiffWindow = () => (<>
<Layout>
<Sider width="15%" collapsible={true} theme="light" collapsedWidth={0}>
<Tree
<DirectoryTree
showLine
switcherIcon={<DownOutlined />}
defaultExpandedKeys={['0-0-0']}
onSelect={onSelectTree}
treeData={convertZipToTree(oldTreeData, newTreeData)}
expandedKeys={expandedKeysOld}
onExpand={(expandedKeys) => setExpandedKeysOld(expandedKeys)}
/>
</Sider>
<Content>
Expand All @@ -208,22 +218,27 @@ export default function DiffEditor() {
/>
</Content>
<Sider width="15%" reverseArrow={true} collapsible={true} theme="light" collapsedWidth={0}>
<Tree
<DirectoryTree
showLine
switcherIcon={<DownOutlined />}
defaultExpandedKeys={['0-0-0']}
onSelect={onSelectTree}
treeData={convertZipToTree(newTreeData, oldTreeData)}
expandedKeys={expandedKeysNew}
onExpand={(expandedKeys) => setExpandedKeysNew(expandedKeys)}
/>
</Sider>
</Layout>
<Row>
<Col span={12} style={{ display: 'flex', justifyContent: 'center' }}>
<Row style={{marginTop: "5px"}}>
<Col span={11} style={{ display: 'flex', justifyContent: 'center' }}>
<Button icon={<DownloadOutlined />} onClick={() => { downloadZip(oldTreeData, oldProjectFilename) }}>
Save
</Button>
</Col>
<Col span={12} style={{ display: 'flex', justifyContent: 'center' }}>
<Col span={2}>
<Button icon={<UndoOutlined />} onClick={() => {setNewTreeData(null); setNewProjectFilename(''); setOldTreeData(null); setOldProjectFilename(''); setSelectedKey('')}}>Reset</Button>
</Col>
<Col span={11} style={{ display: 'flex', justifyContent: 'center' }}>
<Button icon={<DownloadOutlined />} onClick={() => { downloadZip(newTreeData, newProjectFilename) }}>
Save
</Button>
Expand All @@ -240,6 +255,7 @@ export default function DiffEditor() {
<Text style={{ fontSize: "12pt" }}>New Project</Text>
</Col>
</Row>
<Divider style={{ margin: "5px 0 10px 0" }} />
{oldTreeData !== null && newTreeData !== null ? <DiffWindow /> : <UploadWindow />}
{/* <DiffWindow /> <br /> <UploadWindow /> */}
</>);
Expand Down
101 changes: 59 additions & 42 deletions frontend/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Flex from 'antd/es/flex';

import Giscus from './giscus';
import { useState, useEffect, useRef } from 'react';
import { Divider, Form } from 'antd';
import { Col, Divider, Form, Row } from 'antd';
import { Color } from 'antd/es/color-picker';
import { ColorFactory } from 'antd/es/color-picker/color';
import message from 'antd/es/message';
Expand Down Expand Up @@ -224,47 +224,64 @@ export default function Home() {
let customStyle = (<div>
<Divider>Custom Style Options</Divider>
<Form.Item hidden={style !== 'custom'}>
<Checkbox defaultChecked onChange={val => setNewTextNull(!val.target.checked)}>Show new text</Checkbox>
<Checkbox disabled={!isNewTextVisible()} onChange={val => setNewColorNull(!val.target.checked)} defaultChecked>Change Color to:</Checkbox>
<ColorPicker disabled={!isNewTextVisible() || newColorNull} disabledAlpha value={newTextColor} showText onChange={
(color, hex) => {
setNewTextColor(color);
}
} />
<Row justify="space-around" align="middle">
<Col>
<Checkbox defaultChecked onChange={val => setNewTextNull(!val.target.checked)} >Show new text</Checkbox>
</Col>
<Col>
<Checkbox disabled={!isNewTextVisible()} onChange={val => setNewColorNull(!val.target.checked)} defaultChecked>Change Color to:</Checkbox>
</Col>

<span>Text style: </span>
<Select
disabled={!isNewTextVisible()}
value={newTextStyle}
style={{ width: 120 }}
onChange={value => setNewTextStyle(value)}
options={[
{ value: 'none', label: 'none' },
{ value: 'underline_wave', label: 'underline_wave' },
{ value: 'strikeout', label: 'strikeout' },
]}
/>
<Col>
<ColorPicker disabled={!isNewTextVisible() || newColorNull} disabledAlpha value={newTextColor} showText onChange={
(color, hex) => {
setNewTextColor(color);
}
} />
</Col>
<Col><span>Text style: </span>
<Select
disabled={!isNewTextVisible()}
value={newTextStyle}
style={{ verticalAlign: 'middle', width: 120 }}
onChange={value => setNewTextStyle(value)}
options={[
{ value: 'none', label: 'none' },
{ value: 'underline_wave', label: 'underline_wave' },
{ value: 'strikeout', label: 'strikeout' },
]}
/></Col>
</Row>
</Form.Item>
<Form.Item hidden={style !== 'custom'}>
<Checkbox defaultChecked onChange={val => setOldTextNull(!val.target.checked)}>Show removed text</Checkbox>
<Checkbox disabled={!isOldTextVisible()} onChange={val => setOldColorNull(!val.target.checked)} defaultChecked>Change Color to:</Checkbox>
<ColorPicker disabled={!isOldTextVisible() || oldColorNull} disabledAlpha value={oldTextColor} showText onChange={
(color: Color, hex) => {
setOldTextColor(color);
}
} />
<span>Text style: </span>
<Select
disabled={!isOldTextVisible()}
value={oldTextStyle}
style={{ width: 120 }}
onChange={value => setOldTextStyle(value)}
options={[
{ value: 'none', label: 'none' },
{ value: 'underline_wave', label: 'underline_wave' },
{ value: 'strikeout', label: 'strikeout' },
]}
/>
<Row justify="space-around" align="middle">
<Col>
<Checkbox defaultChecked onChange={val => setOldTextNull(!val.target.checked)}>Show removed text</Checkbox>
</Col>
<Col>
<Checkbox disabled={!isOldTextVisible()} onChange={val => setOldColorNull(!val.target.checked)} defaultChecked>Change Color to:</Checkbox>
</Col>
<Col>
<ColorPicker disabled={!isOldTextVisible() || oldColorNull} disabledAlpha value={oldTextColor} showText onChange={
(color: Color, hex) => {
setOldTextColor(color);
}
} />
</Col>
<Col><span>Text style: </span>
<Select
disabled={!isOldTextVisible()}
value={oldTextStyle}
style={{ width: 120 }}
onChange={value => setOldTextStyle(value)}
options={[
{ value: 'none', label: 'none' },
{ value: 'underline_wave', label: 'underline_wave' },
{ value: 'strikeout', label: 'strikeout' },
]}
/>
</Col>
</Row>
</Form.Item>
<Divider />
</div>)
Expand All @@ -280,7 +297,7 @@ export default function Home() {
<Form.Item required name="old_zip"
valuePropName="fileList"
getValueFromEvent={normFile}
label="Old version of zip project downloaded from Overleaf:"
label="Old project (.zip downloaded from Overleaf):"
rules={[{ required: true, message: 'Please select old project zip file!' }]}>
<Upload beforeUpload={() => false} maxCount={1} accept='zip,application/zip,application/x-zip,application/x-zip-compressed'>
<Button icon={<UploadOutlined />}>Select Old Latex zip project</Button>
Expand All @@ -289,7 +306,7 @@ export default function Home() {
<Form.Item required name="new_zip"
valuePropName="fileList"
getValueFromEvent={normFile}
label="New version of zip project downloaded from Overleaf:"
label="New project (.zip downloaded from Overleaf):"
rules={[{ required: true, message: 'Please select new project zip file!' }]}>
<Upload beforeUpload={() => false} maxCount={1} accept='zip,application/zip,application/x-zip,application/x-zip-compressed'>
<Button icon={<UploadOutlined />}>Select New Latex zip project</Button>
Expand Down Expand Up @@ -339,7 +356,7 @@ export default function Home() {
</Form.Item>
<Form.Item>
<Checkbox onChange={e => { setFields({ ...fields, download_diff_proj: e.target.checked }); }}>
Additionally download the diffed latex project as a tar file
Download the diff project (.tar)
</Checkbox>
</Form.Item>
<Form.Item>
Expand Down

0 comments on commit e20b8a3

Please sign in to comment.