<div dir="ltr"><div><br></div><div class="gmail_extra"><div class="gmail_quote">On Wed, Apr 20, 2016 at 12:51 PM, Vojtech Szocs <span dir="ltr">&lt;<a href="mailto:vszocs@redhat.com" target="_blank">vszocs@redhat.com</a>&gt;</span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><span class=""><br>
<br>
----- Original Message -----<br>
&gt; From: &quot;Martin Sivak&quot; &lt;<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>&gt;<br>
</span><span class="">&gt; To: &quot;Vojtech Szocs&quot; &lt;<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>&gt;<br>
&gt; Cc: &quot;Greg Sheremeta&quot; &lt;<a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a>&gt;, &quot;Alexander Wels&quot; &lt;<a href="mailto:awels@redhat.com">awels@redhat.com</a>&gt;, &quot;<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>&quot;<br>
&gt; &lt;<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>&gt;<br>
&gt; Sent: Tuesday, April 19, 2016 5:07:52 PM<br>
&gt; Subject: Re: [ovirt-devel] UI plugins - access to engine styles and libraries<br>
&gt;<br>
</span><span class="">&gt; &gt; With this (static linking) approach, you don&#39;t need those CSS<br>
&gt; &gt; or JS resources at runtime; your webapp is self-contained and<br>
&gt; &gt; optimized (containing only stuff it really uses).<br>
&gt;<br>
&gt; Right, but I won&#39;t get the same look and feel as the styles might be<br>
&gt; different.<br>
<br>
</span>If `ovirt.brand` is RPM-packaged, you could depend on it<br>
when building your webapp (UI plugin), but I don&#39;t think<br>
we have such RPM.<br>
<span class=""><br>
&gt; I was looking for a way to use the same colors and styles<br>
&gt; to make the UI plugin look right in both RHEV and oVirt.<br>
<br>
</span>Understood, just use the URL that exposes branding files,<br>
it&#39;s perfectly fine to load CSS and other stuff at runtime.<br></blockquote><div><br></div><div>But much of the CSS is obfuscated by GWT. There&#39;s no way to hook into it.<br class=""><br></div>My idea is completely different. I wanted to stop using GWT for all CSS, and instead use LESS or SASS. Then any plugins could simply use the LESS/SASS files as needed.</div><div class="gmail_quote"><br></div><div class="gmail_quote">There&#39;s no way that could make 4.0 now, though.<br><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">
<div class=""><div class="h5"><br>
&gt;<br>
&gt; Martin<br>
&gt;<br>
&gt; On Fri, Apr 15, 2016 at 5:37 PM, Vojtech Szocs &lt;<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>&gt; wrote:<br>
&gt; &gt;<br>
&gt; &gt;<br>
&gt; &gt; ----- Original Message -----<br>
&gt; &gt;&gt; From: &quot;Vojtech Szocs&quot; &lt;<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>&gt;<br>
&gt; &gt;&gt; To: &quot;Martin Sivak&quot; &lt;<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>&gt;, &quot;Greg Sheremeta&quot;<br>
&gt; &gt;&gt; &lt;<a href="mailto:gshereme@redhat.com">gshereme@redhat.com</a>&gt;, &quot;Alexander Wels&quot; &lt;<a href="mailto:awels@redhat.com">awels@redhat.com</a>&gt;<br>
&gt; &gt;&gt; Cc: &quot;<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>&quot; &lt;<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>&gt;<br>
&gt; &gt;&gt; Sent: Friday, April 15, 2016 5:23:08 PM<br>
&gt; &gt;&gt; Subject: Re: [ovirt-devel] UI plugins - access to engine styles and<br>
&gt; &gt;&gt; libraries<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; Hi Martin,<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; (adding Greg and Alex in case they have any thoughts)<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; if you build your UI plugin in a way that requires CSS styles,<br>
&gt; &gt;&gt; JS libraries etc. at runtime (dynamic linking), you can utilize<br>
&gt; &gt;&gt; oVirt branding servlet [a] to serve branding-related resources.<br>
&gt; &gt;<br>
&gt; &gt; Just a note - another way of building your UI plugin is to use<br>
&gt; &gt; tools that take your CSS styles and JS sources (including 3rd<br>
&gt; &gt; party ones) and produce a self-contained bundle for deployment.<br>
&gt; &gt;<br>
&gt; &gt; oVirt Dashboard, for example, follows this approach:<br>
&gt; &gt;<br>
&gt; &gt;   <a href="https://github.com/vojtechszocs/ovirt-dashboard-ui-plugin" rel="noreferrer" target="_blank">https://github.com/vojtechszocs/ovirt-dashboard-ui-plugin</a><br>
&gt; &gt;<br>
&gt; &gt; (soon, we&#39;ll sync it with ovirt-engine-dashboard on our gerrit<br>
&gt; &gt; and continue developing the project there)<br>
&gt; &gt;<br>
&gt; &gt; With this (static linking) approach, you don&#39;t need those CSS<br>
&gt; &gt; or JS resources at runtime; your webapp is self-contained and<br>
&gt; &gt; optimized (containing only stuff it really uses).<br>
&gt; &gt;<br>
&gt; &gt; We also have two RPM packages (initiated by Juan) for building<br>
&gt; &gt; (oVirt) webapps that require a JS build step, utilizing tools<br>
&gt; &gt; around the Node.js platform:<br>
&gt; &gt;<br>
&gt; &gt;   ovirt-engine-nodejs [Node.js runtime]<br>
&gt; &gt;   ovirt-engine-nodejs-modules [all frontend dependencies]<br>
&gt; &gt;<br>
&gt; &gt; Regards,<br>
&gt; &gt; Vojtech<br>
&gt; &gt;<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   [a] org.ovirt.engine.core.branding.BrandingServlet<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; By default, oVirt Engine ships with single branding package:<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   $ ls /etc/ovirt-engine/branding/<br>
&gt; &gt;&gt;   00-ovirt.brand<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; That `00-ovirt.brand` directory symlinks to:<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   /usr/share/ovirt-engine/branding/ovirt.brand<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; containing all branding-related resources.<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; To fetch them, use the following URL:<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   <a href="http://example.com/ovirt-engine/webadmin/theme/" rel="noreferrer" target="_blank">http://example.com/ovirt-engine/webadmin/theme/</a>&lt;path_to_file&gt;<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; where &lt;path_to_file&gt; is relative to `ovirt.brand` directory.<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; In your UI plugin, you can use the newly introduced API to<br>
&gt; &gt;&gt; construct this URL more easily [b]:<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   var url = api.engineBaseUrl() + &#39;webadmin/theme/&#39; + pathToFile<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   [b] <a href="https://gerrit.ovirt.org/#/c/55694/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/55694/</a><br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; WebAdmin UI itself loads following CSS styles (in this order):<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; - web_admin.css<br>
&gt; &gt;&gt; - common.css<br>
&gt; &gt;&gt; - gwt_common.css<br>
&gt; &gt;&gt; - patternfly/css/styles.min.css<br>
&gt; &gt;&gt; - patternfly-ovirt.css<br>
&gt; &gt;&gt; - ovirt-patternfly-compat.css<br>
&gt; &gt;&gt; - ovirt.css<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; For starters, you can load PatternFly-specific CSS only.<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; As for JS libraries, these are typically provided through<br>
&gt; &gt;&gt; PatternFly RPM, to which `patternfly` directory symlinks.<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; For starters, you can use stuff under `patternfly/js` and<br>
&gt; &gt;&gt; `patternfly/components` (these are PF&#39;s own dependencies).<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; oVirt ships its own version of jQuery (v1.11) + Bootstrap<br>
&gt; &gt;&gt; (v3.3.6) -- please don&#39;t use them!! If you&#39;re wondering<br>
&gt; &gt;&gt; why we use custom jQuery and Bootstrap, see here:<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;   <a href="https://gerrit.ovirt.org/#/c/41228/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/41228/</a><br>
&gt; &gt;&gt;   <a href="https://gerrit.ovirt.org/#/c/55546/" rel="noreferrer" target="_blank">https://gerrit.ovirt.org/#/c/55546/</a><br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; (@Greg, any plans for upgrading to PF-provided jQuery?)<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; Regards,<br>
&gt; &gt;&gt; Vojtech<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt;<br>
&gt; &gt;&gt; ----- Original Message -----<br>
&gt; &gt;&gt; &gt; From: &quot;Martin Sivak&quot; &lt;<a href="mailto:msivak@redhat.com">msivak@redhat.com</a>&gt;<br>
&gt; &gt;&gt; &gt; To: &quot;<a href="mailto:engine-devel@ovirt.org">engine-devel@ovirt.org</a>&quot; &lt;<a href="mailto:devel@ovirt.org">devel@ovirt.org</a>&gt;<br>
&gt; &gt;&gt; &gt; Cc: &quot;Moran Goldboim&quot; &lt;<a href="mailto:mgoldboi@redhat.com">mgoldboi@redhat.com</a>&gt;, &quot;Vojtech Szocs&quot;<br>
&gt; &gt;&gt; &gt; &lt;<a href="mailto:vszocs@redhat.com">vszocs@redhat.com</a>&gt;, &quot;Oved Ourfali&quot; &lt;<a href="mailto:oourfali@redhat.com">oourfali@redhat.com</a>&gt;<br>
&gt; &gt;&gt; &gt; Sent: Wednesday, April 13, 2016 5:30:49 PM<br>
&gt; &gt;&gt; &gt; Subject: UI plugins - access to engine styles and libraries<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; Hi everybody,<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; there is one piece I always missed when developing my optimizer plugin<br>
&gt; &gt;&gt; &gt; and that is the access to the engine css styles.<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; I feel it might be pretty easy and good for both bandwidth and<br>
&gt; &gt;&gt; &gt; branding to expose them using some &quot;well known&quot; url from the engine.<br>
&gt; &gt;&gt; &gt; All plugins would be then able to (re-)use the same styling<br>
&gt; &gt;&gt; &gt; information and basic javascript libraries (jQuery, angular, whatever<br>
&gt; &gt;&gt; &gt; you decide the core engine will use).<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; So far, each UI plugin has to link to its own version of libraries and<br>
&gt; &gt;&gt; &gt; define (and maintain) custom color theme.<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; Do you think this would be doable for 4.0?<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; Best regards<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; &gt; --<br>
&gt; &gt;&gt; &gt; Martin Sivak<br>
&gt; &gt;&gt; &gt; SLA / oVirt<br>
&gt; &gt;&gt; &gt;<br>
&gt; &gt;&gt; _______________________________________________<br>
&gt; &gt;&gt; Devel mailing list<br>
&gt; &gt;&gt; <a href="mailto:Devel@ovirt.org">Devel@ovirt.org</a><br>
&gt; &gt;&gt; <a href="http://lists.ovirt.org/mailman/listinfo/devel" rel="noreferrer" target="_blank">http://lists.ovirt.org/mailman/listinfo/devel</a><br>
&gt; &gt;&gt;<br>
&gt;<br>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature">Greg Sheremeta, MBA<br>Red Hat, Inc.<br>Sr. Software Engineer<br><a href="mailto:gshereme@redhat.com" target="_blank">gshereme@redhat.com</a><br>919-741-4016<br></div>
</div></div>