/[packages]/cauldron/openqa/current/SOURCES/0002-Improve-web-UI-branding-mechanism-drop-topbar-in-pla.patch
ViewVC logotype

Contents of /cauldron/openqa/current/SOURCES/0002-Improve-web-UI-branding-mechanism-drop-topbar-in-pla.patch

Parent Directory Parent Directory | Revision Log Revision Log


Revision 913541 - (show annotations) (download)
Tue Dec 22 15:52:18 2015 UTC (4 years, 6 months ago) by doktor5000
File size: 14774 byte(s)
- imported package for openQA
1 From ab76b525eb9d436ecc5f3395cd7de89a0e272e86 Mon Sep 17 00:00:00 2001
2 From: Adam Williamson <awilliam@redhat.com>
3 Date: Tue, 29 Sep 2015 19:57:17 -0700
4 Subject: [PATCH 2/2] Improve web UI branding mechanism, drop topbar in 'plain'
5
6 This introduces an improved mechanism for branding-specific
7 elements in the web UI templates. Instead of just peppering
8 'if' blocks into the templates, this introduces a helper
9 which works like 'include', only it understands branding.
10 It accepts a name for the template to be included. It reads
11 the 'branding' config setting. It then tries to load the
12 template 'branding/(brandname)/(templatename)'. If that
13 doesn't exist, it falls back to loading 'branding/plain/
14 (templatename)' - e.g. if the 'branding' setting is
15 'openSUSE' and the call is 'include_branding topbar', it
16 will try to load 'branding/openSUSE/topbar' first; if that
17 doesn't exist, it will load 'branding/plain/topbar'.
18
19 The existing 'if openSUSE then (foo), else (bar)' blocks
20 are replaced with calls to the new helper, and the actual
21 contents are placed in the appropriate locations.
22
23 This means anyone can create a new branding by just adding
24 a subdirectory with appropriately named files and changing
25 the config setting. It also means such custom brandings
26 can be partial, because of the fallback to 'plain' - if you
27 just want to stick one branded element in on top of plain,
28 you can easily do that.
29
30 As part of the change, the openSUSE topbar that was present
31 on all pages (with geeko and the 'Downloads', 'Support' etc.
32 links) even with the 'plain' branding before is now only
33 present in the openSUSE branding.
34 ---
35 docs/Branding.asciidoc | 25 ++++++++++++++++++++++
36 lib/OpenQA/WebAPI/Plugin/Helpers.pm | 18 ++++++++++++++++
37 .../branding/openSUSE/head_stylesheet.html.ep | 2 ++
38 templates/branding/openSUSE/header.html.ep | 11 ++++++++++
39 templates/branding/openSUSE/navbar.html.ep | 19 ++++++++++++++++
40 templates/branding/openSUSE/sponsorbox.html.ep | 6 ++++++
41 templates/branding/plain/head_stylesheet.html.ep | 1 +
42 templates/branding/plain/header.html.ep | 8 +++++++
43 templates/branding/plain/navbar.html.ep | 0
44 templates/branding/plain/sponsorbox.html.ep | 0
45 templates/layouts/bootstrap.html.ep | 21 +-----------------
46 templates/layouts/default.html.ep | 2 +-
47 templates/layouts/head.html.ep | 7 +-----
48 templates/layouts/header.html.ep | 20 -----------------
49 templates/main/index.html.ep | 9 +-------
50 15 files changed, 94 insertions(+), 55 deletions(-)
51 create mode 100644 docs/Branding.asciidoc
52 create mode 100644 templates/branding/openSUSE/head_stylesheet.html.ep
53 create mode 100644 templates/branding/openSUSE/header.html.ep
54 create mode 100644 templates/branding/openSUSE/navbar.html.ep
55 create mode 100644 templates/branding/openSUSE/sponsorbox.html.ep
56 create mode 100644 templates/branding/plain/head_stylesheet.html.ep
57 create mode 100644 templates/branding/plain/header.html.ep
58 create mode 100644 templates/branding/plain/navbar.html.ep
59 create mode 100644 templates/branding/plain/sponsorbox.html.ep
60 delete mode 100644 templates/layouts/header.html.ep
61
62 diff --git a/docs/Branding.asciidoc b/docs/Branding.asciidoc
63 new file mode 100644
64 index 0000000..55a8497
65 --- /dev/null
66 +++ b/docs/Branding.asciidoc
67 @@ -0,0 +1,25 @@
68 +openQA branding
69 +===============
70 +:author: Adam Williamson
71 +
72 +You can alter the appearance of the openQA web UI to some extent through
73 +the 'branding' mechanism. The 'branding' configuration setting in the
74 +'global' section of +/etc/openqa/openqa.ini+ specifies the branding to
75 +use. It defaults to 'openSUSE', and openQA also includes the 'plain'
76 +branding, which is - as its name suggests - plain and generic.
77 +
78 +To create your own branding for openQA, you can create a subdirectory
79 +of +/usr/share/openqa/templates/branding+ (or wherever openQA is
80 +installed). The subdirectory's name will be the name of your branding.
81 +You can copy the files from +branding/openSUSE+ or +branding/plain+ to
82 +use as starting points, and adjust as necessary.
83 +
84 +openQA uses the http://mojolicio.us/[Mojolicious] framework's templating
85 +system; the branding files are included into the openQA templates at
86 +various points. To see where each branding file is actually included,
87 +you can search through the files in the +templates+ tree for the text
88 ++include_branding+. Anywhere that helper is called, the branding file
89 +with the matching name is being included. The branding files themselves
90 +are Mojolicious 'Embedded Perl' templates just like the main template
91 +files. You can read the http://mojolicio.us/perldoc/Mojolicious/Guides/Rendering[Mojolicious documentation] for
92 +help with the format.
93 diff --git a/lib/OpenQA/WebAPI/Plugin/Helpers.pm b/lib/OpenQA/WebAPI/Plugin/Helpers.pm
94 index ebc7c6d..00f0686 100644
95 --- a/lib/OpenQA/WebAPI/Plugin/Helpers.pm
96 +++ b/lib/OpenQA/WebAPI/Plugin/Helpers.pm
97 @@ -185,6 +185,24 @@ sub register {
98 }
99 });
100
101 + $app->helper(
102 + # Just like 'include', but includes the template with the given
103 + # name from the correct directory for the 'branding' config setting
104 + # falls back to 'plain' if brand doesn't include the template, so
105 + # allowing partial brands
106 + include_branding => sub {
107 + my ($c, $name) = @_;
108 + my $path = "branding/" . $c->app->config->{'global'}->{'branding'} . "/$name";
109 + my $ret = $c->render_to_string($path);
110 + if (defined($ret)) {
111 + return $ret;
112 + }
113 + else {
114 + $path = "branding/plain/$name";
115 + return $c->render_to_string($path);
116 + }
117 + });
118 +
119 $app->helper(step_thumbnail => \&_step_thumbnail);
120
121 }
122 diff --git a/templates/branding/openSUSE/head_stylesheet.html.ep b/templates/branding/openSUSE/head_stylesheet.html.ep
123 new file mode 100644
124 index 0000000..0a2c026
125 --- /dev/null
126 +++ b/templates/branding/openSUSE/head_stylesheet.html.ep
127 @@ -0,0 +1,2 @@
128 +<link rel="stylesheet" href="https://static.opensuse.org/themes/bento/css/style.fluid.css" media="screen" />
129 +<link rel="stylesheet" href="https://static.opensuse.org/themes/bento/css/print.css" media="print" />
130 diff --git a/templates/branding/openSUSE/header.html.ep b/templates/branding/openSUSE/header.html.ep
131 new file mode 100644
132 index 0000000..7794cfb
133 --- /dev/null
134 +++ b/templates/branding/openSUSE/header.html.ep
135 @@ -0,0 +1,11 @@
136 +<div id="header-content" class="container_16">
137 + <%= link_to 'http://www.opensuse.org' => (id => 'header-logo') => begin %>
138 + <%= image '/images/header-logo.png', alt => 'Header Logo', height => "26", width => "46" %>
139 + <% end %>
140 + <ul id="global-navigation">
141 + <li id="item-downloads"><a href="http://opensuse.org/sitemap#downloads">Downloads</a></li>
142 + <li id="item-support"><a href="http://opensuse.org/sitemap#support">Support</a></li>
143 + <li id="item-community"><a href="http://opensuse.org/sitemap#community">Community</a></li>
144 + <li id="item-development"><a href="http://opensuse.org/sitemap#development">Development</a></li>
145 + </ul>
146 +</div>
147 diff --git a/templates/branding/openSUSE/navbar.html.ep b/templates/branding/openSUSE/navbar.html.ep
148 new file mode 100644
149 index 0000000..defabdc
150 --- /dev/null
151 +++ b/templates/branding/openSUSE/navbar.html.ep
152 @@ -0,0 +1,19 @@
153 +<nav class='container-fluid navbar navbar-default navbar-static-top'>
154 +<div class='navbar-inner'>
155 + <div class='container'>
156 + <div class="navbar-header">
157 + <a class="navbar-brand" href="#">
158 + <img alt="Brand" src="/images/header-logo.png" />
159 + </a>
160 + </div>
161 + <div class='collapse navbar-collapse'>
162 + <ul class='nav navbar-nav' id='global-navigation'>
163 + <li id='item-downloads'><a href="http://en.opensuse.org/openSUSE:Browse#Downloads">Downloads</a></li>
164 + <li id='item-support'><a href="http://en.opensuse.org/openSUSE:Browse#Support">Support</a></li>
165 + <li id='item-community'><a href="http://en.opensuse.org/openSUSE:Browse#Community">Community</a></li>
166 + <li id='item-development'><a href="http://en.opensuse.org/openSUSE:Browse#Development">Development</a></li>
167 + </ul>
168 + </div>
169 + </div>
170 +</div>
171 +</nav>
172 diff --git a/templates/branding/openSUSE/sponsorbox.html.ep b/templates/branding/openSUSE/sponsorbox.html.ep
173 new file mode 100644
174 index 0000000..0c307df
175 --- /dev/null
176 +++ b/templates/branding/openSUSE/sponsorbox.html.ep
177 @@ -0,0 +1,6 @@
178 +<div class="text-right" id="sponsorbox">
179 + <a href="http://www.suse.com" title="SUSE">
180 + <img alt="sponsor_suse" class="icons-sponsor_suse" src="images/suse.png" />
181 + </a>
182 +</div>
183 +<div class="text-muted text-center">Sponsor</div>
184 diff --git a/templates/branding/plain/head_stylesheet.html.ep b/templates/branding/plain/head_stylesheet.html.ep
185 new file mode 100644
186 index 0000000..8a8b9fc
187 --- /dev/null
188 +++ b/templates/branding/plain/head_stylesheet.html.ep
189 @@ -0,0 +1 @@
190 +%= stylesheet '/stylesheets/bento/style.fluid.css'
191 diff --git a/templates/branding/plain/header.html.ep b/templates/branding/plain/header.html.ep
192 new file mode 100644
193 index 0000000..6d899d3
194 --- /dev/null
195 +++ b/templates/branding/plain/header.html.ep
196 @@ -0,0 +1,8 @@
197 +<div id="header-content" class="container_16">
198 + <%= link_to 'http://www.opensuse.org' => (id => 'header-logo') => begin %>
199 + <%= image '/images/header-logo.png', alt => 'Header Logo', height => "26", width => "46" %>
200 + <% end %>
201 + <ul id="global-navigation">
202 + <li id="item-support"><a href="http://github.com/openSUSE/openQA">openQA</a></li>
203 + </ul>
204 +</div>
205 diff --git a/templates/branding/plain/navbar.html.ep b/templates/branding/plain/navbar.html.ep
206 new file mode 100644
207 index 0000000..e69de29
208 diff --git a/templates/branding/plain/sponsorbox.html.ep b/templates/branding/plain/sponsorbox.html.ep
209 new file mode 100644
210 index 0000000..e69de29
211 diff --git a/templates/layouts/bootstrap.html.ep b/templates/layouts/bootstrap.html.ep
212 index 2ba6ba6..ffcabde 100644
213 --- a/templates/layouts/bootstrap.html.ep
214 +++ b/templates/layouts/bootstrap.html.ep
215 @@ -37,26 +37,7 @@
216 </head>
217 <body>
218 <div id="wrapper">
219 - <nav class='container-fluid navbar navbar-default navbar-static-top'>
220 - <div class='navbar-inner'>
221 - <div class='container'>
222 - <div class="navbar-header">
223 - <a class="navbar-brand" href="#">
224 - <img alt="Brand" src="/images/header-logo.png" />
225 - </a>
226 - </div>
227 - <div class='collapse navbar-collapse'>
228 - <ul class='nav navbar-nav' id='global-navigation'>
229 - <li id='item-downloads'><a href="http://en.opensuse.org/openSUSE:Browse#Downloads">Downloads</a></li>
230 - <li id='item-support'><a href="http://en.opensuse.org/openSUSE:Browse#Support">Support</a></li>
231 - <li id='item-community'><a href="http://en.opensuse.org/openSUSE:Browse#Community">Community</a></li>
232 - <li id='item-development'><a href="http://en.opensuse.org/openSUSE:Browse#Development">Development</a></li>
233 - </ul>
234 - </div>
235 - </div>
236 - </div>
237 - </nav>
238 -
239 + %= include_branding 'navbar'
240 <div class='container'>
241 <div class='row' id='subheader'>
242 <div class='col-md-7'>
243 diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
244 index 62f474f..30c60ef 100644
245 --- a/templates/layouts/default.html.ep
246 +++ b/templates/layouts/default.html.ep
247 @@ -8,7 +8,7 @@
248 </head>
249 <body>
250 <div id="header">
251 - %= include 'layouts/header'
252 + %= include_branding 'header'
253 </div>
254
255 <div id="subheader" class="container_16">
256 diff --git a/templates/layouts/head.html.ep b/templates/layouts/head.html.ep
257 index 8ac3117..edfe86e 100644
258 --- a/templates/layouts/head.html.ep
259 +++ b/templates/layouts/head.html.ep
260 @@ -7,12 +7,7 @@
261 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
262 <meta name="csrf-token" content="<%= csrf_token %>" />
263 <meta name="csrf-param" content="csrf_token" />
264 -% if ($self->app->config->{'global'}->{'branding'} eq "openSUSE") {
265 - <link rel="stylesheet" href="https://static.opensuse.org/themes/bento/css/style.fluid.css" media="screen" />
266 - <link rel="stylesheet" href="https://static.opensuse.org/themes/bento/css/print.css" media="print" />
267 -% } else {
268 - %= stylesheet '/stylesheets/bento/style.fluid.css'
269 -% }
270 +%= include_branding 'head_stylesheet'
271 %= asset 'app.css'
272 %= asset 'app.js'
273
274 diff --git a/templates/layouts/header.html.ep b/templates/layouts/header.html.ep
275 deleted file mode 100644
276 index 4164b9b..0000000
277 --- a/templates/layouts/header.html.ep
278 +++ /dev/null
279 @@ -1,20 +0,0 @@
280 -<div id="header-content" class="container_16">
281 -% if ($self->app->config->{'global'}->{'branding'} eq "openSUSE") {
282 - <%= link_to 'http://www.opensuse.org' => (id => 'header-logo') => begin %>
283 - <%= image '/images/header-logo.png', alt => 'Header Logo', height => "26", width => "46" %>
284 - <% end %>
285 - <ul id="global-navigation">
286 - <li id="item-downloads"><a href="http://opensuse.org/sitemap#downloads">Downloads</a></li>
287 - <li id="item-support"><a href="http://opensuse.org/sitemap#support">Support</a></li>
288 - <li id="item-community"><a href="http://opensuse.org/sitemap#community">Community</a></li>
289 - <li id="item-development"><a href="http://opensuse.org/sitemap#development">Development</a></li>
290 - </ul>
291 -% } else {
292 - <%= link_to 'http://www.opensuse.org' => (id => 'header-logo') => begin %>
293 - <%= image '/images/header-logo.png', alt => 'Header Logo', height => "26", width => "46" %>
294 - <% end %>
295 - <ul id="global-navigation">
296 - <li id="item-support"><a href="http://github.com/openSUSE/openQA">openQA</a></li>
297 - </ul>
298 -% }
299 -</div>
300 diff --git a/templates/main/index.html.ep b/templates/main/index.html.ep
301 index ef9516f..bff1551 100644
302 --- a/templates/main/index.html.ep
303 +++ b/templates/main/index.html.ep
304 @@ -17,14 +17,7 @@
305 </div>
306
307 <div class="col-md-2 hidden-sm hidden-xs">
308 - % if ($self->app->config->{'global'}->{'branding'} eq "openSUSE") {
309 - <div class="text-right" id="sponsorbox">
310 - <a href="http://www.suse.com" title="SUSE">
311 - <img alt="sponsor_suse" class="icons-sponsor_suse" src="images/suse.png" />
312 - </a>
313 - </div>
314 - <div class="text-muted text-center">Sponsor</div>
315 - % }
316 + %= include_branding 'sponsorbox'
317 </div>
318 </div>
319 </div>
320 --
321 2.5.0
322

  ViewVC Help
Powered by ViewVC 1.1.28