#371 fixing styles + moving note-editor icon

Author: Wiktor Jurczyszyn

report/src/main/webapp/app/layout/main/url/navigation/navigation.patternButtons.html

@@ -17,7 +17,7 @@
     limitations under the License.
 
 -->
-<div class="toolbar-btns pull-right" data-ng-if=" case.usesCrossSuitePattern ">
+<div class="toolbar-button pull-right" data-ng-if=" case.usesCrossSuitePattern ">
   <div class="button button-small button-dark button-disabled"
        ng-if="case.showAcceptButton"
        data-aet-included-comment-popover
@@ -29,7 +29,7 @@
     Accept test case
   </div>
 </div>
-<div class="toolbar-btns pull-right" data-ng-if=" !case.usesCrossSuitePattern ">
+<div class="toolbar-button pull-right" data-ng-if=" !case.usesCrossSuitePattern ">
   <div id="accept-test-case" class="button button-small js-test-rebase button-blue" ng-click="urlView.acceptCase(case)"
        ng-if="case.showAcceptButton">
     <i class="icon icon-rebase"></i>

report/src/main/webapp/app/layout/main/url/reports/screen_layout.html

@@ -34,8 +34,8 @@
       <div class="advanced-screen-comparison button button-small button-blue">
         <a ng-if="case.status == 'FAILED' || case.status == 'CONDITIONALLY_PASSED'" data-ng-click="advancedScreenComparison()" data-aet-compare-screens>Advanced Screen Comparison</a>
       </div>
-      <ng-include src="'app/layout/main/url/navigation/navigation.comments.html'"/>
       <ng-include src="'app/layout/main/url/navigation/navigation.patternButtons.html'"/>
+      <ng-include src="'app/layout/main/url/navigation/navigation.comments.html'"/>
     </div>
   </div>
 </div>

report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html

@@ -28,7 +28,7 @@ <h4 class="toolbar-link-header ellipsis">
          data-ng-click="toolbarBottom.scrollSidepanel(false)">
         <i class="fas fa-crosshairs fa-sm"></i>
       </div>
-      <div 
+      <div
         ng-if="toolbarBottom.viewMode != 'suite' && toolbarBottom.viewMode != 'test' && toolbarBottom.isLastSuiteVersion"
         class="fontawesome-link"
         data-toggle="popover"
@@ -114,19 +114,6 @@ <h5 ng-if="toolbarBottom.viewMode == 'url'">
           </div>
         </a>
       </div>
-      <span class="comments-status pull-left"
-        data-toggle="popover"
-        data-ng-class="toolbarBottom.model.comment ? 'present' : 'absent'"
-        data-content="{{toolbarBottom.model.comment && '<span>' + toolbarBottom.model.comment + '</span>' || !toolbarBottom.model.comment && '<span>Click to update this ' + toolbarBottom.viewMode + ' note</span>'}}"
-        data-html="true" data-trigger="hover"
-        data-ng-click="toolbarBottom.displayCommentModal()">
-          <div ng-if="toolbarBottom.model.comment">
-            <i class="fas fa-ellipsis-h" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
-          </div>
-          <div ng-if="!toolbarBottom.model.comment">
-            <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
-          </div>
-      </span>
 
       <span class="button button-dark button-disabled"
             data-ng-if="toolbarBottom.usesCrossSuitePattern"
@@ -137,7 +124,7 @@ <h5 ng-if="toolbarBottom.viewMode == 'url'">
             data-trigger="hover"></i>
         Accept {{toolbarBottom.viewMode}}
       </span>
-    
+
       <span id="accept-test" class="button js-rebase-suite button-blue"
             data-ng-if="toolbarBottom.showAcceptButton()"
             data-ng-click="toolbarBottom.updatePatterns()"></i>
@@ -150,6 +137,20 @@ <h5 ng-if="toolbarBottom.viewMode == 'url'">
         <i class="fas {{theme.statusClasses['unrebased']}}"></i>
         Revert {{toolbarBottom.viewMode}}
       </span>
+
+      <span class="comments-status pull-left"
+      data-toggle="popover"
+      data-ng-class="toolbarBottom.model.comment ? 'present' : 'absent'"
+      data-content="{{toolbarBottom.model.comment && '<span>' + toolbarBottom.model.comment + '</span>' || !toolbarBottom.model.comment && '<span>Click to update this ' + toolbarBottom.viewMode + ' note</span>'}}"
+      data-html="true" data-trigger="hover"
+      data-ng-click="toolbarBottom.displayCommentModal()">
+        <div ng-if="toolbarBottom.model.comment">
+          <i class="fas fa-ellipsis-h" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
+        </div>
+        <div ng-if="!toolbarBottom.model.comment">
+          <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
+        </div>
+    </span>
     </div>
   </div>
 </div>

report/src/main/webapp/assets/sass/_test.scss

@@ -39,7 +39,7 @@
     color: #77777c;
     font-size: 11px;
     display: inline-block;
-    padding: 0 20px;
+    padding-right: 20px;
     line-height: 31px;
     margin: 8px 0;
     vertical-align: middle;
@@ -53,7 +53,7 @@
   margin: 0;
   height: 20px;
   vertical-align: middle;
-  
+
   .checkbox {
     display: inline-block;
     margin: 0;

report/src/main/webapp/assets/sass/_toolbar.scss

@@ -216,12 +216,11 @@
 
     .button {
       float: left;
-      margin-left: 15px;
+      margin-right: 15px;
     }
 
     .tab-content-toolbar & {
       padding-top: 3px;
-      padding-right: 15px;
       height: 47px;
     }
   }
@@ -233,7 +232,7 @@
   display: block;
   line-height: 44px;
   cursor: pointer;
-  margin-right: 10px;
+  margin: -3px 0 0 10px;
 
   &.small {
     line-height: 37px;
@@ -250,6 +249,7 @@
 }
 
 .tab-content-toolbar {
+  padding: 0 20px;
 
   @media (max-width: 1300px) {
     height: 94px;
@@ -262,6 +262,10 @@
   .toolbar-blocks {
     display: inline;
   }
+
+  .toolbar-button {
+    margin-top: 3px;
+  }
 }
 
 .set-initial-font-size {