mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-17 16:44:49 -04:00
Replace font awesome with fork awesome (#114)
* added fork-awesome-icon * removed fontAwesome * changed FontAwesomeIcon to ForkAwesomeIcon Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
parent
747d9686fa
commit
c8e42eebd4
33 changed files with 134 additions and 214 deletions
|
@ -1,6 +1,6 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import { Alert } from 'react-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface LoadingScreenProps {
|
||||
failedTitle: string
|
||||
|
@ -10,7 +10,7 @@ export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) =>
|
|||
return (
|
||||
<div className="loader middle">
|
||||
<div className="icon text-white">
|
||||
<FontAwesomeIcon icon="file-alt" size="6x"
|
||||
<ForkAwesomeIcon icon="file-text" size="5x"
|
||||
className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
|
||||
</div>
|
||||
{
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import { Dropdown } from 'react-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
import { ActiveIndicatorStatus } from './active-indicator'
|
||||
import './connection-indicator.scss'
|
||||
import { UserLine } from './user-line'
|
||||
|
@ -10,7 +10,7 @@ const ConnectionIndicator: React.FC = () => {
|
|||
return (
|
||||
<Dropdown className="small" alignRight>
|
||||
<Dropdown.Toggle id="connection-indicator" size="sm" variant="primary" className="upper-case">
|
||||
<FontAwesomeIcon icon="users"/> {userOnline} Online
|
||||
<ForkAwesomeIcon icon="users"/> {userOnline} Online
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item disabled={true} className="d-flex align-items-center p-0">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
const DarkModeButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
@ -19,8 +19,8 @@ const DarkModeButton: React.FC = () => {
|
|||
onChange={buttonToggle} value={'dark'}
|
||||
>
|
||||
{buttonState
|
||||
? <FontAwesomeIcon icon="sun"/>
|
||||
: <FontAwesomeIcon icon="moon"/>
|
||||
? <ForkAwesomeIcon icon="sun"/>
|
||||
: <ForkAwesomeIcon icon="moon"/>
|
||||
}
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { Dropdown } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
const EditorMenu: React.FC = () => {
|
||||
useTranslation()
|
||||
|
@ -16,13 +16,13 @@ const EditorMenu: React.FC = () => {
|
|||
<Trans i18nKey="editor.menu.extra"/>
|
||||
</Dropdown.Header>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="history"/> <Trans i18nKey="editor.menu.revision"/>
|
||||
<ForkAwesomeIcon icon="history"/> <Trans i18nKey="editor.menu.revision"/>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="tv"/> <Trans i18nKey="editor.menu.slideMode"/>
|
||||
<ForkAwesomeIcon icon="television"/> <Trans i18nKey="editor.menu.slideMode"/>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="trash"/> <Trans i18nKey="editor.menu.deleteNote"/>
|
||||
<ForkAwesomeIcon icon="trash"/> <Trans i18nKey="editor.menu.deleteNote"/>
|
||||
</Dropdown.Item>
|
||||
|
||||
<Dropdown.Divider/>
|
||||
|
@ -31,10 +31,10 @@ const EditorMenu: React.FC = () => {
|
|||
<Trans i18nKey="common.export"/>
|
||||
</Dropdown.Header>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
|
||||
<ForkAwesomeIcon icon="dropbox"/> Dropbox
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon={['fab', 'github']}/> Gist
|
||||
<ForkAwesomeIcon icon="github"/> Gist
|
||||
</Dropdown.Item>
|
||||
|
||||
<Dropdown.Divider/>
|
||||
|
@ -43,13 +43,13 @@ const EditorMenu: React.FC = () => {
|
|||
<Trans i18nKey="common.import"/>
|
||||
</Dropdown.Header>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon={['fab', 'dropbox']}/> Dropbox
|
||||
<ForkAwesomeIcon icon="dropbox"/> Dropbox
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon={['fab', 'github']}/> Gist
|
||||
<ForkAwesomeIcon icon="github"/> Gist
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="paste"/> <Trans i18nKey="editor.import.clipboard"/>
|
||||
<ForkAwesomeIcon icon="clipboard"/> <Trans i18nKey="editor.import.clipboard"/>
|
||||
</Dropdown.Item>
|
||||
|
||||
<Dropdown.Divider/>
|
||||
|
@ -58,13 +58,13 @@ const EditorMenu: React.FC = () => {
|
|||
<Trans i18nKey="editor.menu.download"/>
|
||||
</Dropdown.Header>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="file-alt"/> Markdown
|
||||
<ForkAwesomeIcon icon="file-text"/> Markdown
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="file-code"/> HTML
|
||||
<ForkAwesomeIcon icon="file-code-o"/> HTML
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item className="small">
|
||||
<FontAwesomeIcon icon="file-code"/> <Trans i18nKey='editor.export.rawHtml'/>
|
||||
<ForkAwesomeIcon icon="file-code-o"/> <Trans i18nKey='editor.export.rawHtml'/>
|
||||
</Dropdown.Item>
|
||||
|
||||
</Dropdown.Menu>
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
import { ApplicationState } from '../../../redux'
|
||||
import { EditorMode } from '../../../redux/editor/types'
|
||||
import { setEditorModeConfig } from '../../../redux/editor/methods'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const EditorViewMode: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation()
|
||||
const editorConfig = useSelector((state: ApplicationState) => state.editorConfig)
|
||||
return (
|
||||
<ToggleButtonGroup
|
||||
|
@ -17,13 +17,13 @@ const EditorViewMode: React.FC = () => {
|
|||
defaultValue={editorConfig.editorMode}
|
||||
onChange={(value: EditorMode) => { setEditorModeConfig(value) }}>
|
||||
<ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary" title={t('editor.viewMode.view')}>
|
||||
<FontAwesomeIcon icon="eye"/>
|
||||
<ForkAwesomeIcon icon="eye"/>
|
||||
</ToggleButton>
|
||||
<ToggleButton value={EditorMode.BOTH} variant="outline-secondary" title={t('editor.viewMode.both')}>
|
||||
<FontAwesomeIcon icon="columns"/>
|
||||
<ForkAwesomeIcon icon="columns"/>
|
||||
</ToggleButton>
|
||||
<ToggleButton value={EditorMode.EDITOR} variant="outline-secondary" title={t('editor.viewMode.edit')}>
|
||||
<FontAwesomeIcon icon="pencil-alt"/>
|
||||
<ForkAwesomeIcon icon="pencil"/>
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
)
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment, useState } from 'react'
|
||||
import { Button, Card, Col, Modal, Row, Table } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
import { TranslatedExternalLink } from '../../links/translated-external-link'
|
||||
|
||||
export const HelpButton: React.FC = () => {
|
||||
|
@ -14,12 +14,12 @@ export const HelpButton: React.FC = () => {
|
|||
<Fragment>
|
||||
<Button title={t('editor.menu.help')} className="ml-2 text-secondary" size="sm" variant="outline-light"
|
||||
onClick={handleShow}>
|
||||
<FontAwesomeIcon icon="question-circle"/>
|
||||
<ForkAwesomeIcon icon="question-circle"/>
|
||||
</Button>
|
||||
<Modal show={show} onHide={handleClose} animation={true} className="text-dark" size='lg'>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<FontAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.menu.help'}/>
|
||||
<ForkAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.menu.help'}/>
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="text-dark">
|
||||
|
@ -76,7 +76,7 @@ export const HelpButton: React.FC = () => {
|
|||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.features'
|
||||
href='/n/features'
|
||||
icon='dot-circle'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
|
@ -84,7 +84,7 @@ export const HelpButton: React.FC = () => {
|
|||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.yamlMetadata'
|
||||
href='/n/yaml-data'
|
||||
icon='dot-circle'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
|
@ -92,7 +92,7 @@ export const HelpButton: React.FC = () => {
|
|||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.slideExample'
|
||||
href='https://github.com/codimd/server/issues'
|
||||
icon='dot-circle'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button, Nav, Navbar } from 'react-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
|
||||
import { DarkModeButton } from './dark-mode-button'
|
||||
import { EditorViewMode } from './editor-view-mode'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
|
@ -16,7 +16,7 @@ const TaskBar: React.FC = () => {
|
|||
<Nav className="mr-auto d-flex align-items-center">
|
||||
<Navbar.Brand>
|
||||
<Link to="/intro" className="text-secondary">
|
||||
<FontAwesomeIcon icon="file-alt"/> CodiMD
|
||||
<ForkAwesomeIcon icon="file-text"/> CodiMD
|
||||
</Link>
|
||||
</Navbar.Brand>
|
||||
<EditorViewMode/>
|
||||
|
@ -25,10 +25,10 @@ const TaskBar: React.FC = () => {
|
|||
</Nav>
|
||||
<Nav className="d-flex align-items-center text-secondary">
|
||||
<Button className="ml-2 text-secondary" size="sm" variant="outline-light">
|
||||
<FontAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
|
||||
<ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
|
||||
</Button>
|
||||
<Button className="ml-2 text-secondary" size="sm" variant="outline-light">
|
||||
<FontAwesomeIcon icon="share-square"/> <Trans i18nKey="editor.menu.publish"/>
|
||||
<ForkAwesomeIcon icon="share-square-o"/> <Trans i18nKey="editor.menu.publish"/>
|
||||
</Button>
|
||||
<div className="text-secondary">
|
||||
<EditorMenu/>
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import './icon-button.scss'
|
||||
import { Button, ButtonProps } from 'react-bootstrap'
|
||||
import { IconProp } from '../../utils/iconProp'
|
||||
import { ForkAwesomeIcon, IconName } from '../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface SocialButtonProps extends ButtonProps {
|
||||
icon: IconProp
|
||||
icon: IconName
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
|
@ -14,7 +13,7 @@ export const IconButton: React.FC<SocialButtonProps> = ({ icon, children, varian
|
|||
<Button variant={variant} className={'btn-icon p-0 d-inline-flex align-items-stretch'}
|
||||
onClick={() => onClick?.()}>
|
||||
<span className="icon-part d-flex align-items-center">
|
||||
<FontAwesomeIcon icon={icon} className={'icon'}/>
|
||||
<ForkAwesomeIcon icon={icon} className={'icon'}/>
|
||||
</span>
|
||||
<span className="text-part d-flex align-items-center">
|
||||
{children}
|
||||
|
|
|
@ -7,10 +7,10 @@ const SocialLink: React.FC = () => {
|
|||
return (
|
||||
<p>
|
||||
<Trans i18nKey="landing.footer.followUs" components={[
|
||||
<ExternalLink href="https://github.com/codimd/server" icon={['fab', 'github']} text="GitHub"/>,
|
||||
<ExternalLink href="https://community.codimd.org" icon={['fab', 'discourse']} text="Discourse"/>,
|
||||
<ExternalLink href="https://github.com/codimd/server" icon='github' text="GitHub"/>,
|
||||
<ExternalLink href="https://community.codimd.org" icon='users' text="Discourse"/>,
|
||||
<ExternalLink href="https://riot.im/app/#/room/#codimd:matrix.org" icon="comment" text="Riot"/>,
|
||||
<ExternalLink href="https://social.codimd.org/mastodon" icon={['fab', 'mastodon']} text="Mastodon"/>,
|
||||
<ExternalLink href="https://social.codimd.org/mastodon" icon='mastodon' text="Mastodon"/>,
|
||||
<ExternalLink href="https://translate.codimd.org" icon="globe" text="POEditor"/>
|
||||
]}/>
|
||||
</p>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react'
|
||||
import { LinkContainer } from 'react-router-bootstrap'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export const NewGuestNoteButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
@ -12,7 +12,7 @@ export const NewGuestNoteButton: React.FC = () => {
|
|||
variant="primary"
|
||||
size="sm"
|
||||
className="d-inline-flex align-items-center">
|
||||
<FontAwesomeIcon icon="plus" className="mr-1"/>
|
||||
<ForkAwesomeIcon icon="plus" className="mr-1"/>
|
||||
<span>
|
||||
<Trans i18nKey='landing.navigation.newGuestNote'/>
|
||||
</span>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { LinkContainer } from 'react-router-bootstrap'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export const NewUserNoteButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
@ -12,7 +12,7 @@ export const NewUserNoteButton: React.FC = () => {
|
|||
variant="primary"
|
||||
size="sm"
|
||||
className="d-inline-flex align-items-center">
|
||||
<FontAwesomeIcon icon="plus" className="mr-1"/>
|
||||
<ForkAwesomeIcon icon="plus" className="mr-1"/>
|
||||
<span>
|
||||
<Trans i18nKey='landing.navigation.newNote'/>
|
||||
</span>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { Dropdown } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
import { ApplicationState } from '../../../../../redux'
|
||||
import { LinkContainer } from 'react-router-bootstrap'
|
||||
import { clearUser } from '../../../../../redux/user/methods'
|
||||
|
@ -21,13 +21,13 @@ export const UserDropdown: React.FC = () => {
|
|||
<Dropdown.Menu>
|
||||
<LinkContainer to={'/features'}>
|
||||
<Dropdown.Item>
|
||||
<FontAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
|
||||
<ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="editor.help.documents.features"/>
|
||||
</Dropdown.Item>
|
||||
</LinkContainer>
|
||||
<LinkContainer to={'/profile'}>
|
||||
<Dropdown.Item>
|
||||
<FontAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
|
||||
<ForkAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.userProfile"/>
|
||||
</Dropdown.Item>
|
||||
</LinkContainer>
|
||||
|
@ -35,7 +35,7 @@ export const UserDropdown: React.FC = () => {
|
|||
onClick={() => {
|
||||
clearUser()
|
||||
}}>
|
||||
<FontAwesomeIcon icon="sign-out-alt" fixedWidth={true} className="mr-2"/>
|
||||
<ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="login.signOut"/>
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment, useRef, useState } from 'react'
|
||||
import { Button, FormControl, InputGroup, Overlay, Tooltip } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface VersionInputFieldProps {
|
||||
version: string
|
||||
}
|
||||
|
||||
export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version }) => {
|
||||
useTranslation();
|
||||
useTranslation()
|
||||
const inputField = useRef<HTMLInputElement>(null)
|
||||
const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
|
||||
|
||||
|
@ -35,7 +35,7 @@ export const VersionInputField: React.FC<VersionInputFieldProps> = ({ version })
|
|||
<FormControl readOnly={true} ref={inputField} className={'text-center'} value={version} />
|
||||
<InputGroup.Append>
|
||||
<Button variant="outline-secondary" onClick={() => copyToClipboard(version)} title={'Copy'}>
|
||||
<FontAwesomeIcon icon={'copy'}/>
|
||||
<ForkAwesomeIcon icon='files-o'/>
|
||||
</Button>
|
||||
</InputGroup.Append>
|
||||
</InputGroup>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import './close-button.scss'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface CloseButtonProps {
|
||||
isDark: boolean;
|
||||
|
@ -10,7 +10,7 @@ export interface CloseButtonProps {
|
|||
const CloseButton: React.FC<CloseButtonProps> = ({ isDark }) => {
|
||||
return (
|
||||
<Button variant={isDark ? 'secondary' : 'light'}>
|
||||
<FontAwesomeIcon
|
||||
<ForkAwesomeIcon
|
||||
className="history-close"
|
||||
icon="times"
|
||||
/>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React from 'react'
|
||||
import './pin-button.scss'
|
||||
import { Button } from 'react-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface PinButtonProps {
|
||||
isPinned: boolean;
|
||||
|
@ -13,8 +13,8 @@ export const PinButton: React.FC<PinButtonProps> = ({ isPinned, onPinClick, isDa
|
|||
return (
|
||||
<Button variant={isDark ? 'secondary' : 'light'}
|
||||
onClick={onPinClick}>
|
||||
<FontAwesomeIcon
|
||||
icon="thumbtack"
|
||||
<ForkAwesomeIcon
|
||||
icon="thumb-tack"
|
||||
className={`history-pin ${isPinned ? 'active' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import { Badge, Card } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
import { PinButton } from '../common/pin-button'
|
||||
import { CloseButton } from '../common/close-button'
|
||||
import moment from 'moment'
|
||||
|
@ -20,7 +20,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick })
|
|||
</div>
|
||||
<Card.Body>
|
||||
<div className="text-black-50">
|
||||
<FontAwesomeIcon icon="clock"/> {moment(entry.lastVisited).fromNow()}<br/>
|
||||
<ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
|
||||
{formatHistoryDate(entry.lastVisited)}
|
||||
<div>
|
||||
{
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { useState, Fragment } from 'react'
|
||||
import { Button, Modal } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface ClearHistoryButtonProps {
|
||||
onClearHistory: () => void
|
||||
|
@ -17,7 +17,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
|
|||
return (
|
||||
<Fragment>
|
||||
<Button variant={'light'} title={t('landing.history.toolbar.clear')} onClick={handleShow}>
|
||||
<FontAwesomeIcon icon={'trash'}/>
|
||||
<ForkAwesomeIcon icon={'trash'}/>
|
||||
</Button>
|
||||
<Modal show={show} onHide={handleClose} animation={true} className="text-dark">
|
||||
<Modal.Header closeButton>
|
||||
|
@ -26,7 +26,7 @@ export const ClearHistoryButton: React.FC<ClearHistoryButtonProps> = ({ onClearH
|
|||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="text-dark">
|
||||
<h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
|
||||
<h5><Trans i18nKey={'landing.history.modal.clearHistory.question'}/></h5>
|
||||
<h6><Trans i18nKey={'landing.history.modal.clearHistory.disclaimer'}/></h6>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React, { ChangeEvent, useEffect, useState } from 'react'
|
||||
import { Button, Form, FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { SortButton, SortModeEnum } from '../../../../sort-button/sort-button'
|
||||
import { Typeahead } from 'react-bootstrap-typeahead'
|
||||
import './typeahead-hacks.scss'
|
||||
import { ClearHistoryButton } from './clear-history-button'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export type HistoryToolbarChange = (settings: HistoryToolbarState) => void;
|
||||
|
||||
|
@ -95,12 +95,12 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
|
|||
</InputGroup>
|
||||
<InputGroup className={'mr-1 mb-1'}>
|
||||
<Button variant={'light'} title={t('landing.history.toolbar.export')}>
|
||||
<FontAwesomeIcon icon={'download'}/>
|
||||
<ForkAwesomeIcon icon='download'/>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<InputGroup className={'mr-1 mb-1'}>
|
||||
<Button variant={'light'} title={t('landing.history.toolbar.import')}>
|
||||
<FontAwesomeIcon icon={'upload'}/>
|
||||
<ForkAwesomeIcon icon='upload'/>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<InputGroup className={'mr-1 mb-1'}>
|
||||
|
@ -108,7 +108,7 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
|
|||
</InputGroup>
|
||||
<InputGroup className={'mr-1 mb-1'}>
|
||||
<Button variant={'light'} title={t('landing.history.toolbar.refresh')}>
|
||||
<FontAwesomeIcon icon={'sync'}/>
|
||||
<ForkAwesomeIcon icon='refresh'/>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<InputGroup className={'mr-1 mb-1'}>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Col, Row } from 'react-bootstrap'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export const FeatureLinks: React.FC = () => {
|
||||
useTranslation()
|
||||
|
@ -10,7 +10,7 @@ export const FeatureLinks: React.FC = () => {
|
|||
<Row className="mb-5">
|
||||
<Col md={4}>
|
||||
<Link to={'/features#Share-Notes'} className="text-light">
|
||||
<FontAwesomeIcon icon="bolt" size="3x"/>
|
||||
<ForkAwesomeIcon icon="bolt" size="3x"/>
|
||||
<h5>
|
||||
<Trans i18nKey="landing.intro.features.collaboration"/>
|
||||
</h5>
|
||||
|
@ -18,7 +18,7 @@ export const FeatureLinks: React.FC = () => {
|
|||
</Col>
|
||||
<Col md={4}>
|
||||
<Link to={'/features#MathJax'} className="text-light">
|
||||
<FontAwesomeIcon icon="chart-bar" size="3x"/>
|
||||
<ForkAwesomeIcon icon="bar-chart" size="3x"/>
|
||||
<h5>
|
||||
<Trans i18nKey="landing.intro.features.mathJax"/>
|
||||
</h5>
|
||||
|
@ -26,7 +26,7 @@ export const FeatureLinks: React.FC = () => {
|
|||
</Col>
|
||||
<Col md={4}>
|
||||
<Link to={'/features#Slide-Mode'} className="text-light">
|
||||
<FontAwesomeIcon icon="tv" size="3x"/>
|
||||
<ForkAwesomeIcon icon="television" size="3x"/>
|
||||
<h5>
|
||||
<Trans i18nKey="landing.intro.features.slides"/>
|
||||
</h5>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import { ForkAwesomeIcon } from '../../../../fork-awesome/fork-awesome-icon'
|
||||
import screenshot from './img/screenshot.png'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { FeatureLinks } from './feature-links'
|
||||
import { CoverButtons } from './cover-buttons/cover-buttons'
|
||||
|
@ -11,7 +11,7 @@ const Intro: React.FC = () => {
|
|||
return (
|
||||
<div>
|
||||
<h1>
|
||||
<FontAwesomeIcon icon="file-alt"/> CodiMD
|
||||
<ForkAwesomeIcon icon="file-text"/> CodiMD
|
||||
</h1>
|
||||
<p className="lead mb-5">
|
||||
<Trans i18nKey="app.slogan"/>
|
||||
|
@ -19,7 +19,7 @@ const Intro: React.FC = () => {
|
|||
|
||||
<CoverButtons/>
|
||||
|
||||
<img alt={t("landing.intro.screenShotAltText")} src={screenshot} className="img-fluid mb-5"/>
|
||||
<img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
|
||||
<FeatureLinks/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
import React from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import './social-link-button.scss'
|
||||
import { IconProp } from '../../../../../../utils/iconProp'
|
||||
import { ForkAwesomeIcon, IconName } from '../../../../../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface SocialButtonProps {
|
||||
backgroundClass: string,
|
||||
href: string
|
||||
icon: IconProp
|
||||
icon: IconName
|
||||
title?: string
|
||||
}
|
||||
|
||||
|
@ -15,7 +14,7 @@ export const SocialLinkButton: React.FC<SocialButtonProps> = ({ title, backgroun
|
|||
<a href={href} title={title}
|
||||
className={'btn social-link-button p-0 d-inline-flex align-items-stretch ' + backgroundClass}>
|
||||
<span className="icon-part d-flex align-items-center">
|
||||
<FontAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
|
||||
<ForkAwesomeIcon icon={icon} className={'social-icon'} fixedWidth={true}/>
|
||||
</span>
|
||||
<span className="text-part d-flex align-items-center mx-auto">
|
||||
{children}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import { IconProp } from '../../../../../utils/iconProp'
|
||||
import { IconName } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
import { SocialLinkButton } from './social-link-button/social-link-button'
|
||||
|
||||
export enum OneClickType {
|
||||
|
@ -15,7 +15,7 @@ export enum OneClickType {
|
|||
|
||||
type OneClick2Map = (oneClickType: OneClickType) => {
|
||||
name: string,
|
||||
icon: IconProp,
|
||||
icon: IconName,
|
||||
className: string,
|
||||
url: string
|
||||
};
|
||||
|
@ -29,35 +29,35 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
|
|||
case OneClickType.DROPBOX:
|
||||
return {
|
||||
name: 'Dropbox',
|
||||
icon: ['fab', 'dropbox'],
|
||||
icon: 'dropbox',
|
||||
className: 'btn-social-dropbox',
|
||||
url: buildBackendAuthUrl('dropbox')
|
||||
}
|
||||
case OneClickType.FACEBOOK:
|
||||
return {
|
||||
name: 'Facebook',
|
||||
icon: ['fab', 'facebook'],
|
||||
icon: 'facebook',
|
||||
className: 'btn-social-facebook',
|
||||
url: buildBackendAuthUrl('facebook')
|
||||
}
|
||||
case OneClickType.GITHUB:
|
||||
return {
|
||||
name: 'GitHub',
|
||||
icon: ['fab', 'github'],
|
||||
icon: 'github',
|
||||
className: 'btn-social-github',
|
||||
url: buildBackendAuthUrl('github')
|
||||
}
|
||||
case OneClickType.GITLAB:
|
||||
return {
|
||||
name: 'GitLab',
|
||||
icon: ['fab', 'gitlab'],
|
||||
icon: 'gitlab',
|
||||
className: 'btn-social-gitlab',
|
||||
url: buildBackendAuthUrl('gitlab')
|
||||
}
|
||||
case OneClickType.GOOGLE:
|
||||
return {
|
||||
name: 'Google',
|
||||
icon: ['fab', 'google'],
|
||||
icon: 'google',
|
||||
className: 'btn-social-google',
|
||||
url: buildBackendAuthUrl('google')
|
||||
}
|
||||
|
@ -78,7 +78,7 @@ const getMetadata: OneClick2Map = (oneClickType: OneClickType) => {
|
|||
case OneClickType.TWITTER:
|
||||
return {
|
||||
name: 'Twitter',
|
||||
icon: ['fab', 'twitter'],
|
||||
icon: 'twitter',
|
||||
className: 'btn-social-twitter',
|
||||
url: buildBackendAuthUrl('twitter')
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react'
|
||||
import { Button, Card, Modal } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { deleteUser } from '../../../../../api/user'
|
||||
import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
|
||||
import { clearUser } from '../../../../../redux/user/methods'
|
||||
import { getBackendUrl } from '../../../../../utils/apiUtils'
|
||||
|
||||
|
@ -58,11 +58,11 @@ export const ProfileAccountManagement: React.FC = () => {
|
|||
<Card.Body>
|
||||
<Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
|
||||
<Button variant="secondary" block href={getBackendUrl() + '/me/export'} className="mb-2">
|
||||
<FontAwesomeIcon icon="cloud-download-alt" fixedWidth={true} className="mr-2"/>
|
||||
<ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.exportUserData"/>
|
||||
</Button>
|
||||
<Button variant="danger" block onClick={handleModalOpen}>
|
||||
<FontAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
|
||||
<ForkAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
|
||||
<Trans i18nKey="profile.deleteUser"/>
|
||||
</Button>
|
||||
</Card.Body>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment } from 'react'
|
||||
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
|
||||
import { LinkWithTextProps } from './types'
|
||||
|
||||
export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
|
||||
|
@ -11,7 +11,7 @@ export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
|
|||
{
|
||||
icon
|
||||
? <Fragment>
|
||||
<FontAwesomeIcon icon={icon} fixedWidth={true}/>
|
||||
<ForkAwesomeIcon icon={icon} fixedWidth={true}/>
|
||||
</Fragment>
|
||||
: null
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import React, { Fragment } from 'react'
|
||||
import { LinkContainer } from 'react-router-bootstrap'
|
||||
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
|
||||
import { LinkWithTextProps } from './types'
|
||||
|
||||
export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
|
||||
|
@ -11,7 +11,7 @@ export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
|
|||
{
|
||||
icon
|
||||
? <Fragment>
|
||||
<FontAwesomeIcon icon={icon} fixedWidth={true}/>
|
||||
<ForkAwesomeIcon icon={icon} fixedWidth={true}/>
|
||||
</Fragment>
|
||||
: null
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { StringMap, TOptionsBase } from 'i18next'
|
||||
import { IconProp } from '../../utils/iconProp'
|
||||
import { IconName } from '../../fork-awesome/fork-awesome-icon'
|
||||
|
||||
export interface GeneralLinkProp {
|
||||
href: string;
|
||||
icon?: IconProp;
|
||||
icon?: IconName;
|
||||
className?: string
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import { ButtonProps } from 'react-bootstrap'
|
||||
import { IconProp } from '../../utils/iconProp'
|
||||
import { IconName } from '../../fork-awesome/fork-awesome-icon'
|
||||
import { IconButton } from '../icon-button/icon-button'
|
||||
|
||||
export enum SortModeEnum {
|
||||
|
@ -9,15 +9,15 @@ export enum SortModeEnum {
|
|||
no = 0
|
||||
}
|
||||
|
||||
const getIcon = (direction: SortModeEnum): IconProp => {
|
||||
const getIcon = (direction: SortModeEnum): IconName => {
|
||||
switch (direction) {
|
||||
default:
|
||||
case SortModeEnum.no:
|
||||
return 'sort'
|
||||
case SortModeEnum.up:
|
||||
return 'sort-up'
|
||||
return 'sort-asc'
|
||||
case SortModeEnum.down:
|
||||
return 'sort-down'
|
||||
return 'sort-desc'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue