Fix oppia#5683: UI changes to new editors (oppia#5698)

* Fix oppia#5683: ui-changes * fixed e2e test * made review changes
dmoneyballer · Sep 29, 2018 · f3cf204 · f3cf204
1 parent 4be3582
commit f3cf204
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 27 deletions.
diff --git a/core/templates/dev/head/components/CkEditorRteDirective.js b/core/templates/dev/head/components/CkEditorRteDirective.js
@@ -92,10 +92,16 @@ oppia.directive('ckEditorRte', [
         CKEDITOR.plugins.addExternal(
           'pre', '/extensions/ckeditor_plugins/pre/', 'plugin.js');
 
+        var startupFocusEnabled = true;
+        if (
+          scope.uiConfig() &&
+          scope.uiConfig().startupFocusEnabled !== undefined) {
+          startupFocusEnabled = scope.uiConfig().startupFocusEnabled;
+        }
         // Initialize CKEditor.
         var ck = CKEDITOR.inline(el[0].children[0].children[1], {
           extraPlugins: 'pre,sharedspace,' + pluginNames,
-          startupFocus: true,
+          startupFocus: startupFocusEnabled,
           removePlugins: 'indentblock',
           title: false,
           floatSpaceDockedOffsetY: 15,

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/SkillMisconceptionsEditorDirective.js b/core/templates/dev/head/pages/skill_editor/editor_tab/SkillMisconceptionsEditorDirective.js
@@ -94,13 +94,16 @@ oppia.directive('skillMisconceptionsEditor', [
                   $scope.skill = SkillEditorStateService.getSkill();
                   $scope.MISCONCEPTION_PROPERTY_FORM_SCHEMA = {
                     type: 'html',
-                    ui_config: {}
+                    ui_config: {
+                      startupFocusEnabled: false
+                    }
                   };
 
                   $scope.MISCONCEPTION_FEEDBACK_PROPERTY_FORM_SCHEMA = {
                     type: 'html',
                     ui_config: {
-                      hide_complex_extensions: true
+                      hide_complex_extensions: true,
+                      startupFocusEnabled: false
                     }
                   };
 

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/add_misconception_modal_directive.html b/core/templates/dev/head/pages/skill_editor/editor_tab/add_misconception_modal_directive.html
@@ -22,7 +22,7 @@ <h3>Add Misconception</h3>
           <span class="oppia-editor-description">Use a name that will be easy for question creators to understand.</span>
         </div>
         <div>
-          <input class="form-control" type="text" ng-model="misconceptionName" maxlength="30">
+          <input class="form-control" type="text" ng-model="misconceptionName" maxlength="30" autofocus>
           <span ng-if="misconceptionName.length === 30" class="help-block" style="color: red; font-size: smaller">
             <em>Please use at most 30 characters.</em>
           </span>

diff --git a/.../templates/dev/head/pages/topic_editor/subtopics_editor/subtopics_list_tab_directive.html b/.../templates/dev/head/pages/topic_editor/subtopics_editor/subtopics_list_tab_directive.html
@@ -9,11 +9,18 @@ <h4 style="color: #6d6d6d">
                ng-repeat="(subtopicIndex, subtopic) in subtopics"
                dnd-list="subtopic.getSkillSummaries()"
                dnd-drop="endMoveSkill(subtopic.getId())">
-        <strong uib-tooltip="<[subtopic.getTitle()]>" tooltip-placement="bottom" ng-if="subtopic.getTitle().length < 20" style="padding-left: 1.5vw;"><[subtopic.getTitle()]></strong>
-        <strong uib-tooltip="<[subtopic.getTitle()]>" tooltip-placement="bottom" ng-if="subtopic.getTitle().length >= 20" style="padding-left: 1.5vw;"><[subtopic.getTitle().substring(0,17)]>...</strong>
-        <span style="float: right; color: #b50000;" ng-click="deleteSubtopic(subtopic)" aria-hidden="true">
-          <i class="material-icons md-18">&#xE14C;</i>
-        </span>
+        <div class="subtopic-header">
+          <strong uib-tooltip="<[subtopic.getTitle()]>" tooltip-placement="bottom" ng-if="subtopic.getTitle().length < 17" style="padding-left: 1.5vw;"><[subtopic.getTitle()]></strong>
+          <strong uib-tooltip="<[subtopic.getTitle()]>" tooltip-placement="bottom" ng-if="subtopic.getTitle().length >= 17" style="padding-left: 1.5vw;"><[subtopic.getTitle().substring(0,15)]>...</strong>
+          <div style="float: right;">
+            <span style="color: #1d7800;" ng-click="editSubtopic(subtopic)" aria-hidden="true">
+              <i class="material-icons md-18">edit</i>
+            </span>
+            <span style="color: #b50000;" ng-click="deleteSubtopic(subtopic)" aria-hidden="true">
+              <i class="material-icons md-18">&#xE14C;</i>
+            </span>
+          </div>
+        </div>
         <div style="min-height: 30vh; max-height: 30vh; overflow-y: auto;">
           <md-card class="skill-id"
                    ng-repeat="skillSummary in subtopic.getSkillSummaries() track by $index"
@@ -30,7 +37,6 @@ <h4 style="color: #6d6d6d">
             </span>
           </md-card>
         </div>
-        <button class="btn btn-success" ng-click="editSubtopic(subtopic)"> Edit </button>
       </md-card>
       <md-card class="subtopic new" ng-click="createSubtopic()">
         <span>
@@ -108,22 +114,24 @@ <h3> Uncategorized Skills </h3>
     flex: 0 0 auto;
     position: relative;
   }
+  subtopics-list-tab .subtopic-header {
+    text-align: left;
+  }
   subtopics-list-tab .subtopic:hover {
     background-color: #f6f6f6;
   }
   subtopics-list-tab .new {
     background-color: white;
     border-width: 3px;
     border-style: dotted;
-    border-color: #a4a4a4;
+    border-color: #c3c3c3;
   }
   subtopics-list-tab .new:hover {
     background-color: #f1f1f1;
   }
   subtopics-list-tab .new span {
     position: sticky;
     top: 40%;
-    left: 20%;
   }
   subtopics-list-tab .subtopics {
     background-color: white;

diff --git a/...emplates/dev/head/pages/topics_and_skills_dashboard/create_new_skill_modal_directive.html b/...emplates/dev/head/pages/topics_and_skills_dashboard/create_new_skill_modal_directive.html
@@ -7,7 +7,7 @@ <h3>Create New Skill</h3>
     <div class="oppia-rule-details-header" style="margin-bottom: 0.5em; margin-top: 1em;">
       <strong>New Skill Description</strong>
     </div>
-    <input type="text" class="form-control" placeholder="eg: Adding Fractions" ng-model="newSkillDescription">
+    <input type="text" class="form-control" placeholder="eg: Adding Fractions" ng-model="newSkillDescription" autofocus>
   </div>
 
   <div class="modal-footer">

diff --git a/...templates/dev/head/pages/topics_and_skills_dashboard/new_topic_name_editor_directive.html b/...templates/dev/head/pages/topics_and_skills_dashboard/new_topic_name_editor_directive.html
@@ -3,21 +3,23 @@ <h3>
     Enter Topic Name
   </h3>
 </div>
-<div class="modal-body new-topic-name-editor" ng-class="{'has-error': isTopicNameEmpty(topicName)}">
-  <p>
-    Enter the name for the topic: &nbsp;
-    <input class="form-group" ng-model="topicName" maxlength="20">
-    <p style="color: red;" ng-if="topicName.length === 20">
-      Topic name should be less than 20 characters.
+<form ng-submit="save(topicName)">
+  <div class="modal-body new-topic-name-editor" ng-class="{'has-error': isTopicNameEmpty(topicName)}">
+    <p>
+      Enter the name for the topic: &nbsp;
+      <input class="form-group" ng-model="topicName" maxlength="20" autofocus>
+      <p style="color: red;" ng-if="topicName.length === 20">
+        Topic name should be less than 20 characters.
+      </p>
     </p>
-  </p>
-</div>
-<div class="modal-footer">
-  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
-  <button class="btn btn-success" ng-disabled="isTopicNameEmpty(topicName)" ng-click="save(topicName)">
-    <span>Create Topic</span>
-  </button>
-</div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-success" type="submit" ng-disabled="isTopicNameEmpty(topicName) || topicName.length >= 20">
+      <span>Create Topic</span>
+    </button>
+    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
+  </div>
+</form>
 <style>
   .new-topic-name-editor .help-block {
     margin-left: 37.5%;