Skip to content

Optimize interface for mobile #709

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

Merged
janfaracik merged 6 commits into from
May 2, 2025
Merged

Optimize interface for mobile #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4dc4097
Init
janfaracik May 1, 2025
42641f3
Update split-view.scss
janfaracik May 1, 2025
c1058cc
Update stages-customization.tsx
janfaracik May 1, 2025
282d6dd
Update user-preference-provider.tsx
janfaracik May 1, 2025
cbde913
Update user-preference-provider.tsx
janfaracik May 1, 2025
6f5d1fa
Hide some labels
janfaracik May 1, 2025
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
1 change: 0 additions & 1 deletion src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default function PipelineConsole() {
<Dropdown
items={[
<StagesCustomization key="visibility-select" />,
"separator",
{
text: "View as plain text",
icon: DOCUMENT,
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/pipeline-console-view/pipeline-console/main/StageNodeLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function StageNodeLink({ agent }: StageNodeLinkProps) {
}

return (
<li>
<li className={"jenkins-mobile-hide"}>
<a
href={href}
className={"jenkins-button jenkins-button--tertiary"}
Expand Down
6 changes: 6 additions & 0 deletions .../frontend/pipeline-console-view/pipeline-console/main/components/stages-customization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,13 @@ export default function StagesCustomization() {
setMainViewVisibility,
stageViewPosition,
setStageViewPosition,
isMobile,
} = useLayoutPreferences();

if (isMobile) {
return null;
}

const handleViewChange = (e: ChangeEvent<HTMLSelectElement>) => {
setMainViewVisibility(e.target.value as MainViewVisibility);
};
Expand Down Expand Up @@ -121,6 +126,7 @@ export default function StagesCustomization() {
<option value={StageViewPosition.LEFT}>Left</option>
</select>
</label>
<div className="jenkins-dropdown__separator" />
</>
);
}
Expand Down
54 changes: 46 additions & 8 deletions ...ontend/pipeline-console-view/pipeline-console/main/providers/user-preference-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ interface LayoutPreferences {
setTreeViewWidth: (width: number) => void;
setStageViewWidth: (width: number) => void;
setStageViewHeight: (height: number) => void;
/**
* Returns true if the current window width is less than the mobile breakpoint.
* Used for disabling customization options in favor of a mobile-friendly layout.
*/
isMobile: boolean;
}

// CONTEXT
Expand Down Expand Up @@ -65,20 +70,27 @@ const loadFromLocalStorage = <T,>(key: string, fallback: T): T => {
return fallback;
};

const MOBILE_BREAKPOINT = 700;

// PROVIDER
export const LayoutPreferencesProvider = ({
children,
}: {
children: ReactNode;
}) => {
const [stageViewPosition, setStageViewPositionState] =
const [windowWidth, setWindowWidth] = useState<number>(
typeof window !== "undefined" ? window.innerWidth : 1000,
);

const [persistedStageViewPosition, setStageViewPositionState] =
useState<StageViewPosition>(
loadFromLocalStorage(LS_KEYS.stageViewPosition, StageViewPosition.TOP),
);
const [mainViewVisibility, setMainViewVisibilityState] =
const [persistedMainViewVisibility, setMainViewVisibilityState] =
useState<MainViewVisibility>(
loadFromLocalStorage(LS_KEYS.mainViewVisibility, MainViewVisibility.BOTH),
);

const [treeViewWidth, setTreeViewWidthState] = useState<number>(
loadFromLocalStorage(LS_KEYS.treeViewWidth, 300),
);
Expand All @@ -89,14 +101,33 @@ export const LayoutPreferencesProvider = ({
loadFromLocalStorage(LS_KEYS.stageViewHeight, 250),
);

// Save to localStorage
// Handle responsive override
const isMobile = windowWidth < MOBILE_BREAKPOINT;
const stageViewPosition = isMobile
? StageViewPosition.TOP
: persistedStageViewPosition;
const mainViewVisibility = isMobile
? MainViewVisibility.GRAPH_ONLY
: persistedMainViewVisibility;

// Save to localStorage only when not in mobile mode
useEffect(() => {
window.localStorage.setItem(LS_KEYS.stageViewPosition, stageViewPosition);
}, [stageViewPosition]);
if (!isMobile) {
window.localStorage.setItem(
LS_KEYS.stageViewPosition,
persistedStageViewPosition,
);
}
}, [persistedStageViewPosition, isMobile]);

useEffect(() => {
window.localStorage.setItem(LS_KEYS.mainViewVisibility, mainViewVisibility);
}, [mainViewVisibility]);
if (!isMobile) {
window.localStorage.setItem(
LS_KEYS.mainViewVisibility,
persistedMainViewVisibility,
);
}
}, [persistedMainViewVisibility, isMobile]);

useEffect(() => {
window.localStorage.setItem(
Expand All @@ -119,7 +150,13 @@ export const LayoutPreferencesProvider = ({
);
}, [stageViewHeight]);

// Setter wrappers
// Update window width on resize
useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

const setStageViewPosition = (position: StageViewPosition) =>
setStageViewPositionState(position);
const setMainViewVisibility = (visibility: MainViewVisibility) =>
Expand All @@ -142,6 +179,7 @@ export const LayoutPreferencesProvider = ({
setTreeViewWidth,
setStageViewWidth,
setStageViewHeight,
isMobile,
}}
>
{children}
Expand Down
3 changes: 2 additions & 1 deletion src/main/frontend/pipeline-console-view/pipeline-console/main/split-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
display: grid;
gap: var(--section-padding);
animation: fade-in 0.1s ease-in-out both;
align-items: start;
}

@keyframes fade-in {
Expand All @@ -12,7 +13,7 @@
}

.pgv-split-view__side-panel {
position: relative;
display: contents;
}

.pgv-split-view__divider {
Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function StageDetails({ stage }: StageDetailsProps) {
</Tooltip>
</li>
{stage.pauseDurationMillis !== 0 && (
<li>
<li className={"jenkins-mobile-hide"}>
Copy link
Member

@timja timja May 2, 2025

Choose a reason for hiding this comment

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

one thing to keep in mind here is that nested stages don't show in the graph so its not possible to navigate on mobile then. I wonder if it would be better to move the tree to the top in some way on mobile?

Copy link
Member Author

@janfaracik janfaracik May 2, 2025

Choose a reason for hiding this comment

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

Definitely something to look into I think - still worth getting this in though as currently its a mess on lower resolutions.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M145.61 464h220.78c19.8 0 35.55-16.29 33.42-35.06C386.06 308 304 310 304 256s83.11-51 95.8-172.94c2-18.78-13.61-35.06-33.41-35.06H145.61c-19.8 0-35.37 16.28-33.41 35.06C124.89 205 208 201 208 256s-82.06 52-95.8 172.94c-2.14 18.77 13.61 35.06 33.41 35.06z"
Expand Down