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

Add a scrollbar to the duplicate import modal #71

Merged
merged 8 commits into from
Jul 27, 2024
Merged

Add a scrollbar to the duplicate import modal #71

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7e20d4a
Add a scrollbar to the duplicate import modal
borelkoumo Jul 24, 2024
4ff29a6
Fixed issue with the type column values
borelkoumo Jul 24, 2024
c86dcbb
fix on overflow-y
borelkoumo Jul 25, 2024
a8d4da0
updated PR changelog entry
borelkoumo Jul 25, 2024
83a8e63
fix: applied review changes
borelkoumo Jul 26, 2024
465f7fe
Merge remote-tracking branch 'origin/main' into add-scrollbar-to-apos…
ETLaurent Jul 27, 2024
31a0061
fix linter
ETLaurent Jul 27, 2024
52902fb
remove z-index
ETLaurent Jul 27, 2024
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
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

## 2.3.0 (2024-07-24)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 2.3.0 (2024-07-24)
## UNRELEASED

We will set the version and the date when we will release the module

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!


### Adds

* Add a scrollbar to the duplicate import modal to handle too many duplicates, and fixed the "Type" column to display the correct document type.

## 2.2.0 (2024-07-12)

### Adds
Expand Down
61 changes: 36 additions & 25 deletions ui/apos/components/AposDuplicateImportModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,31 +21,33 @@

<div class="apos-import-duplicate__section">
<table class="apos-table">
<thead>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

<tr>
<th class="apos-table__header">
<AposButton
class="apos-toggle"
:class="{ 'apos-toggle--blank': !checked.length }"
data-apos-test="contextMenuTrigger"
type="quiet"
:text-color="checkboxIconColor"
:icon="checkboxIcon"
:icon-only="true"
:icon-size="10"
@click.stop="toggle"
/>
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:title') }}
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:type') }}
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:lastEdited') }}
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="apos-table__header">
<AposButton
class="apos-toggle"
:class="{ 'apos-toggle--blank': !checked.length }"
data-apos-test="contextMenuTrigger"
type="quiet"
:text-color="checkboxIconColor"
:icon="checkboxIcon"
:icon-only="true"
:icon-size="10"
@click.stop="toggle"
/>
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:title') }}
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:type') }}
</th>
<th class="apos-table__header">
{{ $t('aposImportExport:lastEdited') }}
</th>
</tr>
<tr
v-for="doc in duplicatedDocs"
:key="doc.aposDocId"
Expand Down Expand Up @@ -243,7 +245,7 @@ export default {
: this.duplicatedDocs.map(({ aposDocId }) => aposDocId);
},
docLabel(doc) {
const moduleOptions = apos.modules[this.type];
const moduleOptions = apos.modules[doc.type];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes! 👌

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks


return moduleOptions?.label
? this.$t(moduleOptions?.label)
Expand Down Expand Up @@ -323,6 +325,15 @@ export default {
display: flex;
flex-direction: column;
align-items: baseline;
max-height: 50vh;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
max-height: 50vh;
max-height: 210px;

In order to keep the same max-height as the related types modal

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change done!

overflow-y: auto;
}

.apos-import-duplicate__section thead {
position: sticky;
top: 0;
z-index: 1;
backgroud-color: var(--a-base-10);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
position: sticky;
top: 0;
z-index: 1;
backgroud-color: var(--a-base-10);
position: sticky;
top: 0;
background-color: var(--a-background-primary);
  • sticky, good stuff.
  • no need for z-index it appears
  • please change background color to white (var(--a-background-primary)) and fix typo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOne!

}

.apos-import-duplicate__section .apos-table__header {
Expand Down