Beautify themes list page

patch attached From df266a9e69468ee74bcb38d92985fbbb46e3d14b Mon Sep 17 00:00:00 2001 From: Aurelio A. Heckert <aurelio@colivre.coop.br> Date: Thu, 16 Dec 2010 21:43:53 -0300 Subject: [PATCH] Beautify themes list page

Beautify themes list page
patch attached From df266a9e69468ee74bcb38d92985fbbb46e3d14b Mon Sep 17 00:00:00 2001 From: Aurelio A. Heckert <aurelio@colivre.coop.br> Date: Thu, 16 Dec 2010 21:43:53 -0300 Subject: [PATCH] Beautify themes list page
Aurelio A Heckert · Antonio Terceiro
1 parent cc507fc7
Showing 9 changed files with 685 additions and 175 deletions Show diff stats
app/controllers/my_profile/themes_controller.rb
app/views/themes/index.rhtml
public/designs/templates/default/thumbnail.png
public/designs/templates/default/thumbnail.svg
public/designs/templates/leftbar/thumbnail.png
public/designs/templates/leftbar/thumbnail.svg
public/designs/templates/rightbar/thumbnail.png
public/designs/templates/rightbar/thumbnail.svg
public/stylesheets/application.css
@@ -23,7 +23,7 @@ class ThemesController &lt; MyProfileController
  
   def new
     if !request.xhr?
-      id = params[:name].to_slug
+      id = params[:name] ? params[:name].to_slug : 'my-theme'
       t = Theme.new(id, :name => params[:name], :owner => profile, :public => false)
       t.save
       redirect_to :action => 'index'
 <h1><%= _('Editing Appearance') %></h1>
  
-<table class='noborder' style='width: auto; margin:auto'>
-
-  <tr>
-    <td colspan='6'>
-      <h2><%= _('Select template') %></h2>
-    </td>
-  </tr>
-  <% for templates in @layout_templates.in_groups_of(3) %>
-    <tr>
-      <% for template in templates %>
-        <%
-          selected = (!template.nil? && (@current_template == template.id))
-        %>
-        <td class="template-preview-cell">
-          <% if template %>
-            <%= image_tag("/designs/templates/#{template.id}/thumbnail.png",
-                :class => 'template-preview',
-                :alt => _('The "%s" template')) %>
-          <% end %>
-        </td>
-        <td <%= 'class="selected template"' if selected %> style='vertical-align: top;'>
-          <% if template %>
-            <strong><%= template.id %> <%= _('(current)') if selected %></strong>
-            <br/>
-            <%= link_to(_('Use this template'), :action => 'set_layout_template', :id => template.id) unless selected %>
-          <% end %>
-        </td>
-        <td>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-        </td>
-      <% end %> 
-    </tr>
-  <% end %>
+<div id="template-options" class="list-options">
  
+<h2><%= _('Select template') %></h2>
  
-  <% if !@themes.empty? %>
-    <tr>
-      <td colspan='6'>
-        <h2><%= _('Select theme') %></h2>
-        <% button_bar do %>
-          <%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
-        <% end %>
-      </td>
-    </tr>
-    <% for themes in @themes.in_groups_of(3)  %>
-      <tr>
-        <% for theme in themes %>
-          <%
-            selected = (!theme.nil? && (theme.id == @current_theme))
-          %>
-          <td>
-            <% if theme %>
-              <%= image_tag("/designs/themes/#{theme.name}/preview.png",
-                  :class => 'theme-preview',
-                  :alt => (_('The "%s" theme.') % theme.name)) %>
-            <% end %>
-          </td>
-          <td <%= 'class="selected theme"' if selected %> style='vertical-align: top'>
-            <% if theme %>
-              <strong><%= theme.name %> <%= _('(current)') if selected %></strong><br/>
-              <%= link_to(_('Use this theme'), :action => 'set', :id => theme.id) unless selected %>
-            <% end %>
-          </td>
-          <td>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </td>
-        <% end %>
-      </tr>
-      <tr><td colspan='3'>&nbsp;</td></tr>
-    <% end %>
-  <% end %>
+<% for templates in @layout_templates.in_groups_of(3) %>
+  <div class="list-group">
+    <% for template in templates %><%=
+      if template
+        base_content = image_tag(
+          "/designs/templates/#{template.id}/thumbnail.png",
+          :alt => _('The "%s" template')) +
+        '<div class="opt-info">' +
+        content_tag('strong', template.id, :class => 'name') +
+        ' <br/> '
  
+        if @current_template == template.id  # selected
+          content_tag( 'div',
+            base_content + content_tag('big', _('(current)') ) +'</div>',
+            :class => 'template-opt list-opt selected')
+        else  # Not selected
+          link_to(
+            base_content + content_tag('span', _('Use this template') ) +'</div>',
+            { :action => 'set_layout_template', :id => template.id },
+            :class => 'template-opt list-opt')
+        end
  
