Project

General

Profile

Feature #6015

Improve procedure to add new friends in the social network

Added by Noa Orizales Iglesias over 6 years ago. Updated over 5 years ago.

Status:
Feature implemented
Priority:
Normal
Category:
Social
Target version:
Start date:
07/03/2013
Due date:
% Done:

100%

Estimated time:
Spent time:
Complexity:
Normal
SCRUM pts - complexity:
?

Description

Rigth now when someone looks for a frind, it has to go through one extra step to get him invited or to send him a message.

I think it would be more intuitive if we could add a button below each friend profile to directly perform those actions. See the screenshot for more details.


Files

example.png (180 KB) example.png Example of the buttons Noa Orizales Iglesias, 07/03/2013 12:46
example.png (182 KB) example.png Alberto Montes, 12/03/2013 13:22
svg_iconos.zip (132 KB) svg_iconos.zip Alberto Montes, 12/03/2013 13:24
example2.png (128 KB) example2.png example2 Alberto Montes, 10/05/2013 11:32
example3.png (127 KB) example3.png example3 Alberto Montes, 10/05/2013 11:32
images.zip (4.08 KB) images.zip social icons Alberto Montes, 16/05/2013 13:52
css_change.png (73.4 KB) css_change.png css button Alberto Montes, 20/05/2013 11:27
social.gif (59.6 KB) social.gif Yoselyn Castillo, 20/05/2013 21:56
new-social.gif (65.7 KB) new-social.gif Yoselyn Castillo, 21/05/2013 18:39
Tooltip_004.png (24.1 KB) Tooltip_004.png Julio Montoya, 04/06/2013 11:36
Selection_005.png (33.7 KB) Selection_005.png Julio Montoya, 04/06/2013 11:41
Selection_001.png (32.4 KB) Selection_001.png Julio Montoya, 27/08/2013 17:52

Related issues

Related to Chamilo LMS - Feature #5160: Add icons to button, links in Bootstrap - Font Awesome Needs more info11/07/2012

Actions

Associated revisions

Revision 7dba38bf
Added by Yannick Warnier over 6 years ago

Merge branch 'ycastillo-yoselyn.social' into 1.9.x - refs #6015

Revision a2c36dfa
Added by Yannick Warnier over 6 years ago

Merge branch '1.9.x' of github.com:chamilo/chamilo-lms into 1.9.x - refs #6015

Revision 3e4ad841
Added by Yannick Warnier over 6 years ago

Merge pull request #53 from ycastillo/6015.new

New Add friends - refs #6015

Revision 4520950e
Added by Yannick Warnier over 6 years ago

Merge pull request #55 from ycastillo/6015.new

style changes in adding friends - refs #6015

Revision dd45b2f3 (diff)
Added by Yannick Warnier over 6 years ago

Merge ycastillo-yoselyn.6015 - refs #6015

Revision dae33f52 (diff)
Added by Julio Montoya over 6 years ago

Undo images in social buttons see #6015

Revision 1eace481
Added by Julio Montoya over 6 years ago

Merge pull request #70 from jmontoyaa/1.9.x

Undo images in social buttons see #6015

Revision a0f9a677 (diff)
Added by Julio Montoya about 6 years ago

Adding font_awesome icons + adding in the search see #6015

History

#1

Updated by Yannick Warnier over 6 years ago

  • Category set to Social
  • Target version set to 1.9.6

Rejected: Making friends shouldn't be easier than it is in the real world...

Just kidding :-D

We know the procedure is a bit complicated. Your example is fine, but I think it would better to use icons directly, instead of literals.

Please try to assign a category anytime you see that one could fit.

#2

Updated by Noa Orizales Iglesias over 6 years ago

jejeje.

I agree, icons would be better. My screenshot was juts to give an example. Alberto Montes can make them. Do I ask him to create them. If yes.. Can you tell me if they have to have an specific size?

#3

Updated by Yannick Warnier over 6 years ago

There should be 3 "buttons" (not really "icons") in the total width of the friend block:
  • Add friend (optional, appear in gray if already your friend)
  • Send message
  • Chat (only available if it's your friend, otherwise gray)
#4

Updated by Noa Orizales Iglesias over 6 years ago

  • Status changed from New to Assigned
  • Assignee set to Alberto Montes

Ok. Alberto, Could you please create those buttons that Yannick is requesting for the social network? Thanks.

#5

Updated by Alberto Montes over 6 years ago

Hola!! os adjunto un preview con 2 propuestas una cómo lo había enviado Yannick los botones en fila y otro con los botones uno debajo del otro, este último me parece más amigable desde el punto de vista visual. Ya me comentan.

El estilo de los botones que he utilizado es idem al botón que aparece en la parte superior de "Cambiar a vista de alumno" para así mantener la misma línea de diseño.

Adjunto SVG e iconos sueltos en un zip

#6

Updated by Alberto Montes over 6 years ago

svg con iconos

#7

Updated by Alberto Montes over 6 years ago

  • Assignee changed from Alberto Montes to Noa Orizales Iglesias
  • % Done changed from 0 to 40
#8

Updated by Alberto Montes over 6 years ago

  • Assignee changed from Noa Orizales Iglesias to Yannick Warnier
#9

Updated by Yannick Warnier over 6 years ago

  • Assignee changed from Yannick Warnier to Cesar Perales
#10

Updated by Emiliano Orizales over 6 years ago

Esta funcionalidad no está implementada de momento. Los botones no se han incorporado en el perfil de cada amigo, siguen los enlaces antiguos.

#11

Updated by Noa Orizales Iglesias over 6 years ago

César, puedes echarle un ojo a esta tarea? La he revisado yo también y los iconos no están todavía subidos a la red social en stable.chamilo.org Si los subes, podemos revisarlo hoy mimso y confirmarte que está bien.

#12

Updated by Yannick Warnier over 6 years ago

  • Assignee changed from Cesar Perales to Yoselyn Castillo
#13

Updated by Yoselyn Castillo over 6 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Yoselyn Castillo)

