github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-22 01:36:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

better support for rtl languages (#170)

Browse source 
* set text direction on language load and change to rtl if arabic is chosen

see https://www.w3schools.com/tags/att_global_dir.asp

* minor fixes to make rtl-mode look good:
- margins not only on the right, but on both sides
- fix bootstrap ToggleButtonGroup to always be ltr

* removed console.log statements

* fixed margin on the name in the user-avatar

* '$Icon CodiMD' on the intro page now always uses ftr text direction, since we don't translate the same of the software

* fixed import

* removed setHTMLDirection function

* added toplevel div with dir='auto'
some elements got dir='auto' if they contain potentially not translated or intended english text

* added text-align: start to the user-dropdown

* moved toplevel dir='auto'

* moved shortenLanguageCode to language-picker

* Changed mr-2 to mx-2 for profile buttons

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Philip Molares 2020-06-08 23:49:14 +02:00 committed by GitHub
parent 235b24b49c
commit 7794538c6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -17,6 +17,6 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" dir="auto"></div>
</body>
</html>

4
src/components/common/links/external-link.tsx
View file

@ -8,7 +8,9 @@ export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, cl
<a href={href}
target="_blank"
rel="noopener noreferrer"
className={className}>
className={className}
dir='auto'
>
<ShowIf condition={!!icon}>
<ForkAwesomeIcon icon={icon as IconName} fixedWidth={true}/>&nbsp;
</ShowIf>

2
src/components/common/pagination/pager-pagination.tsx
View file

@ -58,7 +58,7 @@ export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtons
})
return (
<Pagination>
<Pagination dir='ltr'>
<ShowIf condition={correctedLowerPageIndex > 0}>
<PagerItem key={0} index={0} onClick={setPageIndex}/>
<Pagination.Ellipsis disabled/>

5
src/components/landing/layout/footer/language-picker.tsx
View file

@ -7,8 +7,9 @@ const LanguagePicker: React.FC = () => {
const { i18n } = useTranslation()
const onChangeLang = async (event: React.ChangeEvent<HTMLSelectElement>) => {
moment.locale(event.currentTarget.value)
await i18n.changeLanguage(event.currentTarget.value)
const language = event.currentTarget.value
moment.locale(language)
await i18n.changeLanguage(language)
}
const shortenLanguageCode = (language: string): string => {

4
src/components/landing/layout/navigation/header-bar/header-bar.tsx
View file

@ -27,13 +27,13 @@ const HeaderBar: React.FC = () => {
<div className="d-inline-flex">
{!user
? <Fragment>
<span className={'mr-1 d-flex'}>
<span className={'mx-1 d-flex'}>
<NewGuestNoteButton/>
</span>
<SignInButton size="sm"/>
</Fragment>
: <Fragment>
<span className={'mr-1 d-flex'}>
<span className={'mx-1 d-flex'}>
<NewUserNoteButton/>
</span>
<UserDropdown/>

2
src/components/landing/layout/navigation/new-guest-note-button.tsx
View file

@ -12,7 +12,7 @@ export const NewGuestNoteButton: React.FC = () => {
variant="primary"
size="sm"
className="d-inline-flex align-items-center">
<ForkAwesomeIcon icon="plus" className="mr-1"/>
<ForkAwesomeIcon icon="plus" className="mx-1"/>
<span>
<Trans i18nKey='landing.navigation.newGuestNote'/>
</span>

2
src/components/landing/layout/navigation/new-user-note-button.tsx
View file

@ -12,7 +12,7 @@ export const NewUserNoteButton: React.FC = () => {
variant="primary"
size="sm"
className="d-inline-flex align-items-center">
<ForkAwesomeIcon icon="plus" className="mr-1"/>
<ForkAwesomeIcon icon="plus" className="mx-1"/>
<span>
<Trans i18nKey='landing.navigation.newNote'/>
</span>

14
src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx
View file

@ -22,24 +22,24 @@ export const UserDropdown: React.FC = () => {
<UserAvatar name={user.name} photo={user.photo}/>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Menu className='text-start'>
<LinkContainer to={'/features'}>
<Dropdown.Item>
<ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mr-2"/>
<Dropdown.Item dir='auto'>
<ForkAwesomeIcon icon="bolt" fixedWidth={true} className="mx-2"/>
<Trans i18nKey="editor.help.documents.features"/>
</Dropdown.Item>
</LinkContainer>
<LinkContainer to={'/profile'}>
<Dropdown.Item>
<ForkAwesomeIcon icon="user" fixedWidth={true} className="mr-2"/>
<Dropdown.Item dir='auto'>
<ForkAwesomeIcon icon="user" fixedWidth={true} className="mx-2"/>
<Trans i18nKey="profile.userProfile"/>
</Dropdown.Item>
</LinkContainer>
<Dropdown.Item
<Dropdown.Item dir='auto'
onClick={() => {
clearUser()
}}>
<ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mr-2"/>
<ForkAwesomeIcon icon="sign-out" fixedWidth={true} className="mx-2"/>
<Trans i18nKey="login.signOut"/>
</Dropdown.Item>
</Dropdown.Menu>

2
src/components/landing/layout/user-avatar/user-avatar.tsx
View file

@ -16,7 +16,7 @@ const UserAvatar: React.FC<UserAvatarProps> = ({ name, photo, additionalClasses
className="user-avatar"
alt={`Avatar of ${name}`}
/>
<span className="ml-1 user-name">{name}</span>
<span className="mx-1 user-name">{name}</span>
</span>
)
}

2
src/components/landing/pages/history/history-toolbar/history-toolbar.tsx
View file

@ -114,7 +114,7 @@ export const HistoryToolbar: React.FC<HistoryToolbarProps> = ({ onSettingsChange
</Button>
</InputGroup>
<InputGroup className={'mr-1 mb-1'}>
<ToggleButtonGroup type="radio" name="options" value={state.viewState} className={'button-height'}
<ToggleButtonGroup type="radio" name="options" dir='ltr' value={state.viewState} className={'button-height'}
onChange={(newViewState: ViewStateEnum) => {
toggleViewChanged(newViewState)
}}>

2
src/components/landing/pages/intro/intro.tsx
View file

@ -10,7 +10,7 @@ const Intro: React.FC = () => {
return (
<div>
<h1>
<h1 dir='auto'>
<ForkAwesomeIcon icon="file-text"/> CodiMD
</h1>
<p className="lead mb-5">

6
src/components/landing/pages/profile/settings/profile-account-management.tsx
View file

@ -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">
<ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mr-2"/>
<ForkAwesomeIcon icon="cloud-download" fixedWidth={true} className="mx-2"/>
<Trans i18nKey="profile.exportUserData"/>
</Button>
<Button variant="danger" block onClick={handleModalOpen}>
<ForkAwesomeIcon icon="trash" fixedWidth={true} className="mr-2"/>
<ForkAwesomeIcon icon="trash" fixedWidth={true} className="mx-2"/>
<Trans i18nKey="profile.deleteUser"/>
</Button>
</Card.Body>
@ -70,7 +70,7 @@ export const ProfileAccountManagement: React.FC = () => {
<Modal show={showDeleteModal} onHide={handleModalClose} animation={true}>
<Modal.Body className="text-dark">
<h3><Trans i18nKey="profile.modal.deleteUser.message"/></h3>
<h3 dir="auto"><Trans i18nKey="profile.modal.deleteUser.message"/></h3>
<Trans i18nKey="profile.modal.deleteUser.subMessage"/>
</Modal.Body>
<Modal.Footer>

4
src/global-style/index.scss
View file

@ -23,3 +23,7 @@ body {
.fa.fa-fix-line-height {
line-height: inherit;
}
.text-start {
text-align: start;
}