ActionItem122: adding a user interface mockup; will work on actually

making work latter git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@2389 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem122: adding a user interface mockup; will work on actually
making work latter git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@2389 3f533792-8f58-4932-b0fe-aaf55b0a4547
AntonioTerceiro
1 parent e5caad05
Showing 8 changed files with 195 additions and 1 deletions Show diff stats
app/controllers/my_profile/themes_controller.rb
app/helpers/themes_helper.rb
app/views/profile_editor/index.rhtml
app/views/shared/codepress.rhtml
app/views/themes/edit.rhtml
public/javascripts/codepress/codepress.js
public/stylesheets/controller_themes.css
test/functional/themes_controller_test.rb
@@ -0,0 +1,3 @@
+class ThemesController < ApplicationController
+  no_design_blocks
+end
@@ -0,0 +1,2 @@
+module ThemesHelper
+end
@@ -15,6 +15,8 @@
   <%= file_manager_button(_('Pending tasks'), 'icons-app/todo.png', :controller => 'tasks', :action => 'index') %>
   <%= file_manager_button(_('Edit sideboxes'), 'icons-app/design-editor.png', :controller => 'profile_design', :action => 'index') %>
+
+  <%= file_manager_button(_('Edit Appearance'), 'icons-app/design-editor.png', :controller => 'themes', :action => 'index') %>
   <%= file_manager_button(_('Edit Header and Footer'), 'icons-app/header-and-footer.png', :controller => 'profile_editor', :action => 'header_footer') %>
@@ -0,0 +1 @@
+<%= javascript_include_tag 'codepress/codepress.js' %>
@@ -0,0 +1,63 @@
+<form>
+  <%# FIXME %>
+  <h1 id='theme-name'>
+    <%= _('Editing theme %s') % text_field_tag('theme_name', 'my theme') %>
+    <%= icon_button(:save, _('Save'), '#') %>
+  </h1>
+</form>
+
+<div id='css-files-list'>
+  <h2><%= _('CSS files') %></h2>
+  <ul>
+    <li><a href="">common.css</a></li>
+    <li><a href="">header.css</a></li>
+    <li><a href="">footer.css</a></li>
+    <li><a href="">sideboxes.css</a></li>
+    <li><a href="">otherstuff1.css</a></li>
+    <li><a href="">otherstuff1.css</a></li>
+    <li><a href="">otherstuff1.css</a></li>
+    <li><a href="">otherstuff2css</a></li>
+    <li><a href="">otherstuff3.css</a></li>
+    <li><a href="">otherstuff4.css</a></li>
+    <li><a href="">otherstuff2css</a></li>
+    <li><a href="">otherstuff3.css</a></li>
+    <li><a href="">otherstuff4.css</a></li>
+    <li><a href="">otherstuff2css</a></li>
+    <li><a href="">otherstuff3.css</a></li>
+    <li><a href="">otherstuff4.css</a></li>
+  </ul>
+  <% button_bar do %>
+    <%= button(:add, _('New CSS'), '') %>
+  <% end %>
+</div>
+
+<div id='image-files-list'>
+  <h2><%= _('Images') %></h2>
+  <ul>
+    <li><img src='/images/icons-app/gtk-cancel.png' /><span>Image 1</span></li>
+    <li><img src='/images/icons-app/cms.png' /><span>Image_2_a_very_large_filename</span></li>
+    <li><img src='http://www.ynternet.org/banner/' /><span>a wide image</span></li>
+    <li><img src='/images/icons-app/enable.png' /><span>Image 3</span></li>
+    <li><img src='/images/icons-app/gnome-globe.png' /><span>Image 4</span></li>
+    <li><img src='/images/icons-app/gtk-yes.png' /><span>Image 5</span></li>
+    <li><img src='/images/icons-app/mail.png' /><span>Image 6</span></li>
+  </ul>
+  <% button_bar do %>
+    <%= button(:add, _('Upload image'), '') %>
+  <% end %>
+</div>
+
+<form id='css-code'>
+  <%# FIXME %>
+  <h2><%= _('CSS code: "%s"') % 'common.css' %></h2>
+  <textarea name='csscode' id="csscode" class='codepress css'>
+    body {
+      background: yellow;
+    }
+  </textarea>
+  <% button_bar do %>
+    <%= button(:save, _('Save'), '') %>
+  <% end %>
+</form>
+
+<%= render :file => 'shared/codepress' %>
@@ -120,7 +120,7 @@ CodePress.run = function() {
 	s = document.getElementsByTagName('script');
 	for(var i=0,n=s.length;i<n;i++) {
 		if(s[i].src.match('codepress.js')) {
-			CodePress.path = s[i].src.replace('codepress.js','');
+			CodePress.path = s[i].src.replace(/codepress\.js.*$/,'');
 		}
 	}
 	t = document.getElementsByTagName('textarea');
@@ -0,0 +1,115 @@
+/* common stuff */
+#css-files-list h2, #image-files-list h2 {
+  margin-top: 0px;
+}
+
+#css-files-list ul, #image-files-list ul, #css-code textarea {
+  height: 280px;
+}
+
+#css-files-list ul, #image-files-list ul {
+  overflow: auto;
+}
+
+/* header stuff */
+#theme-name input {
+  font-size: 18px;
+  border: 1px solid black;
+  background: white;
+  padding: 2px;
+  font-weight: bold;
+}
+
+
+/* files list */
+
+#css-files-list {
+  width: 200px;
+  float: left;
+  margin-left: 10px;
+}
+
+#css-files-list ul {
+  margin: 0px;
+  padding-left: 0px;
+
+  background: white;
+  border: 1px solid #bbb;
+}
+
+#css-files-list li {
+  list-style: none;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #bbb;
+}
+
+#css-files-list li a {
+  display: block;
+  padding: 1px 5px;
+}
+
+#css-files-list a:hover {
+  color: red;
+}
+
+/* images list */
+
+#image-files-list {
+  width: 200px;
+  float: right;
+  margin-right: 10px;
+}
+
+#image-files-list ul {
+  background: white;
+  border: 1px solid #bbb;
+}
+
+#image-files-list ul, #image-files-list li {
+  padding: 0px;
+  margin: 0px;
+  list-style: none;
+}
+
+#image-files-list li {
+  border-bottom: 1px solid #bbb;
+  padding: 5px 0px;
+  text-align: center;
+}
+
+#image-files-list  img {
+  max-width: 98%;
+  max-height: 40px;
+}
+
+.msie6 #image-files-list img {
+  width: 50%;
+  height: 40px;
+}
+
+#image-files-list li span {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* textbox */
+
+#css-code {
+  margin-left: 220px;
+  margin-right: 220px;
+}
+
+.msie6 #css-code {
+  float: left;
+  margin-left: 20px;
+  margin-right: 240px;
+}
+
+#css-code textarea {
+  width: 100%;
+}
+
+.msie6 #css-code textarea {
+  width: 500px;
+}
@@ -0,0 +1,8 @@
+require File.dirname(__FILE__) + '/../test_helper'
+
+class ThemesControllerTest < ActionController::TestCase
+  # Replace this with your real tests.
+  def test_truth
+    assert true
+  end
+end
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+class ThemesController < ApplicationController
	2	+ no_design_blocks
	3	+end
	@@ -15,6 +15,8 @@		@@ -15,6 +15,8 @@
15	<%= file_manager_button(_('Pending tasks'), 'icons-app/todo.png', :controller => 'tasks', :action => 'index') %>	15	<%= file_manager_button(_('Pending tasks'), 'icons-app/todo.png', :controller => 'tasks', :action => 'index') %>
16		16
17	<%= file_manager_button(_('Edit sideboxes'), 'icons-app/design-editor.png', :controller => 'profile_design', :action => 'index') %>	17	<%= file_manager_button(_('Edit sideboxes'), 'icons-app/design-editor.png', :controller => 'profile_design', :action => 'index') %>
		18	+
		19	+ <%= file_manager_button(_('Edit Appearance'), 'icons-app/design-editor.png', :controller => 'themes', :action => 'index') %>
18		20
19	<%= file_manager_button(_('Edit Header and Footer'), 'icons-app/header-and-footer.png', :controller => 'profile_editor', :action => 'header_footer') %>	21	<%= file_manager_button(_('Edit Header and Footer'), 'icons-app/header-and-footer.png', :controller => 'profile_editor', :action => 'header_footer') %>
20		22
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+<%= javascript_include_tag 'codepress/codepress.js' %>
@@ -0,0 +1,63 @@		@@ -0,0 +1,63 @@
	1	+<form>
	2	+ <%# FIXME %>
	3	+ <h1 id='theme-name'>
	4	+ <%= _('Editing theme %s') % text_field_tag('theme_name', 'my theme') %>
	5	+ <%= icon_button(:save, _('Save'), '#') %>
	6	+ </h1>
	7	+</form>
	8	+
	9	+<div id='css-files-list'>
	10	+ <h2><%= _('CSS files') %></h2>
	11	+ <ul>
	12	+ <li><a href="">common.css</a></li>
	13	+ <li><a href="">header.css</a></li>
	14	+ <li><a href="">footer.css</a></li>
	15	+ <li><a href="">sideboxes.css</a></li>
	16	+ <li><a href="">otherstuff1.css</a></li>
	17	+ <li><a href="">otherstuff1.css</a></li>
	18	+ <li><a href="">otherstuff1.css</a></li>
	19	+ <li><a href="">otherstuff2css</a></li>
	20	+ <li><a href="">otherstuff3.css</a></li>
	21	+ <li><a href="">otherstuff4.css</a></li>
	22	+ <li><a href="">otherstuff2css</a></li>
	23	+ <li><a href="">otherstuff3.css</a></li>
	24	+ <li><a href="">otherstuff4.css</a></li>
	25	+ <li><a href="">otherstuff2css</a></li>
	26	+ <li><a href="">otherstuff3.css</a></li>
	27	+ <li><a href="">otherstuff4.css</a></li>
	28	+ </ul>
	29	+ <% button_bar do %>
	30	+ <%= button(:add, _('New CSS'), '') %>
	31	+ <% end %>
	32	+</div>
	33	+
	34	+<div id='image-files-list'>
	35	+ <h2><%= _('Images') %></h2>
	36	+ <ul>
	37	+ <li><img src='/images/icons-app/gtk-cancel.png' /><span>Image 1</span></li>
	38	+ <li><img src='/images/icons-app/cms.png' /><span>Image_2_a_very_large_filename</span></li>
	39	+ <li><img src='http://www.ynternet.org/banner/' /><span>a wide image</span></li>
	40	+ <li><img src='/images/icons-app/enable.png' /><span>Image 3</span></li>
	41	+ <li><img src='/images/icons-app/gnome-globe.png' /><span>Image 4</span></li>
	42	+ <li><img src='/images/icons-app/gtk-yes.png' /><span>Image 5</span></li>
	43	+ <li><img src='/images/icons-app/mail.png' /><span>Image 6</span></li>
	44	+ </ul>
	45	+ <% button_bar do %>
	46	+ <%= button(:add, _('Upload image'), '') %>
	47	+ <% end %>
	48	+</div>
	49	+
	50	+<form id='css-code'>
	51	+ <%# FIXME %>
	52	+ <h2><%= _('CSS code: "%s"') % 'common.css' %></h2>
	53	+ <textarea name='csscode' id="csscode" class='codepress css'>
	54	+ body {
	55	+ background: yellow;
	56	+ }
	57	+ </textarea>
	58	+ <% button_bar do %>
	59	+ <%= button(:save, _('Save'), '') %>
	60	+ <% end %>
	61	+</form>
	62	+
	63	+<%= render :file => 'shared/codepress' %>
	@@ -120,7 +120,7 @@ CodePress.run = function() {		@@ -120,7 +120,7 @@ CodePress.run = function() {
120	s = document.getElementsByTagName('script');	120	s = document.getElementsByTagName('script');
121	for(var i=0,n=s.length;i<n;i++) {	121	for(var i=0,n=s.length;i<n;i++) {
122	if(s[i].src.match('codepress.js')) {	122	if(s[i].src.match('codepress.js')) {
123	- CodePress.path = s[i].src.replace('codepress.js','');	123	+ CodePress.path = s[i].src.replace(/codepress\.js.*$/,'');
124	}	124	}
125	}	125	}
126	t = document.getElementsByTagName('textarea');	126	t = document.getElementsByTagName('textarea');
@@ -0,0 +1,115 @@		@@ -0,0 +1,115 @@
	1	+/* common stuff */
	2	+#css-files-list h2, #image-files-list h2 {
	3	+ margin-top: 0px;
	4	+}
	5	+
	6	+#css-files-list ul, #image-files-list ul, #css-code textarea {
	7	+ height: 280px;
	8	+}
	9	+
	10	+#css-files-list ul, #image-files-list ul {
	11	+ overflow: auto;
	12	+}
	13	+
	14	+/* header stuff */
	15	+#theme-name input {
	16	+ font-size: 18px;
	17	+ border: 1px solid black;
	18	+ background: white;
	19	+ padding: 2px;
	20	+ font-weight: bold;
	21	+}
	22	+
	23	+
	24	+/* files list */
	25	+
	26	+#css-files-list {
	27	+ width: 200px;
	28	+ float: left;
	29	+ margin-left: 10px;
	30	+}
	31	+
	32	+#css-files-list ul {
	33	+ margin: 0px;
	34	+ padding-left: 0px;
	35	+
	36	+ background: white;
	37	+ border: 1px solid #bbb;
	38	+}
	39	+
	40	+#css-files-list li {
	41	+ list-style: none;
	42	+ margin-bottom: 5px;
	43	+ border-bottom: 1px solid #bbb;
	44	+}
	45	+
	46	+#css-files-list li a {
	47	+ display: block;
	48	+ padding: 1px 5px;
	49	+}
	50	+
	51	+#css-files-list a:hover {
	52	+ color: red;
	53	+}
	54	+
	55	+/* images list */
	56	+
	57	+#image-files-list {
	58	+ width: 200px;
	59	+ float: right;
	60	+ margin-right: 10px;
	61	+}
	62	+
	63	+#image-files-list ul {
	64	+ background: white;
	65	+ border: 1px solid #bbb;
	66	+}
	67	+
	68	+#image-files-list ul, #image-files-list li {
	69	+ padding: 0px;
	70	+ margin: 0px;
	71	+ list-style: none;
	72	+}
	73	+
	74	+#image-files-list li {
	75	+ border-bottom: 1px solid #bbb;
	76	+ padding: 5px 0px;
	77	+ text-align: center;
	78	+}
	79	+
	80	+#image-files-list img {
	81	+ max-width: 98%;
	82	+ max-height: 40px;
	83	+}
	84	+
	85	+.msie6 #image-files-list img {
	86	+ width: 50%;
	87	+ height: 40px;
	88	+}
	89	+
	90	+#image-files-list li span {
	91	+ display: block;
	92	+ width: 100%;
	93	+ overflow: hidden;
	94	+}
	95	+
	96	+/* textbox */
	97	+
	98	+#css-code {
	99	+ margin-left: 220px;
	100	+ margin-right: 220px;
	101	+}
	102	+
	103	+.msie6 #css-code {
	104	+ float: left;
	105	+ margin-left: 20px;
	106	+ margin-right: 240px;
	107	+}
	108	+
	109	+#css-code textarea {
	110	+ width: 100%;
	111	+}
	112	+
	113	+.msie6 #css-code textarea {
	114	+ width: 500px;
	115	+}
@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
	1	+require File.dirname(__FILE__) + '/../test_helper'
	2	+
	3	+class ThemesControllerTest < ActionController::TestCase
	4	+ # Replace this with your real tests.
	5	+ def test_truth
	6	+ assert true
	7	+ end
	8	+end