Skip to content

shell: Show some pages in fullscreen #21670

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.

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions files.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const info = {
"playground/notifications-receiver.js",
"playground/journal.jsx",
"playground/remote.tsx",
"playground/fullscreen.tsx",

"selinux/selinux.js",
"shell/shell.jsx",
Expand Down Expand Up @@ -115,6 +116,7 @@ const info = {
"playground/notifications-receiver.html",
"playground/journal.html",
"playground/remote.html",
"playground/fullscreen.html",

"selinux/index.html",

Expand Down
14 changes: 14 additions & 0 deletions pkg/playground/fullscreen.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cockpit playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="fullscreen.css" type="text/css" rel="stylesheet" />
<script src="../base1/cockpit.js"></script>
<script src="fullscreen.js"></script>
</head>
<body class="pf-v5-m-tabular-nums">
<div id="app" />
</body>
</html>
65 changes: 65 additions & 0 deletions pkg/playground/fullscreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/*
* This file is part of Cockpit.
*
* Copyright (C) 2016 Red Hat, Inc.
*
* Cockpit is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation; either version 2.1 of the License, or
* (at your option) any later version.
*
* Cockpit is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Cockpit; If not, see <https://www.gnu.org/licenses/>.
*/

import cockpit from "cockpit";
import React from "react";
import { createRoot, Container } from 'react-dom/client';
import { usePageLocation } from "hooks";

import '../lib/patternfly/patternfly-5-cockpit.scss';

import { Page, PageSection, Bullseye, Button } from '@patternfly/react-core';

import 'cockpit-dark-theme'; // once per page

const FullscreenDemo = () => {
const { path } = usePageLocation();

function go_fullscreen() {
cockpit.location.go("/fullscreen");
}

function go_halfscreen() {
cockpit.location.go("/");
}

return (
<Page>
<PageSection>
<Bullseye>
{ (path[0] != "fullscreen")
? <Button onClick={go_fullscreen}>Go fullscreen</Button>
: <Button onClick={go_halfscreen}>Go back</Button>
}
</Bullseye>
</PageSection>
</Page>
);
};

function init_app(rootElement: Container) {
const root = createRoot(rootElement);
root.render(<FullscreenDemo />);
}

document.addEventListener("DOMContentLoaded", function() {
cockpit.transport.wait(function() {
init_app(document.getElementById('app')!);
});
});
6 changes: 6 additions & 0 deletions pkg/playground/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,14 @@
},
"remote": {
"label": "Remote channel"
},
"fullscreen": {
"label": "Fullscreen Shell"
}
},
"fullscreen": {
"fullscreen": [ "/fullscreen" ]
},
"preload": [ "preloaded" ],
"content-security-policy": "img-src 'self' data:"
}
1 change: 1 addition & 0 deletions pkg/shell/manifests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface Manifest {
tools?: ManifestSection;

preload?: string[];
fullscreen?: string[] | Record<string, string[]>;
parent?: ManifestParentSection;
".checksum"?: string;
}
Expand Down
4 changes: 4 additions & 0 deletions pkg/shell/shell.scss
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,10 @@ $desktop: $phone + 1px;
grid-area: main;
}

&.ct-fullscreen .area-ct-content {
grid-area: switcher / switcher / main / main;
}

.header {
grid-area: header;
}
Expand Down
51 changes: 28 additions & 23 deletions pkg/shell/shell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const Shell = () => {

config,

current_fullscreen,
current_machine,
current_manifest_item,
} = state;
Expand Down Expand Up @@ -112,7 +113,7 @@ const Shell = () => {
}

