- 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 {
|
||||
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;
|
||||
|
||||
@@ -18,22 +18,12 @@ 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">
|
||||
<span className="userName" title={fulleName}>{fulleName}</span>
|
||||
<span className="userEmail" title={userData.email}>{userData.email}</span>
|
||||
@@ -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])
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user