mirror/mcbbs-markdown2bbcode-converter
2
0
Fork 0
mirror of https://github.com/ustc-zzzz/mcbbs-markdown2bbcode-converter.git synced 2024-11-21 01:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove the css file

Browse Source
This commit is contained in:
Yanbing Zhao 2020-12-03 03:32:57 +08:00
parent c65954e1f2
commit 25ae047a68
8 changed files with 132 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -28,13 +28,10 @@
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"ts-loader": "^6.2.2",
"typescript": "^3.9.2",
"typings-for-css-modules-loader": "^1.7.0",
"url-loader": "^2.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",

13
src/component/Config.tsx
View File

@ -1,12 +1,13 @@
import * as React from 'react'
import * as Index from '../index'
import * as Style from '../index.css'
import * as Hooks from '../hooks'
import * as Core from '@material-ui/core'
import * as Icons from '@material-ui/icons'
import * as PopupState from 'material-ui-popup-state/hooks'
import { useTheme } from '@material-ui/core'
interface ConfigProps {
images: {
@ -27,6 +28,10 @@ function Config(props: ConfigProps) {
const collectRendererConfig = () => props.configCollector()['renderer']
const { pre } = Hooks.useRootStyles()
const theme = useTheme()
const generateRenderConfigList = () => {
const result = []
const rendererConfig = collectRendererConfig()
@ -35,7 +40,7 @@ function Config(props: ConfigProps) {
result.push(
<div key={key} style={{ margin: '2em 0' }}>
<h3 style={{ fontWeight: 500 }}>{key}</h3>
<pre>{prefix + '`' + suffix + '`'}</pre>
<pre className={pre}>{prefix + '`' + suffix + '`'}</pre>
</div>
)
}
@ -48,7 +53,7 @@ function Config(props: ConfigProps) {
return (
<div style={{ display: 'inline-block' }}>
<Core.IconButton color='inherit' style={{marginRight: '-12px'}} {...PopupState.bindTrigger(popupState)}>
<Core.IconButton color='inherit' style={{ marginRight: -theme.spacing(1.5) }} {...PopupState.bindTrigger(popupState)}>
<Icons.MoreVert />
</Core.IconButton>
<ConfigMenu
@ -130,10 +135,8 @@ interface ConfigMenuProps {
}
function ConfigMenu(props: ConfigMenuProps) {
const clipboardButtonClass = `${Style.headerCopyOutput} ${Style.showInMenu}`
return (
<Core.Menu {...PopupState.bindMenu(props.popupState)}>
<Core.MenuItem className={clipboardButtonClass}>Copy Output to Clipboard</Core.MenuItem>
<Core.MenuItem onClick={props.onRenderConfigClick}>Render Configuration</Core.MenuItem>
<Core.MenuItem onClick={props.onAboutClick}>About Project</Core.MenuItem>
</Core.Menu>

63
src/component/Header.tsx
View File

@ -1,11 +1,10 @@
import * as React from 'react'
import * as Index from '../index'
import * as Style from '../index.css'
import * as Hooks from '../hooks'
import * as Core from '@material-ui/core'
import Clipboard from 'clipboard'
import * as Icons from '@material-ui/icons'
import Config from './Config'
@ -20,39 +19,45 @@ interface HeaderProps {
}
function Header(props: HeaderProps) {
const [state, setState] = React.useState({
openClipboardSuccess: false
})
React.useEffect(() => {
const options = { text: () => props.configCollector()['text'] }
const clipboard = new Clipboard(`.${Style.headerCopyOutput}`, options)
clipboard.on('success', () => setState({ openClipboardSuccess: true }))
return () => clipboard.destroy()
})
const clipboardButtonClass = `${Style.headerCopyOutput} ${Style.showInAppBar}`
const { title, toolbar } = Hooks.useHeaderStyles()
return (
<Core.AppBar position='fixed'>
<Core.Toolbar style={{ minHeight: '64px', paddingLeft: '24px' }}>
<Core.Typography variant='h5' style={{ flexGrow: 1 }}>
<span>MM2BC</span>
<div className={Style.titleSuffixSmall}>MCBBS Markdown To BBCode Converter</div>
<span className={Style.titleSuffixBig}>&nbsp;-&nbsp;MCBBS Markdown To BBCode Converter</span>
<Core.Toolbar className={toolbar}>
<Core.Typography variant='h5' className={title}>
<span>MM2BC</span><TitleSuffix />
</Core.Typography>
<Core.Button color='inherit' className={clipboardButtonClass}>Copy Output</Core.Button>
<Core.Snackbar
autoHideDuration={4096}
open={state.openClipboardSuccess}
message={'BBCode output successfully copied'}
onClose={() => setState({ openClipboardSuccess: false })} />
<CopyOutput text={() => props.configCollector()['text']} />
<Config images={props.images} configCollector={props.configCollector} />
</Core.Toolbar>
</Core.AppBar>
)
}
function TitleSuffix(props: {}) {
const isSmall = !Core.useMediaQuery('@media (min-width: 768px)')
const { titleSuffixSmall } = Hooks.useHeaderStyles()
return isSmall ? (
<div className={titleSuffixSmall}>MCBBS Markdown To BBCode Converter</div>
) : (
<span>&nbsp;-&nbsp;MCBBS Markdown To BBCode Converter</span>
)
}
function CopyOutput(props: { text: () => string }) {
const [open, reset] = Hooks.useClipboard(`#mm2bc-copy-output`, props.text)
const isSmall = !Core.useMediaQuery('@media (min-width: 1024px)')
const clipboardMessage = 'BBCode output successfully copied'
return isSmall ? (
<div>
<Core.IconButton color='inherit' id='mm2bc-copy-output'><Icons.FileCopy /></Core.IconButton>
<Core.Snackbar open={open} autoHideDuration={4096} message={clipboardMessage} onClose={reset} />
</div>
) : (
<div>
<Core.Button color='inherit' id='mm2bc-copy-output'><Icons.FileCopy />&nbsp;Copy Output</Core.Button>
<Core.Snackbar open={open} autoHideDuration={4096} message={clipboardMessage} onClose={reset} />
</div>
)
}
export default Header

24
src/component/Main.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'
import * as Style from '../index.css'
import * as Hooks from '../hooks'
import * as Core from '@material-ui/core'
@ -28,18 +28,24 @@ function Main(props: MainProps) {
localStorage.markdownInput = text
}
const isSmall = !Core.useMediaQuery('@media (min-width: 768px)')
const { main } = Hooks.useRootStyles()
const { mainContainer, mainContainerSmall, mainLeft, mainRight, mainPaper } = Hooks.useMainStyles()
return (
<main>
<div className={Style.mainContainer}>
<main className={main}>
<div className={isSmall ? mainContainerSmall : mainContainer}>
<Core.Paper
className={Style.mainLeft}
className={`${mainLeft} ${mainPaper}`}
elevation={state.leftDepth}
onMouseOut={() => setState({ ...state, leftDepth: 1 })}
onMouseOver={() => setState({ ...state, leftDepth: 2 })}>
<InputArea inputId='markdown-input' defaultValue={state.input} onChange={handleChange} />
</Core.Paper>
<Core.Paper
className={Style.mainRight}
className={`${mainRight} ${mainPaper}`}
elevation={state.rightDepth}
onMouseOut={() => setState({ ...state, rightDepth: 1 })}
onMouseOver={() => setState({ ...state, rightDepth: 2 })}>
@ -57,12 +63,13 @@ interface InputAreaProps {
}
function InputArea(props: InputAreaProps) {
const theme = Core.useTheme()
const style = { display: 'block', lineHeight: theme.typography.body1.lineHeight, margin: 0, padding: 0, minHeight: '100%' }
const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
if (props.onChange) {
props.onChange(event.target.value)
}
}
return (
<Core.InputBase
autoFocus={true}
@ -72,7 +79,7 @@ function InputArea(props: InputAreaProps) {
onChange={handleChange}
value={props.defaultValue}
placeholder='Markdown Input'
style={{ display: 'block', lineHeight: '24px', margin: 0, padding: 0, minHeight: '100%' }} />
style={style} />
)
}
@ -81,7 +88,8 @@ interface OutputAreaProps {
}
function OutputArea(props: OutputAreaProps) {
const commonStyle = { lineHeight: '24px', margin: 0, padding: 0, minHeight: '100%' }
const theme = Core.useTheme()
const commonStyle = { lineHeight: theme.typography.body1.lineHeight, margin: 0, padding: 0, minHeight: '100%' }
if (props.value) {
const style: React.CSSProperties = { ...commonStyle, whiteSpace: 'pre' }
return <Core.Typography variant='body1'><p style={style}>{props.value}</p></Core.Typography>

74
src/hooks.tsx Normal file
View File

@ -0,0 +1,74 @@
import * as React from 'react'
import * as Core from '@material-ui/core'
import Clipboard from 'clipboard'
export const useClipboard = (selector: string, text: () => string): [boolean, () => void] => {
const [state, setState] = React.useState<boolean>(false)
const reset = () => setState(false)
React.useEffect(() => {
const clipboard = new Clipboard(selector, { text })
clipboard.on('success', () => setState(true))
return () => clipboard.destroy()
})
return [state, reset]
}
export const useRootStyles = Core.makeStyles(theme => ({
main: {
position: 'fixed',
overflowX: 'auto', overflowY: 'hidden',
top: theme.spacing(8), bottom: 0, left: 0, right: 0
},
pre: {
fontFamily: ','.concat('Consolas', '"Courier New"', 'Courier', 'monospace')
}
}))
export const useHeaderStyles = Core.makeStyles(theme => ({
titleSuffixSmall: {
fontSize: theme.typography.overline.fontSize,
whiteSpace: 'nowrap',
paddingLeft: 1,
flexGrow: 1
},
title: {
whiteSpace: 'nowrap',
flexGrow: 1
},
toolbar: {
minHeight: theme.spacing(8),
paddingLeft: theme.spacing(3)
}
}))
export const useMainStyles = Core.makeStyles(theme => ({
mainContainer: {
position: 'absolute',
width: '100%',
top: theme.spacing(3), bottom: theme.spacing(3), left: 0, right: 0
},
mainContainerSmall: {
position: 'absolute',
width: `calc(200% - ${theme.spacing(2.5)}px)`,
top: theme.spacing(3), bottom: theme.spacing(3), left: 0, right: 0
},
mainPaper: {
wordSpacing: 0,
padding: theme.spacing(2)
},
mainLeft: {
position: 'absolute',
overflowX: 'auto', overflowY: 'auto',
top: 0, bottom: 0, left: theme.spacing(3), width: `calc(50% - ${theme.spacing(8.75)}px)`
},
mainRight: {
position: 'absolute',
overflowX: 'auto', overflowY: 'auto',
top: 0, bottom: 0, width: `calc(50% - ${theme.spacing(8.75)}px)`, right: theme.spacing(3)
}
}))

85
src/index.css
View File

@ -1,85 +0,0 @@
html, body {
position: fixed;
height: 100%;
width: 100%;
margin: 0;
}
main {
position: absolute;
overflow-y: hidden;
overflow-x: auto;
bottom: 0;
top: 64px;
right: 0;
left: 0;
}
pre {
font-family: Consolas, "Courier New", Courier, monospace;
}
.main-container {
position: absolute;
bottom: 24px;
top: 24px;
}
.main-left {
position: absolute;
overflow-y: auto;
padding: 16px 16px;
word-spacing: 0;
width: calc(50% - 70px);
bottom: 0;
top: 0;
left: 24px;
}
.main-right {
position: absolute;
overflow-y: auto;
padding: 16px 16px;
word-spacing: 0;
width: calc(50% - 70px);
bottom: 0;
top: 0;
right: 24px;
}
@media (min-width: 768px) {
.main-container {
width: 100%;
left: 0;
}
.title-suffix-small {
display: none;
}
.header-copy-output.show-in-menu {
display: none !important;
}
}
@media (max-width: 767px) {
.main-container {
width: calc(200% - 20px);
left: 0;
}
.title-suffix-small {
white-space: nowrap;
padding-left: 1px;
font-size: 12px;
flex-grow: 1;
}
.title-suffix-big {
display: none;
}
.header-copy-output.show-in-app-bar {
display: none !important;
}
}

8
src/index.css.d.ts vendored
View File

@ -1,8 +0,0 @@
export const mainContainer: string
export const mainLeft: string
export const mainRight: string
export const titleSuffixSmall: string
export const headerCopyOutput: string
export const showInMenu: string
export const titleSuffixBig: string
export const showInAppBar: string

3
webpack.config.js
View File

@ -21,9 +21,6 @@ module.exports = {
test: /\.ts(x?)$/,
loader: 'ts-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!typings-for-css-modules-loader?modules&namedExport&camelCase'
}, {
test: /\.woff2$/,
loader: 'url-loader?limit=65535'