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

fix(frontend): improves UI/UX of aliases modal

Browse source 
Signed-off-by: yamashush <38120991+yamashush@users.noreply.github.com>
This commit is contained in:
yamashush 2024-01-12 19:51:14 +09:00 committed by Erik Michelson
parent f56abf74e0
commit c5d8341c45
6 changed files with 57 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/locales/en.json
View file

@ -441,6 +441,7 @@
"addAlias": "Add alias",
"makePrimary": "Mark this alias as primary",
"isPrimary": "This is the primary alias",
"primaryLabel": "Primary Alias",
"removeAlias": "Remove this alias",
"errorAddingAlias": "The chosen alias can not be added to this note",
"errorRemovingAlias": "There was an error removing the alias",

4
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-add-form.spec.tsx.snap
View file

@ -14,13 +14,13 @@ exports[`AliasesAddForm renders the input form 1`] = `
value=""
/>
<button
class="text-secondary ms-2 btn btn-light"
class="ms-2 btn btn-primary"
data-testid="addAliasButton"
disabled=""
title="editor.modal.aliases.addAlias"
type="submit"
>
BootstrapIconMock_Plus
BootstrapIconMock_PlusLg
</button>
</div>
</form>

62
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-list-entry.spec.tsx.snap
View file

@ -1,23 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AliasesListEntry disables button in AliasesListEntry if it's not primary 1`] = `
exports[`AliasesListEntry adds aliasPrimaryBadge & removes aliasButtonMakePrimary in AliasesListEntry if it's primary 1`] = `
<div>
<li
class="list-group-item d-flex flex-row justify-content-between align-items-center"
>
<div>
test-primary
<span
class="ms-2 badge bg-secondary"
data-testid="aliasPrimaryBadge"
title="editor.modal.aliases.isPrimary"
>
editor.modal.aliases.primaryLabel
</span>
</div>
<div>
<button
class="me-2 btn btn-light"
data-testid="aliasButtonMakePrimary"
disabled=""
title="editor.modal.aliases.makePrimary"
type="button"
>
BootstrapIconMock_StarFill
</button>
<button
class="text-danger btn btn-light"
class="btn btn-danger"
data-testid="aliasButtonRemove"
disabled=""
title="editor.modal.aliases.removeAlias"
@ -30,24 +30,26 @@ exports[`AliasesListEntry disables button in AliasesListEntry if it's not primar
</div>
`;
exports[`AliasesListEntry disables button in AliasesListEntry if it's primary 1`] = `
exports[`AliasesListEntry removes aliasPrimaryBadge & adds aliasButtonMakePrimary in AliasesListEntry if it's not primary 1`] = `
<div>
<li
class="list-group-item d-flex flex-row justify-content-between align-items-center"
>
<div>
test-primary
</div>
<div>
<button
class="me-2 text-warning btn btn-light"
data-testid="aliasIsPrimary"
class="me-2 btn btn-secondary"
data-testid="aliasButtonMakePrimary"
disabled=""
title="editor.modal.aliases.isPrimary"
title="editor.modal.aliases.makePrimary"
type="button"
>
BootstrapIconMock_Star
</button>
<button
class="text-danger btn btn-light"
class="btn btn-danger"
data-testid="aliasButtonRemove"
disabled=""
title="editor.modal.aliases.removeAlias"
@ -65,18 +67,20 @@ exports[`AliasesListEntry renders an AliasesListEntry that is not primary 1`] =
<li
class="list-group-item d-flex flex-row justify-content-between align-items-center"
>
<div>
test-non-primary
</div>
<div>
<button
class="me-2 btn btn-light"
class="me-2 btn btn-secondary"
data-testid="aliasButtonMakePrimary"
title="editor.modal.aliases.makePrimary"
type="button"
>
BootstrapIconMock_StarFill
BootstrapIconMock_Star
</button>
<button
class="text-danger btn btn-light"
class="btn btn-danger"
data-testid="aliasButtonRemove"
title="editor.modal.aliases.removeAlias"
type="button"
@ -93,19 +97,19 @@ exports[`AliasesListEntry renders an AliasesListEntry that is primary 1`] = `
<li
class="list-group-item d-flex flex-row justify-content-between align-items-center"
>
<div>
test-primary
<span
class="ms-2 badge bg-secondary"
data-testid="aliasPrimaryBadge"
title="editor.modal.aliases.isPrimary"
>
editor.modal.aliases.primaryLabel
</span>
</div>
<div>
<button
class="me-2 text-warning btn btn-light"
data-testid="aliasIsPrimary"
disabled=""
title="editor.modal.aliases.isPrimary"
type="button"
>
BootstrapIconMock_Star
</button>
<button
class="text-danger btn btn-light"
class="btn btn-danger"
data-testid="aliasButtonRemove"
title="editor.modal.aliases.removeAlias"
type="button"

6
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-add-form.tsx
View file

@ -15,7 +15,7 @@ import { useUiNotifications } from '../../../../../notifications/ui-notification
import type { FormEvent } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { Button, Form, InputGroup } from 'react-bootstrap'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { PlusLg as IconPlus } from 'react-bootstrap-icons'
const validAliasRegex = /^[a-z0-9_-]*$/
@ -66,8 +66,8 @@ export const AliasesAddForm: React.FC = () => {
/>
<Button
type={'submit'}
variant='light'
className={'text-secondary ms-2'}
variant='primary'
className={'ms-2'}
disabled={!isOwner || !newAliasValid || newAlias === ''}
title={addAliasText}
{...testId('addAliasButton')}>

4
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.spec.tsx
View file

@ -53,7 +53,7 @@ describe('AliasesListEntry', () => {
expect(NoteDetailsReduxModule.updateMetadata).toBeCalled()
})
it("disables button in AliasesListEntry if it's primary", () => {
it("adds aliasPrimaryBadge & removes aliasButtonMakePrimary in AliasesListEntry if it's primary", () => {
mockNotePermissions('test2', 'test')
const testAlias: Alias = {
name: 'test-primary',
@ -89,7 +89,7 @@ describe('AliasesListEntry', () => {
expect(NoteDetailsReduxModule.updateMetadata).toBeCalled()
})
it("disables button in AliasesListEntry if it's not primary", () => {
it("removes aliasPrimaryBadge & adds aliasButtonMakePrimary in AliasesListEntry if it's not primary", () => {
mockNotePermissions('test2', 'test')
const testAlias: Alias = {
name: 'test-primary',

27
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
View file

@ -12,9 +12,10 @@ import { testId } from '../../../../../../utils/test-id'
import { UiIcon } from '../../../../../common/icons/ui-icon'
import { useUiNotifications } from '../../../../../notifications/ui-notification-boundary'
import React, { useCallback } from 'react'
import { Badge } from 'react-bootstrap'
import { Button } from 'react-bootstrap'
import { Star as IconStar, StarFill as IconStarFill, X as IconX } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
import { Star as IconStar, X as IconX } from 'react-bootstrap-icons'
import { useTranslation, Trans } from 'react-i18next'
export interface AliasesListEntryProps {
alias: Alias
@ -48,32 +49,28 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
return (
<li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
{alias.name}
<div>
{alias.name}
{alias.primaryAlias && (
<Button
className={'me-2 text-warning'}
variant='light'
disabled={true}
title={isPrimaryText}
{...testId('aliasIsPrimary')}>
<UiIcon icon={IconStar} />
</Button>
<Badge bg='secondary' className={'ms-2'} title={isPrimaryText} {...testId('aliasPrimaryBadge')}>
<Trans i18nKey={'editor.modal.aliases.primaryLabel'}></Trans>
</Badge>
)}
</div>
<div>
{!alias.primaryAlias && (
<Button
className={'me-2'}
variant='light'
variant='secondary'
disabled={!isOwner}
title={makePrimaryText}
onClick={onMakePrimaryClick}
{...testId('aliasButtonMakePrimary')}>
<UiIcon icon={IconStarFill} />
<UiIcon icon={IconStar} />
</Button>
)}
<Button
variant='light'
className={'text-danger'}
variant='danger'
disabled={!isOwner}
title={removeAliasText}
onClick={onRemoveClick}