Expand Pipeline Viewport

[vaibhavK1199]

Providing a full screen toggle mode for pipeline building as a part of - #1166

adding a demo for reference -

export.pipeline.viewport.mp4

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[SmittieC]

I'd suggest using the fa-solid fa-expand font awesome icon here and the fa fa-compress icon for the "shrink" one. I think it will fit a bit better with the rest of the look

[SmittieC]

No need to include this here. We have alpineJS included through the webpack bundler (See here) and we already have font awesome loaded here

[SmittieC]

This was probably removed by accident?

[SmittieC]

What is this side bar?

[SmittieC]

The sidebar can be referenced using x-ref. For instance, you can put x-ref=sidebar on the sidebar element here. That said, in alpine there's an easy way to show/hide an element based on some value in data, and that is to use x-show=!isFullscreen (see the x-show docs).

In order to do this, you will have to put the data directive with the isFullscreen value on a level that contains both the sidebar and app elements. I think an alpine store might come in more handy here, since the store allows components on different parts of the page to communicate with each other without having to share a data directive. We can initialize the store in this file by including something like

    <script>
      document.addEventListener('alpine:init', () => {
          Alpine.store('fullscreen', {
              on: false,
              toggle() {
                  this.on = ! this.on
              }
          })
      })
    </script>

in the script. Note that this will only make the store available on pipeline pages, so if we reference it elsewhere we'd have to check its availability first. Anyhoo, after this, you can easily create bindings by simply referencing the store's value. For example, to show/hide the sidebar, add the following attributes on the sidebar element:

x-data x-show="!$store.fullscreen || ($store.fullscreen && !$store.fullscreen.on)"

(It's important to keep the x-data attirubte to indicate to alpineJS that this element wants to use Alpine).

P.S. If we don't want to check the store's availability first, we can always included the store code in the header in this file