]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-9404 Rework the project activity list style
authorGrégoire Aubert <gregoire.aubert@sonarsource.com>
Thu, 22 Jun 2017 13:49:30 +0000 (15:49 +0200)
committerGrégoire Aubert <gregoire.aubert@sonarsource.com>
Tue, 4 Jul 2017 12:15:34 +0000 (14:15 +0200)
13 files changed:
server/sonar-web/src/main/js/apps/projectActivity/components/ChangeIcon.js [deleted file]
server/sonar-web/src/main/js/apps/projectActivity/components/DeleteIcon.js [deleted file]
server/sonar-web/src/main/js/apps/projectActivity/components/Event.css [deleted file]
server/sonar-web/src/main/js/apps/projectActivity/components/Event.js
server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
server/sonar-web/src/main/js/apps/projectActivity/components/Events.js
server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.js
server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
server/sonar-web/src/main/js/components/icons-components/ChangeIcon.js [new file with mode: 0644]
server/sonar-web/src/main/js/components/icons-components/DeleteIcon.js [new file with mode: 0644]
server/sonar-web/src/main/less/init/type.less
sonar-core/src/main/resources/org/sonar/l10n/core.properties

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ChangeIcon.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ChangeIcon.js
deleted file mode 100644 (file)
index e47455c..0000000
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// @flow
-import React from 'react';
-
-export default function ChangeIcon() {
-  /* eslint-disable max-len */
-  return (
-    <svg width="12" height="12" viewBox="0 0 14 14">
-      <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"
-      />
-    </svg>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/DeleteIcon.js b/server/sonar-web/src/main/js/apps/projectActivity/components/DeleteIcon.js
deleted file mode 100644 (file)
index 99a349e..0000000
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// @flow
-import React from 'react';
-
-export default function DeleteIcon() {
-  /* eslint-disable max-len */
-  return (
-    <svg width="12" height="12" viewBox="0 0 14 14">
-      <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"
-      />
-    </svg>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.css b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.css
deleted file mode 100644 (file)
index ee96a69..0000000
+++ /dev/null
@@ -1,5 +0,0 @@
-.project-activity-event {}
-
-.project-activity-event + .project-activity-event {
-  margin-top: 4px;
-}
index 2dc04fec94cf1b51e37094dc5e5216ef439aded5..6e1a3878c88a5dbf85a1b2afe92128b1dbca4dee 100644 (file)
@@ -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 />
index 62bc0e7e229b6f4c7e3ca230488589d77b181ecf..13152f46f94085a90033ef381cddcd43a3d28a62 100644 (file)
  */
 // @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>
   );
 }
index 27678c0a9acdc5c301f7077aedbdf7fe54c583a2..6f2725388d9024a78f8c28e7ed8c2ff8c0dbe296 100644 (file)
@@ -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'
   );
index 01f933beadce8c11cc5cced7339a85be8684cd7e..870dfd61c6ab50bf4ef7375d7d84be1518eb52d2 100644 (file)
@@ -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>
   );
 }
index 9b0e215c6869385eabbbb01198f1d7cfdc1922e0..138274caefc5273e33f1a1ff017b323cb99263ba 100644 (file)
@@ -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>
     );
   }
 }
index f8d35f22a263f16fdbfb50eb3375f8aa5ebb613d..6754b5dfa125671debf79ba4625d06cc4c1dd788 100644 (file)
@@ -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;
 }
 
 .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;
 
 .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 {
diff --git a/server/sonar-web/src/main/js/components/icons-components/ChangeIcon.js b/server/sonar-web/src/main/js/components/icons-components/ChangeIcon.js
new file mode 100644 (file)
index 0000000..f6d5f89
--- /dev/null
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+type Props = { className?: string, size?: number };
+
+export default function ChangeIcon({ className, size = 12 }: Props) {
+  /* eslint-disable max-len */
+  return (
+    <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"
+      />
+    </svg>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.js b/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.js
new file mode 100644 (file)
index 0000000..049cc56
--- /dev/null
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+
+type Props = { className?: string, size?: number };
+
+export default function DeleteIcon({ className, size = 12 }: Props) {
+  /* eslint-disable max-len */
+  return (
+    <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"
+      />
+    </svg>
+  );
+}
index d26cae210ba201b5725e0d5085d35ce0a1580a7a..bdf19f94f7d1b0b58b562f44a385a4f6c7d67ece 100644 (file)
@@ -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
index 11f0301d94694af57a4db54dc03c6235f868c574..bc2d0f77ff4203e7b7085167334aaf28a93f121e 100644 (file)
@@ -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