From 1ecbb0ef85da06d61cfda9f19568f3311f795d8e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Thu, 22 Feb 2018 10:41:46 +0100
Subject: [PATCH] Fix styling in rules meta data

---
 .../src/main/js/app/styles/init/forms.css     |  8 +++++--
 .../components/RuleDetailsMeta.tsx            |  3 ++-
 .../main/js/components/common/MultiSelect.tsx | 23 ++++++++++---------
 .../__snapshots__/MultiSelect-test.tsx.snap   |  4 ++++
 .../issue/popups/SetAssigneePopup.js          |  7 +++---
 .../src/main/js/components/ui/buttons.css     |  4 ++++
 .../workspace/templates/workspace-rule.hbs    |  9 +++-----
 7 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/styles/init/forms.css b/server/sonar-web/src/main/js/app/styles/init/forms.css
index b7c3cec13a7..21ddda4f62b 100644
--- a/server/sonar-web/src/main/js/app/styles/init/forms.css
+++ b/server/sonar-web/src/main/js/app/styles/init/forms.css
@@ -185,7 +185,7 @@ input[type='button']:disabled:focus {
 }
 
 .button svg {
-  padding-top: calc((var(--controlHeight) - 16px - 2px) / 2);
+  margin-top: calc((var(--controlHeight) - 16px - 2px) / 2);
 }
 
 .button-red,
@@ -264,7 +264,7 @@ input[type='submit'].button-grey.button-active {
 
 .button-link {
   display: inline;
-  height: auto;
+  height: auto; /* Keep this to not inherit the height from .button */
   margin: 0;
   padding: 0;
   border: none;
@@ -276,6 +276,10 @@ input[type='submit'].button-grey.button-active {
   transition: all 0.2s ease;
 }
 
+.button-link svg {
+  margin-top: 0;
+}
+
 .button-link:hover,
 .button-link:focus {
   background: transparent;
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index fa43eebc44a..1a272610065 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -125,6 +125,7 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
         ) : (
           <TagsList
             allowUpdate={canWrite}
+            className="display-flex-center"
             tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]}
           />
         )}
@@ -134,7 +135,7 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
 
   renderCreationDate = () => (
     <li className="coding-rules-detail-property" data-meta="available-since">
-      {translate('coding_rules.available_since')}{' '}
+      <span className="little-spacer-right">{translate('coding_rules.available_since')}</span>
       <DateFormatter date={this.props.ruleDetails.createdAt} />
     </li>
   );
diff --git a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
index 8fe2519b558..bc235e5a1af 100644
--- a/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
+++ b/server/sonar-web/src/main/js/components/common/MultiSelect.tsx
@@ -235,6 +235,7 @@ export default class MultiSelect extends React.PureComponent<Props, State> {
         <div className="menu-search">
           <SearchBox
             autoFocus={true}
+            className="little-spacer-top"
             onChange={this.handleSearchChange}
             placeholder={this.props.placeholder}
             value={query}
@@ -244,32 +245,32 @@ export default class MultiSelect extends React.PureComponent<Props, State> {
           {selectedElements.length > 0 &&
             selectedElements.map(element => (
               <MultiSelectOption
-                key={element}
-                element={element}
-                selected={true}
                 active={activeElement === element}
-                onSelectChange={this.handleSelectChange}
+                element={element}
+                key={element}
                 onHover={this.handleElementHover}
+                onSelectChange={this.handleSelectChange}
+                selected={true}
               />
             ))}
           {unselectedElements.length > 0 &&
             unselectedElements.map(element => (
               <MultiSelectOption
-                key={element}
-                element={element}
                 active={activeElement === element}
-                onSelectChange={this.handleSelectChange}
+                element={element}
+                key={element}
                 onHover={this.handleElementHover}
+                onSelectChange={this.handleSelectChange}
               />
             ))}
           {this.isNewElement(query, this.props) && (
             <MultiSelectOption
-              key={query}
-              element={query}
-              custom={true}
               active={activeElement === query}
-              onSelectChange={this.handleSelectChange}
+              custom={true}
+              element={query}
+              key={query}
               onHover={this.handleElementHover}
+              onSelectChange={this.handleSelectChange}
             />
           )}
         </ul>
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
index 32dac980bbe..15c17fc74ad 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MultiSelect-test.tsx.snap
@@ -9,6 +9,7 @@ exports[`should render multiselect with selected elements 1`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -38,6 +39,7 @@ exports[`should render multiselect with selected elements 2`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -81,6 +83,7 @@ exports[`should render multiselect with selected elements 3`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value=""
@@ -124,6 +127,7 @@ exports[`should render multiselect with selected elements 4`] = `
   >
     <SearchBox
       autoFocus={true}
+      className="little-spacer-top"
       onChange={[Function]}
       placeholder=""
       value="test"
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
index 75013a4c6ef..270cbe04158 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
@@ -124,12 +124,13 @@ class SetAssigneePopup extends React.PureComponent {
   render() {
     return (
       <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom">
+        customClass="bubble-popup-menu bubble-popup-bottom"
+        position={this.props.popupPosition}>
         <div className="multi-select">
           <div className="menu-search">
             <SearchBox
               autoFocus={true}
+              className="little-spacer-top"
               minLength={2}
               onChange={this.handleSearchChange}
               placeholder={translate('search.search_for_users')}
@@ -137,8 +138,8 @@ class SetAssigneePopup extends React.PureComponent {
             />
           </div>
           <SelectList
-            items={map(this.state.users, 'login')}
             currentItem={this.state.currentUser}
+            items={map(this.state.users, 'login')}
             onSelect={this.props.onSelect}>
             {this.state.users.map(user => (
               <SelectListItem key={user.login} item={user.login}>
diff --git a/server/sonar-web/src/main/js/components/ui/buttons.css b/server/sonar-web/src/main/js/components/ui/buttons.css
index da474c888c4..3df0420fc49 100644
--- a/server/sonar-web/src/main/js/components/ui/buttons.css
+++ b/server/sonar-web/src/main/js/components/ui/buttons.css
@@ -48,6 +48,10 @@
   padding: 0;
 }
 
+.button-icon.button-icon.button-tiny svg {
+  margin-top: 0;
+}
+
 .button-icon.button-icon:hover,
 .button-icon.button-icon:focus {
   background-color: currentColor;
diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
index a20fdd8bed8..304daeaca48 100644
--- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
+++ b/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs
@@ -24,7 +24,7 @@
 
       <li class="coding-rules-detail-property coding-rules-detail-tag-list {{#if canWrite}}coding-rules-detail-tags-change{{/if}}"
           data-toggle="tooltip" data-placement="bottom" title="Rule tags">
-        <i class="icon-tags"></i>
+        <i class="icon-tags little-spacer-right"></i>
         <span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span>
       </li>
 
@@ -41,7 +41,7 @@
         </li>
       {{/if}}
 
-      <li class="pull-right spacer-left">
+      <li class="coding-rules-detail-property spacer-left">
         <a class="link-no-underline" target="_blank" href="{{permalink}}">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -54,10 +54,7 @@
             />
           </svg>
         </a>
-      </li>
-
-      <li class="pull-right">
-        <span class="note">{{key}}</span>
+        <span class="note little-spacer-left">{{key}}</span>
       </li>
     </ul>
 
-- 
2.39.5