Repository: oppia/oppia

Issue:
UI issues in the Topics and Skills Dashboard and Editor Pages, Part 2 
**Done:**

### **DESKTOP: Topics and Skills Dashboard:**

**TOPICS TAB**
- [ ] **Description overlaps another section**
![Screen Shot 2020-06-18 at 2 02 13 PM](https://user-images.githubusercontent.com/22177674/85109076-9da91900-b1c5-11ea-9d03-1a3dcdea85bb.png)
- Let's display the entire description since the max number of lines is around 7.

- [ ] **Clearer Page Indicator**
![Screen Shot 2020-06-18 at 2 00 47 PM](https://user-images.githubusercontent.com/22177674/85109231-d8ab4c80-b1c5-11ea-86ea-9b17d67d17a0.png)
- Is there any way we can put the current page number in a circle? This would make it clearer to the user what page the list is on.


- [ ] **Remove scrollbar**
![Screen Shot 2020-06-18 at 1 57 19 PM](https://user-images.githubusercontent.com/22177674/85109279-eeb90d00-b1c5-11ea-845b-333b9cf1247f.png)


- [ ] **Remove "Create Topic" and "Create Skill" buttons
![Screen Shot 2020-06-18 at 1 48 23 PM](https://user-images.githubusercontent.com/22177674/85109579-65560a80-b1c6-11ea-99e8-e341054eeb9c.png)


- [ ] **Prev/Next Page is different from Topic's**
- Change it so that it has the same one as Topic's
![Screen Shot 2020-06-24 at 12 09 07 AM](https://user-images.githubusercontent.com/22177674/85631492-7bcaee80-b62a-11ea-9e48-186e1ef4e4cc.png)
 ----------------------------
**SKILLS TAB**

- [ ] **Add a description preview of each skill**
- 3 lines max

- [ ] **Right align the Status heading with its list below**

- [ ] **Remove "Assign to Topic" button if the skill is already assigned to a Topic**

- [ ] **Put the options in a 3 dot vertical menu like Topic's.**
![Screen Shot 2020-06-24 at 12 09 20 AM](https://user-images.githubusercontent.com/22177674/85631476-75d50d80-b62a-11ea-9da5-7925834b3d68.png)

- [ ] **After assigning a skill to a topic, the dashboard changes from the skills tab to the topic tab ([Video](https://drive.google.com/drive/u/1/folders/1Bm0oHxKfdo9SfgS6B3eoYYl7OObKVaYX))**
- Tabs should not change unless the user clicks on them
 ----------------------------

### **Topic Editor:**
- [ ] Left align the text of the "Add" buttons (i.e. "+ ADD SUBTOPIC")
![Screen Shot 2020-06-24 at 3 17 50 PM](https://user-images.githubusercontent.com/22177674/85641164-a0cb5b80-b642-11ea-980a-f166b33d8d65.png)
- [ ] Remove the descriptions underneath the "Add" buttons (i.e. "Click on Add Subtopic to create a new subtopic for the topic.")
![Screen Shot 2020-06-24 at 3 18 07 PM](https://user-images.githubusercontent.com/22177674/85641149-9c06a780-b642-11ea-8fc3-539f171dc236.png)
- Make the "Canonical Stories" container top-aligned with the "Topic Thumbnail" container
- Resize the Subtopics/Skills/Stories container to be the same width as the "Canonical Stories" container

- Left align the text of the "Add" buttons (i.e. "+ ADD SUBTOPIC")
- Remove the descriptions underneath the "Add" buttons (i.e. "Click on Add Subtopic to create a new subtopic for the topic.")
- [ ] Use #00609C for the Options Bar background color
- [ ] Make the "Canonical Stories" container top-aligned with the "Topic Thumbnail" container
- [ ] Resize the Subtopics/Skills/Stories container to be the same width as the "Canonical Stories" container
![Screen Shot 2020-06-24 at 3 18 26 PM](https://user-images.githubusercontent.com/22177674/85641134-8e512200-b642-11ea-9b2f-2744cd6f100a.png)
- Make the "Show/Hide Preview" button a dropdown menu and centered with respect to the"Topic Thumbnail" white container
- [ ] Issues with containers and buttons when window is resized
![Screen Shot 2020-06-24 at 3 33 47 PM](https://user-images.githubusercontent.com/22177674/85641120-84c7ba00-b642-11ea-98f5-b93839fda32b.png)
- [ ] Use breadcrumbs instead of the "Back to Topics Dashboard" button
- Topics and Skills Dashboard > Topic Name


**Left:** 
- Is there any way we can make the "Create" button a dropdown menu with options "Exploration," "Topic," and "Skill?" I understand that the four buttons on the right are global, so are there any limitations on what we can change here? 


----------------------------------
**TOPIC EDITOR CHANGES:**
- [ ] Make the "Show/Hide Preview" button a dropdown menu and centered with respect to the "Topic Thumbnail" white container
![Screen Shot 2020-06-24 at 3 18 15 PM](https://user-images.githubusercontent.com/22177674/85641144-96a95d00-b642-11ea-80cb-858474a33bd0.png)

- [ ] Put a character counter within the text input instead of putting a description with the limit

 ----------------------------
### **MOBILE: Topics and Skills Dashboard:**
- [ ] The white bar should be under the selected tab. The unselected tab should be #FFFFFF with an opacity of 70%
![Screen Shot 2020-06-30 at 12 45 49 AM](https://user-images.githubusercontent.com/22177674/86101251-d8853980-ba6e-11ea-9171-7aa3943a6e53.png)

- [ ] The blue highlighted colors in the vertical lines and the border of the "Topic Filters" button should be #00609C. 
- [ ] Match the singular/plural noun to quantity (ex: "1 Story)
![Screen Shot 2020-06-30 at 12 45 55 AM](https://user-images.githubusercontent.com/22177674/86101362-036f8d80-ba6f-11ea-8b02-294abbc4d9f8.png) 

- [ ] There should be no drop shadow over the tab menu. Consider having the tab menu layer "above" the header
![Screen Shot 2020-06-30 at 12 46 08 AM](https://user-images.githubusercontent.com/22177674/86101429-1aae7b00-ba6f-11ea-86e4-f6490f41398f.png)

- [ ] When the 3 dot menu is opened, let the user close it by tapping outside of the region. Currently it only closes when the 3 dot menu is tapped again.
![Screen Shot 2020-06-30 at 12 46 22 AM](https://user-images.githubusercontent.com/22177674/86101513-39147680-ba6f-11ea-8190-7b69eb7700da.png)

- [ ] The options menu header should not exist on mobile. It belongs on the bottom corner button. Please follow mock flow.
![Screen Shot 2020-06-30 at 12 48 19 AM](https://user-images.githubusercontent.com/22177674/86101749-8db7f180-ba6f-11ea-839f-653b45aaabd6.png)

- [ ] Navigation button to the TS Dashboard should match the mock's
![Screen Shot 2020-06-30 at 12 48 37 AM](https://user-images.githubusercontent.com/22177674/86102840-e1770a80-ba70-11ea-8533-33cdcdc4206c.png)

- [ ] First section should be labeled "Details" and should be collapsible like the other sections.
![Screen Shot 2020-06-30 at 12 52 08 AM](https://user-images.githubusercontent.com/22177674/86102912-f784cb00-ba70-11ea-99f7-ed8bb4587531.png)

- [ ] Use a 3 dot menu in place of the "Delete" button
![Screen Shot 2020-06-30 at 12 52 19 AM](https://user-images.githubusercontent.com/22177674/86102958-079caa80-ba71-11ea-9328-7a966f6ee356.png)

- [ ] The Skill's tab page navigation should follow the Topic's tab page navigation (with numbers and circles)
![Screen Shot 2020-06-30 at 12 53 23 AM](https://user-images.githubusercontent.com/22177674/86103054-23a04c00-ba71-11ea-849e-478ea5e778a8.png)

- Use a 3 dot menu instead of the buttons on the bottom
![Screen Shot 2020-06-30 at 12 53 49 AM](https://user-images.githubusercontent.com/22177674/86103099-2f8c0e00-ba71-11ea-8160-6d312b1c6d0a.png)

- Change "Many" to show the number of Skills actually available
![Screen Shot 2020-06-30 at 12 53 59 AM](https://user-images.githubusercontent.com/22177674/86103151-3fa3ed80-ba71-11ea-9253-e9e958fedb14.png)



Discussion:

Resolving patch:
diff --git a/scripts/check_frontend_coverage.py b/scripts/check_frontend_coverage.py
--- a/scripts/check_frontend_coverage.py
+++ b/scripts/check_frontend_coverage.py
@@ -464,7 +464,6 @@
     'TopicObjectFactory.ts',
     'topics-and-skills-dashboard-backend-api.service.ts',
     'topics-and-skills-dashboard-navbar-breadcrumb.directive.ts',
-    'topics-and-skills-dashboard-navbar.directive.ts',
     'training-panel.directive.ts',
     'translate-text.service.ts',
     'translation-file-hash-loader.service.ts',


Test patch:
diff --git a/core/tests/protractor_utils/TopicsAndSkillsDashboardPage.js b/core/tests/protractor_utils/TopicsAndSkillsDashboardPage.js
--- a/core/tests/protractor_utils/TopicsAndSkillsDashboardPage.js
+++ b/core/tests/protractor_utils/TopicsAndSkillsDashboardPage.js
@@ -31,6 +31,8 @@ var TopicsAndSkillsDashboardPage = function() {
     by.css('.protractor-test-create-topic-button'));
   var createSkillButton = element(
     by.css('.protractor-test-create-skill-button'));
+  var createSkillButtonSecondary = element(
+    by.css('.protractor-test-create-skill-button-circle'));
   var deleteSkillButtons = element.all(
     by.css('.protractor-test-delete-skill-button'));
   var topicsTable = element(by.css('.protractor-test-topics-table'));
@@ -317,10 +319,19 @@ var TopicsAndSkillsDashboardPage = function() {
     var handles = await browser.getAllWindowHandles();
     initialHandles = handles;
     var parentHandle = await browser.getWindowHandle();
-    await waitFor.elementToBeClickable(
-      createSkillButton,
-      'Create Skill button takes too long to be clickable');
-    await createSkillButton.click();
+    try {
+      await waitFor.elementToBeClickable(
+        createSkillButton,
+        'Create Skill button takes too long to be clickable');
+      await createSkillButton.click();
+    } catch (e) {
+      await this.navigateToSkillsTab();
+      await waitFor.elementToBeClickable(
+        createSkillButtonSecondary,
+        'Create Skill button takes too long to be clickable');
+      await createSkillButtonSecondary.click();
+    }
+
     await waitFor.visibilityOf(
       skillNameField,
       'Create Skill modal takes too long to appear.');
@@ -366,7 +377,7 @@ var TopicsAndSkillsDashboardPage = function() {
   this.navigateToSkillsTab = async function() {
     await waitFor.elementToBeClickable(
       skillsTabButton,
-      'Unused skills tab button taking too long to be clickable');
+      'Skills tab button taking too long to be clickable');
     await skillsTabButton.click();
   };