-  <% if environment.enabled?('user_themes') %>
-    <tr>
-      <td colspan='6'>
-        <h2><%= _('My themes') %></h2>
-      </td>
-    </tr>
-    <% for themes in profile.themes.in_groups_of(3)  %>
-      <tr>
-        <% for theme in themes %>
-          <td>
-            <%# FIXME add proper thumbnails %>
-            <%= image_tag('/images/icons-app/design-editor.png', :alt => (_('The "%s" theme.') % theme.name)) if theme %>
-          </td>
-          <td>
-            <strong><%= theme.name if theme%></strong><br/>
-            <%= link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) if theme %>
-            <br/>
-            <%= link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) if theme %>
-          </td>
-          <td>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-          </td>
-        <% end %>
-      </tr>
-      <tr><td colspan='3'>&nbsp;</td></tr>
-    <% end %>
+      end
+    %><% end %>
+  </div>
+<% end %>
+
+</div><!-- end id="template-options" -->
+
+
+<% if !@themes.empty? %>
+<div id="theme-options" class="list-options">
+
+<h2><%= _('Select theme') %></h2>
+<%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
+
+<% for themes in @themes.in_groups_of(3) %>
+  <div class="list-group">
+    <% for theme in themes %><%=
+      if theme
+
+        base_content = image_tag(
+          "/designs/themes/#{theme.name}/preview.png",
+          :alt => (_('The "%s" theme.') % theme.name)) +
+        '<div class="opt-info">' +
+        content_tag('strong', theme.name, :class => 'name') +
+        ' <br/> '
+
+        if theme.id == @current_theme  # selected
+          content_tag( 'div',
+            base_content + content_tag('big', _('(current)') ) +'</div>',
+            :class => 'theme-opt list-opt selected')
+        else  # Not selected
+          link_to(
+            base_content + content_tag('span', _('Use this theme') ) +'</div>',
+            { :action => 'set', :id => theme.id },
+            :class => 'theme-opt list-opt')
+        end
+
+      end
+    %><% end %>
+  </div>
+<% end %>
+
+</div><!-- end id="theme-options" -->
+<% end %>
+
+
+
+<% if environment.enabled?('user_themes') %>
+  <div id="user-themes" class="list-options">
+
+  <h2><%= _('My themes') %></h2>
+
+  <% for themes in profile.themes.in_groups_of(3)  %>
+    <div class="list-group">
+      <% for theme in themes %><%=
+        if theme
+
+          selected = theme.id == @current_theme
+          sel_html = selected ?
+            content_tag('big', _('(current)') ) :
+            link_to(_('Use this theme'), :action => 'set', :id => theme.id)
+
+          content_tag( 'div',
+            image_tag(
+              '/images/icons-app/design-editor.png',
+              :alt => (_('The "%s" theme.') % theme.name)) +
+            '<div class="opt-info">' +
+              content_tag('strong', theme.name, :class => 'name') +
+              ' <br/> '+ sel_html +' <br/> ' +
+              link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) +
+              ' <br/> ' +
+              link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) +
+            '</div>',
+            :class => 'theme-opt list-opt' + (selected ? ' selected' : '')
+          )
+
+        end
+      %><% end %>
+    </div>
   <% end %>
  
