Repository: oppia/oppia

Issue:
Make better icons for all the rich-text editor components
```
The icon for the Collapsible widget in the rich-text editor keeps confusing me 
since it looks more like a folder containing a file than anything else.

It would be nice if we could replace it with something more apposite, perhaps a 
plus sign with a light border around it?
```

Original issue reported on code.google.com by `jacobdav...@gmail.com` on 6 Nov 2014 at 6:02



Discussion:
Original comment by `s...@seanlip.org` on 21 May 2015 at 5:13

/cc @jacobdavis11 (original reporter)

Note: it might also be a good idea to rethink the icons for the other custom buttons in the RTE toolbar.

Is there a reason why the icons are 16 x 16 pixels? It seems that they will be more visible if we could make them just slightly larger.

I think it's fine to make them slightly larger -- there's no hard constraint.

I've attached a few icon drafts below. These ones are very different from what is currently being used, they are more minimalistic designs instead of tiny pictures. The color scheme is adapted from the existing Oppia color palette. A few notes on some particular icons:
1. Collapsible: The original issue was that the collapsible widget was confusing. Is the arrow icon below less confusing?
2. Math: I did away with the Latex image altogether since it does not seem well known outside academic circles. I am hoping that the two new icons are more comprehensible, but I haven't decided on one yet.
3. Tabs/Hints: It seems that the tab widget will soon be replaced by a hints widget instead, so the new icon is designed to convey 'hints'.

I'll post screenshots of what the whole page will look like with the new icons soon. They will also be undergoing minor revisions. Any feedback will be useful, especially if major changes are required (e.g. should we go back to using tiny pictures instead of icons?)

![collapsible](https://cloud.githubusercontent.com/assets/16433058/12070960/94a3295c-b0cd-11e5-8d2e-5fe6ed29f9b1.png)
![image](https://cloud.githubusercontent.com/assets/16433058/12070959/94a0be92-b0cd-11e5-9321-0a978ca26ea8.png)
![link](https://cloud.githubusercontent.com/assets/16433058/12070963/94a97eb0-b0cd-11e5-8b05-a9aafa4a3acf.png)
![math01](https://cloud.githubusercontent.com/assets/16433058/12070961/94a8be08-b0cd-11e5-948c-607a1bb54370.png)
![math02](https://cloud.githubusercontent.com/assets/16433058/12070962/94a98784-b0cd-11e5-8884-2062a7518ee6.png)
![tabs](https://cloud.githubusercontent.com/assets/16433058/12070964/94ad34ec-b0cd-11e5-90aa-f6131dde6126.png)
![video](https://cloud.githubusercontent.com/assets/16433058/12070965/94d082d0-b0cd-11e5-9980-decc77cca81c.png)

(/cc @amitdeutsch, @markhalpin, @charisseysabel for comments)

Hi @GraceGSy, thanks very much for these! Responding to your questions:
- I think icons are totally fine, and in fact preferable to the tiny pictures that we're currently using.
- I like the new collapsible icon better than the previous one. I don't know if it's fully clear as it stands, but it is a hard concept to convey, and I can't really think of anything better at the moment.
- What do you think about something like x^2 for the math icon? It's a simpler concept than f(x), and is something pretty minimal that wouldn't be renderable just by typing in a textarea.
- Unfortunately, I don't know how soon we'll be able to move to a hints component, so I was wondering, do you have any thoughts for a placeholder design for tabs that we might be able to use in the interim? If not, that's fine -- I'll just make a mental note that we can't push these out until we've migrated to use hints.
- I think your suggestion of attaching a screenshot with the icons in context would also be very helpful!

I've also added Amit, Mark and Charisse to this thread, in case they have any comments.

Thanks again, and happy new year!

Here are the new icons in context of the whole webpage.
1. The math icon is now x^2 as suggested above
2. Hints has been reverted to tabs. I am not too sure about how it looks currently, but I cannot think of a better representation.

![rich-text mock-up](https://cloud.githubusercontent.com/assets/16433058/12403611/0dbb23de-be03-11e5-88c0-de6c6496b99d.jpg)

Also, if anyone has feedback regarding the color scheme for the icons, that will help very much too.

Hi guys,

Sorry to be out of the loop for a few days, but looking forward to getting
caught up on various threads and commenting as desired. Divya, is there a
meeting scheduled for this Wednesday?

Thanks,

Mark

On Fri, Jan 1, 2016 at 7:54 PM, Sean Lip notifications@github.com wrote:

> (/cc @amitdeutsch https://github.com/amitdeutsch, @markhalpin
> https://github.com/markhalpin, @charisseysabel
> https://github.com/charisseysabel for comments)
> 
> Hi @GraceGSy https://github.com/GraceGSy, thanks very much for these!
> Responding to your questions:
> - I think icons are totally fine, and in fact preferable to the tiny
>   pictures that we're currently using.
> - I like the new collapsible icon better than the previous one. I
>   don't know if it's fully clear as it stands, but it is a hard concept to
>   convey, and I can't really think of anything better at the moment.
> - What do you think about something like x^2 for the math icon? It's a
>   simpler concept than f(x), and is something pretty minimal that wouldn't be
>   renderable just by typing in a textarea.
> - Unfortunately, I don't know how soon we'll be able to move to a
>   hints component, so I was wondering, do you have any thoughts for a
>   placeholder design for tabs that we might be able to use in the interim? If
>   not, that's fine -- I'll just make a mental note that we can't push these
>   out until we've migrated to use hints.
> - I think your suggestion of attaching a screenshot with the icons in
>   context would also be very helpful!
> 
> I've also added Amit, Mark and Charisse to this thread, in case they have
> any comments.
> 
> Thanks again, and happy new year!
> 
> —
> Reply to this email directly or view it on GitHub
> https://github.com/oppia/oppia/issues/448#issuecomment-168353784.

Hey @markhalpin, I think you're on the wrong thread :-) From the context, I think you're referring to an email thread that's not on GitHub.

@GraceGSy -- these look great, thanks! One thought: can you have a go at making them match the colors of the other icons (B, I, U, ..., pre)? I think it would look cleaner that way. Also, did you manage to get these into the codebase? If so, it would be great if you could start a pull request, since that makes it easier for reviewers to test their branch on their machine. Thanks!


Resolving patch:
diff --git a/extensions/rich_text_components/Collapsible/Collapsible.py b/extensions/rich_text_components/Collapsible/Collapsible.py
--- a/extensions/rich_text_components/Collapsible/Collapsible.py
+++ b/extensions/rich_text_components/Collapsible/Collapsible.py
@@ -45,3 +45,4 @@ class Collapsible(base.BaseRichTextComponent):
         },
         'default_value': 'You have opened the collapsible block.'
     }]
+
diff --git a/extensions/rich_text_components/Tabs/Tabs.py b/extensions/rich_text_components/Tabs/Tabs.py
--- a/extensions/rich_text_components/Tabs/Tabs.py
+++ b/extensions/rich_text_components/Tabs/Tabs.py
@@ -71,3 +71,4 @@ class Tabs(base.BaseRichTextComponent):
             'content': 'This is a first hint.'
         }],
     }]
+
diff --git a/extensions/rich_text_components/Video/Video.py b/extensions/rich_text_components/Video/Video.py
--- a/extensions/rich_text_components/Video/Video.py
+++ b/extensions/rich_text_components/Video/Video.py
@@ -66,3 +66,4 @@ class Video(base.BaseRichTextComponent):
         },
         'default_value': False,
     }]
+


Test patch: