diff options
Diffstat (limited to 'server/sonar-web/src/main/js/components')
23 files changed, 1353 insertions, 0 deletions
diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css new file mode 100644 index 00000000000..9976420a760 --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.css @@ -0,0 +1,77 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.line-tooltip { + fill: none; + stroke: var(--secondFontColor); + stroke-width: 1px; + shape-rendering: crispEdges; +} + +.chart-mouse-events-overlay { + fill: none; + stroke: none; + pointer-events: all; +} + +.chart-zoomed .line-chart-area { + clip-path: url(#chart-clip); +} + +.chart-zoomed .line-chart-path { + clip-path: url(#chart-clip); +} + +.chart-zoomed .leak-chart-rect { + clip-path: url(#chart-clip); +} + +.line-chart-dot { + fill: var(--blue); +} + +.line-chart-dot.line-chart-dot-1 { + fill: var(--darkBlue); +} + +.line-chart-dot.line-chart-dot-2 { + fill: #24c6e0; +} + +.line-chart-event { + fill: #fff; + stroke: var(--blue); + stroke-width: 2px; +} + +.line-chart-event.VERSION { + stroke: var(--blue); +} + +.line-chart-event.QUALITY_GATE { + stroke: var(--green); +} + +.line-chart-event.QUALITY_PROFILE { + stroke: var(--orange); +} + +.line-chart-event.OTHER { + stroke: var(--purple); +} diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js index f4d54a0aa5f..f09633d575a 100644 --- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js @@ -25,6 +25,8 @@ import { bisector, extent, max } from 'd3-array'; import { scaleLinear, scalePoint, scaleTime } from 'd3-scale'; import { line as d3Line, area, curveBasis } from 'd3-shape'; import * as theme from '../../app/theme'; +import './LineChart.css'; +import './AdvancedTimeline.css'; /*:: type Event = { className?: string, name: string, date: Date }; diff --git a/server/sonar-web/src/main/js/components/charts/BarChart.css b/server/sonar-web/src/main/js/components/charts/BarChart.css new file mode 100644 index 00000000000..04542d74b4b --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/BarChart.css @@ -0,0 +1,28 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.bar-chart-bar { + fill: var(--blue); +} + +.bar-chart-tick { + fill: var(--secondFontColor); + font-size: var(--smallFontSize); + text-anchor: middle; +} diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.css b/server/sonar-web/src/main/js/components/charts/BubbleChart.css new file mode 100644 index 00000000000..9bcecc465eb --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.css @@ -0,0 +1,60 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.bubble-chart.is-moving { + cursor: move; +} + +.bubble-chart text { + user-select: none; +} + +.bubble-chart-bubble { + fill: var(--blue); + fill-opacity: 0.2; + stroke: var(--blue); + cursor: pointer; + transition: fill-opacity 0.2s ease; +} + +.bubble-chart-bubble:hover { + fill-opacity: 0.8; +} + +.bubble-chart-grid { + shape-rendering: crispedges; + stroke: #eee; +} + +.bubble-chart-tick { + fill: var(--secondFontColor); + font-size: var(--smallFontSize); + text-anchor: middle; +} + +.bubble-chart-tick-y { + text-anchor: end; +} + +.bubble-chart-zoom { + position: absolute; + right: 20px; + top: 20px; + z-index: var(--aboveNormalZIndex); +} diff --git a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx index d280be68922..ec134895fd3 100644 --- a/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx +++ b/server/sonar-web/src/main/js/components/charts/BubbleChart.tsx @@ -26,6 +26,7 @@ import { scaleLinear, ScaleLinear } from 'd3-scale'; import { sortBy, uniq } from 'lodash'; import Tooltip from '../controls/Tooltip'; import { translate } from '../../helpers/l10n'; +import './BubbleChart.css'; const TICKS_COUNT = 5; diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css new file mode 100644 index 00000000000..61e30717fca --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.css @@ -0,0 +1,45 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.color-box-legend { + display: flex; + justify-content: center; +} + +.color-box-legend > *:not(:first-child) { + margin-left: 24px; +} + +.color-box-legend .color-box-legend-rect { + display: inline-block; + margin-top: 1px; + margin-right: 4px; + border: 1px solid; +} + +.color-box-legend .color-box-legend-rect-inner { + display: block; + width: 8px; + height: 8px; + opacity: 0.2; +} + +.color-box-legend.color-box-full .color-box-legend-rect-inner { + opacity: 1; +} diff --git a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.tsx index cf2a140d2a2..5edfc0f5253 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorBoxLegend.tsx @@ -21,6 +21,7 @@ import * as React from 'react'; import * as classNames from 'classnames'; import { ScaleLinear, ScaleOrdinal } from 'd3-scale'; import { formatMeasure } from '../../helpers/measures'; +import './ColorBoxLegend.css'; interface Props { className?: string; diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.css b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.css new file mode 100644 index 00000000000..3c9d07e8c7f --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.css @@ -0,0 +1,33 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.gradient-legend-text, +.gradient-legend-na { + text-anchor: middle; + fill: var(--secondFontColor); + font-size: 10px; +} + +.gradient-legend-text:first-of-type { + text-anchor: start; +} + +.gradient-legend-text:last-of-type { + text-anchor: end; +} diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx index 5ea00b6be59..ae2eb08bc30 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx @@ -19,6 +19,7 @@ */ import * as React from 'react'; import { ScaleLinear, ScaleOrdinal } from 'd3-scale'; +import './ColorGradientLegend.css'; interface Props { className?: string; diff --git a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx index 80e44f7c11e..cc7eb695b25 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorRatingsLegend.tsx @@ -21,6 +21,7 @@ import * as React from 'react'; import * as classNames from 'classnames'; import { formatMeasure } from '../../helpers/measures'; import { RATING_COLORS } from '../../helpers/constants'; +import './ColorBoxLegend.css'; interface Props { className?: string; diff --git a/server/sonar-web/src/main/js/components/charts/Histogram.css b/server/sonar-web/src/main/js/components/charts/Histogram.css new file mode 100644 index 00000000000..27577587677 --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/Histogram.css @@ -0,0 +1,30 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.histogram-tick { + text-anchor: end; +} + +.histogram-tick-start { + text-anchor: start; +} + +.histogram-value { + text-anchor: start; +} diff --git a/server/sonar-web/src/main/js/components/charts/Histogram.tsx b/server/sonar-web/src/main/js/components/charts/Histogram.tsx index 3695459f158..8c5728bb43c 100644 --- a/server/sonar-web/src/main/js/components/charts/Histogram.tsx +++ b/server/sonar-web/src/main/js/components/charts/Histogram.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { max } from 'd3-array'; import { scaleLinear, scaleBand, ScaleLinear, ScaleBand } from 'd3-scale'; import Tooltip from '../controls/Tooltip'; +import './BarChart.css'; +import './Histogram.css'; interface Props { alignTicks?: boolean; diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.css b/server/sonar-web/src/main/js/components/charts/LineChart.css new file mode 100644 index 00000000000..76fb0389069 --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/LineChart.css @@ -0,0 +1,70 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.line-chart-path { + fill: none; + stroke: var(--blue); + stroke-width: 2px; +} + +.line-chart-path.line-chart-path-1 { + stroke: var(--darkBlue); +} + +.line-chart-path.line-chart-path-2 { + stroke: #24c6e0; +} + +.line-chart-area { + fill: rgba(75, 159, 213, 0.3); + stroke-width: 0; +} + +.line-chart-area.line-chart-area-1 { + fill: rgba(35, 106, 151, 0.3); +} + +.line-chart-area.line-chart-area-2 { + fill: rgba(36, 198, 224, 0.3); +} + +.line-chart-point { + fill: #fff; + stroke: var(--blue); + stroke-width: 2px; +} + +.line-chart-tick { + fill: var(--secondFontColor); + font-size: var(--smallFontSize); + text-anchor: middle; +} + +.line-chart-tick-x { + text-anchor: end; +} + +.line-chart-tick-x-right { + text-anchor: start; +} + +.line-chart-grid { + shape-rendering: crispedges; + stroke: #eee; +} diff --git a/server/sonar-web/src/main/js/components/charts/LineChart.tsx b/server/sonar-web/src/main/js/components/charts/LineChart.tsx index 2d8d5f18058..862a3da8c1d 100644 --- a/server/sonar-web/src/main/js/components/charts/LineChart.tsx +++ b/server/sonar-web/src/main/js/components/charts/LineChart.tsx @@ -22,6 +22,7 @@ import { extent, max } from 'd3-array'; import { scaleLinear, ScaleLinear } from 'd3-scale'; import { area as d3Area, line as d3Line, curveBasis } from 'd3-shape'; import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer'; +import './LineChart.css'; interface DataPoint { x: number; diff --git a/server/sonar-web/src/main/js/components/charts/TreeMap.css b/server/sonar-web/src/main/js/components/charts/TreeMap.css new file mode 100644 index 00000000000..0e8aa811d9e --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/TreeMap.css @@ -0,0 +1,82 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.sonar-d3 .treemap-container { + position: relative; +} + +.sonar-d3 .treemap-cell { + position: absolute; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + box-sizing: border-box; + text-align: center; +} + +.sonar-d3 .treemap-cell:focus { + outline: none; +} + +.sonar-d3 .treemap-inner { + display: inline-flex; + vertical-align: middle; + align-items: center; + justify-content: center; + flex-wrap: wrap; + padding: 0 4px; + box-sizing: border-box; + line-height: 1.2; +} + +.sonar-d3 .treemap-inner .treemap-icon { + flex-shrink: 0; +} + +.sonar-d3 .treemap-inner .treemap-icon svg { + margin-top: 2px; +} + +.sonar-d3 .treemap-inner .treemap-text { + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: left; +} + +.sonar-d3 .treemap-link { + position: absolute; + z-index: var(--normalZIndex); + top: 5px; + right: 5px; + line-height: 14px; + font-size: var(--smallFontSize); + border-bottom: none; +} + +.sonar-d3 .treemap-link:hover { + color: #d1eafb; +} + +.sonar-d3 .treemap-link i, +.sonar-d3 .treemap-link i:before { + vertical-align: top; + font-size: inherit; + line-height: inherit; +} diff --git a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx index 9ee5d2320f7..489617142f3 100644 --- a/server/sonar-web/src/main/js/components/charts/TreeMap.tsx +++ b/server/sonar-web/src/main/js/components/charts/TreeMap.tsx @@ -21,6 +21,7 @@ import * as React from 'react'; import { treemap as d3Treemap, hierarchy as d3Hierarchy } from 'd3-hierarchy'; import TreeMapRect from './TreeMapRect'; import { translate } from '../../helpers/l10n'; +import './TreeMap.css'; interface TreeMapItem { color: string; diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.css b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.css new file mode 100644 index 00000000000..d317f401a83 --- /dev/null +++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.css @@ -0,0 +1,46 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.chart-zoom-tick { + fill: var(--secondFontColor); + font-size: 10px; + text-anchor: middle; + user-select: none; +} + +.chart-zoom .zoom-overlay { + fill: none; + stroke: none; + cursor: crosshair; + pointer-events: all; +} + +.chart-zoom .zoom-selection { + fill: var(--secondFontColor); + fill-opacity: 0.2; + stroke: var(--secondFontColor); + shape-rendering: crispEdges; + cursor: move; +} + +.chart-zoom .zoom-selection-handle { + cursor: ew-resize; + fill-opacity: 0; + stroke: none; +} diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js index 704c152d576..e2cee003b15 100644 --- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js +++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js @@ -28,6 +28,8 @@ import Draggable, { DraggableCore } from 'react-draggable'; /*:: import type { DraggableData } from 'react-draggable'; */ /*:: import type { Point, Serie } from './AdvancedTimeline'; */ import * as theme from '../../app/theme'; +import './LineChart.css'; +import './ZoomTimeLine.css'; /*:: type Scale = Function; diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.css b/server/sonar-web/src/main/js/components/controls/GlobalMessages.css new file mode 100644 index 00000000000..6d0f5054a3e --- /dev/null +++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.css @@ -0,0 +1,72 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.processes-container { + position: fixed; + z-index: var(--processContainerZIndex); + top: 0; + left: 50%; + width: 350px; + margin-left: -175px; + word-break: break-all; +} + +.process-spinner { + position: relative; + padding: 0 10px; + line-height: var(--controlHeight); + border-radius: 0 0 3px 3px; + box-sizing: border-box; + background-color: #f0e8ac; + text-align: center; + opacity: 0; + transition: all 0.2s ease; +} + +.process-spinner.shown { + opacity: 1; +} + +.process-spinner + .process-spinner { + margin-top: 5px; + border-radius: 3px; +} + +.process-spinner-failed { + padding-right: 30px; + background-color: var(--red); + color: #ffffff; +} + +.process-spinner-success { + padding-right: 30px; + background-color: var(--green); + color: #ffffff; +} + +.process-spinner-close { + position: absolute; + top: 2px; + right: 2px; +} + +.process-spinner-close:hover path, +.process-spinner-close:focus path { + fill: var(--red) !important; +} diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx index e69702cf848..24edc1ac4e4 100644 --- a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx +++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx @@ -21,6 +21,7 @@ import * as React from 'react'; import * as classNames from 'classnames'; import ClearIcon from '../icons-components/ClearIcon'; import { ButtonIcon } from '../ui/buttons'; +import './GlobalMessages.css'; interface Message { id: string; diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css new file mode 100644 index 00000000000..227241347de --- /dev/null +++ b/server/sonar-web/src/main/js/components/issue/Issue.css @@ -0,0 +1,254 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ +.issue { + position: relative; + padding-top: 8px; + padding-bottom: 8px; + background-color: #ffeaea; + box-shadow: inset 0px 0px 0px 1px #ffeaea; + transition: all 0.3s ease, border 0 ease; +} + +.issue.selected { + box-shadow: none; + border: 1px solid #dd4040 !important; +} + +.issue + .issue, +.issue-container + .issue-container { + margin-top: 5px; +} + +.issue.selected + .issue { + border-top-color: transparent; +} + +.issue-table { + width: 100%; +} + +.issue-table td { + vertical-align: top; +} + +.issue-row { + display: flex; + margin-bottom: 5px; +} + +.issue-row-meta { + flex-grow: 0; + padding-right: 5px; + white-space: nowrap; +} + +.issue-table-meta-cell { + width: 1px; + padding-right: 5px; + white-space: nowrap; +} + +.issue-message { + flex-grow: 1; + padding-left: 10px; + padding-right: 10px; + line-height: 1.5; + font-size: var(--baseFontSize); + font-weight: 600; + text-overflow: ellipsis; + overflow: hidden; +} + +.issue-message .button-link { + height: 16px; +} + +.issue-rule { + vertical-align: top; + margin-top: 2px; + padding: 0 3px; + background: rgba(75, 159, 213, 0.3); + opacity: 0.5; +} + +.issue-rule:hover { + background: rgba(75, 159, 213, 0.3); +} + +.issue-meta-list { + display: flex; + align-items: center; + padding-left: 10px; +} + +.issue-meta { + line-height: 16px; + font-size: var(--smallFontSize); +} + +.issue-meta + .issue-meta { + margin-left: var(--gridSize); +} + +.issue-meta-label { + display: inline-block; + vertical-align: top; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.issue-changelog { + width: 450px; + max-height: 320px; + overflow: auto; + white-space: normal; +} + +.issue-comments { + margin-top: 5px; + padding-left: 10px; + padding-right: 10px; + font-size: var(--smallFontSize); +} + +.issue-comment { + display: table; + width: 100%; +} + +.issue-comment + .issue-comment { + margin-top: 4px; +} + +.issue-comment-author { + display: table-cell; + vertical-align: top; + max-width: 130px; + width: 1px; + line-height: 18px; + color: var(--secondFontColor); + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.issue-comment-age { + display: table-cell; + vertical-align: top; + width: 1px; + line-height: 18px; + white-space: nowrap; + color: var(--secondFontColor); +} + +.issue-comment-text { + display: table-cell; + vertical-align: top; + padding-left: 5px; + padding-right: 5px; + line-height: 18px; + line-height: 1.5; + outline: none; + word-break: break-all; +} + +.issue-comment-actions { + display: table-cell; + vertical-align: top; + width: 1px; + padding-left: 5px; + line-height: 18px; + white-space: nowrap; +} + +.issue-comment-bubble-popup { + width: 440px; + font-size: var(--smallFontSize); +} + +.issue-comment-form-text textarea { + width: 100%; + max-width: 100%; +} + +.issue-comment-form-footer { + margin-top: 5px; + line-height: 22px; +} + +.issue-comment-form-footer:before, +.issue-comment-form-footer:after { + display: table; + content: ''; + line-height: 0; +} + +.issue-comment-form-footer:after { + clear: both; +} + +.issue-comment-form-actions { + float: right; +} + +.issue-comment-form-tips { + float: left; +} + +.issue-with-checkbox { + padding-left: 24px; +} + +.issue-with-checkbox .issue-checkbox-container { + display: block; +} + +.issue-checkbox-container { + display: none; + position: absolute; + width: 29px; + top: 0; + bottom: 0; + left: 0; + border: none; +} + +.issue-checkbox-container:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.issue-checkbox { + position: absolute; + top: 50%; + left: 50%; + margin: -8px 0 0 -8px; +} + +.issue:not(.selected) .location-index { + background-color: #ccc; +} + +.issue .menu:not(.issues-similar-issues-menu):not(.issue-changelog) { + max-height: 120px; + overflow: auto; +} diff --git a/server/sonar-web/src/main/js/components/issue/Issue.js b/server/sonar-web/src/main/js/components/issue/Issue.js index 715d4a2d725..334cbee2ba4 100644 --- a/server/sonar-web/src/main/js/components/issue/Issue.js +++ b/server/sonar-web/src/main/js/components/issue/Issue.js @@ -26,6 +26,7 @@ import { updateIssue } from './actions'; import { onFail } from '../../store/rootActions'; import { setIssueAssignee } from '../../api/issues'; /*:: import type { Issue as IssueType } from './types'; */ +import './Issue.css'; /*:: type Props = {| diff --git a/server/sonar-web/src/main/js/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css new file mode 100644 index 00000000000..f468de3ee13 --- /dev/null +++ b/server/sonar-web/src/main/js/components/search-navigator.css @@ -0,0 +1,542 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ + +/* TODO this file is HUGE and should be cut into smaller components */ + +.search-navigator.sticky .search-navigator-workspace-header { + position: fixed; + z-index: 50; + top: 0; + left: 300px; + right: 0; +} + +.search-navigator.sticky .search-navigator-workspace-list, +.search-navigator.sticky .search-navigator-workspace-details { + padding-top: 43px; +} + +.search-navigator-facet-box { + background-color: var(--barBackgroundColor); + font-size: var(--baseFontSize); +} + +.search-navigator-facet-box.leak-facet-box { + background-color: var(--leakColor); + border: 1px solid var(--leakBorderColor); +} + +.leak-facet-box:not(.hidden) + .leak-facet-box { + border-top: none; +} + +.search-navigator-facet-box-forbidden { + background-color: transparent; + opacity: 0.5; +} + +.search-navigator-facet-box-forbidden .search-navigator-facet-list, +.search-navigator-facet-box-forbidden .search-navigator-facet-empty, +.search-navigator-facet-box-forbidden .search-navigator-facet-container { + display: none; +} + +.search-navigator-facet-box-forbidden .search-navigator-facet-header { + color: var(--secondFontColor); +} + +.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover { + color: var(--blue); +} + +.search-navigator-facet-box-forbidden .search-navigator-facet-header { + cursor: default; +} + +.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover { + color: var(--secondFontColor); +} + +.search-navigator-facet { + position: relative; + display: inline-block; + vertical-align: middle; + width: 100%; + margin: 0 0 1px 0; + padding: 4px 6px; + border: none; + border-radius: 2px; + box-sizing: border-box; + white-space: normal; + overflow: hidden; + font-size: 0; + opacity: 0.3; + cursor: not-allowed; + transition: none; +} + +a.search-navigator-facet { + opacity: 1; + cursor: pointer; +} + +a.search-navigator-facet .facet-name { + color: var(--baseFontColor); +} + +a.search-navigator-facet:hover, +a.search-navigator-facet:focus { + border: 1px solid var(--blue); + padding: 3px 5px; +} + +a.search-navigator-facet:hover .facet-stat, +a.search-navigator-facet:focus .facet-stat { + top: -1px; + right: -1px; +} + +.search-navigator-facet.facet-category { + opacity: 1; + cursor: default; +} + +.search-navigator-facet.facet-category .facet-name { + color: var(--secondFontColor); +} + +.search-navigator-facet .facet-name { + line-height: 16px; + background-color: var(--barBackgroundColor); + color: var(--secondFontColor); + font-size: var(--smallFontSize); + white-space: nowrap; +} + +.search-navigator-facet .facet-stat { + position: absolute; + top: 0; + right: 0; + margin-left: 5px; + padding: 5px 5px; + background-color: var(--barBackgroundColor); + color: var(--secondFontColor); + font-size: var(--smallFontSize); +} + +.search-navigator-facet .facet-stat:before { + content: ' '; + position: absolute; + top: 0; + bottom: 0; + right: 100%; + width: 10px; + background-image: linear-gradient( + to right, + rgba(243, 243, 243, 0), + var(--barBackgroundColor) 75% + ); +} + +.search-navigator-facet .facet-toggle { + display: none; + float: left; + height: 16px; + line-height: 16px; + margin-top: -1px; + padding: 0 5px; + border-radius: 2px; + font-size: 11px; + text-transform: lowercase; +} + +.search-navigator-facet .facet-toggle:hover { + color: var(--baseFontColor); +} + +.search-navigator-facet .facet-toggle-active.facet-toggle-green { + background-color: var(--green); + color: #ffffff; +} + +.search-navigator-facet .facet-toggle-active.facet-toggle-red { + background-color: var(--red); + color: #ffffff; +} + +.leak-facet-box .search-navigator-facet .facet-name { + background-color: var(--leakColor); +} + +.leak-facet-box .search-navigator-facet .facet-stat { + background-color: var(--leakColor); +} + +.leak-facet-box .search-navigator-facet .facet-stat:before { + background-image: linear-gradient(to right, rgba(251, 243, 213, 0), var(--leakColor) 75%); +} + +.search-navigator-facet.active { + border: 1px solid var(--blue); + padding: 3px 5px; + background-color: var(--lightBlue); + text-decoration: none; +} + +.search-navigator-facet.active .facet-name { + background-color: var(--lightBlue); +} + +.search-navigator-facet.active .facet-stat { + border-color: var(--blue); + background-color: var(--lightBlue); + top: -1px; + right: -1px; +} + +.search-navigator-facet.active .facet-stat:before { + background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%); +} + +.search-navigator-facet.active .facet-toggle { + display: inline; +} + +.search-navigator-facet.compare .facet-toggle { + cursor: not-allowed; + opacity: 0.5; +} + +.search-navigator-facet.compare .facet-toggle.facet-toggle-green { + background-color: var(--green); + color: #ffffff; +} + +.search-navigator-facet.compare .facet-toggle.facet-toggle-red { + background-color: transparent; + color: var(--secondFontColor); +} + +.search-navigator-facet-half { + width: 45%; +} + +.search-navigator-facet-half:nth-child(odd) { + margin-right: 10%; +} + +.search-navigator-facet-highlight-under-container { + margin-bottom: 1px; +} + +.search-navigator-facet-highlight-under-container .search-navigator-facet { + margin-bottom: 0; +} + +.search-navigator-facet-highlight-under-container .search-navigator-facet:hover, +.search-navigator-facet-highlight-under-container .search-navigator-facet.active { + border-bottom: none; + padding-bottom: 4px; + border-radius: 2px 2px 0 0; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet:hover + ~ .search-navigator-facet, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet { + padding-left: 5px; + padding-right: 5px; + border-left: 1px solid var(--blue); + border-right: 1px solid var(--blue); + border-radius: 0; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet:hover + ~ .search-navigator-facet + .facet-stat, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet + .facet-stat { + right: -1px; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet:hover + ~ .search-navigator-facet:last-of-type, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:last-of-type { + padding-bottom: 3px; + border-bottom: 1px solid var(--blue); + border-radius: 0 0 2px 2px; +} + +.search-navigator-facet-highlight-under-container .search-navigator-facet:hover:last-of-type, +.search-navigator-facet-highlight-under-container .search-navigator-facet.active:last-of-type { + padding-bottom: 3px; + border-bottom: 1px solid var(--blue); + border-radius: 2px; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet { + background-color: var(--lightBlue); + text-decoration: none; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet + .facet-name { + background-color: var(--lightBlue); +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet + .facet-stat { + border-color: var(--blue); + background-color: var(--lightBlue); +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet + .facet-stat:before { + background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%); +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet + .facet-toggle { + display: inline; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + ~ .search-navigator-facet { + background-color: #a1cde8; + text-decoration: none; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + .facet-name, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + ~ .search-navigator-facet + .facet-name { + background-color: #a1cde8; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + .facet-stat, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + ~ .search-navigator-facet + .facet-stat { + border-color: var(--blue); + background-color: #a1cde8; +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + .facet-stat:before, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + ~ .search-navigator-facet + .facet-stat:before { + background-image: linear-gradient(to right, rgba(161, 205, 232, 0), #a1cde8 75%); +} + +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + .facet-toggle, +.search-navigator-facet-highlight-under-container + .search-navigator-facet.active + ~ .search-navigator-facet:hover + ~ .search-navigator-facet + .facet-toggle { + display: inline; +} + +.search-navigator-facet-header { + display: block; + flex-shrink: 0; + padding: 8px 0; + color: var(--baseFontColor); + font-weight: 600; + overflow: hidden; + white-space: nowrap; +} + +.search-navigator-facet-header > a { + border-bottom: none; + color: var(--baseFontColor); +} + +.search-navigator-facet-header > a:hover { + color: var(--blue); +} + +.search-navigator-facet-header > .note { + font-weight: 400; +} + +.search-navigator-facet-header-value { + display: block; + overflow: hidden; +} + +.search-navigator-facet-header-value > .badge { + display: block; +} + +.search-navigator-facet-header-button { + flex-shrink: 0; + margin-left: auto; +} + +.search-navigator-facet-header-wrapper { + display: flex; + align-items: center; +} + +.search-navigator-facet-list { + padding-bottom: var(--gridSize); + font-size: 0; +} + +.search-navigator-facet-empty { + margin: 0 0 0 0; + padding: 0 10px 10px; + color: var(--baseFontColor); + font-size: var(--smallFontSize); + white-space: nowrap; +} + +.search-navigator-facet-footer { + display: block; + padding-bottom: var(--gridSize); + border-bottom: none; +} + +.search-navigator-facet-container { + margin-top: 6px; + padding: 0 10px 16px; +} + +.search-navigator-date-facet-selection { + position: relative; + padding-left: var(--gridSize); + font-size: var(--smallFontSize); +} + +.search-navigator-date-facet-selection:before, +.search-navigator-date-facet-selection:after { + display: table; + content: ''; + line-height: 0; +} + +.search-navigator-date-facet-selection:after { + clear: both; +} + +.search-navigator-date-facet-selection .date-input-control-input { + width: 115px !important; +} + +.search-navigator-date-facet-selection-dropdown-left { + float: left; + border-bottom: none; +} + +.search-navigator-date-facet-selection-dropdown-right { + float: right; + border-bottom: none; +} + +.search-navigator-date-facet-selection-input-left { + position: absolute; + left: 0; + width: 100px; + visibility: hidden; +} + +.search-navigator-date-facet-selection-input-right { + position: absolute; + right: 0; + width: 100px; + visibility: hidden; +} + +.search-navigator-date-facet-selection + .date-input-control:not(:nth-of-type(1)) + .date-input-calendar { + left: auto; + right: 0; +} + +.search-navigator-filters { + position: relative; + padding: 5px 10px; + background-color: var(--barBackgroundColor); +} + +.search-navigator-filters:before, +.search-navigator-filters:after { + display: table; + content: ''; + line-height: 0; +} + +.search-navigator-filters:after { + clear: both; +} + +.search-navigator-filters-header { + margin-bottom: 12px; + padding-bottom: 11px; + border-bottom: 1px solid var(--barBorderColor); +} +.search-navigator-intro { + width: 500px; + margin: 0 auto; + padding-top: 100px; +} |