-</table>
+  </div><!-- end id="user-themes" -->
+<% end %>
+
+<br style="clear:both" />
  
 <% button_bar do %>
   <% if environment.enabled?('user_themes') %>
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/default/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,49 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3231">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.61"
+         id="feGaussianBlur3233" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="42.5"
+       y1="60.5"
+       x2="19.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +114,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,32 +154,87 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="filter:url(#filter3241);opacity:0.4"
+       transform="translate(1,1)">
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect3186"
+         width="12"
+         height="59"
+         x="49.5"
+         y="1.5"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="15.5"
+         height="59"
+         width="31"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="33.999981"
-       height="59.0909"
-       x="15.272727"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
-    <rect
-       rx="2.3636363"
-       ry="3.272727"
-       y="2.5454547"
-       x="2.5454543"
-       height="59.0909"
-       width="9.454525"
+       y="1.5"
+       x="1.5"
+       height="59"
+       width="11"
        id="rect2395"
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2" />
+    <rect
+       style="opacity:1;fill:url(#linearGradient3255);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3154"
+       width="12"
+       height="59"
+       x="49.5"
+       y="1.5"
+       ry="2" />
+    <rect
+       y="1.5"
+       x="15.5"
+       height="59"
+       width="31"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="2.5"
+       y="2.5" />
+    <rect
+       y="2.5"
+       x="16.5"
+       height="57"
+       width="29"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2397"
-       width="9.454525"
-       height="59.0909"
-       x="52.545456"
-       y="2.5454547"
-       ry="3.272727"
-       rx="2.3636363" />
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3164"
+       width="10"
+       height="57"
+       x="50.5"
+       y="2.5"
+       ry="1" />
   </g>
 </svg>
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/leftbar/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,51 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3231">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.61"
+         id="feGaussianBlur3233" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(2,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="49.5"
+       y1="60.5"
+       x2="23.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(2,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +116,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32.869585"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,23 +156,66 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="opacity:0.4;filter:url(#filter3241)"
+       transform="translate(3,1)">
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="15.5"
+         height="59"
+         width="43"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="45.31369"
-       height="59.0909"
-       x="15.272727"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
-    <rect
-       rx="2.3636363"
-       ry="3.272727"
-       y="2.5454547"
-       x="2.5454543"
-       height="59.0909"
-       width="9.454525"
+       y="1.5"
+       x="3.5"
+       height="59"
+       width="11"
        id="rect2395"
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       y="1.5"
+       x="17.5"
+       height="59"
+       width="43"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="4.5"
+       y="2.5"
+       rx="1" />
+    <rect
+       y="2.5"
+       x="18.5"
+       height="57"
+       width="41"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       rx="1" />
   </g>
 </svg>
@@ -6,6 +6,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="64px"
@@ -15,11 +16,46 @@
    inkscape:version="0.46"
    sodipodi:docname="thumbnail.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
-   inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/rightbar/thumbnail.png"
+   inkscape:export-filename="thumbnail.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
   <defs
      id="defs2385">
+    <linearGradient
+       id="linearGradient3263">
+      <stop
+         id="stop3265"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3267"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3257"
+       inkscape:collect="always">
+      <stop
+         id="stop3259"
+         offset="0"
+         style="stop-color:#204a87;stop-opacity:1" />
+      <stop
+         id="stop3261"
+         offset="1"
+         style="stop-color:#729fcf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3245">
+      <stop
+         style="stop-color:#204a87;stop-opacity:1"
+         offset="0"
+         id="stop3247" />
+      <stop
+         style="stop-color:#729fcf;stop-opacity:1"
+         offset="1"
+         id="stop3249" />
+    </linearGradient>
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
        inkscape:vp_x="0 : 32 : 1"
@@ -27,6 +63,43 @@
        inkscape:vp_z="64 : 32 : 1"
        inkscape:persp3d-origin="32 : 21.333333 : 1"
        id="perspective2391" />
+    <filter
+       inkscape:collect="always"
+       id="filter3241">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9075"
+         id="feGaussianBlur3243" />
+    </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3245"
+       id="linearGradient3251"
+       x1="11.5"
+       y1="60.5"
+       x2="3.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(48,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3263"
+       id="linearGradient3253"
+       x1="49.5"
+       y1="60.5"
+       x2="23.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-12,0)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3257"
+       id="linearGradient3255"
+       x1="60.5"
+       y1="60.5"
+       x2="51.5"
+       y2="3.5"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <sodipodi:namedview
      id="base"
@@ -35,17 +108,31 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.8890873"
-     inkscape:cx="60.176912"
-     inkscape:cy="28.73883"
+     inkscape:zoom="10.140625"
+     inkscape:cx="32"
+     inkscape:cy="32.869585"
      inkscape:current-layer="layer1"
      showgrid="true"
      inkscape:document-units="px"
      inkscape:grid-bbox="true"
-     inkscape:window-width="1278"
-     inkscape:window-height="718"
+     inkscape:window-width="1440"
+     inkscape:window-height="852"
      inkscape:window-x="0"
-     inkscape:window-y="24" />
+     inkscape:window-y="0"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2382"
+       visible="true"
+       enabled="true"
+       originx="0.5px"
+       originy="0.5px"
+       empcolor="#0000ff"
+       empopacity="0.1254902"
+       dotted="true" />
+  </sodipodi:namedview>
   <metadata
      id="metadata2388">
     <rdf:RDF>
@@ -61,23 +148,66 @@
      id="layer1"
      inkscape:label="Layer 1"
      inkscape:groupmode="layer">
+    <g
+       id="g3190"
+       style="opacity:0.4;filter:url(#filter3241)"
+       transform="translate(3,1)">
+      <rect
+         y="1.5"
+         x="47.5"
+         height="59"
+         width="11"
+         id="rect3184"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+      <rect
+         y="1.5"
+         x="1.5"
+         height="59"
+         width="43"
+         id="rect3188"
+         style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         ry="2"
+         rx="2" />
+    </g>
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2393"
-       width="46.085075"
-       height="59.0909"
-       x="3.1876292"
-       y="2.5454547"
-       ry="2.5454543"
-       rx="2.7272727" />
+       y="1.5"
+       x="49.5"
+       height="59"
+       width="11"
+       id="rect2395"
+       style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
     <rect
-       style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2397"
-       width="9.454525"
-       height="59.0909"
-       x="52.545456"
-       y="2.5454547"
-       ry="3.272727"
-       rx="2.3636363" />
+       y="1.5"
+       x="3.5"
+       height="59"
+       width="43"
+       id="rect3156"
+       style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="2"
+       rx="2" />
+    <rect
+       ry="1"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3158"
+       width="9"
+       height="57"
+       x="50.5"
+       y="2.5"
+       rx="1" />
+    <rect
+       y="2.5"
+       x="4.5"
+       height="57"
+       width="41"
+       id="rect3162"
+       style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       ry="1"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       rx="1" />
   </g>
 </svg>
@@ -4070,7 +4070,92 @@ h1#agenda-title {
 }
  
 /* ==> public/stylesheets/controller_themes.css <== */
-/* common stuff */
+
+.action-themes-index .button-bar {
+  padding-top: 20px;
+}
+
+.list-options {
+  width: 800px;
+  margin: auto;
+  clear: left;
+  padding-top: 20px;
+}
+
+#theme-options .list-group {
+  clear: left;
+  padding-top: 7px;
+}
+
+.list-opt {
+  position: relative;
+  display: block;
+  width: 200px;
+  padding: 5px 2px 4px 5px;
+  margin: 0px 35px 0px 20px;
+  float: left;
+  color: #000;
+  text-decoration: none;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+.list-opt:hover {
+  background: #FE0;
+}
+.list-opt.selected {
+  background: #F8F0A0;
+}
+
+#theme-options .list-opt {
+  width: 240px;
+  padding: 5px 2px 5px 5px;
+  margin: 0px 5px 0px 10px;
+}
+#user-themes .list-opt {
+  width: 220px;
+  margin: 0px 15px 0px 20px;
+}
+
+#theme-options img {
+  border: 1px solid #BBB;
+}
+
+.opt-info {
+  position: absolute;
+  top: 15px;
+  left: 75px;
+  width: 130px;
+}
+#theme-options .opt-info {
+  left: 115px;
+  width: 130px;
+}
+#user-themes .opt-info {
+  top: 2px;
+}
+
+.list-opt span {
+  text-decoration: underline;
+}
+
+.list-opt big {
+  opacity: 0.5;
+}
+
+.list-opt .name {
+  font-size: 20px;
+}
+#user-themes .list-opt .name {
+  font-size: 18px;
+}
+
+#user-themes a {
+  text-decoration: none;
+}
+#user-themes a:hover {
+  text-decoration: underline;
+}
  
 .controller-themes .template-preview-cell {
   text-align: center;
...	...	@@ -23,7 +23,7 @@ class ThemesController < MyProfileController
23	23
24	24	def new
25	25	if !request.xhr?
26		- id = params[:name].to_slug
	26	+ id = params[:name] ? params[:name].to_slug : 'my-theme'
27	27	t = Theme.new(id, :name => params[:name], :owner => profile, :public => false)
28	28	t.save
29	29	redirect_to :action => 'index'
...	...
1	1	<h1><%= _('Editing Appearance') %></h1>
2	2
3		-<table class='noborder' style='width: auto; margin:auto'>
4		-
5		- <tr>
6		- <td colspan='6'>
7		- <h2><%= _('Select template') %></h2>
8		- </td>
9		- </tr>
10		- <% for templates in @layout_templates.in_groups_of(3) %>
11		- <tr>
12		- <% for template in templates %>
13		- <%
14		- selected = (!template.nil? && (@current_template == template.id))
15		- %>
16		- <td class="template-preview-cell">
17		- <% if template %>
18		- <%= image_tag("/designs/templates/#{template.id}/thumbnail.png",
19		- :class => 'template-preview',
20		- :alt => _('The "%s" template')) %>
21		- <% end %>
22		- </td>
23		- <td <%= 'class="selected template"' if selected %> style='vertical-align: top;'>
24		- <% if template %>
25		- <strong><%= template.id %> <%= _('(current)') if selected %></strong>
26		- <br/>
27		- <%= link_to(_('Use this template'), :action => 'set_layout_template', :id => template.id) unless selected %>
28		- <% end %>
29		- </td>
30		- <td>
31		-
32		- </td>
33		- <% end %>
34		- </tr>
35		- <% end %>
	3	+<div id="template-options" class="list-options">
36	4
	5	+<h2><%= _('Select template') %></h2>
37	6
38		- <% if !@themes.empty? %>
39		- <tr>
40		- <td colspan='6'>
41		- <h2><%= _('Select theme') %></h2>
42		- <% button_bar do %>
43		- <%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
44		- <% end %>
45		- </td>
46		- </tr>
47		- <% for themes in @themes.in_groups_of(3) %>
48		- <tr>
49		- <% for theme in themes %>
50		- <%
51		- selected = (!theme.nil? && (theme.id == @current_theme))
52		- %>
53		- <td>
54		- <% if theme %>
55		- <%= image_tag("/designs/themes/#{theme.name}/preview.png",
56		- :class => 'theme-preview',
57		- :alt => (_('The "%s" theme.') % theme.name)) %>
58		- <% end %>
59		- </td>
60		- <td <%= 'class="selected theme"' if selected %> style='vertical-align: top'>
61		- <% if theme %>
62		- <strong><%= theme.name %> <%= _('(current)') if selected %></strong><br/>
63		- <%= link_to(_('Use this theme'), :action => 'set', :id => theme.id) unless selected %>
64		- <% end %>
65		- </td>
66		- <td>
67		-
68		- </td>
69		- <% end %>
70		- </tr>
71		- <tr><td colspan='3'> </td></tr>
72		- <% end %>
73		- <% end %>
	7	+<% for templates in @layout_templates.in_groups_of(3) %>
	8	+ <div class="list-group">
	9	+ <% for template in templates %><%=
	10	+ if template
	11	+ base_content = image_tag(
	12	+ "/designs/templates/#{template.id}/thumbnail.png",
	13	+ :alt => _('The "%s" template')) +
	14	+ '<div class="opt-info">' +
	15	+ content_tag('strong', template.id, :class => 'name') +
	16	+ ' <br/> '
74	17
	18	+ if @current_template == template.id # selected
	19	+ content_tag( 'div',
	20	+ base_content + content_tag('big', _('(current)') ) +'</div>',
	21	+ :class => 'template-opt list-opt selected')
	22	+ else # Not selected
	23	+ link_to(
	24	+ base_content + content_tag('span', _('Use this template') ) +'</div>',
	25	+ { :action => 'set_layout_template', :id => template.id },
	26	+ :class => 'template-opt list-opt')
	27	+ end
75	28
76		- <% if environment.enabled?('user_themes') %>
77		- <tr>
78		- <td colspan='6'>
79		- <h2><%= _('My themes') %></h2>
80		- </td>
81		- </tr>
82		- <% for themes in profile.themes.in_groups_of(3) %>
83		- <tr>
84		- <% for theme in themes %>
85		- <td>
86		- <%# FIXME add proper thumbnails %>
87		- <%= image_tag('/images/icons-app/design-editor.png', :alt => (_('The "%s" theme.') % theme.name)) if theme %>
88		- </td>
89		- <td>
90		- <strong><%= theme.name if theme%></strong><br/>
91		- <%= link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) if theme %>
92		- <br/>
93		- <%= link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) if theme %>
94		- </td>
95		- <td>
96		-
97		- </td>
98		- <% end %>
99		- </tr>
100		- <tr><td colspan='3'> </td></tr>
101		- <% end %>
	29	+ end
	30	+ %><% end %>
	31	+ </div>
	32	+<% end %>
	33	+
	34	+</div><!-- end id="template-options" -->
	35	+
	36	+
	37	+<% if !@themes.empty? %>
	38	+<div id="theme-options" class="list-options">
	39	+
	40	+<h2><%= _('Select theme') %></h2>
	41	+<%= button :home, _('Use the default theme'), { :action => 'unset'}, :method => 'post', :confirm => _('Are you sure you want to use the environment default theme?') %>
	42	+
	43	+<% for themes in @themes.in_groups_of(3) %>
	44	+ <div class="list-group">
	45	+ <% for theme in themes %><%=
	46	+ if theme
	47	+
	48	+ base_content = image_tag(
	49	+ "/designs/themes/#{theme.name}/preview.png",
	50	+ :alt => (_('The "%s" theme.') % theme.name)) +
	51	+ '<div class="opt-info">' +
	52	+ content_tag('strong', theme.name, :class => 'name') +
	53	+ ' <br/> '
	54	+
	55	+ if theme.id == @current_theme # selected
	56	+ content_tag( 'div',
	57	+ base_content + content_tag('big', _('(current)') ) +'</div>',
	58	+ :class => 'theme-opt list-opt selected')
	59	+ else # Not selected
	60	+ link_to(
	61	+ base_content + content_tag('span', _('Use this theme') ) +'</div>',
	62	+ { :action => 'set', :id => theme.id },
	63	+ :class => 'theme-opt list-opt')
	64	+ end
	65	+
	66	+ end
	67	+ %><% end %>
	68	+ </div>
	69	+<% end %>
	70	+
	71	+</div><!-- end id="theme-options" -->
	72	+<% end %>
	73	+
	74	+
	75	+
	76	+<% if environment.enabled?('user_themes') %>
	77	+ <div id="user-themes" class="list-options">
	78	+
	79	+ <h2><%= _('My themes') %></h2>
	80	+
	81	+ <% for themes in profile.themes.in_groups_of(3) %>
	82	+ <div class="list-group">
	83	+ <% for theme in themes %><%=
	84	+ if theme
	85	+
	86	+ selected = theme.id == @current_theme
	87	+ sel_html = selected ?
	88	+ content_tag('big', _('(current)') ) :
	89	+ link_to(_('Use this theme'), :action => 'set', :id => theme.id)
	90	+
	91	+ content_tag( 'div',
	92	+ image_tag(
	93	+ '/images/icons-app/design-editor.png',
	94	+ :alt => (_('The "%s" theme.') % theme.name)) +
	95	+ '<div class="opt-info">' +
	96	+ content_tag('strong', theme.name, :class => 'name') +
	97	+ ' <br/> '+ sel_html +' <br/> ' +
	98	+ link_to(_('Edit this theme'), :action => 'edit', :id => theme.id) +
	99	+ ' <br/> ' +
	100	+ link_to(_('Test this theme'), :action => 'start_test', :id => theme.id) +
	101	+ '</div>',
	102	+ :class => 'theme-opt list-opt' + (selected ? ' selected' : '')
	103	+ )
	104	+
	105	+ end
	106	+ %><% end %>
	107	+ </div>
