Skip to content

Commit

Permalink
Set up custom primevue theme (#921)
Browse files Browse the repository at this point in the history
* Add a custom preset primevue theme

Update custom primevue theme

Update custom primevue theme

change transitionDuration to 0.05s

Fix padding diff between header and body cell

* Add hover effect for checkbox

---------

Co-authored-by: Matthew Evans <7916000+ml-evs@users.noreply.github.com>
  • Loading branch information
BenjaminCharmes and ml-evs authored Oct 15, 2024
1 parent 2f3dfb2 commit 83f52b7
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 57 deletions.
74 changes: 24 additions & 50 deletions webapp/src/components/DynamicDataTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,15 @@ export default {
if (event.originalEvent.target.classList.contains("checkbox")) {
return null;
} else if (event.originalEvent.target.classList.contains("p-checkbox-input")) {
const selectedIndex = this.itemsSelected.findIndex((item) => item.item_id === row.item_id);
if (selectedIndex === -1) {
this.itemsSelected.push(row);
} else {
this.itemsSelected.splice(selectedIndex, 1);
}
return null;
}
if (
Expand Down Expand Up @@ -314,7 +323,11 @@ export default {
return false;
}
return visibleItems.every((currentItem) =>
this.itemsSelected.some((selectedItem) => selectedItem.item_id === currentItem.item_id),
this.itemsSelected.some(
(selectedItem) =>
(selectedItem.item_id || selectedItem.collection_id) ===
(currentItem.item_id || currentItem.collection_id),
),
);
},
onFilter(event) {
Expand All @@ -326,15 +339,21 @@ export default {
const itemsToSelect = this.getVisibleItems();
if (this.allSelected) {
const selectedIds = new Set(this.itemsSelected.map((item) => item.item_id));
const selectedIds = new Set(
this.itemsSelected.map((item) => item.item_id || item.collection_id),
);
itemsToSelect.forEach((item) => {
if (!selectedIds.has(item.item_id)) {
if (!selectedIds.has(item.item_id || item.collection_id)) {
this.itemsSelected.push(item);
}
});
} else {
const idsToRemove = new Set(itemsToSelect.map((item) => item.item_id));
this.itemsSelected = this.itemsSelected.filter((item) => !idsToRemove.has(item.item_id));
const idsToRemove = new Set(
itemsToSelect.map((item) => item.item_id || item.collection_id),
);
this.itemsSelected = this.itemsSelected.filter(
(item) => !idsToRemove.has(item.item_id || item.collection_id),
);
}
},
deleteSelectedItems() {
Expand All @@ -351,48 +370,3 @@ export default {
},
};
</script>

<style scoped>
:deep .p-datatable-column-header-content .p-datatable-sort-icon {
visibility: hidden !important;
}
:deep
.p-datatable-column-header-content[data-pc-section="columnheadercontent"]
.p-datatable-sort-icon[sorted="true"] {
visibility: visible !important;
}
:deep .p-datatable-header-cell:hover .p-datatable-column-header-content .p-datatable-sort-icon {
visibility: visible !important;
}
:deep .p-datatable .p-datatable-tbody > tr > td {
min-width: 1em;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:deep .p-datatable .p-datatable-thead > tr > th {
min-width: 1em;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:deep .p-datatable-header-cell.filter-active svg {
color: #10b981;
}
:deep .p-datatable-header-cell.filter-active {
color: #047857;
}
:deep .p-datatable-thead th {
padding: 0.5rem !important;
}
:deep .p-datatable-tbody tr td {
padding: 0.5rem !important;
}
</style>
9 changes: 2 additions & 7 deletions webapp/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,20 +118,15 @@ import "vue-select/dist/vue-select.css";

// import "primevue";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";
import DatalabPreset from "./primevue-theme-preset.js";

const app = createApp(App);

app
.use(store)
.use(router)
.use(PrimeVue, {
theme: {
preset: Aura,
options: {
darkModeSelector: "none",
},
},
theme: DatalabPreset,
})
.component("font-awesome-icon", FontAwesomeIcon)
.component("editor", Editor)
Expand Down
67 changes: 67 additions & 0 deletions webapp/src/primevue-theme-preset.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import Aura from "@primevue/themes/aura";
import { definePreset } from "@primevue/themes";

const DatalabPreset = definePreset(Aura, {
semantic: {
transitionDuration: "0.05s",
},
components: {
datatable: {
extend: {
filterActiveBackground: "{primary.50}",
filterActiveColor: "{primary.700}",
maxWidth: "1rem",
whitespace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
divCheckboxHover: "#6C757D",
divCheckboxCheckedHover: "#5A6268",
},
bodyCellPadding: "0.4rem",
sortIconColor: "transparent",
},
checkbox: {
hoverBorderColor: "#6C757D",
checkedBackground: "#6C757D",
checkedBorderColor: "#6C757D",
iconCheckedColor: "#F8F9FA",
checkedHoverBackground: "#5A6268",
checkedHoverBorderColor: "#5A6268",
iconCheckedHoverColor: "#F8F9FA",
},
button: {
extend: {
activeSVG: "{primary.700}",
},
},
},
css: ({ dt }) => `
.p-datatable-thead tr th.filter-active {
background: ${dt("datatable.filterActiveBackground")};
color: ${dt("datatable.filterActiveColor")}
}
th.filter-active .p-button-text.p-button-secondary {
color: ${dt("datatable.activeSVG")};
}
.p-datatable-tbody tr td {
max-width: ${dt("datatable.maxWidth")};
white-space: ${dt("datatable.whitespace")};
overflow: ${dt("datatable.overflow")};
text-overflow: ${dt("datatable.textOverflow")};
}
.checkbox:hover .p-checkbox-box {
border-color: ${dt("datatable.divCheckboxHover")};
}
.checkbox:hover .p-checkbox-checked .p-checkbox-box {
border-color: ${dt("datatable.divCheckboxCheckedHover")};
background: ${dt("datatable.divCheckboxCheckedHover")};
}
`,
});

export default {
preset: DatalabPreset,
options: {
darkModeSelector: "none",
},
};

0 comments on commit 83f52b7

Please sign in to comment.