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

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
Rodrigo Souto
2 parents fa17646b 8a831990
Showing 8 changed files with 180 additions and 36 deletions Show diff stats
HACKING.themes.md
app/helpers/application_helper.rb
app/helpers/layout_helper.rb
app/views/layouts/application-ng.html.erb
app/views/layouts/application.html.erb
public/stylesheets/application.css
test/unit/application_helper_test.rb
test/unit/layout_helper_test.rb
@@ -0,0 +1,60 @@
+Noosfero Instructions for Theme Developers
+==========================================
+
+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.
+
+
+Organization Basics
+-------------------
+
+A theme is a directory and must inside `noosfero/public/designs/themes`, and you will find tis themes in a fresh installation:
+`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.
+
+`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.
+
+Inside a theme we can found:
+* `theme.yml` — Theme description with some nice configuration options.
+* `preview.png` — A 100x100 screenshot of this theme to the theme selection UI.
+* `style.css` — The main file. The magic happens here.
+* `errors.css` — Change the error page look. (only if this theme is linked by `defaut`)
+* `favicon.ico` — The identifier icon for your web site.
+* `images` — Another name can be found by your CSS, but will not allow to reuse the logo.
+  * `thin-logo.png` — The logo to be reused by the colored themes.
+  * *many images...*
+* `site_title.html.erb` — A nice place to put your logo, any code here will be placed inside `h1#site-title`.
+* `header.html.erb` — That goes inside `div#theme-header`.
+* `navigation.html.erb` — That goes inside `div#navigation ul`, so use `<li>`s.
+* `footer.html.erb` — That goes inside `div#theme-footer`.
+
+You can add more files like javascript and modularized CSS, but you must to refer that by the described files above.
+
+To refer one of this files trough the web the path is `<domain>/designs/themes/<thistheme>/<somefile>`.
+
+
+theme.yml
+---------
+
+A simple definition file. See this example:
+```yml
+name: "My Cool Theme"
+layout: "application-ng"
+jquery_theme: "smoothness"
+icon_theme: [default, pidgin]
+gravatar: "retro"
+```
+
+About non obvious:
+* `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/`.
+* `icon_theme` point to something inside `public/designs/icons/`.
+* `gravatar` set the default gravatar *(avatar picture)* for people without picture.
+
+
+Theme Intervention from Environment Theme
+-----------------------------------------
+
+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).
+To make the magic happens you can add some files to the environment theme.
+All are optional:
+* `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.
+* `global_header.html.erb` — Will add content to `#global-header`.
+* `global_footer.html.erb` — Will add content to `#global-footer`.
@@ -398,19 +398,27 @@ module ApplicationHelper
       end
   end
-  def theme_view_file(template)
+  def theme_view_file(template, theme=nil)
     # Since we cannot control what people are doing in external themes, we
     # will keep looking for the deprecated .rhtml extension here.
-    file = Rails.root.join('public', theme_path[1..-1], template + '.html.erb')
+    addr = theme ? "designs/themes/#{theme}" : theme_path[1..-1]
+    file = Rails.root.join('public', addr, template + '.html.erb')
     return file if File.exists?(file)
     nil
   end
   def theme_include(template, options = {})
-    file = theme_view_file(template)
-    options.merge!({:file => file, :use_full_path => false})
+    from_theme_include(nil, template, options)
+  end
+
+  def env_theme_include(template, options = {})
+    from_theme_include(environment.theme, template, options)
+  end
+
+  def from_theme_include(theme, template, options = {})
+    file = theme_view_file(template, theme)
     if file
-      render options
+      render options.merge(file: file, use_full_path: false)
     else
       nil
     end
@@ -446,6 +454,14 @@ module ApplicationHelper
     @theme_extra_navigation ||= theme_include 'navigation'
   end
+  def global_header
+    @global_header ||= env_theme_include 'global_header'
+  end
+
+  def global_footer
+    @global_footer ||= env_theme_include 'global_footer'
+  end
+
   def is_testing_theme
     !controller.session[:theme].nil?
   end
@@ -52,22 +52,30 @@ module LayoutHelper
       'selectordie-theme',
       pngfix_stylesheet_path,
     ] + tokeninput_stylesheets