102	108	<% end %>
103	109
104		-</table>
	110	+ </div><!-- end id="user-themes" -->
	111	+<% end %>
	112	+
	113	+<br style="clear:both" />
105	114
106	115	<% button_bar do %>
107	116	<% if environment.enabled?('user_themes') %>
...	...
...	...	@@ -6,6 +6,7 @@
6	6	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
7	7	xmlns:svg="http://www.w3.org/2000/svg"
8	8	xmlns="http://www.w3.org/2000/svg"
	9	+ xmlns:xlink="http://www.w3.org/1999/xlink"
9	10	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
10	11	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
11	12	width="64px"
...	...	@@ -15,11 +16,46 @@
15	16	inkscape:version="0.46"
16	17	sodipodi:docname="thumbnail.svg"
17	18	inkscape:output_extension="org.inkscape.output.svg.inkscape"
18		- inkscape:export-filename="/home/terceiro/src/noosfero/public/designs/templates/default/thumbnail.png"
	19	+ inkscape:export-filename="thumbnail.png"
19	20	inkscape:export-xdpi="90"
20	21	inkscape:export-ydpi="90">
21	22	<defs
22	23	id="defs2385">
	24	+ <linearGradient
	25	+ id="linearGradient3263">
	26	+ <stop
	27	+ id="stop3265"
	28	+ offset="0"
	29	+ style="stop-color:#204a87;stop-opacity:1" />
	30	+ <stop
	31	+ id="stop3267"
	32	+ offset="1"
	33	+ style="stop-color:#729fcf;stop-opacity:1" />
	34	+ </linearGradient>
	35	+ <linearGradient
	36	+ id="linearGradient3257"
	37	+ inkscape:collect="always">
	38	+ <stop
	39	+ id="stop3259"
	40	+ offset="0"
	41	+ style="stop-color:#204a87;stop-opacity:1" />
	42	+ <stop
	43	+ id="stop3261"
	44	+ offset="1"
	45	+ style="stop-color:#729fcf;stop-opacity:1" />
	46	+ </linearGradient>
	47	+ <linearGradient
	48	+ inkscape:collect="always"
	49	+ id="linearGradient3245">
	50	+ <stop
	51	+ style="stop-color:#204a87;stop-opacity:1"
	52	+ offset="0"
	53	+ id="stop3247" />
	54	+ <stop
	55	+ style="stop-color:#729fcf;stop-opacity:1"
	56	+ offset="1"
	57	+ id="stop3249" />
	58	+ </linearGradient>
