cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 06:04:05 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: sticky index column (#566)

Browse Source 
* style: sticky index column
This commit is contained in:
Carlos Valente
2023-11-02 20:59:30 +01:00
committed by GitHub
parent 2f09d27813
commit 1e90ce4c1d
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/utils/styleUtils.ts
+1 -1
View File
@@ -10,7 +10,7 @@ type ColourCombination = {
* @param bgColour * @param bgColour
* @return {{backgroundColor, color: string}} * @return {{backgroundColor, color: string}}
*/ */
export const getAccessibleColour = (bgColour: string): ColourCombination => { export const getAccessibleColour = (bgColour?: string): ColourCombination => {
if (bgColour) { if (bgColour) {
try { try {
const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa'; const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
apps/client/src/features/cuesheet/Cuesheet.module.scss
+5
View File
@@ -44,6 +44,11 @@ $table-header-font-size: calc(1rem - 3px);
min-width: 2rem; min-width: 2rem;
text-align: right; text-align: right;
font-weight: 400; font-weight: 400;
position: sticky;
left: 0;
z-index: 1;
background-color: $gray-1300;
} }
} }
apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
+2 -3
View File
@@ -19,9 +19,8 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
const ownRef = useRef<HTMLTableRowElement>(null); const ownRef = useRef<HTMLTableRowElement>(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const bgFallback = 'transparent'; const bgColour = colour;
const bgColour = colour || bgFallback; const textColour = getAccessibleColour(bgColour);
const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
useLayoutEffect(() => { useLayoutEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(