Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update repo browser styling #23

Merged
merged 1 commit into from
Aug 15, 2023
Merged

update repo browser styling #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -455,7 +455,7 @@ function GetDocumentDialogData(props: {
width='30'
height='30'
/>
<p className={styles.dialogTitle}>Laserfiche</p>
<span>Laserfiche</span>
</div>

<button
Expand Down
2 changes: 1 addition & 1 deletion src/extensions/savetoLaserfiche/SaveToLaserficheDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ function SaveToLaserficheDialog(props: {
width='30'
height='30'
/>
<p className={styles.dialogTitle}>Laserfiche</p>
<span>Laserfiche</span>
</div>

<button
Expand Down
8 changes: 2 additions & 6 deletions src/extensions/savetoLaserfiche/SendToLaserFiche.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

/* automatically accommodates for padding */
box-sizing: border-box;
height: 55px;
height: 60px;
/* 50px - padding */
line-height: 24px;
align-items: center;
Expand Down Expand Up @@ -71,7 +71,7 @@

/* automatically accommodates for padding */
box-sizing: border-box;
height: 55px;
height: 60px;
/* 50px - padding */
line-height: 30px;
}
Expand All @@ -94,7 +94,3 @@
align-items: center;
justify-content: center;
}

.dialogTitle {
padding-left: 10px;
}
95 changes: 95 additions & 0 deletions ...webparts/laserficheAdminConfiguration/components/LaserficheAdminConfiguration.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,98 @@ table td {
vertical-align: middle;
}
}

lf-repository-browser {
height: 500px;
}

.wrapper {
display: flex;
flex-direction: column;
max-height: calc(100vh - 50px);
min-width: 500px;
}

.header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
min-height: var(--header-min-height, 50px);
color: #606060;
background-color: #fafafa;
/* default is the standard padding, but expose variables
in case contents have additional padding */
padding-top: var(--header-padding-top, 13px);
padding-bottom: var(--header-padding-bottom, 13px);
padding-left: var(--header-padding-left, 20px);
padding-right: var(--header-padding-right, 20px);

/* automatically accommodates for padding */
box-sizing: border-box;
height: 60px;
/* 50px - padding */
line-height: 24px;
align-items: center;
}

.contentBox {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 400;
box-sizing: border-box;
overflow: auto;
background-color: #fafafa;
min-height: 80px;
/* default is the standard padding, but expose variables
in case contents have additional padding */
padding-top: var(--content-padding-top, 20px);
padding-bottom: var(--content-padding-bottom, 10px);
padding-left: var(--content-padding-left, 20px);
padding-right: var(--content-padding-right, 20px);
max-height: calc(100vh - var(--header-min-height) - var(--footer-min-height));
}

.footer {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
min-height: var(--footer-min-height, 50px);
border-top: 1px solid #e0e0e0;
background-color: #fafafa;
/* default is the standard padding, but expose variables
in case contents have additional padding */
padding-top: var(--footer-padding-top, 10px);
padding-bottom: var(--footer-padding-bottom, 10px);
padding-left: var(--footer-padding-left, 20px);
padding-right: var(--footer-padding-right, 20px);

/* automatically accommodates for padding */
box-sizing: border-box;
height: 60px;
/* 50px - padding */
line-height: 30px;
}

.lfCloseButton {
cursor: pointer;
display: flex;
height: 24px;
width: 24px;
align-items: center;
border: none;
background: inherit;
justify-content: center;
color: #646464;
}

.logoHeader {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
109 changes: 47 additions & 62 deletions src/webparts/laserficheAdminConfiguration/components/ProfileConfigurationComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,7 @@ export function ConfigurationBody(props: {
/>
</div>
<div className='col-sm-2' id='folderModal' style={{ marginTop: '2px' }}>
<button
className='lf-button sec-button'
onClick={openFolderModal}
>
<button className='lf-button sec-button' onClick={openFolderModal}>
Browse
</button>
</div>
Expand Down Expand Up @@ -313,64 +310,51 @@ export function RepositoryBrowserModal(props: {

return (
<>
<div className='modal-dialog modal-dialog-centered'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='ModalLabel'>
Select folder for saving to Laserfiche
</h5>
<button
type='button'
className='close'
data-dismiss='modal'
aria-label='Close'
onClick={props.CloseFolderBrowserUp}
>
<span aria-hidden='true'>&times;</span>
</button>
</div>
<div className='modal-body'>
<div
className='lf-folder-browser-sample-container'
style={{ height: '400px' }}
>
<div className='repository-browser'>
<lf-repository-browser
ref={repositoryBrowser}
ok_button_text='Okay'
cancel_button_text='Cancel'
multiple='false'
style={{ height: '420px' }}
isSelectable={isNodeSelectable}
/>
<div className='repository-browser-button-containers'>
<span>
<button
className='lf-button primary-button'
onClick={onOpenNode}
hidden={!shouldShowOpen}
>
OPEN
</button>
<button
className='lf-button primary-button'
onClick={onSelectFolder}
hidden={!shouldShowSelect}
disabled={shouldDisableSelect}
>
Select
</button>
<button
className='sec-button lf-button margin-left-button'
onClick={props.CloseFolderBrowserUp}
>
CANCEL
</button>
</span>
</div>
</div>
</div>
<div className={styles.wrapper}>
<div className={styles.header}>
<div className={styles.logoHeader}>
<div>Select folder</div>
</div>

<button
className={styles.lfCloseButton}
title='close'
onClick={props.CloseFolderBrowserUp}
>
<span className='material-icons-outlined'> close </span>
</button>
</div>

<div className={styles.contentBox}>
<lf-repository-browser
ref={repositoryBrowser}
multiple='false'
isSelectable={isNodeSelectable}
/>
</div>

<div className={styles.footer}>
<button
className={`lf-button primary-button`}
onClick={onOpenNode}
hidden={!shouldShowOpen}
>
Open
</button>
<button
className='lf-button primary-button'
onClick={onSelectFolder}
hidden={!shouldShowSelect}
disabled={shouldDisableSelect}
>
Select
</button>
<button
className={`sec-button lf-button ${styles.marginLeftButton}`}
onClick={props.CloseFolderBrowserUp}
>
Cancel
</button>
</div>
</div>
</>
Expand Down Expand Up @@ -710,7 +694,8 @@ function getMappingErrorMessage(
>
SharePoint field type of {spFieldtype} cannot be mapped with
Laserfiche field type of {lfFieldtype}
<span className='material-icons-outlined'>warning</span>Data types mismatch
<span className='material-icons-outlined'>warning</span>Data types
mismatch
</div>
);
} else {
Expand Down
Loading