23	59	<inkscape:perspective
24	60	sodipodi:type="inkscape:persp3d"
25	61	inkscape:vp_x="0 : 32 : 1"
...	...	@@ -27,6 +63,49 @@
27	63	inkscape:vp_z="64 : 32 : 1"
28	64	inkscape:persp3d-origin="32 : 21.333333 : 1"
29	65	id="perspective2391" />
	66	+ <filter
	67	+ inkscape:collect="always"
	68	+ id="filter3231">
	69	+ <feGaussianBlur
	70	+ inkscape:collect="always"
	71	+ stdDeviation="0.61"
	72	+ id="feGaussianBlur3233" />
	73	+ </filter>
	74	+ <filter
	75	+ inkscape:collect="always"
	76	+ id="filter3241">
	77	+ <feGaussianBlur
	78	+ inkscape:collect="always"
	79	+ stdDeviation="0.9075"
	80	+ id="feGaussianBlur3243" />
	81	+ </filter>
	82	+ <linearGradient
	83	+ inkscape:collect="always"
	84	+ xlink:href="#linearGradient3245"
	85	+ id="linearGradient3251"
	86	+ x1="11.5"
	87	+ y1="60.5"
	88	+ x2="3.5"
	89	+ y2="3.5"
	90	+ gradientUnits="userSpaceOnUse" />
	91	+ <linearGradient
	92	+ inkscape:collect="always"
	93	+ xlink:href="#linearGradient3263"
	94	+ id="linearGradient3253"
	95	+ x1="42.5"
	96	+ y1="60.5"
	97	+ x2="19.5"
	98	+ y2="3.5"
	99	+ gradientUnits="userSpaceOnUse" />
	100	+ <linearGradient
	101	+ inkscape:collect="always"
	102	+ xlink:href="#linearGradient3257"
	103	+ id="linearGradient3255"
	104	+ x1="60.5"
	105	+ y1="60.5"
	106	+ x2="51.5"
	107	+ y2="3.5"
	108	+ gradientUnits="userSpaceOnUse" />
