- QOL in list of companies - added scrollbar;
- QOL in list of files;
This commit is contained in:
@@ -52,6 +52,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topBar__menuCompaniesList {
|
||||||
|
max-height: 220px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: #f3ffeb;
|
||||||
|
}
|
||||||
.topBar__menuCompanyItem {
|
.topBar__menuCompanyItem {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.55rem 1rem 0.75rem 1rem;
|
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) {
|
@media (max-width: 500px) {
|
||||||
.topBar__endContent {
|
.topBar__endContent {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
@@ -18,22 +18,12 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
|
|||||||
const companies = useStore().main.companies();
|
const companies = useStore().main.companies();
|
||||||
const chosenCompanyId = useStore().main.chosenCompanyId()
|
const chosenCompanyId = useStore().main.chosenCompanyId()
|
||||||
const [companyItems, setCompanyItems] = useState([]);
|
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);
|
const toast = useRef(null);
|
||||||
let items = [
|
let items = [
|
||||||
{
|
{
|
||||||
template: (item, options) => {
|
template: () => {
|
||||||
return (
|
return (
|
||||||
<div className="topBar__menuProfileItem">
|
<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="userName" title={fulleName}>{fulleName}</span>
|
||||||
<span className="userEmail" title={userData.email}>{userData.email}</span>
|
<span className="userEmail" title={userData.email}>{userData.email}</span>
|
||||||
@@ -59,7 +49,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: __('Seleziona azienda', 'gepafin'),
|
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
|
enable: companies.length
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -104,7 +102,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
|
|||||||
const items = companies.map(o => ({
|
const items = companies.map(o => ({
|
||||||
label: o.companyName,
|
label: o.companyName,
|
||||||
companyId: o.id,
|
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);
|
setCompanyItems(items);
|
||||||
}, [companies, chosenCompanyId])
|
}, [companies, chosenCompanyId])
|
||||||
|
|||||||
@@ -10,7 +10,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ol className="appPageSection__list">
|
<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 className="appPageSection__listItemRow">
|
||||||
<div>{renderHtmlContent(o.label)}</div>
|
<div>{renderHtmlContent(o.label)}</div>
|
||||||
<div className="appPageSection__iconActions">
|
<div className="appPageSection__iconActions">
|
||||||
@@ -63,7 +64,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between'
|
justifyContent: 'space-between',
|
||||||
|
wordWrap: 'anywhere'
|
||||||
}}>
|
}}>
|
||||||
<span>{k.name}</span>
|
<span>{k.name}</span>
|
||||||
<div className="appPageSection__iconActions">
|
<div className="appPageSection__iconActions">
|
||||||
@@ -86,7 +88,7 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
|
|||||||
</li>)}
|
</li>)}
|
||||||
</ul>
|
</ul>
|
||||||
: null}
|
: null}
|
||||||
</li>)}
|
</li>) : null}
|
||||||
</ol>
|
</ol>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user