SONAR-9404 Rework the project activity list style

server/sonar-web/src/main/js/apps/projectActivity/components/Event.css

@@ -1,5 +0,0 @@
-.project-activity-event {}
-
-.project-activity-event + .project-activity-event {
-  margin-top: 4px;
-}

server/sonar-web/src/main/js/apps/projectActivity/components/Event.js

@@ -22,8 +22,8 @@ import React from 'react';
 import EventInner from './EventInner';
 import ChangeEventForm from './forms/ChangeEventForm';
 import RemoveEventForm from './forms/RemoveEventForm';
-import DeleteIcon from './DeleteIcon';
-import ChangeIcon from './ChangeIcon';
+import DeleteIcon from '../../../components/icons-components/DeleteIcon';
+import ChangeIcon from '../../../components/icons-components/ChangeIcon';
 import type { Event as EventType } from '../types';
 
 type Props = {
@@ -89,7 +89,7 @@ export default class Event extends React.PureComponent {
         <EventInner event={this.props.event} />
 
         {showActions &&
-          <div className="project-activity-event-actions">
+          <div className="project-activity-event-actions spacer-left">
             {canChange &&
               <button className="js-change-event button-clean" onClick={this.startChanging}>
                 <ChangeIcon />

server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js

@@ -19,25 +19,28 @@
  */
 // @flow
 import React from 'react';
+import ProjectEventIcon from '../../../components/icons-components/ProjectEventIcon';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
-import type { Event as EventType } from '../types';
 import { translate } from '../../../helpers/l10n';
-import './Event.css';
+import type { Event as EventType } from '../types';
 
 export default function EventInner(props: { event: EventType }) {
   const { event } = props;
 
-  if (event.category === 'VERSION') {
-    return <span className="badge project-activity-version-badge">{props.event.name}</span>;
-  }
-
   return (
     <TooltipsContainer>
-      <span>
-        <span className="note">{translate('event.category', event.category)}:</span>
-        {' '}
-        <strong title={event.description} data-toggle="tooltip">{event.name}</strong>
-      </span>
+      <div className="project-activity-event-inner">
+        <div className="project-activity-event-inner-icon little-spacer-right">
+          <ProjectEventIcon
+            className={'text-text-bottom project-activity-event-icon ' + event.category}
+          />
+        </div>
+        <span className="project-activity-event-inner-text">
+          <span className="note">{translate('event.category', event.category)}:</span>
+          {' '}
+          <strong title={event.description} data-toggle="tooltip">{event.name}</strong>
+        </span>
+      </div>
     </TooltipsContainer>
   );
 }

server/sonar-web/src/main/js/apps/projectActivity/components/Events.js

@@ -35,8 +35,8 @@ type Props = {
 export default function Events(props: Props) {
   const sortedEvents: Array<EventType> = sortBy(
     props.events,
-    // versions first
-    (event: EventType) => (event.category === 'VERSION' ? 0 : 1),
+    // versions last
+    (event: EventType) => (event.category === 'VERSION' ? 1 : 0),
     // then the rest sorted by category
     'category'
   );

server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js

@@ -45,11 +45,23 @@ export default function ProjectActivityAnalysis(props: Props) {
 
   return (
     <li className="project-activity-analysis clearfix">
+      <div className="project-activity-time spacer-right">
+        <FormattedDate date={date} format="LT" tooltipFormat="LTS" />
+      </div>
+      <div
+        className="project-activity-analysis-icon little-spacer-top big-spacer-right"
+        title={translate('project_activity.analysis')}
+      />
+
       {canAdmin &&
-        <div className="project-activity-analysis-actions">
+        <div className="project-activity-analysis-actions spacer-left">
           <div className="dropdown display-inline-block">
-            <button className="js-create button-small" data-toggle="dropdown">
-              {translate('create')} <i className="icon-dropdown" />
+            <button
+              className="js-analysis-actions button-small dropdown-toggle"
+              data-toggle="dropdown">
+              <i className="icon-settings" />
+              {' '}
+              <i className="icon-dropdown" />
             </button>
             <ul className="dropdown-menu dropdown-menu-right">
               {version == null &&
@@ -67,19 +79,18 @@ export default function ProjectActivityAnalysis(props: Props) {
                   addEventButtonText="project_activity.add_custom_event"
                 />
               </li>
+              {!isFirst && <li role="separator" className="divider" />}
+              {!isFirst &&
+                <li>
+                  <RemoveAnalysisForm
+                    analysis={props.analysis}
+                    deleteAnalysis={props.deleteAnalysis}
+                  />
+                </li>}
             </ul>
           </div>
-
-          {!isFirst &&
-            <div className="display-inline-block little-spacer-left">
-              <RemoveAnalysisForm analysis={props.analysis} deleteAnalysis={props.deleteAnalysis} />
-            </div>}
         </div>}
 
-      <div className="project-activity-time">
-        <FormattedDate date={date} format="LT" tooltipFormat="LTS" />
-      </div>
-
       {events.length > 0 &&
         <Events
           analysis={props.analysis.key}
@@ -89,6 +100,7 @@ export default function ProjectActivityAnalysis(props: Props) {
           events={events}
           isFirst={props.isFirst}
         />}
+
     </li>
   );
 }

server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.js

@@ -49,7 +49,8 @@ export default class RemoveAnalysisForm extends React.PureComponent {
     this.mounted = false;
   }
 
-  openForm = () => {
+  openForm = (evt: Event) => {
+    evt.preventDefault();
     if (this.mounted) {
       this.setState({ open: true });
     }
@@ -110,17 +111,16 @@ export default class RemoveAnalysisForm extends React.PureComponent {
                 </div>}
           </footer>
         </form>
-
       </Modal>
     );
   }
 
   render() {
     return (
-      <button className="js-delete-analysis button-small button-red" onClick={this.openForm}>
-        {translate('delete')}
+      <a className="js-delete-analysis" href="#" onClick={this.openForm}>
+        {translate('project_activity.delete_analysis')}
         {this.state.open && this.renderModal()}
-      </button>
+      </a>
     );
   }
 }

server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css

@@ -9,6 +9,11 @@
   margin-bottom: 0;
 }
 
+.project-activity-page-side-outer > .boxed-group-inner {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .project-activity-layout-page-main {
   flex-grow: 1;
   min-width: 640px;
@@ -53,7 +58,7 @@
 .project-activity-days-list {}
 
 .project-activity-day {
-  margin-bottom: 40px;
+  margin-bottom: 32px;
 }
 
 .project-activity-day:last-child {
@@ -71,8 +76,7 @@
 .project-activity-analysis {
   position: relative;
   min-height: 20px;
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding: 4px;
   border-top: 1px solid #e6e6e6;
   border-bottom: 1px solid #e6e6e6;
 }
@@ -87,55 +91,23 @@
 
 .project-activity-analysis-actions {
   float: right;
-  padding-right: 10px;
-}
-
-.project-activity-analysis-actions:first-child,
-.project-activity-analysis-actions:empty {
-  margin-top: 0;
-}
-
-.project-activity-analysis-actions > button + button,
-.project-activity-analysis-actions > button + form,
-.project-activity-analysis-actions > form + button,
-.project-activity-analysis-actions > form + form {
-  margin-left: 8px;
-}
-
-.project-activity-analysis-form {
-  display: inline-block;
-  vertical-align: top;
-  line-height: 20px;
-  margin-bottom: 10px;
-  padding: 9px;
-  border: 1px solid #faebcc;
-  border-radius: 2px;
-  background-color: #fcf8e3;
-}
-
-.project-activity-analysis-form + .project-activity-analysis-form {
-  margin-left: 8px;
 }
 
 .project-activity-time {
   float: left;
-  width: 130px;
+  width: 54px;
   line-height: 20px;
-  padding-right: 50px;
   box-sizing: border-box;
   font-size: 12px;
   font-weight: bold;
   text-align: right;
 }
 
-.project-activity-time::after {
-  position: absolute;
-  z-index: 21;
-  top: 11px;
-  left: 100px;
-  display: block;
+.project-activity-analysis-icon {
+  float: left;
   width: 10px;
   height: 10px;
+  margin-top: 4px;
   border: 2px solid #4b9fd5;
   border-radius: 10px;
   box-sizing: border-box;
@@ -148,11 +120,29 @@
 
 .project-activity-event {
   line-height: 20px;
+  display: flex;
+}
+
+.project-activity-event + .project-activity-event {
+  margin-top: 4px;
+}
+
+.project-activity-event-inner {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.project-activity-event-inner-icon {
+  flex-shrink: 0;
+}
+
+.project-activity-event-inner-text {
+  flex: 1;
 }
 
 .project-activity-event-actions {
   display: inline-block;
-  margin-left: 8px;
 }
 
 .project-activity-event-actions button {

server/sonar-web/src/main/js/apps/projectActivity/components/ChangeIcon.js → server/sonar-web/src/main/js/components/icons-components/ChangeIcon.js

@@ -20,10 +20,17 @@
 // @flow
 import React from 'react';
 
-export default function ChangeIcon() {
+type Props = { className?: string, size?: number };
+
+export default function ChangeIcon({ className, size = 12 }: Props) {
   /* eslint-disable max-len */
   return (
-    <svg width="12" height="12" viewBox="0 0 14 14">
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}>
       <path
         fill="#236a97"
         d="M3.35 12.82l.85-.84L2.02 9.8l-.84.85v.98h1.2v1.2h.97zM8.2 4.24c0-.13-.08-.2-.22-.2-.06 0-.1.02-.15.06l-5 5c-.05.05-.08.1-.08.17 0 .13.07.2.2.2.07 0 .12-.02.16-.06l5.02-5c.05-.04.07-.1.07-.16zm-.5-1.77l3.83 3.84-7.7 7.7H0v-3.84l7.7-7.7zm6.3.88c0 .33-.1.6-.34.84L12.12 5.7 8.28 1.88 9.8.35c.24-.23.5-.35.85-.35.32 0 .6.12.84.35l2.16 2.16c.23.25.34.53.34.85z"

server/sonar-web/src/main/js/apps/projectActivity/components/DeleteIcon.js → server/sonar-web/src/main/js/components/icons-components/DeleteIcon.js

@@ -20,10 +20,17 @@
 // @flow
 import React from 'react';
 
-export default function DeleteIcon() {
+type Props = { className?: string, size?: number };
+
+export default function DeleteIcon({ className, size = 12 }: Props) {
   /* eslint-disable max-len */
   return (
-    <svg width="12" height="12" viewBox="0 0 14 14">
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}>
       <path
         fill="#d4333f"
         d="M14 11.27c0 .3-.1.58-.33.8l-1.6 1.6c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33L7 10.2l-3.46 3.47c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33l-1.6-1.6c-.23-.22-.34-.5-.34-.8 0-.32.1-.6.33-.8L3.8 7 .32 3.54C.1 3.32 0 3.04 0 2.74c0-.32.1-.6.33-.8l1.6-1.6c.22-.23.5-.34.8-.34.32 0 .6.1.8.33L7 3.8 10.46.32c.22-.22.5-.33.8-.33.32 0 .6.1.8.33l1.6 1.6c.23.22.34.5.34.8 0 .32-.1.6-.33.8L10.2 7l3.47 3.46c.22.22.33.5.33.8z"

server/sonar-web/src/main/less/init/type.less

@@ -115,6 +115,7 @@ small,
 .text-middle  { vertical-align: middle; }
 .text-bottom  { vertical-align: bottom; }
 .text-text-top { vertical-align: text-top !important; }
+.text-text-bottom { vertical-align: text-bottom !important; }
 
 
 // Overflow

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -1270,6 +1270,7 @@ manual_rules.add_manual_rule=Add Manual Rule
 #
 #------------------------------------------------------------------------------
 
+project_activity.analysis=Analysis
 project_activity.add_version=Create Version
 project_activity.project_analyzed=Project Analyzed
 project_activity.remove_version=Remove Version