webui: provide an About screen

[acruzgon]

INSTALLER-3489

Provide an About screen for Anaconda Web UI using AboutModal PF component.

[acruzgon]

@garrett here's the initial draft, let me know if the margins and size look right. thank you!

[garrett]

Hi! This is a good start of the scaffolding needed to add the global menu and about box. I'll need more work before it can be merged, but I think you know this. 😁

• The logo and name are hardcoded. They shouldn't be. Each distribution needs their own SVG logo, which should also be used in the header in addition to the about box.

• The logo is not positioned correctly. It should use PatternFly's positioning; it should not be hardcoded with margins. The end result should be vertically centered with the × (close) icon of the about modal.

• The subheading needs to be an H2, not an H1.

• Package names and versions should be generated.

• We'll need branding support, so each distribution will have custom settings with CSS Custom Properties (CSS variables) in a CSS file, and those variables should be used here.

• The × is too small. The mockups were made with PatternFly 5 in mind, which uses this larger × without the circle, whereas PatternFly 4 uses a circle around the icon to indicate the button area. We'll either need to enlarge the × or change the background of the circle around it, so it looks clickable.

Related:

• https://issues.redhat.com/browse/INSTALLER-3551 (branding)

[garrett]

Fedora:

CentOS:

RHEL:

[KKoukiou]

I would suggest to get this PR in first without the logo - as this will need some more work.

[garrett]

I would suggest to get this PR in first without the logo - as this will need some more work.

This is why I suggested using the generic icon originally.

---

But we can drop all that stuff and make some overrides:

/* Scale down the about box to be a little smaller */
@media only screen and (min-width: 992px) {
  .pf-c-about-modal-box {
    --pf-c-about-modal-box--lg--MaxWidth: 55rem;
    --pf-c-about-modal-box--lg--MaxHeight: 32rem;
    grid-template-rows: 3rem max-content auto;
  }
}

/* Hide the logo and side graphic */
.pf-c-about-modal-box__brand,
.pf-c-about-modal-box__hero {
    display: none;
}

/* Make the close button more obvious, since we hide the side graphic*/
.pf-c-about-modal-box__close .pf-c-button.pf-m-plain {
  --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
}
.pf-c-about-modal-box__close .pf-c-button.pf-m-plain:hover
  --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
}

This should make it look like the following:

[acruzgon]

I would suggest to get this PR in first without the logo - as this will need some more work.

This is why I suggested using the generic icon originally.

But we can drop all that stuff and make some overrides:

/* Scale down the about box to be a little smaller */
@media only screen and (min-width: 992px) {
  .pf-c-about-modal-box {
    --pf-c-about-modal-box--lg--MaxWidth: 55rem;
    --pf-c-about-modal-box--lg--MaxHeight: 32rem;
    grid-template-rows: 3rem max-content auto;
  }
}

/* Hide the logo and side graphic */
.pf-c-about-modal-box__brand,
.pf-c-about-modal-box__hero {
    display: none;
}

/* Make the close button more obvious, since we hide the side graphic*/
.pf-c-about-modal-box__close .pf-c-button.pf-m-plain {
  --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
}
.pf-c-about-modal-box__close .pf-c-button.pf-m-plain:hover
  --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
}

This should make it look like the following:

---

with that it would like this:

if i add display: block for the title it would look like this:

@garrett what do you think?

[KKoukiou]

Pls complete the translations, rebase and adjust the rest of the comments but this will need more review rounds.

[garrett]

Perhaps it needs to be a little wider. I didn't account for the parenthesis. It could be longer in other languages (if
prerelease" is translated), and we don't want it to get truncated.

For example:

To get it this width and height, change the CSS a little, like so:

    --pf-c-about-modal-box--lg--MaxWidth: 62rem;
    --pf-c-about-modal-box--lg--MaxHeight: 38rem;

[KKoukiou]

The code is pretty close but we need tests.

[KKoukiou]

Still missing tests. Can help you with that today.

[KKoukiou]

/kickstart-test --waive webui only

[KKoukiou]

/kickstart-test --waive webui only