- QOL in list of companies - added scrollbar;

- QOL in list of files;
This commit is contained in:
Vitalii Kiiko
2025-03-26 17:04:23 +01:00
parent 41b0c93f47
commit eb126faf87
3 changed files with 37 additions and 17 deletions

View File

@@ -52,6 +52,12 @@
}
}
.topBar__menuCompaniesList {
max-height: 220px;
overflow-y: auto;
padding: 10px 0;
background: #f3ffeb;
}
.topBar__menuCompanyItem {
margin: 0;
padding: 0.55rem 1rem 0.75rem 1rem;
@@ -74,6 +80,12 @@
}
}
.topBar__menuCompaniesList {
.topBar__menuCompanyItem:hover {
color: var(--menuitem-active-background);
}
}
@media (max-width: 500px) {
.topBar__endContent {
flex-wrap: wrap;

View File

@@ -18,23 +18,13 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
const companies = useStore().main.companies();
const chosenCompanyId = useStore().main.chosenCompanyId()
const [companyItems, setCompanyItems] = useState([]);
const renderCompanyItem = (item) => (
<span className="topBar__menuCompanyItem"
onClick={() => switchCompany(item.companyId)}
data-id={item.companyId}
data-active={chosenCompanyId === item.companyId}>
<i className="pi pi-building-columns"></i>
{item.label}
</span>
);
const toast = useRef(null);
let items = [
{
template: (item, options) => {
template: () => {
return (
<div className="topBar__menuProfileItem">
{/*<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />*/}
<div className="userInfo">
<div className="userInfo">
<span className="userName" title={fulleName}>{fulleName}</span>
<span className="userEmail" title={userData.email}>{userData.email}</span>
</div>
@@ -59,7 +49,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
},
{
label: __('Seleziona azienda', 'gepafin'),
items: companyItems,
template: () => {
return (
<div className="p-menuitem-content" data-pc-section="content">
<ul className="topBar__menuCompaniesList">
{companyItems.map(o => o.component)}
</ul>
</div>
);
},
enable: companies.length
},
{
@@ -104,7 +102,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
const items = companies.map(o => ({
label: o.companyName,
companyId: o.id,
template: renderCompanyItem
component: <li key={o.id}>
<span className="topBar__menuCompanyItem"
onClick={() => switchCompany(o.id)}
data-id={o.id}
data-active={chosenCompanyId === o.id}>
<i className="pi pi-building-columns"></i>
{o.companyName}
</span>
</li>
}));
setCompanyItems(items);
}, [companies, chosenCompanyId])

View File

@@ -10,7 +10,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
return (
<ol className="appPageSection__list">
{files.map((o, i) => <li key={`${o.id}_${uniqid('f')}`} className="appPageSection__listItem">
{files
? files.map((o, i) => <li key={`${o.id}_${uniqid('f')}`} className="appPageSection__listItem">
<div className="appPageSection__listItemRow">
<div>{renderHtmlContent(o.label)}</div>
<div className="appPageSection__iconActions">
@@ -63,7 +64,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
justifyContent: 'space-between',
wordWrap: 'anywhere'
}}>
<span>{k.name}</span>
<div className="appPageSection__iconActions">
@@ -86,7 +88,7 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
</li>)}
</ul>
: null}
</li>)}
</li>) : null}
</ol>
)
}