30	109	</defs>
31	110	<sodipodi:namedview
32	111	id="base"
...	...	@@ -35,17 +114,31 @@
35	114	borderopacity="1.0"
36	115	inkscape:pageopacity="0.0"
37	116	inkscape:pageshadow="2"
38		- inkscape:zoom="3.8890873"
39		- inkscape:cx="60.176912"
40		- inkscape:cy="28.73883"
	117	+ inkscape:zoom="10.140625"
	118	+ inkscape:cx="32"
	119	+ inkscape:cy="32"
41	120	inkscape:current-layer="layer1"
42	121	showgrid="true"
43	122	inkscape:document-units="px"
44	123	inkscape:grid-bbox="true"
45		- inkscape:window-width="1278"
46		- inkscape:window-height="718"
	124	+ inkscape:window-width="1440"
	125	+ inkscape:window-height="852"
47	126	inkscape:window-x="0"
48		- inkscape:window-y="24" />
	127	+ inkscape:window-y="0"
	128	+ objecttolerance="10"
	129	+ gridtolerance="10"
	130	+ guidetolerance="10">
	131	+ <inkscape:grid
	132	+ type="xygrid"
	133	+ id="grid2382"
	134	+ visible="true"
	135	+ enabled="true"
	136	+ originx="0.5px"
	137	+ originy="0.5px"
	138	+ empcolor="#0000ff"
	139	+ empopacity="0.1254902"
	140	+ dotted="true" />
	141	+ </sodipodi:namedview>
