diff --git a/gradle/gradle/sticky_pr-header.yaml b/gradle/gradle/sticky_pr-header.yaml new file mode 100644 index 0000000000..49bc450077 --- /dev/null +++ b/gradle/gradle/sticky_pr-header.yaml @@ -0,0 +1,2 @@ +- type: added + description: Possibility to specify StickyHeader top position of Diff component diff --git a/scm-ui/ui-components/src/repos/DiffTypes.ts b/scm-ui/ui-components/src/repos/DiffTypes.ts index 64aba86ce0..f741d3c3ce 100644 --- a/scm-ui/ui-components/src/repos/DiffTypes.ts +++ b/scm-ui/ui-components/src/repos/DiffTypes.ts @@ -64,7 +64,11 @@ export type DiffObjectProps = { isCollapsed?: (file: File) => boolean; onCollapseStateChange?: (file: File, newState?: boolean) => void; hunkClass?: (hunk: Hunk) => string; - stickyHeader?: boolean; + /** + * Toggle whether header of diff should be sticky + * If truthy, numeric value adds distance to top position + */ + stickyHeader?: boolean | number; /** * Fontawesome Icon Unicode * diff --git a/scm-ui/ui-components/src/repos/diff/styledElements.tsx b/scm-ui/ui-components/src/repos/diff/styledElements.tsx index 369ba349a0..16546f3298 100644 --- a/scm-ui/ui-components/src/repos/diff/styledElements.tsx +++ b/scm-ui/ui-components/src/repos/diff/styledElements.tsx @@ -79,13 +79,14 @@ export const MarginlessModalContent = styled.div` } `; -export const PanelHeading = styled.div<{ sticky?: boolean }>` - ${(props) => - props.sticky - ? ` +export const PanelHeading = styled.div<{ sticky?: boolean | number }>` + ${(props) => { + if (props.sticky) { + return ` position: sticky; - top: 52px; + top: calc(${typeof props.sticky === "number" ? props.sticky : 0}px + var(--scm-navbar-main-height)); z-index: 1; - ` - : ""} + `; + } + }} `; diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss index 4fe95f7351..2b232ba846 100644 --- a/scm-ui/ui-styles/src/components/_main.scss +++ b/scm-ui/ui-styles/src/components/_main.scss @@ -36,16 +36,18 @@ --scm-danger-color: #{$danger}; --scm-hover-color-blue: #{scale-color($blue, $alpha: -90%)}; + --scm-navbar-main-height: 52px; + --scm-secondary-least-color: #{$secondary-least}; --scm-secondary-less-color: #{$secondary-less}; --scm-secondary-color: #{$secondary}; --scm-secondary-more-color: #{$secondary-more}; --scm-secondary-most-color: #{$secondary-most}; - --scm-border-color: #{$border}; --scm-border: #{$border-width} solid #{$border}; - --scm-popover-border-color: #{$popover-border-color}; + --scm-panel-heading-color: #{$panel-heading-color}; + --scm-panel-heading-background-color: #{$panel-heading-background-color}; } // Workaround for https://github.com/radix-ui/primitives/issues/1572 @@ -918,7 +920,7 @@ form .field:not(.is-grouped) { } a:before { - font-family: "Font Awesome 5 Free"; /* NOSONAR */ + font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; -webkit-font-smoothing: antialiased; display: inline-block; diff --git a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx index e418a862aa..e8bd400334 100644 --- a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx +++ b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx @@ -62,7 +62,7 @@ type Props = { const StickyHeader = styled.div` position: sticky; - top: 52px; + top: var(--scm-navbar-main-height); z-index: 10; margin-bottom: 1rem; margin-top: -1rem;