-    plugins_stylesheets = @plugins.select(&:stylesheet?).map { |plugin| plugin.class.public_path('style.css') }
-
-    output = ''
-    output += stylesheet_link_tag standard_stylesheets, :cache => 'cache/application'
-    output += stylesheet_link_tag template_stylesheet_path
-    output += stylesheet_link_tag icon_theme_stylesheet_path
-    output += stylesheet_link_tag jquery_ui_theme_stylesheet_path
+    plugins_stylesheets = @plugins.select(&:stylesheet?).map { |plugin|
+      plugin.class.public_path('style.css')
+    }
+    global_css_pub = "/designs/themes/#{environment.theme}/global.css"
+    global_css_at_fs = Rails.root.join 'public' + global_css_pub
+
+    output = []
+    output << stylesheet_link_tag(standard_stylesheets, :cache => 'cache/application')
+    output << stylesheet_link_tag(template_stylesheet_path)
+    output << stylesheet_link_tag(icon_theme_stylesheet_path)
+    output << stylesheet_link_tag(jquery_ui_theme_stylesheet_path)
     unless plugins_stylesheets.empty?
-      output += stylesheet_link_tag plugins_stylesheets, :cache => "cache/plugins-#{Digest::MD5.hexdigest plugins_stylesheets.to_s}"
+      cacheid = "cache/plugins-#{Digest::MD5.hexdigest plugins_stylesheets.to_s}"
+      output << stylesheet_link_tag(plugins_stylesheets, :cache => cacheid)
     end
-    output += stylesheet_link_tag theme_stylesheet_path
-    output
+    if File.exists? global_css_at_fs
+      output << stylesheet_link_tag(global_css_pub)
+    end
+    output << stylesheet_link_tag(theme_stylesheet_path)
+    output.join "\n"
   end
   def pngfix_stylesheet_path
-    'iepngfix/iepngfix.css'
+    'iepngfix/iepngfix.css' #TODO: deprecate it
   end
   def tokeninput_stylesheets
@@ -25,7 +25,7 @@
       end.join("\n")
     %>
-    <script type='text/javascript'>
+    <script type="text/javascript">
       DEFAULT_LOADING_MESSAGE = <%="'#{ _('loading...') }'" %>;
     </script>
@@ -38,9 +38,12 @@
         if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
       end.join("\n")
     %>
+    <div id="global-header">
+      <%= global_header %>
+    </div>
     <div id="wrap-1">
-      <div id='theme-header'>
+      <div id="theme-header">
         <%= theme_header %>
       </div>
       <div id="wrap-2">
@@ -60,9 +63,14 @@
       </div><!-- end id="wrap-2" -->
     </div><!-- end id="wrap-1" -->
     <%= render_environment_features(:logged_in) if logged_in? %>
-    <div id="theme-footer">
-      <%= theme_footer %>
-    </div><!-- end id="theme-footer" -->
+    <div id="footer">
+      <div id="theme-footer">
+        <%= theme_footer %>
+      </div><!-- end id="theme-footer" -->
+      <div id="global-footer">
+        <%= global_footer %>
+      </div><!-- end id="global-footer" -->
+    </div><!-- end id="footer" -->
     <%= noosfero_layout_features %>
     <%= addthis_javascript %>
     <%=
@@ -52,6 +52,9 @@
       registerDocumentSize();
       // -->
     </script>
+    <div id="global-header">
+      <%= global_header %>
+    </div>
     <div id="accessibility_menu">
       <a href="#content" id="link_go_content"><span><%= _('Go to content') %></span></a>
@@ -112,8 +115,13 @@
     </div><!-- id="wrap" -->
     <div id="footer">
-      <%= theme_footer %>
-    </div><!-- id="footer" -->
+      <div id="theme-footer">
+        <%= theme_footer %>
+      </div><!-- end id="theme-footer" -->
+      <div id="global-footer">
+        <%= global_footer %>
+      </div><!-- end id="global-footer" -->
+    </div><!-- end id="footer" -->
     <%# if you need to add HTML stuff to the layout, include it in
     app/views/shared/noosfero_layout_features.html.erb! %>
@@ -77,19 +77,6 @@ div#errorExplanation h2 {
 #footer_content {
   clear: both;
 }
-#footer {
-  text-align: center;
-  clear: both;
-  font-size: 10px;
-  color: #777;
-}
-#footer a {
-  color: #777;
-  text-decoration: none;
-}
-#footer a:hover {
-  color: #555;
-}
 div#profile-disabled {
   border: 2px solid #944;
   text-align: center;
@@ -961,6 +961,47 @@ class ApplicationHelperTest &lt; ActionView::TestCase
     assert_equal '', manage_communities
   end
