mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-06-03 16:38:50 -04:00
Restructure editor user interface (#399)
* Replaced connection indicator in editor top bar with user-menu * Added basic layout of bottom document bar * Fixed margins between elements * Reorganized document-bar * Added dividers into toolbar * Move files from task-bar to document-bar and remove test file * moved connection-indicator components into its own folder * moved document bar to the top * moved connection-indicator once again * Change design Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * New idea for timestamps Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add css Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Revert "Add css" This reverts commit 6780aa05 Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Revert "New idea for timestamps" This reverts commit bf2891e1 Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * split import / export * Made version input field to a common component * added read-only modal added document-time added placeholder text for permissions * remove flex-nowrap from editor toolbar Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add codimd permission menu Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Move permission picker to the right Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * add use memo Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add user-select-none to documenttime component Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * added status-bar * fixed status-bar * Add document info mock Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * changed published to share in i18n * reordered document bar moved share modal in it's own component * changed the divider color in the toolbar * Add details to document info Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add pin mock button Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Restructure toolbar after rebase and extract EmojiPicker+Button into component Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Correct linue number output Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add some space into status bar Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Cleanup code to make ESLint happy * Fix Toc button position * Added link to presentation mode button * Cache codemirror props Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix code blocks not being completely visible * Improve document info modal - The document info timeline always wrapped the received moment.js-object into a new moment.js object instead of directly using the given one. - The timestamps were configured to be displayed without suffix, but this is necessary to support valid translation grammar. - There was no margin between the icons and the texts. * Highlighted user name in document-info modal * Add avatar icon to document-info modal * Improved english translation of the share-info * Improve performance of copyable-fields by using useCallback * Add translation keys for pin-to-history button * Forwarded note title to editor-menu for deletion modal info * Add placeholders to translations Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * change translation Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Change permission dropdown to permission button Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix translations of emoji-picker and preferences * remove unused imports Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add alt attribute Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix share button and i18n files Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix use of i18n keys Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Use modal-body Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * useCallback Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Use more specific i18n key Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Add a new entry and move i18n key for usercontribution Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Fix i18nkey für shareLink Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * remove unused i18nkey Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Rename component DocumentInfo to DocumentInfoButton Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Extract revision button code into own component Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * wrap buttons in navbar-nav Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * organize imports Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * organize imports Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Added editor-preferences modal * Added functionality to preferences modal * Activated search and replace feature in CodeMirror * pdf export unavailability notice (#403) * added pdf export unavailability notice with link to FAQ as many users ask all the time why this was removed and when they'll get it back, this seemed like a fine solution in the meantime. Co-authored-by: Erik Michelson <github@erik.michelson.eu> * Refactored editor-preferences to just use one generic select component * Fixed warnings regarding duplicated controlId and missing useCb-deps * Reorganized translation keys * Fixed i18n indentation for POEditor.com * Added translation key for 'avatar of ...' * Remove fragment Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Use user-avatar in document-info-line.tsx Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Revert changes in user-avatar and solve the problem otherwise Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Removed unnecessary import * Removed another unnecessary import * Refactored EditorPreferenceSelect to use enum and automatic type conversions * Remove unused CodeMirror reference * Fix spacing problem Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Increate size of image Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * fixed share-link's space around the copyable-field Co-authored-by: Philip Molares <philip.molares@udo.edu> Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Philip Molares <git@molar.es>
This commit is contained in:
Erik Michelson
GitHub
parent
62e870828c
commit
8377722e1a
69 changed files with 993 additions and 334 deletions
|
|
@ -1,17 +1,25 @@
|
|||
import React from 'react'
|
||||
import { Button, Nav, Navbar } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { useParams } from 'react-router'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ApplicationState } from '../../../redux'
|
||||
import { Branding } from '../../common/branding/branding'
|
||||
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
|
||||
import { ConnectionIndicator } from './connection-indicator'
|
||||
import { ShowIf } from '../../common/show-if/show-if'
|
||||
import { SignInButton } from '../../landing/layout/navigation/sign-in-button'
|
||||
import { UserDropdown } from '../../landing/layout/navigation/user-dropdown/user-dropdown'
|
||||
import { EditorPathParams } from '../editor'
|
||||
import { DarkModeButton } from './dark-mode-button'
|
||||
import { EditorMenu } from './editor-menu'
|
||||
import { EditorViewMode } from './editor-view-mode'
|
||||
import { HelpButton } from './help-button'
|
||||
|
||||
const TaskBar: React.FC = () => {
|
||||
useTranslation()
|
||||
export const TaskBar: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams<EditorPathParams>()
|
||||
const user = useSelector((state: ApplicationState) => state.user)
|
||||
|
||||
return (
|
||||
<Navbar bg={'light'}>
|
||||
<Nav className="mr-auto d-flex align-items-center">
|
||||
|
|
@ -24,24 +32,24 @@ const TaskBar: React.FC = () => {
|
|||
</Navbar.Brand>
|
||||
<EditorViewMode/>
|
||||
<DarkModeButton/>
|
||||
<Link to={`/p/${id}`} target='_blank'>
|
||||
<Button title={t('editor.documentBar.slideMode')} className="ml-2 text-secondary" size="sm" variant="outline-light">
|
||||
<ForkAwesomeIcon icon="television"/>
|
||||
</Button>
|
||||
</Link>
|
||||
<HelpButton/>
|
||||
</Nav>
|
||||
<Nav className="d-flex align-items-center text-secondary">
|
||||
<Button className="ml-2 text-secondary" size="sm" variant="outline-light">
|
||||
<ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.menu.new"/>
|
||||
<Button className="mx-2" size="sm" variant="primary">
|
||||
<ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.documentBar.new"/>
|
||||
</Button>
|
||||
<Button className="ml-2 text-secondary" size="sm" variant="outline-light">
|
||||
<ForkAwesomeIcon icon="share-square-o"/> <Trans i18nKey="editor.menu.publish"/>
|
||||
</Button>
|
||||
<div className="text-secondary">
|
||||
<EditorMenu/>
|
||||
</div>
|
||||
<div className="mr-2">
|
||||
<ConnectionIndicator/>
|
||||
</div>
|
||||
<ShowIf condition={!user}>
|
||||
<SignInButton size={'sm'} />
|
||||
</ShowIf>
|
||||
<ShowIf condition={!!user}>
|
||||
<UserDropdown />
|
||||
</ShowIf>
|
||||
</Nav>
|
||||
</Navbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { TaskBar }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue