Commit fe3c0b17eb9366bd157e8c85ee9fec00a62cbed5

Authored by Rodrigo Souto
2 parents fa17646b 8a831990

Merge branch 'env-bars' into 'next'

Add global theme intervention spaces

When the env theme has `global.css`, `global_header.html.erb`, or `global_footer.html.erb`, that content is added to any customized profile theme.

See merge request !529
HACKING.themes.md 0 → 100644
... ... @@ -0,0 +1,60 @@
  1 +Noosfero Instructions for Theme Developers
  2 +==========================================
  3 +
  4 +To build Noosfero themes you must to know HTML and CSS. You may also get some advantages with Ruby and Noosfero hacking knowledge because all customizable pieces of the theme's HTML structure are [erb](http://en.wikipedia.org/wiki/ERuby) files.
  5 +
  6 +
  7 +Organization Basics
  8 +-------------------
  9 +
  10 +A theme is a directory and must inside `noosfero/public/designs/themes`, and you will find tis themes in a fresh installation:
  11 +`noosfero`, `aluminium`, `base`, `butter`, `chameleon`, `chocolate`, `orange`, `plum`, `scarletred` and `skyblue`. The `default` is only a link to `noosfero` and you can change this link to any other.
  12 +
  13 +`noosfero` is the default theme with a big header. All other are colored themes with a thin header. That colored ones can be used as additional themes for any environment, as they will search for `/images/thin-logo.png` inside the current environment.theme, to use as top left logo.
  14 +
  15 +Inside a theme we can found:
  16 +* `theme.yml` — Theme description with some nice configuration options.
  17 +* `preview.png` — A 100x100 screenshot of this theme to the theme selection UI.
  18 +* `style.css` — The main file. The magic happens here.
  19 +* `errors.css` — Change the error page look. (only if this theme is linked by `defaut`)
  20 +* `favicon.ico` — The identifier icon for your web site.
  21 +* `images` — Another name can be found by your CSS, but will not allow to reuse the logo.
  22 + * `thin-logo.png` — The logo to be reused by the colored themes.
  23 + * *many images...*
  24 +* `site_title.html.erb` — A nice place to put your logo, any code here will be placed inside `h1#site-title`.
  25 +* `header.html.erb` — That goes inside `div#theme-header`.
  26 +* `navigation.html.erb` — That goes inside `div#navigation ul`, so use `<li>`s.
  27 +* `footer.html.erb` — That goes inside `div#theme-footer`.
  28 +
  29 +You can add more files like javascript and modularized CSS, but you must to refer that by the described files above.
  30 +
  31 +To refer one of this files trough the web the path is `<domain>/designs/themes/<thistheme>/<somefile>`.
  32 +
  33 +
  34 +theme.yml
  35 +---------
  36 +
  37 +A simple definition file. See this example:
  38 +```yml
  39 +name: "My Cool Theme"
  40 +layout: "application-ng"
  41 +jquery_theme: "smoothness"
  42 +icon_theme: [default, pidgin]
  43 +gravatar: "retro"
  44 +```
  45 +
  46 +About non obvious:
  47 +* `layout` is about the theme structure to use. The `application-ng` is enough for 99.97358% use cases. If you want to use another structure, you must add a new `*.html.erb` file at `app/views/layouts/`.
  48 +* `icon_theme` point to something inside `public/designs/icons/`.
  49 +* `gravatar` set the default gravatar *(avatar picture)* for people without picture.
  50 +
  51 +
  52 +Theme Intervention from Environment Theme
  53 +-----------------------------------------
  54 +
  55 +Sometimes an environment (as instace http://cirandas.net) wants to allow profiles to set its own theme, but with some environment identification or functions, like a top bar with the social network logo and a top menu (as instace http://cirandas.net/rango-vegan).
  56 +To make the magic happens you can add some files to the environment theme.
  57 +All are optional:
  58 +* `global.css` — this must be used to style all extra html added by your intervention partials. As it is a free form css file you can style anything, but this is a conflict risk.
  59 +* `global_header.html.erb` — Will add content to `#global-header`.
  60 +* `global_footer.html.erb` — Will add content to `#global-footer`.
... ...
app/helpers/application_helper.rb
... ... @@ -398,19 +398,27 @@ module ApplicationHelper
398 398 end
399 399 end
400 400  
401   - def theme_view_file(template)
  401 + def theme_view_file(template, theme=nil)
402 402 # Since we cannot control what people are doing in external themes, we
403 403 # will keep looking for the deprecated .rhtml extension here.
404   - file = Rails.root.join('public', theme_path[1..-1], template + '.html.erb')
  404 + addr = theme ? "designs/themes/#{theme}" : theme_path[1..-1]
  405 + file = Rails.root.join('public', addr, template + '.html.erb')
405 406 return file if File.exists?(file)
406 407 nil
407 408 end
408 409  
409 410 def theme_include(template, options = {})
410   - file = theme_view_file(template)
411   - options.merge!({:file => file, :use_full_path => false})
  411 + from_theme_include(nil, template, options)
  412 + end
  413 +
  414 + def env_theme_include(template, options = {})
  415 + from_theme_include(environment.theme, template, options)
  416 + end
  417 +
  418 + def from_theme_include(theme, template, options = {})
  419 + file = theme_view_file(template, theme)
412 420 if file
413   - render options
  421 + render options.merge(file: file, use_full_path: false)
414 422 else
415 423 nil
416 424 end
... ... @@ -446,6 +454,14 @@ module ApplicationHelper
446 454 @theme_extra_navigation ||= theme_include 'navigation'
447 455 end
448 456  
  457 + def global_header
  458 + @global_header ||= env_theme_include 'global_header'
  459 + end
  460 +
  461 + def global_footer
  462 + @global_footer ||= env_theme_include 'global_footer'
  463 + end
  464 +
449 465 def is_testing_theme
450 466 !controller.session[:theme].nil?
451 467 end
... ...
app/helpers/layout_helper.rb
... ... @@ -52,22 +52,30 @@ module LayoutHelper
52 52 'selectordie-theme',
53 53 pngfix_stylesheet_path,
54 54 ] + tokeninput_stylesheets
55   - plugins_stylesheets = @plugins.select(&:stylesheet?).map { |plugin| plugin.class.public_path('style.css') }
56   -
57   - output = ''
58   - output += stylesheet_link_tag standard_stylesheets, :cache => 'cache/application'
59   - output += stylesheet_link_tag template_stylesheet_path
60   - output += stylesheet_link_tag icon_theme_stylesheet_path
61   - output += stylesheet_link_tag jquery_ui_theme_stylesheet_path
  55 + plugins_stylesheets = @plugins.select(&:stylesheet?).map { |plugin|
  56 + plugin.class.public_path('style.css')
  57 + }
  58 + global_css_pub = "/designs/themes/#{environment.theme}/global.css"
  59 + global_css_at_fs = Rails.root.join 'public' + global_css_pub
  60 +
  61 + output = []
  62 + output << stylesheet_link_tag(standard_stylesheets, :cache => 'cache/application')
  63 + output << stylesheet_link_tag(template_stylesheet_path)
  64 + output << stylesheet_link_tag(icon_theme_stylesheet_path)
  65 + output << stylesheet_link_tag(jquery_ui_theme_stylesheet_path)