49	142	<metadata
50	143	id="metadata2388">
51	144	<rdf:RDF>
...	...	@@ -61,32 +154,87 @@
61	154	id="layer1"
62	155	inkscape:label="Layer 1"
63	156	inkscape:groupmode="layer">
	157	+ <g
	158	+ id="g3190"
	159	+ style="filter:url(#filter3241);opacity:0.4"
	160	+ transform="translate(1,1)">
	161	+ <rect
	162	+ y="1.5"
	163	+ x="1.5"
	164	+ height="59"
	165	+ width="11"
	166	+ id="rect3184"
	167	+ style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	168	+ ry="2"
	169	+ rx="2" />
	170	+ <rect
	171	+ style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	172	+ id="rect3186"
	173	+ width="12"
	174	+ height="59"
	175	+ x="49.5"
	176	+ y="1.5"
	177	+ ry="2"
	178	+ rx="2" />
	179	+ <rect
	180	+ y="1.5"
	181	+ x="15.5"
	182	+ height="59"
	183	+ width="31"
	184	+ id="rect3188"
	185	+ style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	186	+ ry="2"
	187	+ rx="2" />
	188	+ </g>
64	189	<rect
65		- style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
66		- id="rect2393"
67		- width="33.999981"
68		- height="59.0909"
69		- x="15.272727"
70		- y="2.5454547"
71		- ry="2.5454543"
72		- rx="2.7272727" />
73		- <rect
74		- rx="2.3636363"
75		- ry="3.272727"
76		- y="2.5454547"
77		- x="2.5454543"
78		- height="59.0909"
79		- width="9.454525"
	190	+ y="1.5"
	191	+ x="1.5"
	192	+ height="59"
	193	+ width="11"