+  should 'include file from current theme out of a profile page' do
+    def profile; nil; end
+    def environment; e={}; def e.theme; 'env-theme'; end; e; end
+    def render(opt); opt; end
+    File.stubs(:exists?).returns(false)
+    file = Rails.root.join 'public/designs/themes/env-theme/somefile.html.erb'
+    assert_nil theme_include('somefile') # exists? = false
+    File.expects(:exists?).with(file).returns(true).at_least_once
+    assert_equal file, theme_include('somefile')[:file] # exists? = true
+  end
+
+  should 'include file from current theme inside a profile page' do
+    def profile; p={}; def p.theme; 'my-theme'; end; p; end
+    def render(opt); opt; end
+    File.stubs(:exists?).returns(false)
+    file = Rails.root.join 'public/designs/themes/my-theme/otherfile.html.erb'
+    assert_nil theme_include('otherfile') # exists? = false
+    File.expects(:exists?).with(file).returns(true).at_least_once
+    assert_equal file, theme_include('otherfile')[:file] # exists? = true
+  end
+
+  should 'include file from env theme' do
+    def profile; p={}; def p.theme; 'my-theme'; end; p; end
+    def environment; e={}; def e.theme; 'env-theme'; end; e; end
+    def render(opt); opt; end
+    File.stubs(:exists?).returns(false)
+    file = Rails.root.join 'public/designs/themes/env-theme/afile.html.erb'
+    assert_nil env_theme_include('afile') # exists? = false
+    File.expects(:exists?).with(file).returns(true).at_least_once
+    assert_equal file, env_theme_include('afile')[:file] # exists? = true
+  end
+
+  should 'include file from some theme' do
+    def render(opt); opt; end
+    File.stubs(:exists?).returns(false)
+    file = Rails.root.join 'public/designs/themes/atheme/afile.html.erb'
+    assert_nil from_theme_include('atheme', 'afile') # exists? = false
+    File.expects(:exists?).with(file).returns(true).at_least_once
+    assert_equal file, from_theme_include('atheme', 'afile')[:file] # exists? = true
+  end
+
   protected
   include NoosferoTestHelper
 require_relative "../test_helper"
 class LayoutHelperTest < ActionView::TestCase
+  include ApplicationHelper
   should 'append logged-in class in body when user is logged-in' do
     expects(:logged_in?).returns(true)
@@ -14,4 +15,19 @@ class LayoutHelperTest &lt; ActionView::TestCase
     assert_not_includes body_classes.split, 'logged-in'
   end
+  should 'add global.css to noosfero_stylesheets if env theme has it' do
+    env = fast_create Environment
+    env.theme = 'my-theme'
+    @plugins = []
+    expects(:profile).returns(nil).at_least_once
+    expects(:environment).returns(env).at_least_once
+    expects(:theme_option).with(:icon_theme).returns(['my-icons']).at_least_once
+    expects(:jquery_theme).returns('jquery-nice').at_least_once
+    global_css = Rails.root.join "public/designs/themes/#{env.theme}/global.css"
+    File.stubs(:exists?).returns(false)
+    File.expects(:exists?).with(global_css).returns(true).at_least_once
+    css = noosfero_stylesheets
+    assert_match /<link [^<]*href="\/designs\/themes\/my-theme\/global.css"/, css
+  end
+
 end
@@ -0,0 +1,60 @@		@@ -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`.
	@@ -77,19 +77,6 @@ div#errorExplanation h2 {		@@ -77,19 +77,6 @@ div#errorExplanation h2 {
77	#footer_content {	77	#footer_content {
78	clear: both;	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	div#profile-disabled {	80	div#profile-disabled {
94	border: 2px solid #944;	81	border: 2px solid #944;
95	text-align: center;	82	text-align: center;
	@@ -961,6 +961,47 @@ class ApplicationHelperTest < ActionView::TestCase		@@ -961,6 +961,47 @@ class ApplicationHelperTest < ActionView::TestCase
961	assert_equal '', manage_communities	961	assert_equal '', manage_communities
962	end	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	protected	1005	protected
965	include NoosferoTestHelper	1006	include NoosferoTestHelper
966		1007
1	require_relative "../test_helper"	1	require_relative "../test_helper"
2		2
3	class LayoutHelperTest < ActionView::TestCase	3	class LayoutHelperTest < ActionView::TestCase
		4	+ include ApplicationHelper
4		5
5	should 'append logged-in class in body when user is logged-in' do	6	should 'append logged-in class in body when user is logged-in' do
6	expects(:logged_in?).returns(true)	7	expects(:logged_in?).returns(true)
	@@ -14,4 +15,19 @@ class LayoutHelperTest < ActionView::TestCase		@@ -14,4 +15,19 @@ class LayoutHelperTest < ActionView::TestCase
14	assert_not_includes body_classes.split, 'logged-in'	15	assert_not_includes body_classes.split, 'logged-in'
15	end	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	end	33	end