From 1cb57e36cede4525de1803c8cd827d2e7309bb1b Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Tue, 29 Dec 2015 14:25:20 +0100 Subject: use webpack css loader for code page --- server/sonar-web/gulp/styles.js | 2 + server/sonar-web/package.json | 4 ++ server/sonar-web/src/main/js/apps/code/app.js | 2 + .../src/main/js/apps/code/styles/code.css | 55 ++++++++++++++++++++ server/sonar-web/src/main/less/pages/code.less | 58 ---------------------- server/sonar-web/src/main/less/sonar.less | 1 - server/sonar-web/webpack.config.js | 10 ++++ 7 files changed, 73 insertions(+), 59 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/code/styles/code.css delete mode 100644 server/sonar-web/src/main/less/pages/code.less diff --git a/server/sonar-web/gulp/styles.js b/server/sonar-web/gulp/styles.js index 9f4c4c35d3c..be8bf35fb3e 100644 --- a/server/sonar-web/gulp/styles.js +++ b/server/sonar-web/gulp/styles.js @@ -22,6 +22,8 @@ var autoprefixerOptions = { }; +module.exports.autoprefixerOptions = autoprefixerOptions; + module.exports.styles = function (output, production) { return gulp.src(['src/main/less/sonar.less']) .pipe(less()) diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 51ce13d71d5..ebaf78ddb3c 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -5,6 +5,7 @@ "repository": "SonarSource/sonarqube", "license": "LGPL-3.0", "devDependencies": { + "autoprefixer": "6.2.2", "babel-cli": "6.3.17", "babel-core": "6.3.17", "babel-eslint": "4.1.6", @@ -20,6 +21,7 @@ "chai": "3.3.0", "classnames": "2.2.0", "clipboard": "1.5.5", + "css-loader": "0.23.1", "d3": "3.5.6", "del": "2.0.2", "enzyme": "1.2.0", @@ -48,6 +50,7 @@ "mocha": "2.3.4", "moment": "2.10.6", "numeral": "1.5.3", + "postcss-loader": "0.8.0", "react": "0.14.2", "react-addons-test-utils": "0.14.2", "react-dom": "0.14.2", @@ -61,6 +64,7 @@ "script-loader": "0.6.1", "sinon": "1.15.4", "sinon-chai": "2.8.0", + "style-loader": "0.13.0", "underscore": "1.8.3", "vinyl-buffer": "1.0.0", "vinyl-source-stream": "1.1.0", diff --git a/server/sonar-web/src/main/js/apps/code/app.js b/server/sonar-web/src/main/js/apps/code/app.js index ce973644f69..8cf48e308e3 100644 --- a/server/sonar-web/src/main/js/apps/code/app.js +++ b/server/sonar-web/src/main/js/apps/code/app.js @@ -8,6 +8,8 @@ import { syncReduxAndRouter } from 'redux-simple-router'; import Code from './components/Code'; import configureStore from './store/configureStore'; +import './styles/code.css'; + const store = configureStore(); const history = createHashHistory({ diff --git a/server/sonar-web/src/main/js/apps/code/styles/code.css b/server/sonar-web/src/main/js/apps/code/styles/code.css new file mode 100644 index 00000000000..4df9d26c78d --- /dev/null +++ b/server/sonar-web/src/main/js/apps/code/styles/code.css @@ -0,0 +1,55 @@ +.code-breadcrumbs { + display: flex; + flex-wrap: wrap; +} + +.code-breadcrumbs > li { + padding: 5px 5px 3px; +} + +.code-breadcrumbs > li:first-child { + padding-left: 0; +} + +.code-breadcrumbs > li::after { + position: relative; + top: -1px; + padding-left: 10px; + color: #777; + font-size: 11px; + content: ">"; +} + +.code-breadcrumbs > li:last-child::after { + display: none; +} + +.code-components-cell { + width: 100px; +} + +.code-truncated { + display: inline-block; + vertical-align: text-top; + max-width: 50vw; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.code-name-cell { + max-width: 0; +} + +.code-name-cell .code-truncated { + max-width: 100%; +} + +.code-source-viewer .source-viewer-header-component { + visibility: hidden; +} + +.code-search-box { + padding-left: 10px; + overflow: hidden; +} diff --git a/server/sonar-web/src/main/less/pages/code.less b/server/sonar-web/src/main/less/pages/code.less deleted file mode 100644 index 99bb42ba39d..00000000000 --- a/server/sonar-web/src/main/less/pages/code.less +++ /dev/null @@ -1,58 +0,0 @@ -@import (reference) "../mixins"; -@import (reference) "../variables"; -@import (reference) "../init/type"; - - -.code-breadcrumbs { - display: flex; - flex-wrap: wrap; -} - -.code-breadcrumbs > li { - padding: 5px 5px 3px; -} - -.code-breadcrumbs > li:first-child { - padding-left: 0; -} - -.code-breadcrumbs > li::after { - position: relative; - top: -1px; - padding-left: 10px; - color: @secondFontColor; - font-size: 11px; - content: ">"; -} - -.code-breadcrumbs > li:last-child::after { - display: none; -} - -.code-components-cell { - width: 100px; -} - -.code-truncated { - display: inline-block; - vertical-align: text-top; - max-width: 50vw; - .text-ellipsis; -} - -.code-name-cell { - max-width: 0; -} - -.code-name-cell .code-truncated { - max-width: 100%; -} - -.code-source-viewer .source-viewer-header-component { - visibility: hidden; -} - -.code-search-box { - padding-left: 10px; - overflow: hidden; -} diff --git a/server/sonar-web/src/main/less/sonar.less b/server/sonar-web/src/main/less/sonar.less index 292f72533e2..3f2bd9dc299 100644 --- a/server/sonar-web/src/main/less/sonar.less +++ b/server/sonar-web/src/main/less/sonar.less @@ -48,7 +48,6 @@ @import "pages/login"; @import "pages/api-documentation"; @import "pages/overview"; -@import "pages/code"; @import 'style'; @import 'deprecated'; diff --git a/server/sonar-web/webpack.config.js b/server/sonar-web/webpack.config.js index 5c0de151c47..eb1df2916a9 100644 --- a/server/sonar-web/webpack.config.js +++ b/server/sonar-web/webpack.config.js @@ -1,5 +1,8 @@ var path = require('path'); var webpack = require('webpack'); +var autoprefixer = require('autoprefixer'); + +var autoprefixerOptions = require('./gulp/styles').autoprefixerOptions; var baseOutput = process.env.OUTPUT || path.join(__dirname, 'src/main/webapp'); var output = path.join(baseOutput, 'js/bundles'); @@ -90,7 +93,14 @@ module.exports = { { test: require.resolve('d3'), loader: 'expose?d3' + }, + { + test: /\.css/, + loader: 'style-loader!css-loader!postcss-loader' } ] + }, + postcss: function () { + return [autoprefixer(autoprefixerOptions)]; } }; -- cgit v1.2.3