Commit 9377eb18 authored by Sarah Groff Hennigh-Palermo's avatar Sarah Groff Hennigh-Palermo Committed by Mike Greiling

Build visual_review_toolbar with webpack

It takes a lot of lines to move a script
parent f3331579
import './styles/toolbar.css';
import 'vendor/visual_review_toolbar';
/*
As a standalone script, the toolbar has its own css
*/
#gitlab-collapse > * {
pointer-events: none;
}
#gitlab-form-wrapper {
display: flex;
flex-direction: column;
width: 100%
}
#gitlab-review-container {
max-width: 22rem;
max-height: 22rem;
overflow: scroll;
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: row-reverse;
padding: 1rem;
background-color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
font-size: .8rem;
font-weight: 400;
color: #2e2e2e;
}
.gitlab-open-wrapper {
max-width: 22rem;
max-height: 22rem;
}
.gitlab-closed-wrapper {
max-width: 3.4rem;
max-height: 3.4rem;
}
.gitlab-button {
cursor: pointer;
transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
}
.gitlab-button-secondary {
background: none #fff;
margin: 0 .5rem;
border: 1px solid #e3e3e3;
}
.gitlab-button-secondary:hover {
background-color: #f0f0f0;
border-color: #e3e3e3;
color: #2e2e2e;
}
.gitlab-button-secondary:active {
color: #2e2e2e;
background-color: #e1e1e1;
border-color: #dadada;
}
.gitlab-button-success:hover {
color: #fff;
background-color: #137e3f;
border-color: #127339;
}
.gitlab-button-success:active {
background-color: #168f48;
border-color: #12753a;
color: #fff;
}
.gitlab-button-success {
background-color: #1aaa55;
border: 1px solid #168f48;
color: #fff;
}
.gitlab-button-wide {
width: 100%;
}
.gitlab-button-wrapper {
margin-top: 1rem;
display: flex;
align-items: baseline;
justify-content: flex-end;
}
.gitlab-collapse {
width: 2.4rem;
height: 2.2rem;
margin-left: 1rem;
padding: .5rem;
}
.gitlab-collapse-closed {
align-self: center;
}
.gitlab-checkbox-label {
padding: 0 .2rem;
}
.gitlab-checkbox-wrapper {
display: flex;
align-items: baseline;
}
.gitlab-label {
font-weight: 600;
display: inline-block;
width: 100%;
}
.gitlab-link {
color: #1b69b6;
text-decoration: none;
background-color: transparent;
background-image: none;
}
.gitlab-message {
padding: .25rem 0;
margin: 0;
line-height: 1.2rem;
}
.gitlab-metadata-note {
font-size: .7rem;
line-height: 1rem;
color: #666;
margin-bottom: 0;
}
.gitlab-input {
width: 100%;
border: 1px solid #dfdfdf;
border-radius: 4px;
padding: .1rem .2rem;
min-height: 2rem;
max-width: 17rem;
}
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const ROOT_PATH = path.resolve(__dirname, '..');
const CACHE_PATH = process.env.WEBPACK_CACHE_PATH || path.join(ROOT_PATH, 'tmp/cache');
const NO_SOURCEMAPS = process.env.NO_SOURCEMAPS;
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const devtool = IS_PRODUCTION ? 'source-map' : 'cheap-module-eval-source-map';
const alias = {
vendor: path.join(ROOT_PATH, 'vendor/assets/javascripts'),
spec: path.join(ROOT_PATH, 'spec/javascripts'),
};
module.exports = {
mode: IS_PRODUCTION ? 'production' : 'development',
context: path.join(ROOT_PATH, 'app/assets/javascripts'),
name: 'visual_review_toolbar',
entry: './visual_review_toolbar',
output: {
path: path.join(ROOT_PATH, 'public/assets/webpack'),
filename: 'visual_review_toolbar.js',
library: 'VisualReviewToolbar',
libraryTarget: 'var',
},
resolve: {
alias,
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: path.join(CACHE_PATH, 'babel-loader'),
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
// compression can require a lot of compute time and is disabled in CI
new CompressionPlugin(),
].filter(Boolean),
devtool: NO_SOURCEMAPS ? false : devtool,
};
......@@ -58,7 +58,6 @@ module Gitlab
uploads
users
v2
visual-review-toolbar.js
].freeze
# This list should contain all words following `/*namespace_id/:project_id` in
......
......@@ -10,9 +10,15 @@ namespace :gitlab do
rake:assets:precompile
webpack:compile
gitlab:assets:fix_urls
gitlab:assets:compile_vrt
].each(&Gitlab::TaskHelpers.method(:invoke_and_time_task))
end
desc 'GitLab | Assets | Compile visual review toolbar'
task :compile_vrt do
system 'yarn', 'webpack-vrt'
end
desc 'GitLab | Assets | Clean up old compiled frontend assets'
task clean: ['rake:assets:clean']
......
......@@ -25,7 +25,8 @@
"stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
"test": "node scripts/frontend/test",
"webpack": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.config.js",
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js"
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js",
"webpack-vrt": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.review_toolbar.js"
},
"dependencies": {
"@babel/core": "^7.4.4",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment