Merge pull request #734 from zanata/ZNTA-2408-fix

fix(ZNTA-2408) set RejectTranslationModal Criteria dropdown to have empty field by default
zanata · Feb 26, 2018 · 9ac7c3d · 9ac7c3d
2 parents ecc0cab + 27315be
commit 9ac7c3d
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 14 deletions.
diff --git a/...er/gwt-editor/src/main/java/org/zanata/webtrans/client/view/ForceReviewCommentWidget.java b/...er/gwt-editor/src/main/java/org/zanata/webtrans/client/view/ForceReviewCommentWidget.java
@@ -63,8 +63,7 @@ public ForceReviewCommentWidget(WebTransMessages messages,
         panel.setWidth("800px");
         listBox = new ListBox();
         listBox.setMultipleSelect(false);
-        // add an empty item
-        listBox.addItem("--- Select a predefined criteria ---");
+        listBox.addItem("");
         panel.add(listBox);
         panel.add(inputWidget);
         DialogBoxCloseButton button = new DialogBoxCloseButton(this);

diff --git a/server/zanata-frontend/src/.storybook-editor/__snapshots__/storyshots-editor.test.js.snap b/server/zanata-frontend/src/.storybook-editor/__snapshots__/storyshots-editor.test.js.snap
@@ -7353,6 +7353,60 @@ exports[`Editor Storyshots RejectTranslationModal Criteria chosen 1`] = `
 </div>
 `;
 
+exports[`Editor Storyshots RejectTranslationModal Initial state 1`] = `
+<div>
+  <h1>
+    Lorem Ipsum
+  </h1>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>",
+      }
+    }
+  />
+  <ul
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
+<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
+<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
+<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
+<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
+      }
+    }
+  />
+  <h2>
+    Dolor Sit Amet
+  </h2>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
+<p>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</p>
+<p>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</p>
+<p>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</p>
+<p>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</p>",
+      }
+    }
+  />
+  <ul
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<li>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</li>
+<li>Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.</li>
+<li>Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.</li>
+<li>Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.</li>
+<li>Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.</li>",
+      }
+    }
+  />
+  <div
+    className="static-modal"
+  />
+</div>
+`;
+
 exports[`Editor Storyshots RejectTranslationModal Other - no criteria set 1`] = `
 <div>
   <h1>

diff --git a/...frontend/src/app/editor/components/RejectTranslationModal/RejectTranslationModal.story.js b/...frontend/src/app/editor/components/RejectTranslationModal/RejectTranslationModal.story.js
@@ -24,6 +24,11 @@ storiesOf('RejectTranslationModal', module)
           </div>
         </div>
     ))
+    .add('Initial state', () => (
+        <RejectTranslationModal show isOpen
+          criteria=""
+          priority={CRITICAL}  textState="u-textDanger" />
+    ))
     .add('Criteria chosen', () => (
         <RejectTranslationModal show isOpen
          criteria="Translation Errors: terminology, mistranslated addition, omission, un-localized, do not translate, etc"

diff --git a/server/zanata-frontend/src/app/editor/components/RejectTranslationModal/index.js b/server/zanata-frontend/src/app/editor/components/RejectTranslationModal/index.js
@@ -89,9 +89,11 @@ export class RejectTranslationModal extends Component {
             onToggle={this.toggleDropdown}
             className="dropdown-menu Criteria">
             <Dropdown.Button>
-            <a className="EditorDropdown-item">
+            <a className="EditorDropdown-item ellipsis">
               {this.props.criteria}
-              <Icon className="n1" name="chevron-down" />
+              <span className='arrow'>
+                <Icon className="n1" name="chevron-down" />
+              </span>
               </a>
             </Dropdown.Button>
             <Dropdown.Content>
@@ -122,7 +124,9 @@ export class RejectTranslationModal extends Component {
             <Dropdown.Button>
               <a className="EditorDropdown-item">
                 <span className={textState}>{this.props.priority}</span>
-                <Icon className="n1" name="chevron-down" />
+                <span className='arrow'>
+                  <Icon className="n1" name="chevron-down" />
+                </span>
               </a>
             </Dropdown.Button>
             <Dropdown.Content>

diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.js
@@ -57,9 +57,11 @@ class CriteriaDropdown extends Component {
         onToggle={this.toggleDropdown}
         className='dropdown-menu Criteria'>
         <Dropdown.Button>
-          <a className='EditorDropdown-item'>
+          <a className='EditorDropdown-item ellipsis'>
             {criteriaDescription}
-            <Icon className='n1 u-pullRight' name='chevron-down' />
+            <span className='arrow'>
+              <Icon className='n1' name='chevron-down' />
+            </span>
           </a>
         </Dropdown.Button>
         <Dropdown.Content>

diff --git a/...zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js b/...zanata-frontend/src/app/editor/containers/RejectTranslationModal/CriteriaDropdown.test.js
@@ -44,9 +44,11 @@ describe('CriteriaDropdown', () => {
         onToggle={defaultClick}
         className='dropdown-menu Criteria'>
         <Dropdown.Button>
-          <a className='EditorDropdown-item'>
+          <a className='EditorDropdown-item ellipsis'>
             {'One'}
-            <Icon className='n1 u-pullRight' name='chevron-down' />
+            <span className='arrow'>
+              <Icon className='n1' name='chevron-down' />
+            </span>
           </a>
         </Dropdown.Button>
         <Dropdown.Content>

diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/PriorityDropdown.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/PriorityDropdown.js
@@ -49,7 +49,9 @@ class ProirityDropdown extends Component {
           <Dropdown.Button>
             <a className='EditorDropdown-item'>
               <span className={textState}>{priority}</span>
-              <Icon className='n1' name='chevron-down' />
+              <span className='arrow'>
+                <Icon className='n1' name='chevron-down' />
+              </span>
             </a>
           </Dropdown.Button>
           <Dropdown.Content>

diff --git a/...zanata-frontend/src/app/editor/containers/RejectTranslationModal/PriorityDropdown.test.js b/...zanata-frontend/src/app/editor/containers/RejectTranslationModal/PriorityDropdown.test.js
@@ -30,7 +30,9 @@ describe('PriorityDropdown', () => {
           <Dropdown.Button>
             <a className='EditorDropdown-item'>
               <span className={minorStyle}>{MINOR}</span>
-              <Icon className='n1' name='chevron-down' />
+              <span className='arrow'>
+                <Icon className='n1' name='chevron-down' />
+              </span>
             </a>
           </Dropdown.Button>
           <Dropdown.Content>
@@ -71,7 +73,9 @@ describe('PriorityDropdown', () => {
           <Dropdown.Button>
             <a className='EditorDropdown-item'>
               <span className={majorStyle}>{MAJOR}</span>
-              <Icon className='n1' name='chevron-down' />
+              <span className='arrow'>
+                <Icon className='n1' name='chevron-down' />
+              </span>
             </a>
           </Dropdown.Button>
           <Dropdown.Content>
@@ -112,7 +116,9 @@ describe('PriorityDropdown', () => {
           <Dropdown.Button>
             <a className='EditorDropdown-item'>
               <span className={criticalStyle}>{CRITICAL}</span>
-              <Icon className='n1' name='chevron-down' />
+              <span className='arrow'>
+                <Icon className='n1' name='chevron-down' />
+              </span>
             </a>
           </Dropdown.Button>
           <Dropdown.Content>

diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.css
@@ -13,6 +13,7 @@
 #RejectTranslationModal .flex {
   flex-direction: row;
   align-items: center;
+  vertical-align: text-top;
 }
 
 #PriorityTitle, #CriteriaTitle {
@@ -25,6 +26,8 @@
 
 #RejectTranslationModal .PriorityDropdown {
   margin-left: 1.5rem;
+  display: inline-flex;
+  align-items: inherit;
 }
 
 #RejectTranslationModal .modal-body .EditorInputGroup--outlined {
@@ -34,10 +37,14 @@
 #RejectTranslationModal .modal-body .EditorDropdown {
   border-radius: var(--TM-input-border-radius);
   border: var(--TM-input-border) !important;
+  min-height: 2rem;
+  line-height: 2rem;
+  padding-right: 2rem;
 }
 
 #RejectTranslationModal .Criteria {
   flex-grow: 2;
+  max-width: 40rem;
 }
 
 #RejectTranslationModal a.EditorDropdown-item span.s0 {
@@ -76,6 +83,12 @@
   border-radius: 0.4rem;
 }
 
+#RejectTranslationModal .EditorDropdown-item span.arrow {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
 #RejectTranslationModal .EditorDropdown-item span.n1 {
   margin-left: var(--TM-small-margin);
   vertical-align: var(--TM-icon-vert-alignment);

diff --git a/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js b/server/zanata-frontend/src/app/editor/containers/RejectTranslationModal/index.js
@@ -40,7 +40,7 @@ export class RejectTranslationModal extends Component {
     review: {
       selectedPriority: MINOR,
       priorityId: 0,
-      criteriaDescription: '-- Select a predefined criteria --',
+      criteriaDescription: '',
       criteriaId: undefined,
       reviewComment: ''
     },