diff options
45 files changed, 837 insertions, 1190 deletions
diff --git a/server/sonar-web/public/index.html b/server/sonar-web/public/index.html index 71b679d96f4..4da3597a841 100644 --- a/server/sonar-web/public/index.html +++ b/server/sonar-web/public/index.html @@ -23,10 +23,11 @@ <meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileImage" content="%WEB_CONTEXT%/mstile-512x512.png" /> - <% for (var css in htmlWebpackPlugin.files.css) { %> - <link href="%WEB_CONTEXT%/<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"> - <% } %> - <title>Loading...</title> + <title>Loading...</title> + + <% for (let css of htmlWebpackPlugin.files.css) { %> + <style><%= compilation.assets[css].source() %></style> + <% } %> </head> <body> @@ -37,9 +38,9 @@ </div> </div> <script>window.baseUrl = '%WEB_CONTEXT%';</script> - <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> + <% for (let chunk in htmlWebpackPlugin.files.chunks) { %> <script src="%WEB_CONTEXT%/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> - <% } %> + <% } %> </body> </html> diff --git a/server/sonar-web/src/main/js/app/index.js b/server/sonar-web/src/main/js/app/index.js index 01521b77b91..ee6cfb479d7 100644 --- a/server/sonar-web/src/main/js/app/index.js +++ b/server/sonar-web/src/main/js/app/index.js @@ -22,8 +22,6 @@ import startReactApp from './utils/startReactApp'; import installExtensionsHandler from './utils/installExtensionsHandler'; import { installGlobal } from '../helpers/l10n'; // styles -import '../components/ui/Level.css'; -import '../components/ui/Rating.css'; import './styles/sonar.css'; installGlobal(); diff --git a/server/sonar-web/src/main/js/app/styles/components/alerts.css b/server/sonar-web/src/main/js/app/styles/components/alerts.css index aa8e515e341..c8a9efd700c 100644 --- a/server/sonar-web/src/main/js/app/styles/components/alerts.css +++ b/server/sonar-web/src/main/js/app/styles/components/alerts.css @@ -34,11 +34,6 @@ display: none; } -.alert-inline { - display: inline-block; - vertical-align: middle; -} - .modal-alert { margin: -10px -10px 16px; padding: 10px; diff --git a/server/sonar-web/src/main/js/app/styles/components/columns.css b/server/sonar-web/src/main/js/app/styles/components/columns.css index c966d1560a4..c544a67056f 100644 --- a/server/sonar-web/src/main/js/app/styles/components/columns.css +++ b/server/sonar-web/src/main/js/app/styles/components/columns.css @@ -34,10 +34,6 @@ clear: both; } -.columns-overflow-visible { - overflow: visible !important; -} - .column-half { float: left; width: 50%; @@ -49,20 +45,6 @@ margin: 0 25%; } -.column-third { - float: left; - width: 33.3333333333%; - padding: 0 10px; - box-sizing: border-box; -} - -.column-two-thirds { - float: left; - width: 66.6666666667%; - padding: 0 10px; - box-sizing: border-box; -} - .flex-columns { display: flex; } @@ -78,7 +60,3 @@ .flex-column-third { width: calc(100% / 3); } - -.flex-column-two-thirds { - width: calc(100% / 3 * 2); -} diff --git a/server/sonar-web/src/main/js/app/styles/components/graphics.css b/server/sonar-web/src/main/js/app/styles/components/graphics.css index 03128aa2a68..8c637486fdd 100644 --- a/server/sonar-web/src/main/js/app/styles/components/graphics.css +++ b/server/sonar-web/src/main/js/app/styles/components/graphics.css @@ -17,112 +17,8 @@ * 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; -} - -.word-cloud { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; -} - -.word-cloud a { - padding: 5px; - border-bottom: none; -} - -/* - * Line Chart - */ - -.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); -} +/* TODO remove this file */ .line-chart-legend { color: var(--blue); @@ -135,241 +31,3 @@ .line-chart-legend.line-chart-legend-2 { color: #24c6e0; } - -.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-point { - fill: #fff; - stroke: var(--blue); - stroke-width: 2px; -} - -.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); -} - -.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; -} - -/* - * Bubble Chart - */ - -.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); -} - -/* - * Legends - */ - -.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; -} - -.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; -} - -/* - * Bar Chart - */ - -.bar-chart-bar { - fill: var(--blue); -} - -.bar-chart-tick { - fill: var(--secondFontColor); - font-size: var(--smallFontSize); - text-anchor: middle; -} - -.histogram-tick { - text-anchor: end; -} - -.histogram-tick-start { - text-anchor: start; -} - -.histogram-value { - text-anchor: start; -} - -/* - * Charts zooming - */ - -.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); -} - -.chart-zoom-tick { - fill: var(--secondFontColor); - font-size: 10px; - text-anchor: middle; - user-select: none; -} - -.chart-mouse-events-overlay { - fill: none; - stroke: none; - pointer-events: all; -} - -.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; -} - -/* - * Charts tooltips - */ - -.line-tooltip { - fill: none; - stroke: var(--secondFontColor); - stroke-width: 1px; - shape-rendering: crispEdges; -} diff --git a/server/sonar-web/src/main/js/app/styles/components/issues.css b/server/sonar-web/src/main/js/app/styles/components/issues.css index 3e1635acf1d..baad1f72ba3 100644 --- a/server/sonar-web/src/main/js/app/styles/components/issues.css +++ b/server/sonar-web/src/main/js/app/styles/components/issues.css @@ -21,402 +21,7 @@ margin: 10px 0; } -.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-list, .issue { max-width: 980px; } - -.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-inner { - overflow-x: auto; - overflow-y: hidden; -} - -.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-component { - margin-top: 5px; - padding-left: 10px; - padding-right: 10px; - line-height: 1.5; - font-size: var(--smallFontSize); -} - -.issue-age { - position: relative; - float: right; - margin-top: -19.5px; - padding-right: 10px; - line-height: 1.5; - font-size: var(--smallFontSize); -} - -.issue-age:before { - content: ' '; - position: absolute; - top: 0; - bottom: 0; - right: 100%; - width: 10px; - background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 75%); -} - -.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-in-corner { - position: absolute; - top: 8px; - right: 10px; - margin: 0 !important; -} - -.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-text p, -.issue-comment-text ul, -.issue-comment-text ol, -.issue-comment-text pre, -.issue-comment-text blockquote, -.issue-comment-text table, -.issue-comment-text h2, -.issue-comment-text h3, -.issue-comment-text h4, -.issue-comment-text h5, -.issue-comment-text h6 { - margin: 1em 0; -} - -.issue-comment-text h2 { - font-size: var(--bigFontSize); - font-weight: 400; -} - -.issue-comment-text h3, -.issue-comment-text h4, -.issue-comment-text h5, -.issue-comment-text h6 { - font-size: var(--baseFontSize); - font-weight: 600; -} - -.issue-comment-text pre, -.issue-comment-text code { - font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; - font-size: var(--smallFontSize); -} - -.issue-comment-text pre { - padding: 10px; - border-top: 1px solid var(--barBorderColor); - border-bottom: 1px solid var(--barBorderColor); - line-height: 18px; - overflow: auto; -} - -.issue-comment-text code { - padding: 0.2em 0.45em; - margin: 0; - background-color: rgba(0, 0, 0, 0.06); - border-radius: 3px; - white-space: nowrap; -} - -.issue-comment-text pre > code { - padding: 0; - background-color: transparent; - white-space: pre; -} - -.issue-comment-text blockquote { - line-height: 1.5; - padding-left: 15px; - padding-right: 15px; -} - -.issue-comment-text ul { - padding-left: 40px; - list-style: disc; -} - -.issue-comment-text li > ul { - margin: 0.3em 0; -} - -.issue-comment-text ol { - padding-left: 40px; - list-style: decimal; -} - -.issue-comment-text table { - min-width: 50%; - border-collapse: collapse; - border: 1px solid var(--barBorderColor); -} - -.issue-comment-text th { - padding: 5px 10px; - border: 1px solid var(--barBorderColor); - background-color: var(--barBackgroundColor); - font-weight: 600; - text-align: center; -} - -.issue-comment-text td { - padding: 5px 10px; - border: 1px solid var(--barBorderColor); -} - -.issue-comment-actions { - display: table-cell; - vertical-align: top; - width: 1px; - padding-left: 5px; - line-height: 18px; - white-space: nowrap; -} - -input.issue-action-options-search { - padding: 0 10px 0 30px; - border: none; -} - -.issue-action-options-search-icon { - position: absolute; - top: 3px; - left: 10px; - color: var(--secondFontColor); -} - -.issue-action-options-search-icon:before { - font-size: var(--mediumFontSize); -} - -.issue-comment-bubble-popup { - width: 440px; - font-size: var(--smallFontSize); -} - -.issue-edit-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-more-actions { - line-height: 1.5; - font-size: var(--smallFontSize); -} - -.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/app/styles/components/list-groups.css b/server/sonar-web/src/main/js/app/styles/components/list-groups.css index 69045097a54..4b21cc570ae 100644 --- a/server/sonar-web/src/main/js/app/styles/components/list-groups.css +++ b/server/sonar-web/src/main/js/app/styles/components/list-groups.css @@ -67,8 +67,3 @@ a.list-group-item { display: table; clear: both; } - -.list-group-item-text { - margin-bottom: 0; - line-height: 1.3; -} diff --git a/server/sonar-web/src/main/js/app/styles/components/modals.css b/server/sonar-web/src/main/js/app/styles/components/modals.css index 84cf5bb0230..1e958e4b526 100644 --- a/server/sonar-web/src/main/js/app/styles/components/modals.css +++ b/server/sonar-web/src/main/js/app/styles/components/modals.css @@ -97,26 +97,10 @@ min-height: 30px; } -ul.modal-head-metadata { - overflow: hidden; - padding: 0 0 5px 0; -} - -ul.modal-head-metadata li { - float: left; - position: relative; - font-size: 85%; - color: var(--secondFontColor); -} - .modal-body { padding: 10px; } -.modal-body .notes { - height: auto; -} - .modal-field, .modal-large-field, .modal-validation-field { @@ -150,17 +134,6 @@ ul.modal-head-metadata li { text-overflow: ellipsis; } -.modal-field label.simple-label, -.modal-validation-field label.simple-label { - display: inline-block; - vertical-align: middle; - float: none; - position: static; - margin: 0 0 0 -5px; - padding: 0; - text-align: left; -} - .modal-large-field label { display: inline-block; padding-bottom: 15px; diff --git a/server/sonar-web/src/main/js/app/styles/components/panels.css b/server/sonar-web/src/main/js/app/styles/components/panels.css index 9147f410c7f..19f96a5f043 100644 --- a/server/sonar-web/src/main/js/app/styles/components/panels.css +++ b/server/sonar-web/src/main/js/app/styles/components/panels.css @@ -35,19 +35,8 @@ background-color: #fff; } -.panel-info { - border: 1px solid var(--blue); - background-color: var(--lightBlue); -} - .panel-warning { border: 1px solid #faebcc; background-color: #fcf8e3; color: #8a6d3b; } - -.panel-danger { - border-color: transparent !important; - background-color: #f2dede; - color: #a94442; -} diff --git a/server/sonar-web/src/main/js/app/styles/components/ui.css b/server/sonar-web/src/main/js/app/styles/components/ui.css index 537ffc19b72..00752456ad3 100644 --- a/server/sonar-web/src/main/js/app/styles/components/ui.css +++ b/server/sonar-web/src/main/js/app/styles/components/ui.css @@ -17,72 +17,6 @@ * 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; -} - -.shortcuts-section + .shortcuts-section { - margin-top: 20px; -} - -.shortcuts-section-title { - margin-bottom: 5px; -} - -.shortcuts-list > li + li { - margin-top: 5px; -} - .shortcut-button { display: inline-block; min-width: 24px; diff --git a/server/sonar-web/src/main/js/app/styles/sonar.css b/server/sonar-web/src/main/js/app/styles/sonar.css index eaef6aa0909..c36014e07fb 100644 --- a/server/sonar-web/src/main/js/app/styles/sonar.css +++ b/server/sonar-web/src/main/js/app/styles/sonar.css @@ -32,7 +32,6 @@ @import './components/modals.css'; @import './components/alerts.css'; @import './components/issues.css'; -@import './components/search-navigator.css'; @import './components/dropdowns.css'; @import './components/menu.css'; @import './components/page.css'; @@ -42,7 +41,6 @@ @import './components/panels.css'; @import './components/badges.css'; @import './components/columns.css'; -@import './components/side-tabs.css'; @import './components/boxed-group.css'; @import './style.css'; diff --git a/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts b/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts index 602bf2b8583..995a9b15aa7 100644 --- a/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts +++ b/server/sonar-web/src/main/js/app/utils/exposeLibraries.ts @@ -52,6 +52,7 @@ import DropdownIcon from '../../components/icons-components/DropdownIcon'; import HelpIcon from '../../components/icons-components/HelpIcon'; import LockIcon from '../../components/icons-components/LockIcon'; import QualifierIcon from '../../components/icons-components/QualifierIcon'; +import Rating from '../../components/ui/Rating'; const exposeLibraries = () => { const global = window as any; @@ -86,6 +87,7 @@ const exposeLibraries = () => { LockIcon, Modal, QualifierIcon, + Rating, ReloadButton, ResetButtonLink, SearchBox, diff --git a/server/sonar-web/src/main/js/apps/account/account.css b/server/sonar-web/src/main/js/apps/account/account.css index bc735c47b1f..245f03c8d50 100644 --- a/server/sonar-web/src/main/js/apps/account/account.css +++ b/server/sonar-web/src/main/js/apps/account/account.css @@ -65,24 +65,6 @@ border-top: 1px solid var(--barBorderColor); } -.account-bar-chart .bar-chart-bar { - fill: var(--blue); -} - -.account-bar-chart .bar-chart-tick { - fill: var(--secondFontColor); - font-size: var(--smallFontSize); - text-anchor: middle; -} - -.account-bar-chart .histogram-tick { - text-anchor: end; -} - -.account-bar-chart .histogram-value { - text-anchor: start; -} - .account-projects-list { margin-left: -20px; margin-right: -20px; diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx index f9ad0c2eafd..8a4bba330b8 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx @@ -53,8 +53,8 @@ import FiltersHeader from '../../../components/common/FiltersHeader'; import SearchBox from '../../../components/controls/SearchBox'; import { searchQualityProfiles, Profile } from '../../../api/quality-profiles'; import { scrollToElement } from '../../../helpers/scrolling'; - import '../styles.css'; +import '../../../components/search-navigator.css'; const PAGE_SIZE = 100; const LIMIT_BEFORE_LOAD_MORE = 5; diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.js b/server/sonar-web/src/main/js/apps/component-measures/components/App.js index 03e0dd641ec..e08fcd60aed 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/App.js +++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.js @@ -39,6 +39,7 @@ import { getDisplayMetrics } from '../../../helpers/measures'; /*:: import type { Metric } from '../../../store/metrics/actions'; */ /*:: import type { MeasureEnhanced } from '../../../components/measure/types'; */ import '../style.css'; +import '../../../components/search-navigator.css'; /*:: type Props = {| branchLike?: { id?: string; name: string }, diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.tsx b/server/sonar-web/src/main/js/apps/issues/components/App.tsx index 1fdf6a39c56..ec8f1ccd38a 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/App.tsx @@ -71,6 +71,7 @@ import EmptySearch from '../../../components/common/EmptySearch'; import Checkbox from '../../../components/controls/Checkbox'; import DropdownIcon from '../../../components/icons-components/DropdownIcon'; import '../styles.css'; +import '../../../components/search-navigator.css'; interface FetchIssuesPromise { components: ReferencedComponent[]; diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/ReleasabilityBox.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/ReleasabilityBox.tsx index 3dd30c83541..dc805cf0433 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/ReleasabilityBox.tsx +++ b/server/sonar-web/src/main/js/apps/portfolio/components/ReleasabilityBox.tsx @@ -22,6 +22,7 @@ import { Link } from 'react-router'; import RatingFreshness from './RatingFreshness'; import Rating from '../../../components/ui/Rating'; import Measure from '../../../components/measure/Measure'; +import Level from '../../../components/ui/Level'; import { translate } from '../../../helpers/l10n'; import { getComponentDrilldownUrl } from '../../../helpers/urls'; @@ -64,7 +65,7 @@ export default function ReleasabilityBox({ component, measures }: Props) { {Number(effort) === 1 ? 'project' : 'projects'} </span> </Link>{' '} - <span className="level level-ERROR level-small">{translate('metric.level.ERROR')}</span> + <Level level="ERROR" small={true} /> </div> )} </div> diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/ReleasabilityBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/ReleasabilityBox-test.tsx.snap index 9374965500c..4ab3d79f908 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/ReleasabilityBox-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/ReleasabilityBox-test.tsx.snap @@ -58,11 +58,10 @@ exports[`renders 1`] = ` </span> </Link> - <span - className="level level-ERROR level-small" - > - metric.level.ERROR - </span> + <Level + level="ERROR" + small={true} + /> </div> </div> `; diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx index 2f164bcc170..af1e89e5ed5 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx @@ -33,10 +33,11 @@ import ListFooter from '../../../components/controls/ListFooter'; import { translate } from '../../../helpers/l10n'; import { get, save } from '../../../helpers/storage'; import { RawQuery } from '../../../helpers/query'; -import '../styles.css'; import { Project, Facets } from '../types'; import { fetchProjects, parseSorting, SORTING_SWITCH } from '../utils'; import { parseUrlQuery, Query } from '../query'; +import '../styles.css'; +import '../../../components/search-navigator.css'; export interface Props { currentUser: CurrentUser; diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx index 70d7b207032..d7031041608 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx @@ -29,6 +29,7 @@ import { translate } from '../../../helpers/l10n'; import { getQualityGateUrl } from '../../../helpers/urls'; import { Organization, QualityGate } from '../../../app/types'; import '../styles.css'; +import '../../../components/search-navigator.css'; interface Props { children: React.ReactElement<{ diff --git a/server/sonar-web/src/main/js/apps/settings/components/App.js b/server/sonar-web/src/main/js/apps/settings/components/App.js index ad96321df75..21f8d383e5d 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/App.js +++ b/server/sonar-web/src/main/js/apps/settings/components/App.js @@ -27,6 +27,7 @@ import WildcardsHelp from './WildcardsHelp'; import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; import { translate } from '../../../helpers/l10n'; import '../styles.css'; +import '../side-tabs.css'; /*:: type Props = { diff --git a/server/sonar-web/src/main/js/app/styles/components/side-tabs.css b/server/sonar-web/src/main/js/apps/settings/side-tabs.css index 5c36733dd34..5c36733dd34 100644 --- a/server/sonar-web/src/main/js/app/styles/components/side-tabs.css +++ b/server/sonar-web/src/main/js/apps/settings/side-tabs.css 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/app/styles/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css index b661a707b43..f468de3ee13 100644 --- a/server/sonar-web/src/main/js/app/styles/components/search-navigator.css +++ b/server/sonar-web/src/main/js/components/search-navigator.css @@ -17,6 +17,9 @@ * 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; @@ -30,29 +33,6 @@ padding-top: 43px; } -.search-navigator.sticky .search-navigator-side { - position: fixed; - z-index: 51; - bottom: 0; - overflow-y: auto; -} - -.search-navigator-side { - position: fixed; - z-index: 51; - width: 300px; - left: 0; - bottom: 0; - border-right: 1px solid var(--barBorderColor); - box-sizing: border-box; - background-color: var(--barBorderColor); - overflow-x: hidden; -} - -.search-navigator-side-light { - background-color: var(--barBackgroundColor); -} - .search-navigator-facet-box { background-color: var(--barBackgroundColor); font-size: var(--baseFontSize); @@ -67,25 +47,6 @@ border-top: none; } -.search-navigator-facet-box-collapsed { - background-color: transparent; -} - -.search-navigator-facet-box-collapsed .search-navigator-facet-list, -.search-navigator-facet-box-collapsed .search-navigator-facet-empty, -.search-navigator-facet-box-collapsed .search-navigator-facet-container { - display: none; -} - -.search-navigator-facet-box-collapsed .search-navigator-facet-header { - color: var(--secondFontColor); - font-weight: 400; -} - -.search-navigator-facet-box-collapsed .search-navigator-facet-header:hover { - color: var(--blue); -} - .search-navigator-facet-box-forbidden { background-color: transparent; opacity: 0.5; @@ -273,11 +234,6 @@ a.search-navigator-facet:focus .facet-stat { color: var(--secondFontColor); } -.search-navigator-facet-indent { - width: calc(100% - 30px); - margin-left: 30px; -} - .search-navigator-facet-half { width: 45%; } @@ -500,101 +456,11 @@ a.search-navigator-facet:focus .facet-stat { border-bottom: none; } -.search-navigator-facet-list-align-right .facet-name { - float: right; -} - -.search-navigator-facet-list-align-right .facet-name:before { - content: ' '; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 10px; - background-image: linear-gradient(to left, rgba(243, 243, 243, 0), var(--barBackgroundColor) 75%); -} - -.search-navigator-facet-list-align-right .facet-stat:before { - display: none; -} - -.search-navigator-facet-list-align-right .facet.active .facet-name:before { - background-image: linear-gradient(to left, rgba(202, 227, 242, 0), var(--lightBlue) 75%); -} - .search-navigator-facet-container { margin-top: 6px; padding: 0 10px 16px; } -.search-navigator-facet-container-center { - text-align: center; -} - -.search-navigator-facet-query { - padding: 7px 0 27px; -} - -.search-navigator-facet-custom-value { - padding: 0 0 5px; - font-size: var(--baseFontSize); -} - -.search-navigator-facet-input { - width: 120px; -} - -.search-navigator-facet-histogram { - font-size: 0; -} - -.search-navigator-facet-histogram > li { - display: inline-block; - vertical-align: bottom; - width: 24px; - font-size: var(--smallFontSize); -} - -.search-navigator-facet-histogram > li > a { - display: block; - padding-bottom: 3px; - border-bottom: none; - transition: none; -} - -.search-navigator-facet-histogram > li > a:hover, -.search-navigator-facet-histogram > li > a:focus, -.search-navigator-facet-histogram > li > a:hover .search-navigator-facet-histogram-bar-inner, -.search-navigator-facet-histogram > li > a:focus .search-navigator-facet-histogram-bar-inner { - background-color: var(--barBorderColor); -} - -.search-navigator-facet-histogram > li > a:hover .search-navigator-facet-histogram-bar, -.search-navigator-facet-histogram > li > a:focus .search-navigator-facet-histogram-bar { - background-color: var(--blue); -} - -.search-navigator-facet-histogram-large > li { - width: 48px; -} - -.search-navigator-facet-histogram-bar { - display: block; - height: 60px; - background-color: var(--darkBlue); -} - -.search-navigator-facet-histogram-bar-inner { - display: block; - max-height: 59px; - background-color: var(--barBackgroundColor); -} - -.search-navigator-facet-histogram-label { - display: block; - text-align: center; -} - .search-navigator-date-facet-selection { position: relative; padding-left: var(--gridSize); @@ -664,154 +530,11 @@ a.search-navigator-facet:focus .facet-stat { clear: both; } -.search-navigator-filters-selected { - margin-bottom: 5px; -} - -.search-navigator-filters-selected .search-navigator-filters-header { - float: none; -} - -.search-navigator-filters-selected .search-navigator-filters-actions { - float: none; - margin-top: 5px; -} - -.search-navigator-filters-list { - display: none; - position: absolute; - z-index: var(--dropdownMenuZIndex); - top: 31px; - left: 0; - right: 10px; - margin-bottom: 8px; - padding: 5px 10px; - border: 1px solid #e8e8e8; - box-sizing: border-box; - line-height: 1.5; - background-color: #ffffff; - box-shadow: var(--defaultShadow); -} - .search-navigator-filters-header { margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--barBorderColor); } - -.search-navigator-filters-name { - vertical-align: top; - font-size: var(--bigFontSize); -} - -.search-navigator-filters-description { - margin: 4px 0; - font-size: var(--smallFontSize); - font-style: italic; -} - -.search-navigator-filters-show-list { - margin-right: 4px; - border-bottom: none; - color: var(--baseFontColor); -} - -.search-navigator-filters-actions { - float: right; -} - -.search-navigator-filters-manage { - display: inline-block; - margin-top: 4px; - border-bottom: none; -} - -.search-navigator-workspace { - padding-left: 300px; -} - -.search-navigator-workspace-header { - position: relative; - margin-bottom: 10px; - padding: 5px 0; - line-height: var(--controlHeight); - border-bottom: 1px solid var(--barBorderColor); - background-color: var(--barBackgroundColor); - font-size: var(--smallFontSize); -} - -.search-navigator-header-component { - margin-left: 10px; - white-space: nowrap; -} - -.search-navigator-header-actions { - position: absolute; - top: 0; - right: 0; - padding: 5px 10px; - background-color: var(--barBackgroundColor); - white-space: nowrap; -} - -.search-navigator-header-actions: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-header-pagination { - display: inline-block; - vertical-align: top; -} - -.search-navigator-header-buttons { - vertical-align: top; -} - -.search-navigator-workspace-list { - padding: 0 5px; -} - -.search-navigator-workspace-list .issue { - max-width: none; -} - -.search-navigator-workspace-details { - display: none; - min-height: 100vh; - padding: 0 10px; -} - -.search-navigator-workspace-list-more { - margin-top: 10px; - margin-bottom: 10px; - padding: 5px 10px; - text-align: center; -} - -.search-navigator-no-results { - padding-top: 10%; - color: var(--secondFontColor); - text-align: center; -} - -.search-navigator-extended-view .search-navigator-workspace-list { - display: none; -} - -.search-navigator-extended-view .search-navigator-workspace-details { - display: block; -} - .search-navigator-intro { width: 500px; margin: 0 auto; |