nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modalheader

Browse Source
This commit is contained in:
nils
2025-10-31 13:19:39 +01:00
parent 321b0d84ae
commit 3af656b09f
3 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/useManagementModals.js
+23 -12
View File
@@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import TagsPanel from '../tags/TagsPanel'; import TagsPanel from '../tags/TagsPanel';
import CorrespondentsPanel from '../correspondents/CorrespondentsPanel'; import CorrespondentsPanel from '../correspondents/CorrespondentsPanel';
import PanelHeader from '../ui/PanelHeader';
const TAGS_MODAL = 'tags'; const TAGS_MODAL = 'tags';
const CORRESPONDENTS_MODAL = 'correspondents'; const CORRESPONDENTS_MODAL = 'correspondents';
@@ -63,12 +64,17 @@ export const useManagementModals = ({
aria-labelledby="tags-modal-title" aria-labelledby="tags-modal-title"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >
<div className="panel-modal__header"> <PanelHeader
<h3 id="tags-modal-title">Manage Tags</h3> className="panel-modal__header"
<button type="button" className="secondary" onClick={closeActiveModal}> title="Manage Tags"
Close titleTag="h3"
</button> titleProps={{ id: 'tags-modal-title' }}
</div> actions={(
<button type="button" className="secondary" onClick={closeActiveModal}>
Close
</button>
)}
/>
<div className="panel-modal__body"> <div className="panel-modal__body">
<TagsPanel <TagsPanel
tags={tags} tags={tags}
@@ -110,12 +116,17 @@ export const useManagementModals = ({
aria-labelledby="correspondents-modal-title" aria-labelledby="correspondents-modal-title"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >
<div className="panel-modal__header"> <PanelHeader
<h3 id="correspondents-modal-title">Manage Correspondents</h3> className="panel-modal__header"
<button type="button" className="secondary" onClick={closeActiveModal}> title="Manage Correspondents"
Close titleTag="h3"
</button> titleProps={{ id: 'correspondents-modal-title' }}
</div> actions={(
<button type="button" className="secondary" onClick={closeActiveModal}>
Close
</button>
)}
/>
<div className="panel-modal__body"> <div className="panel-modal__body">
<CorrespondentsPanel <CorrespondentsPanel
correspondents={correspondents} correspondents={correspondents}
frontend/src/settings/SettingsModal.jsx
+12 -6
View File
@@ -1,4 +1,5 @@
import React, { useMemo, useState, useCallback, useEffect } from 'react'; import React, { useMemo, useState, useCallback, useEffect } from 'react';
import PanelHeader from '../ui/PanelHeader';
const SECTIONS = [ const SECTIONS = [
{ {
@@ -407,12 +408,17 @@ const SettingsModal = ({
aria-labelledby="settings-modal-title" aria-labelledby="settings-modal-title"
onClick={handleInnerClick} onClick={handleInnerClick}
> >
<div className="panel-modal__header"> <PanelHeader
<h3 id="settings-modal-title">Settings</h3> className="panel-modal__header"
<button type="button" className="secondary" onClick={onClose}> title="Settings"
Close titleTag="h3"
</button> titleProps={{ id: 'settings-modal-title' }}
</div> actions={(
<button type="button" className="secondary" onClick={onClose}>
Close
</button>
)}
/>
<div className="settings-modal__body"> <div className="settings-modal__body">
<nav className="settings-modal__sidebar" aria-label="Settings sections"> <nav className="settings-modal__sidebar" aria-label="Settings sections">
<ul> <ul>
frontend/src/styles.css
+1 -4
View File
@@ -2828,10 +2828,7 @@ form.inline {
} }
.panel-modal__header { .panel-modal__header {
display: flex; padding: 1rem 1rem 1rem 0.5rem;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }