ActionItem287: friends manage interface and delet is better now.

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

ActionItem287: friends manage interface and delet is better now.
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1718 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent f54fa6c1
Showing 6 changed files with 101 additions and 4 deletions Show diff stats
app/helpers/application_helper.rb
app/views/friends/index.rhtml
app/views/friends/remove.rhtml
app/views/layouts/application.rhtml
public/designs/themes/default/stylesheets/controller_friends.css
public/stylesheets/controller_friends.css
@@ -398,6 +398,7 @@ module ApplicationHelper
   # #profile_image) and its name below it.
   def profile_image_link(profile, size=:portrait)
     link_to( '<div>'+ profile_image(profile, size) +'</div><span>'+ profile.name() +'</span>', profile.url,
+             :class => 'profile_link',
              :help => _('Click on this icon to go to the <b>%s</b>\'s home page') % profile.name )
   end
+<div id="manage_friends">
+
 <h1><%= _("%s's friends") % profile.name %></h1>
 <ul class='profile-list'>
 <% @friends.each do |friend| %>
   <li>
-  <%= profile_image_link(friend)%>
-  <br/>
-  <%= link_to '(remove)', :action => 'remove', :id => friend.id %>
+    <%= profile_image_link friend %>
+    <div class="controll">
+      <%= link_to content_tag('span',_('remove')),
+          { :action => 'remove', :id => friend.id },
+            :class => 'button icon-delete',
+            :title => _('remove'),
+            :help => _('Clicking on this button will remove your friend relation with %s.') % friend.name %>
+    </div><!-- end class="controll" -->
   </li>
 <% end %>
 </ul>
@@ -18,7 +25,9 @@
 </p>
 <% end %>
-
 <% button_bar do %>
   <%= button(:back, _('Go back'), :controller => 'profile_editor') %>
 <% end %>
+
+</div><!-- end id="manage_friends" -->
+
+<div id="remove_friend">
+
 <h1><%= _('Removing friend: %s') % @friend.name %></h1>
+<%= profile_image @friend, :thumb, :class => 'friend_picture' %>
+
 <p>
 <%= _('Are you sure you want to remove %s from your friends list?') % @friend.name %>
 </p>
@@ -16,3 +20,5 @@
   <%= submit_button(:ok, _("Yes, I want to remove %s from my friend list") % @friend.name) %>
   <%= button(:cancel, _("No, I don't want"), :action => 'index') %>
 <% end %>
+
+</div><!-- end id="remove_friend" -->
@@ -170,6 +170,19 @@
       // the onload will run only after all related documents load.
       // by that we need to cal this here:
       if ( window.addEventListener ) resizePrincipalTemplateBox()
+
+      // Sory IE:
+      if ( document.all ) {
+        if ( confirm("<%=
+_("Ups... It seems you are using Internet Explorer.
+
+We are sory, but some things will not work well on this web browser for now...
+We propose you to use Firefox, for this web site and any other.
+
+Do you want to get your Firefox now?").gsub(/\n/,'\n') %>") ) {
+          document.location.href = "http://getfirefox.com";
+        }
+      }
     </script>
   </body>
@@ -0,0 +1,9 @@
+
+.profile-list .profile_link span {
+  font-weight: bold;
+}
+
+.profile-list li:hover .profile_link span {
+  color: #FFF;
+}
+
@@ -0,0 +1,59 @@
+
+#content #manage_friends ul {
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+
+#content #manage_friends li {
+  float: left;
+  width: 200px;
+  height: 68px;
+  margin: 5px;
+  padding: 5px;
+  border: 2px solid #B8CFE7;
+  list-style: none;
+  overflow: hidden;
+  position: relative;
+}
+#content #manage_friends li:hover {
+  border: 2px solid #2A5896;
+  background: #729FCF;
+}
+
+.profile-list img {
+  float: left;
+  border: none;
+}
+
+.profile-list a {
+  text-decoration: none;
+}
+
+.profile-list .profile_link span {
+  width: 200px;
+  display: block;
+  overflow: hidden;
+}
+
+.controll {
+  position: absolute;
+  right: 5px;
+  bottom: 10px;
+}
+
+#manage_friends .button-bar {
+  clear: both;
+  padding-top: 20px;
+}
+
+#remove_friend .friend_picture {
+  float: left;
+  margin-right: 15px;
+}
+
+#remove_friend form {
+  clear: both;
+  padding-top: 20px;
+}
+
	@@ -398,6 +398,7 @@ module ApplicationHelper		@@ -398,6 +398,7 @@ module ApplicationHelper
398	# #profile_image) and its name below it.	398	# #profile_image) and its name below it.
399	def profile_image_link(profile, size=:portrait)	399	def profile_image_link(profile, size=:portrait)
400	link_to( '<div>'+ profile_image(profile, size) +'</div><span>'+ profile.name() +'</span>', profile.url,	400	link_to( '<div>'+ profile_image(profile, size) +'</div><span>'+ profile.name() +'</span>', profile.url,
		401	+ :class => 'profile_link',
401	:help => _('Click on this icon to go to the <b>%s</b>\'s home page') % profile.name )	402	:help => _('Click on this icon to go to the <b>%s</b>\'s home page') % profile.name )
402	end	403	end
403		404
	@@ -170,6 +170,19 @@		@@ -170,6 +170,19 @@
170	// the onload will run only after all related documents load.	170	// the onload will run only after all related documents load.
171	// by that we need to cal this here:	171	// by that we need to cal this here:
172	if ( window.addEventListener ) resizePrincipalTemplateBox()	172	if ( window.addEventListener ) resizePrincipalTemplateBox()
		173	+
		174	+ // Sory IE:
		175	+ if ( document.all ) {
		176	+ if ( confirm("<%=
		177	+_("Ups... It seems you are using Internet Explorer.
		178	+
		179	+We are sory, but some things will not work well on this web browser for now...
		180	+We propose you to use Firefox, for this web site and any other.
		181	+
		182	+Do you want to get your Firefox now?").gsub(/\n/,'\n') %>") ) {
		183	+ document.location.href = "http://getfirefox.com";
		184	+ }
		185	+ }
173	</script>	186	</script>
174		187
175	</body>	188	</body>
@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
	1	+
	2	+.profile-list .profile_link span {
	3	+ font-weight: bold;
	4	+}
	5	+
	6	+.profile-list li:hover .profile_link span {
	7	+ color: #FFF;
	8	+}
	9	+
@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
	1	+
	2	+#content #manage_friends ul {
	3	+ margin: 0px;
	4	+ padding: 0px;
	5	+ list-style: none;
	6	+}
	7	+
	8	+#content #manage_friends li {
	9	+ float: left;
	10	+ width: 200px;
	11	+ height: 68px;
	12	+ margin: 5px;
	13	+ padding: 5px;
	14	+ border: 2px solid #B8CFE7;
	15	+ list-style: none;
	16	+ overflow: hidden;
	17	+ position: relative;
	18	+}
	19	+#content #manage_friends li:hover {
	20	+ border: 2px solid #2A5896;
	21	+ background: #729FCF;
	22	+}
	23	+
	24	+.profile-list img {
	25	+ float: left;
	26	+ border: none;
	27	+}
	28	+
	29	+.profile-list a {
	30	+ text-decoration: none;
	31	+}
	32	+
	33	+.profile-list .profile_link span {
	34	+ width: 200px;
	35	+ display: block;
	36	+ overflow: hidden;
	37	+}
	38	+
	39	+.controll {
	40	+ position: absolute;
	41	+ right: 5px;
	42	+ bottom: 10px;
	43	+}
	44	+
	45	+#manage_friends .button-bar {
	46	+ clear: both;
	47	+ padding-top: 20px;
	48	+}
	49	+
	50	+#remove_friend .friend_picture {
	51	+ float: left;
	52	+ margin-right: 15px;
	53	+}
	54	+
	55	+#remove_friend form {
	56	+ clear: both;
	57	+ padding-top: 20px;
	58	+}
	59	+