Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the ui changes and table

Browse Source
This commit is contained in:
dharaneesh-r
2026-08-17 15:39:46 +05:30
parent a46212f291
commit 809d046323
38 changed files with 6403 additions and 7019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/themes/dt/primitives.js
View File

@@ -30,19 +30,34 @@ export const softPopupStyle = {
// sticky-header or max-height affordance (MUI's TableContainer used to provide that),
// so pages wrap it in this. The brand-red scrollbar can't be expressed inline
// — ::-webkit-scrollbar-* are pseudo-elements — hence the one-time <style>.
export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, children }) => (
// `flush` drops the grey header fill and leaves a single hairline under the
// header row — for tables that sit directly on the page with no surrounding
// card, where a fill plus a border plus a card outline is three lines doing
// one job.
export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, flush = false, children }) => (
<>
<style>{`
.dt-table-scroll { overflow: auto; }
.dt-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dt-table-scroll::-webkit-scrollbar-track { background-color: ${DT.surfaceAlt}; }
.dt-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.dt-table-scroll::-webkit-scrollbar-track { background-color: transparent; }
/* Was ${'`${DT.brand}55`'} — and DT.brand is BLACK, so this painted a
near-black 10px bar down the right edge of every scrollable table.
That is the "dark line" the table was being judged on: it reads as a
heavy border, not as a scrollbar. Now a light neutral that darkens
only on hover. */
.dt-table-scroll::-webkit-scrollbar-thumb {
background-color: ${DT.brand}55; border-radius: 8px;
background-color: rgba(15, 23, 42, 0.16); border-radius: 8px;
border: 2px solid transparent; background-clip: padding-box;
}
.dt-table-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 23, 42, 0.34); }
.dt-table-scroll thead th { position: sticky; top: 0; z-index: 2; }
.dt-table-scroll:not(.is-flush) thead th { background-color: ${DT.surfaceAlt}; }
.dt-table-scroll.is-flush thead th {
background-color: ${DT.surface};
border-bottom: 1px solid ${DT.borderSubtle};
}
.dt-table-scroll::-webkit-scrollbar-thumb:hover { background-color: ${DT.brand}; }
.dt-table-scroll thead th { position: sticky; top: 0; z-index: 2; background-color: ${DT.surfaceAlt}; }
`}</style>
<div className="dt-table-scroll" style={{ maxHeight }}>
<div className={`dt-table-scroll${flush ? ' is-flush' : ''}`} style={{ maxHeight }}>
<div style={{ minWidth }}>{children}</div>
</div>
</>
@@ -51,6 +66,7 @@ export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, child
TableScroll.propTypes = {
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
flush: PropTypes.bool,
children: PropTypes.node
};