Skip to content

Commit

Permalink
update repo browser styling
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandria.gomez authored and alexandria.gomez committed Aug 14, 2023
1 parent 2a074ab commit 5625062
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 70 deletions.
2 changes: 1 addition & 1 deletion src/extensions/savetoLaserfiche/GetDocumentDataDialog.tsx
View file
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
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
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
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
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

0 comments on commit 5625062

Please sign in to comment.