commit was sent. Needs testing

#14

Updated by Yoselyn Castillo over 6 years ago

  • % Done changed from 40 to 80
#15

Updated by Emiliano Orizales over 6 years ago

Funciona correctamente pero pienso que los iconos son demasiado pequeños y pueden suponer una dificultad para la usabilidad

#16

Updated by Noa Orizales Iglesias over 6 years ago

  • Status changed from Needs testing to Assigned
  • Assignee set to Yoselyn Castillo
#17

Updated by Yoselyn Castillo over 6 years ago

Ok, i will correct this and i will add a hint message in order to improve users understanding.

#18

Updated by Yoselyn Castillo over 6 years ago

  • Assignee changed from Yoselyn Castillo to Julio Montoya

I have sent a pull request fixing the recommendations. Waiting in the repo

#19

Updated by Yannick Warnier over 6 years ago

  • Status changed from Assigned to Feature implemented
  • Assignee changed from Julio Montoya to Yoselyn Castillo
  • % Done changed from 80 to 100

Good for me.

#20

Updated by Noa Orizales Iglesias over 6 years ago

Yannick, I believe the icons are still very small.

#21

Updated by Yannick Warnier over 6 years ago

  • Status changed from Feature implemented to Assigned
  • Assignee changed from Yoselyn Castillo to Noa Orizales Iglesias

Please provide an ideal format.

#22

Updated by Noa Orizales Iglesias over 6 years ago

  • Assignee changed from Noa Orizales Iglesias to Alberto Montes

Ok, Alberto, will send a proposal soon.

#23

Updated by Alberto Montes over 6 years ago

Attachment 2 proposals with larger icons. The icons will appear in gray if disabled.

example2
example3

This is a html for the buttons:

<button class="btn btn-mini">Mini button </button>

If its ok, I tuning up the icons and will send to you a tranparents png.

#24

Updated by Yannick Warnier over 6 years ago

  • Assignee changed from Alberto Montes to Yoselyn Castillo

Alberto, no te olvides de pasar la pelota cuando ya no puedes hacer nada (en este caso re-asignar a quien te pidió iconos o a quien estaba trabajando sobre la tarea y estaba esperando los iconos para avanzar).

#25

Updated by Alberto Montes over 6 years ago

Sí, discúlpame que se me pasó.

#26

Updated by Yoselyn Castillo over 6 years ago

  • Assignee changed from Yoselyn Castillo to Alberto Montes

Please upload those icons here (with the size you have attached). Your proposal looks very well

#27

Updated by Yoselyn Castillo over 6 years ago

  • Assignee changed from Alberto Montes to Yoselyn Castillo
#28

Updated by Alberto Montes over 6 years ago

Good!!, I attached the following 5 icons, any details you tell me.

- mail
- adduser-on
- adduser-off
- chat-on
- char-off

#29

Updated by Yoselyn Castillo over 6 years ago

I have not added a button for chat, because i kept the format of status online or offline besides user number
The new pull request was sent here:
https://github.com/chamilo/chamilo-lms/pull/46
Tell me what do you think?

#30

Updated by Alberto Montes over 6 years ago

As I see in http://stable.chamilo.org/main/social/friends.php I propose would change the buttons a bit smaller, I say apply a class="btn btn-mini" to the buttons, I think that when we have many buttons there is not enough space, what do you think?

Attached proposed css changes.

#31

Updated by Yoselyn Castillo over 6 years ago

  • File social.gif added

Changes are sent to
https://github.com/chamilo/chamilo-lms/pull/53
They are not integrated to stable.chamilo.org yet
But it is following your suggestions of btn-mini, and adding a backgroud for the button.
It looks like this

#32

Updated by Yoselyn Castillo over 6 years ago

  • File deleted (social.gif)
#34

Updated by Alberto Montes over 6 years ago

Look nice, well just a add a little space between buttons and some padding of the icons, but when the changes is in stable I can adjust it.

#35

Updated by Yoselyn Castillo over 6 years ago

New styling changes were sent to
https://github.com/chamilo/chamilo-lms/pull/55
It looks like this

#36