62 66 unless plugins_stylesheets.empty?
63   - output += stylesheet_link_tag plugins_stylesheets, :cache => "cache/plugins-#{Digest::MD5.hexdigest plugins_stylesheets.to_s}"
  67 + cacheid = "cache/plugins-#{Digest::MD5.hexdigest plugins_stylesheets.to_s}"
  68 + output << stylesheet_link_tag(plugins_stylesheets, :cache => cacheid)
64 69 end
65   - output += stylesheet_link_tag theme_stylesheet_path
66   - output
  70 + if File.exists? global_css_at_fs
  71 + output << stylesheet_link_tag(global_css_pub)
  72 + end
  73 + output << stylesheet_link_tag(theme_stylesheet_path)
  74 + output.join "\n"
67 75 end
68 76  
69 77 def pngfix_stylesheet_path
70   - 'iepngfix/iepngfix.css'
  78 + 'iepngfix/iepngfix.css' #TODO: deprecate it
71 79 end
72 80  
73 81 def tokeninput_stylesheets
... ...
app/views/layouts/application-ng.html.erb
... ... @@ -25,7 +25,7 @@
25 25 end.join("\n")
26 26 %>
27 27  
28   - <script type='text/javascript'>
  28 + <script type="text/javascript">
29 29 DEFAULT_LOADING_MESSAGE = <%="'#{ _('loading...') }'" %>;
30 30 </script>
31 31  
... ... @@ -38,9 +38,12 @@
38 38 if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
39 39 end.join("\n")
40 40 %>
  41 + <div id="global-header">
  42 + <%= global_header %>
  43 + </div>
