On Sun, Jul 8, 2018 at 4:51 PM, Greg Sheremeta <gshereme@redhat.com> wrote:

Hi all,

We are actively moving away from GWT and towards react [ https://reactjs.org/] in webadmin, so the CSS needs to be in a place where both can access it.

Right, whenever you need to add new UI bits (i.e. as part of implementing some feature) into WebAdmin - please do so via the ​ ovirt-engine-ui-extensions <https://gerrit.ovirt.org/gitweb?p=ovirt-engine-ui-extensions.git;a=tree> project if possible. It's an oVirt UI plugin <https://ovirt.org/develop/release-management/features/ux/uiplugins/> meant to contain various types of UI extensions, including the Dashboard (and effectively replacing the ovirt-engine-dashboard <https://gerrit.ovirt.org/gitweb?p=ovirt-engine-dashboard.git;a=tree> dependency in 4.3/master Engine). ​If you need to modify some existing WebAdmin dialog and the change is not trivial, please consider the possibility to re-implement bits of (or even the entire) dialog in React. We have already implemented a new version of "Migrate VM(s)" dialog within the ui-extensions project [1] - it will soon replace the corresponding GWT dialog code. What seems too complex in GWT/Java doesn't have to be that complex in React/JavaScript! [1] https://github.com/oVirt/ovirt-engine-ui-extensions/tree/master/src/componen... And if the given UI component is important/useful enough, we can ​contribute it to patternfly-react <https://github.com/patternfly/patternfly-react/> and use it in other projects as necessary. (For example, sharing common UI components with VM Portal <https://github.com/oVirt/ovirt-web-ui/>.)

Moving forward, please avoid using any and all of GWT's CSS features when working in webadmin. This new(ish) place is sass: [ https://github.com/oVirt/ovirt-engine/tree/master/ frontend/brands/ovirt-brand/src/main/sass]

Sass is easy to use, and hopefully the structure makes sense.

So -- don't use ​​ <ui:style> nor addStyleNames="{style.whatever}">

instead, <g:FlowPanel ui:field="xyz" addStyleNames="prefix_className"> more examples here [1] (prefix == the sass file name)

​Currently, most WebAdmin CSS is baked into the GWT application - using ​<ui:style> scopes it to the given widget. As Greg wrote above, moving forward, we'd like to share the common styling between core UI and other projects - and we can do it via Engine branding infra. For example: http://localhost:8080/ovirt-engine/webadmin/theme/00-ovirt.brand/common.css contains all styles as declared in: ​/path/to/ovirt-engine/frontend/brands/ovirt-brand/src/main/sass/common.scss ​Note: ​"ovirt-brand" is the name of the default branding package. This is generally how we can facilitate CSS sharing, produced by core UI and consumed by others. As for the opposite direction (common CSS produced by others and consumed by core UI and/or others), we could add new branding package to contain the extra CSS.

For programmatic manipulation, simply hardcode style names in Java code and don't use GWT's Style: widget.addClassName("notif_someClassName") etc.

Best wishes, Greg

[1] https://github.com/oVirt/ovirt-engine/blob/ f14587eb9deab300c31247b6941a2d67da1edcea/frontend/webadmin/ modules/webadmin/src/main/java/org/ovirt/engine/ui/ webadmin/section/main/view/NotificationView.ui.xml

Sass package: https://github.com/oVirt/ovirt-engine/tree/master/ frontend/brands/ovirt-brand/src/main/sass

--

GREG SHEREMETA

SENIOR SOFTWARE ENGINEER - TEAM LEAD - RHV UX

Red Hat NA

<https://www.redhat.com/>

gshereme@redhat.com IRC: gshereme <https://red.ht/sig>

_______________________________________________ Devel mailing list -- devel@ovirt.org To unsubscribe send an email to devel-leave@ovirt.org Privacy Statement: https://www.ovirt.org/site/privacy-policy/ oVirt Code of Conduct: https://www.ovirt.org/community/about/community- guidelines/ List Archives: https://lists.ovirt.org/archives/list/devel@ovirt.org/ message/G4XP5R7RPVNRCDDAX56EM3DK4BVXWJF2/