80	194	id="rect2395"
81		- style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
	195	+ style="opacity:1;fill:url(#linearGradient3251);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	196	+ ry="2" />
	197	+ <rect
	198	+ style="opacity:1;fill:url(#linearGradient3255);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	199	+ id="rect3154"
	200	+ width="12"
	201	+ height="59"
	202	+ x="49.5"
	203	+ y="1.5"
	204	+ ry="2" />
	205	+ <rect
	206	+ y="1.5"
	207	+ x="15.5"
	208	+ height="59"
	209	+ width="31"
	210	+ id="rect3156"
	211	+ style="opacity:1;fill:url(#linearGradient3253);fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	212	+ ry="2" />
	213	+ <rect
	214	+ ry="1"
	215	+ style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	216	+ id="rect3158"
	217	+ width="9"
	218	+ height="57"
	219	+ x="2.5"
	220	+ y="2.5" />
	221	+ <rect
	222	+ y="2.5"
	223	+ x="16.5"
	224	+ height="57"
	225	+ width="29"
	226	+ id="rect3162"
	227	+ style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	228	+ ry="1"
	229	+ inkscape:export-xdpi="90"
	230	+ inkscape:export-ydpi="90" />
82	231	<rect
83		- style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.38509318;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
84		- id="rect2397"
85		- width="9.454525"
86		- height="59.0909"
87		- x="52.545456"
88		- y="2.5454547"
89		- ry="3.272727"
90		- rx="2.3636363" />
	232	+ style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	233	+ id="rect3164"
	234	+ width="10"
	235	+ height="57"
	236	+ x="50.5"
	237	+ y="2.5"
	238	+ ry="1" />
91	239	</g>
92	240	</svg>
...	...
...	...	@@ -4070,7 +4070,92 @@ h1#agenda-title {
4070	4070	}
4071	4071
4072	4072	/* ==> public/stylesheets/controller_themes.css <== */
4073		-/* common stuff */
	4073	+
	4074	+.action-themes-index .button-bar {
	4075	+ padding-top: 20px;
	4076	+}
	4077	+
	4078	+.list-options {
	4079	+ width: 800px;
	4080	+ margin: auto;
	4081	+ clear: left;
	4082	+ padding-top: 20px;
	4083	+}
	4084	+
	4085	+#theme-options .list-group {
	4086	+ clear: left;
	4087	+ padding-top: 7px;
	4088	+}
	4089	+
	4090	+.list-opt {
	4091	+ position: relative;
	4092	+ display: block;
	4093	+ width: 200px;
	4094	+ padding: 5px 2px 4px 5px;
	4095	+ margin: 0px 35px 0px 20px;
	4096	+ float: left;
	4097	+ color: #000;
	4098	+ text-decoration: none;
	4099	+ border-radius: 10px;
	4100	+ -moz-border-radius: 10px;
	4101	+ -webkit-border-radius: 10px;
	4102	+}
	4103	+.list-opt:hover {
	4104	+ background: #FE0;
	4105	+}
	4106	+.list-opt.selected {
	4107	+ background: #F8F0A0;
	4108	+}
	4109	+
	4110	+#theme-options .list-opt {
	4111	+ width: 240px;
	4112	+ padding: 5px 2px 5px 5px;
	4113	+ margin: 0px 5px 0px 10px;
	4114	+}
	4115	+#user-themes .list-opt {
	4116	+ width: 220px;
	4117	+ margin: 0px 15px 0px 20px;
	4118	+}
	4119	+
	4120	+#theme-options img {
	4121	+ border: 1px solid #BBB;
	4122	+}
	4123	+
	4124	+.opt-info {
	4125	+ position: absolute;
	4126	+ top: 15px;
	4127	+ left: 75px;
	4128	+ width: 130px;
	4129	+}
	4130	+#theme-options .opt-info {
	4131	+ left: 115px;
	4132	+ width: 130px;
	4133	+}
	4134	+#user-themes .opt-info {
	4135	+ top: 2px;
	4136	+}
	4137	+
	4138	+.list-opt span {
	4139	+ text-decoration: underline;
	4140	+}
	4141	+
	4142	+.list-opt big {
	4143	+ opacity: 0.5;
	4144	+}
	4145	+
	4146	+.list-opt .name {
	4147	+ font-size: 20px;
	4148	+}
	4149	+#user-themes .list-opt .name {
	4150	+ font-size: 18px;
	4151	+}
	4152	+
	4153	+#user-themes a {
	4154	+ text-decoration: none;
	4155	+}
	4156	+#user-themes a:hover {
	4157	+ text-decoration: underline;
	4158	+}
4074	4159
4075	4160	.controller-themes .template-preview-cell {
4076	4161	text-align: center;
...	...