41 44  
42 45 <div id="wrap-1">
43   - <div id='theme-header'>
  46 + <div id="theme-header">
44 47 <%= theme_header %>
45 48 </div>
46 49 <div id="wrap-2">
... ... @@ -60,9 +63,14 @@
60 63 </div><!-- end id="wrap-2" -->
61 64 </div><!-- end id="wrap-1" -->
62 65 <%= render_environment_features(:logged_in) if logged_in? %>
63   - <div id="theme-footer">
64   - <%= theme_footer %>
65   - </div><!-- end id="theme-footer" -->
  66 + <div id="footer">
  67 + <div id="theme-footer">
  68 + <%= theme_footer %>
  69 + </div><!-- end id="theme-footer" -->
  70 + <div id="global-footer">
  71 + <%= global_footer %>
  72 + </div><!-- end id="global-footer" -->
  73 + </div><!-- end id="footer" -->
66 74 <%= noosfero_layout_features %>
67 75 <%= addthis_javascript %>
68 76 <%=
... ...
app/views/layouts/application.html.erb
... ... @@ -52,6 +52,9 @@
52 52 registerDocumentSize();
53 53 // -->
54 54 </script>
  55 + <div id="global-header">
  56 + <%= global_header %>
  57 + </div>
55 58  
56 59 <div id="accessibility_menu">
57 60 <a href="#content" id="link_go_content"><span><%= _('Go to content') %></span></a>
... ... @@ -112,8 +115,13 @@
112 115 </div><!-- id="wrap" -->
113 116  
114 117 <div id="footer">
115   - <%= theme_footer %>
116   - </div><!-- id="footer" -->
  118 + <div id="theme-footer">
  119 + <%= theme_footer %>
  120 + </div><!-- end id="theme-footer" -->
  121 + <div id="global-footer">
  122 + <%= global_footer %>
  123 + </div><!-- end id="global-footer" -->
  124 + </div><!-- end id="footer" -->