return (
<div id="main" className="page"
<div id="main" className={"page" + (current_fullscreen ? " ct-fullscreen" : "")}
style={
{
'--ct-color-host-accent': (current_machine.address == "localhost" ? undefined : current_machine.color)
Expand All @@ -122,28 +123,32 @@ const Shell = () => {
<SkipLink focus_id="content">{_("Skip to content")}</SkipLink>
<SkipLink focus_id="hosts-sel">{_("Skip main navigation")}</SkipLink>

<div id="sidebar-toggle" className="pf-v5-c-select pf-m-dark sidebar-toggle">
<SidebarToggle />
</div>

<div id="nav-system" className="area-ct-subnav nav-system-menu sidebar interact">
<nav id="host-apps" className="host-apps">
<PageNav state={state} />
</nav>
</div>

<nav id="hosts-sel" className="navbar navbar-default navbar-pf navbar-pf-vertical" tabIndex={-1}>
{ config.host_switcher_enabled
? <CockpitHosts state={state} host_modal_state={host_modal_state} selector="nav-hosts" />
: <CockpitCurrentHost current_user={current_user} machine={current_machine} />
}
</nav>

<div id="nav-hosts" className="area-ct-subnav nav-hosts-menu sidebar" />

<div id="topnav" className="header">
<TopNav state={state} />
</div>
{ !current_fullscreen &&
<>
<div id="sidebar-toggle" className="pf-v5-c-select pf-m-dark sidebar-toggle">
<SidebarToggle />
</div>

<div id="nav-system" className="area-ct-subnav nav-system-menu sidebar interact">
<nav id="host-apps" className="host-apps">
<PageNav state={state} />
</nav>
</div>

<nav id="hosts-sel" className="navbar navbar-default navbar-pf navbar-pf-vertical" tabIndex={-1}>
{ config.host_switcher_enabled
? <CockpitHosts state={state} host_modal_state={host_modal_state} selector="nav-hosts" />
: <CockpitCurrentHost current_user={current_user} machine={current_machine} />
}
</nav>

<div id="nav-hosts" className="area-ct-subnav nav-hosts-menu sidebar" />

<div id="topnav" className="header">
<TopNav state={state} />
</div>
</>
}

<Frames hidden={!!failure} state={state} idle_state={idle_state} />

Expand Down
18 changes: 18 additions & 0 deletions pkg/shell/state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -585,6 +585,7 @@ export class ShellState extends EventEmitter<ShellStateEvents> {
current_manifest: Manifest | null = null;

current_frame: ShellFrame | null = null;
current_fullscreen: boolean | null = null;

update() {
if (!this.ready || this.problem) {
Expand Down Expand Up @@ -642,6 +643,23 @@ export class ShellState extends EventEmitter<ShellStateEvents> {
this.current_manifest_item = item;
this.current_manifest = compiled.find_path_manifest(location.path);

this.current_fullscreen = false;
if (this.current_manifest.fullscreen) {
let fs = this.current_manifest.fullscreen;
const path_prefix = location.path.split("/", 1)[0];
if (Array.isArray(fs))
fs = { "": fs };
Copy link
Contributor

Choose a reason for hiding this comment

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

This added line is not executed by any test.

for (const path_suffix in fs) {
if ((path_suffix == "" && path_prefix == location.path)
Copy link
Contributor

Choose a reason for hiding this comment

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

This added line is not executed by any test.

|| (path_prefix + "/" + path_suffix == location.path)) {
for (const hash_prefix of fs[path_suffix]) {
if (this.current_location.hash.startsWith(hash_prefix))
this.current_fullscreen = true;
}
}
}
}

let frame = null;
if (location.path && (machine.state == "connected" || machine.state == "connecting"))
frame = this.#ensure_frame(machine, location.path, location.hash, item.label);
Expand Down
33 changes: 33 additions & 0 deletions test/verify/check-pages
Original file line number Diff line number Diff line change
Expand Up @@ -1047,6 +1047,39 @@
b.wait_visible("#fsreplace1-create")
set_content_and_validate(path, "user data", custom_context)

def testFullscreen(self):
b = self.browser
m = self.machine

Check notice

Code scanning / CodeQL

Unused local variable Note test

Variable m is not used.

self.login_and_go("/playground/fullscreen")

def get_size(sel):
clip = b.call_js_func('ph_element_clip', sel)
return (clip["width"], clip["height"])

def wait_size(sel, size):
b.wait(lambda: get_size(sel) == size)

b.switch_to_top()
shell_size = get_size('body')
content_size = get_size('#content')
b.enter_page("/playground/fullscreen")

self.assertEqual(get_size("#app"), content_size)

b.click('#app button:contains("Go fullscreen")')
wait_size("#app", shell_size)

b.click('#app button:contains("Go back")')
wait_size("#app", content_size)

b.click('#app button:contains("Go fullscreen")')
wait_size("#app", shell_size)

b.eval_js("window.history.back()")
wait_size("#app", content_size)



if __name__ == '__main__':
testlib.test_main()
Loading