Updated by Yannick Warnier over 6 years ago

  • Status changed from Assigned to Needs testing
  • Assignee changed from Yoselyn Castillo to Noa Orizales Iglesias
  • % Done changed from 100 to 90

Noa, some feedback so we can close this task?

#37

Updated by Noa Orizales Iglesias over 6 years ago

  • Assignee changed from Noa Orizales Iglesias to Yannick Warnier

Hi, it was Alberto Montes who was supervising this task, but I can confirm you that if it looks like in Yoselyn´s picture, it will be ok. Much more clear for teh user now. From my point of view you can close it.

#38

Updated by Yannick Warnier over 6 years ago

  • Status changed from Needs testing to Feature implemented
  • Assignee changed from Yannick Warnier to Yoselyn Castillo
  • % Done changed from 90 to 100

I was asking you because you opened the task :-)
OK, thanks.

#39

Updated by Alberto Montes over 6 years ago

All right, but just a milimetrical tuning: the distance between the button and user image should be the same, and in the Send invitation button space between icon and text should be the same of the other button.

After that you can close ;)

#41

Updated by Yannick Warnier over 6 years ago

Refused for now (techie explanation on github). I think there was a copy-paste mistake there...

#42

Updated by Yoselyn Castillo over 6 years ago

Yes, it is a copy-paste mistake, changes in base.css are only for new social buttons , Anyway i will send the commit again

#43

Updated by Julio Montoya over 6 years ago

This does not work for me. I have this issue in FF v21 and Chrome v28

We should use as much as possible Bootstrap (that's why it was added in Chamilo) in order to avoid custom changes.

In order to add icons to buttons : http://twitter.github.io/bootstrap/base-css.html#buttons (star example)

There's a related task #5160

#44

Updated by Julio Montoya over 6 years ago

I'm undoing some changes so it looks like this now:

https://github.com/chamilo/chamilo-lms/pull/70

#45

Updated by Noa Orizales Iglesias over 6 years ago

Does that mean we can´t use icons there? It was much more intuitive with an icon that without it.

#46

Updated by Julio Montoya over 6 years ago

  • Assignee deleted (Yoselyn Castillo)

Noa Orizales Iglesias wrote:

Does that mean we can´t use icons there? It was much more intuitive with an icon that without it.

We can't use icon the way it was implemented here. We have to have a global solution see task #5160 that deals exactly with the problem of buttons and icons.

#47

Updated by Yannick Warnier over 6 years ago

  • Target version changed from 1.9.6 to 1.9.8
#48

Updated by Yannick Warnier about 6 years ago

I have no problem in including Font Awesome. Julio, is there something already in the Chamilo 1.9 code about this (font awesome inclusion)?

#49

Updated by Yannick Warnier about 6 years ago

  • Assignee set to Julio Montoya
#50

Updated by Yannick Warnier about 6 years ago

Julio, waiting an answer from you here...

#51

Updated by Julio Montoya about 6 years ago

  • Status changed from Needs more info to Assigned

Yannick Warnier wrote:

I have no problem in including Font Awesome. Julio, is there something already in the Chamilo 1.9 code about this (font awesome inclusion)?

fontawesome was added in 1.10, but not in 1.9.x I will add it and try to resolve this one.

#52

Updated by Julio Montoya about 6 years ago

I just added the icons:

#53

Updated by Julio Montoya about 6 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Julio Montoya)
#54

Updated by Yannick Warnier over 5 years ago

  • Assignee set to Daniel Barreto

Daniel, we just need a quick review here that the functionality is working more or less without any problem.

#55

Updated by Daniel Barreto over 5 years ago

  • % Done changed from 50 to 60

Tested and works good, but I would prefer 2 big buttons of icon of person whit a plus symbol for add friend and and icon of letter for send message. They work
I don't know if the next issues are related to the changes here, like the css. But I'll comment them.
When the width is less than 1200px aprox. the user are showed whit only 2 columns leaving a big blank space on the right side. The buttons put down under the image and the images are deformed (too thin) and also leave more blank space.
This occurs until width of 767px aprox, when the width is less than 767px the user are showee whit 4 columns and the design looks good. There aren't another change for less width.
And a other change could be when you click the avatar of the user then you are redirected to the profile of this user, If this change is ok, I'll work it.

#56

Updated by Yannick Warnier over 5 years ago

  • Assignee changed from Daniel Barreto to Noa Orizales Iglesias

Noa, could you review the current status on https://stable.chamilo.org and give us your opinion. We would like to close this task and, if incomplete, schedule the rest for Chamilo LMS 1.10 (but we need to make sure we are not loosing any of the suggestions made here).

#57

Updated by Noa Orizales Iglesias over 5 years ago

  • Status changed from Needs testing to Assigned
  • Assignee changed from Noa Orizales Iglesias to Yannick Warnier

Works fine in firefox and Chrome. The buttons with the text are fine. You can close for now.

#58

Updated by Yannick Warnier over 5 years ago

  • Status changed from Assigned to Feature implemented
  • Assignee changed from Yannick Warnier to Yoselyn Castillo
  • % Done changed from 60 to 100

Also available in: Atom PDF