117 125  
118 126 <%# if you need to add HTML stuff to the layout, include it in
119 127 app/views/shared/noosfero_layout_features.html.erb! %>
... ...
public/stylesheets/application.css
... ... @@ -77,19 +77,6 @@ div#errorExplanation h2 {
77 77 #footer_content {
78 78 clear: both;
79 79 }
80   -#footer {
81   - text-align: center;
82   - clear: both;
83   - font-size: 10px;
84   - color: #777;
85   -}
86   -#footer a {
87   - color: #777;
88   - text-decoration: none;
89   -}
90   -#footer a:hover {
91   - color: #555;
92   -}
93 80 div#profile-disabled {
94 81 border: 2px solid #944;
95 82 text-align: center;
... ...
test/unit/application_helper_test.rb
... ... @@ -961,6 +961,47 @@ class ApplicationHelperTest &lt; ActionView::TestCase
961 961 assert_equal '', manage_communities
962 962 end
963 963  
  964 + should 'include file from current theme out of a profile page' do
  965 + def profile; nil; end
  966 + def environment; e={}; def e.theme; 'env-theme'; end; e; end
  967 + def render(opt); opt; end
  968 + File.stubs(:exists?).returns(false)
  969 + file = Rails.root.join 'public/designs/themes/env-theme/somefile.html.erb'
  970 + assert_nil theme_include('somefile') # exists? = false
  971 + File.expects(:exists?).with(file).returns(true).at_least_once
  972 + assert_equal file, theme_include('somefile')[:file] # exists? = true
  973 + end
  974 +
  975 + should 'include file from current theme inside a profile page' do
  976 + def profile; p={}; def p.theme; 'my-theme'; end; p; end
  977 + def render(opt); opt; end
  978 + File.stubs(:exists?).returns(false)
  979 + file = Rails.root.join 'public/designs/themes/my-theme/otherfile.html.erb'
  980 + assert_nil theme_include('otherfile') # exists? = false
  981 + File.expects(:exists?).with(file).returns(true).at_least_once
  982 + assert_equal file, theme_include('otherfile')[:file] # exists? = true
  983 + end
  984 +
  985 + should 'include file from env theme' do
  986 + def profile; p={}; def p.theme; 'my-theme'; end; p; end
  987 + def environment; e={}; def e.theme; 'env-theme'; end; e; end
  988 + def render(opt); opt; end
  989 + File.stubs(:exists?).returns(false)
  990 + file = Rails.root.join 'public/designs/themes/env-theme/afile.html.erb'
  991 + assert_nil env_theme_include('afile') # exists? = false
  992 + File.expects(:exists?).with(file).returns(true).at_least_once
  993 + assert_equal file, env_theme_include('afile')[:file] # exists? = true
  994 + end
  995 +
  996 + should 'include file from some theme' do
  997 + def render(opt); opt; end
  998 + File.stubs(:exists?).returns(false)
  999 + file = Rails.root.join 'public/designs/themes/atheme/afile.html.erb'
  1000 + assert_nil from_theme_include('atheme', 'afile') # exists? = false
  1001 + File.expects(:exists?).with(file).returns(true).at_least_once
  1002 + assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true
  1003 + end
  1004 +
964 1005 protected
965 1006 include NoosferoTestHelper
966 1007  
... ...
test/unit/layout_helper_test.rb
1 1 require_relative "../test_helper"
2 2  
3 3 class LayoutHelperTest < ActionView::TestCase
  4 + include ApplicationHelper
4 5  
5 6 should 'append logged-in class in body when user is logged-in' do
6 7 expects(:logged_in?).returns(true)
... ... @@ -14,4 +15,19 @@ class LayoutHelperTest &lt; ActionView::TestCase
14 15 assert_not_includes body_classes.split, 'logged-in'
15 16 end
16 17  
  18 + should 'add global.css to noosfero_stylesheets if env theme has it' do
  19 + env = fast_create Environment
  20 + env.theme = 'my-theme'
  21 + @plugins = []
  22 + expects(:profile).returns(nil).at_least_once
  23 + expects(:environment).returns(env).at_least_once
  24 + expects(:theme_option).with(:icon_theme).returns(['my-icons']).at_least_once
  25 + expects(:jquery_theme).returns('jquery-nice').at_least_once
  26 + global_css = Rails.root.join "public/designs/themes/#{env.theme}/global.css"
  27 + File.stubs(:exists?).returns(false)
  28 + File.expects(:exists?).with(global_css).returns(true).at_least_once
  29 + css = noosfero_stylesheets
  30 + assert_match /<link [^<]*href="\/designs\/themes\/my-theme\/global.css"/, css
  31 + end
  32 +
17 33 end
... ...