zhongjin
/
cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add builder/dataset css to webpack

Browse Source
pull/14080/head
rubenmoya 6 years ago
parent d7d437abd6
commit 00fc9c58c2
8 changed files with 158 additions and 31 deletions
Show Stats Download Patch File Download Diff File

2
app/views/layouts/application_builder.html.erb
Unescape View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= yield :page_title -%>CARTO</title>
<%= favicon_link_tag "/favicons/favicon.ico" -%>
<%= stylesheet_link_tag 'common_editor3', 'editor3', 'deep_insights.css', :media => 'all' %>
<%= stylesheet_link_tag 'common_editor3', 'editor3_vendor', 'editor3', 'deep_insights_new', 'deep_insights_new_vendor', :media => 'all' %>
<%= csrf_meta_tag -%>
<%= insert_google_tag_manager('primary') %>
</head>

4
assets/stylesheets/editor-3/_color-bar.scss
Unescape View File

@ -176,12 +176,12 @@
flex: 0 0 27px;
height: 13px;
opacity: 0;
background-image: url('../images/layout/colorpicker/invert.svg');
background-image: url($assetsDir + '/images/layout/colorpicker/invert.svg');
background-repeat: no-repeat;
}
.is-inverted .ColorBar-invertLink {
background-image: url('../images/layout/colorpicker/invert_inverted.svg');
background-image: url($assetsDir + '/images/layout/colorpicker/invert_inverted.svg');
}
.is-selected .ColorBar-invertLink {

10
assets/stylesheets/editor-3/_color-picker.scss
Unescape View File

@ -57,7 +57,7 @@
width: 216px;
height: 105px;
border-radius: $halfBaseSize;
background-image: url('../images/layout/colorpicker/saturation.png');
background-image: url($assetsDir + '/images/layout/colorpicker/saturation.png');
background-size: cover;
}
@ -82,7 +82,7 @@
height: $baseSize;
margin-bottom: $baseSize;
border-radius: 2px;
background-image: url('../images/layout/colorpicker/hue-horizontal.png');
background-image: url($assetsDir + '/images/layout/colorpicker/hue-horizontal.png');
}
.ColorPicker.colorpicker.colorpicker-horizontal .colorpicker-hue::before {
@ -102,7 +102,7 @@
height: $baseSize;
margin-bottom: $baseSize;
border-radius: 2px;
background-image: url('../images/layout/colorpicker/alpha-horizontal.png');
background-image: url($assetsDir + '/images/layout/colorpicker/alpha-horizontal.png');
}
.ColorPicker.colorpicker.colorpicker-horizontal .colorpicker-alpha.is-hidden {
@ -130,7 +130,7 @@
overflow: hidden;
border: 1px solid rgba(#000, 0.24);
border-radius: 2px;
background-image: url('../images/layout/colorpicker/alpha.png');
background-image: url($assetsDir + '/images/layout/colorpicker/alpha.png');
background-position: 100%;
pointer-events: none;
@ -193,7 +193,7 @@
height: $baseSize;
margin-top: $baseSize;
border-radius: $baseSize - 2;
background-image: url('../images/layout/colorpicker/alpha-horizontal.png');
background-image: url($assetsDir + '/images/layout/colorpicker/alpha-horizontal.png');
background-size: contain;
cursor: col-resize;
}

1
assets/stylesheets/editor-3/_dropdown.scss
Unescape View File

@ -3,6 +3,7 @@
@import '~cartoassets/src/scss/cdb-variables/sizes';
@import '~cartoassets/src/scss/cdb-variables/colors';
@import '~cartoassets/src/scss/cdb-utilities/mixins';
.Editor-dropdownContainer {
position: relative;

2
assets/stylesheets/editor-3/entry.scss
Unescape View File

@ -1,8 +1,6 @@
// Entry point for Editor3
// ----------------------------------------------
@import '../cartoassets/entry';
@import '../colorpicker/bootstrap-colorpicker/bootstrap-colorpicker';
@import 'vars';
@import 'fill/fill';
@import 'fill/input-color-category';

1
config/application.rb
Unescape View File

@ -175,6 +175,7 @@ module CartoDB
common_editor3.css
editor3.css
editor3_vendor.css
public_editor3.css
table.css

62
webpack/builder/entryPoints.js
Unescape View File

@ -0,0 +1,62 @@
const glob = require('glob');
const { resolve } = require('path');
const rootDir = file => resolve(__dirname, '../../', file);
const removeDuplicated = array => Array.from(new Set(array.reverse())).reverse();
module.exports = {
common_editor3: removeDuplicated([
rootDir('assets/stylesheets/common/buttons.scss'),
rootDir('assets/stylesheets/common/create/create_footer.scss'),
rootDir('assets/stylesheets/common/create/create_header.scss'),
rootDir('assets/stylesheets/common/error-details.scss'),
rootDir('assets/stylesheets/common/default.scss'),
rootDir('assets/stylesheets/common/dialog.scss'),
rootDir('assets/stylesheets/common/onboarding.scss'),
rootDir('assets/stylesheets/common/builder-onboarding.scss'),
rootDir('assets/stylesheets/common/layer-onboarding.scss'),
rootDir('assets/stylesheets/common/onboarding-notification.scss'),
rootDir('assets/stylesheets/common/default-paragraph.scss'),
rootDir('assets/stylesheets/common/default-description.scss'),
rootDir('assets/stylesheets/common/default-title.scss'),
rootDir('assets/stylesheets/common/default-time-diff.scss'),
rootDir('assets/stylesheets/common/privacy-indicator.scss'),
rootDir('assets/stylesheets/common/no-results.scss'),
rootDir('assets/stylesheets/common/likes-indicator.scss'),
rootDir('assets/stylesheets/common/filters.scss'),
rootDir('assets/stylesheets/common/intermediate-info.scss'),
rootDir('assets/stylesheets/common/nav-button.scss'),
rootDir('assets/stylesheets/common/spinner.scss'),
rootDir('assets/stylesheets/common/tabs.scss'),
rootDir('assets/stylesheets/common/titles.scss'),
rootDir('assets/stylesheets/common/utilities.scss'),
...glob.sync(rootDir('assets/stylesheets/common/background-polling/**/*.scss')),
rootDir('assets/stylesheets/plugins/tipsy.scss'),
rootDir('assets/stylesheets/common/pagination.scss'),
rootDir('assets/stylesheets/common/datepicker.scss'),
rootDir('assets/stylesheets/common/datasets-list.scss'),
rootDir('assets/stylesheets/common/notifications-list.scss'),
...glob.sync(rootDir('assets/stylesheets/common/create/**/*.scss')),
rootDir('assets/stylesheets/common/form-content.scss'),
...glob.sync(rootDir('assets/stylesheets/common/forms/**/*.scss')),
rootDir('assets/stylesheets/common/option-card.scss'),
...glob.sync(rootDir('assets/stylesheets/common/icons/**/*.scss')),
rootDir('assets/stylesheets/common/maps-list.scss'),
rootDir('assets/stylesheets/common/map-card.scss')
]),
editor3: [
rootDir('node_modules/cartoassets/src/scss/entry.scss'),
rootDir('node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css'),
rootDir('assets/stylesheets/editor-3/entry.scss')
],
deep_insights_new: [
rootDir('assets/stylesheets/deep-insights/entry.scss'),
rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
],
builder_embed: ['whatwg-fetch', resolve(__dirname, '../../', 'lib/assets/javascripts/builder/public_editor.js')],
dataset: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/dataset.js'),
builder: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/editor.js')
};

107
webpack/builder/webpack.dev.config.js
Unescape View File

@ -1,30 +1,25 @@
const webpack = require('webpack');
const {resolve} = require('path');
const { resolve } = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const PACKAGE = require('../../package.json');
const version = PACKAGE.version;
const stats = (env) => {
return env && env.stats;
};
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackDeleteAfterEmit = require('webpack-delete-after-emit');
const { version } = require('../../package.json');
const entryPoints = require('./entryPoints');
const stats = (env) => (env && env.stats);
const rootDir = file => resolve(__dirname, '../../', file);
const isVendor = (module, count) => {
const userRequest = module.userRequest;
return userRequest && userRequest.indexOf('node_modules') >= 0;
};
const entryPoints = {
builder_embed: ['whatwg-fetch', resolve(__dirname, '../../', 'lib/assets/javascripts/builder/public_editor.js')],
dataset: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/dataset.js'),
builder: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/editor.js')
};
module.exports = env => {
return {
entry: entryPoints,
output: {
filename: `${version}/javascripts/[name].js`,
path: resolve(__dirname, '../../', 'public/assets')
path: rootDir('public/assets')
},
resolve: {
symlinks: false,
@ -70,6 +65,27 @@ module.exports = env => {
new webpack.DefinePlugin({
__IN_DEV__: JSON.stringify(true),
__ENV__: JSON.stringify('dev')
}),
new ExtractTextPlugin({
filename: `./${version}/stylesheets/[name].css`
}),
new CopyWebpackPlugin([
{
from: rootDir('app/assets/images'),
to: `./${version}/images/`,
toType: 'dir'
}
]),
new WebpackDeleteAfterEmit({
globs: [
`${version}/javascripts/common_editor3.js`,
`${version}/javascripts/common_editor3.js.map`,
`${version}/javascripts/editor3.js`,
`${version}/javascripts/editor3.js.map`
]
})
])
.filter(p => !!p), // undefined is not a valid plugin, so filter undefined values here
@ -79,7 +95,7 @@ module.exports = env => {
test: /\.js$/,
loader: 'shim-loader',
include: [
resolve(__dirname, '../../', 'node_modules/internal-carto.js')
rootDir('node_modules/internal-carto.js')
],
options: {
shim: {
@ -99,19 +115,68 @@ module.exports = env => {
test: /\.tpl$/,
use: 'tpl-loader',
include: [
resolve(__dirname, '../../', 'lib/assets/javascripts/builder'),
resolve(__dirname, '../../', 'lib/assets/javascripts/deep-insights'),
resolve(__dirname, '../../', 'node_modules/internal-carto.js')
rootDir('lib/assets/javascripts/builder'),
rootDir('lib/assets/javascripts/deep-insights'),
rootDir('node_modules/internal-carto.js')
]
},
{
test: /\.mustache$/,
use: 'raw-loader',
include: [
resolve(__dirname, '../../', 'lib/assets/javascripts/builder'),
resolve(__dirname, '../../', 'lib/assets/javascripts/deep-insights'),
resolve(__dirname, '../../', 'node_modules/internal-carto.js')
rootDir('lib/assets/javascripts/builder'),
rootDir('lib/assets/javascripts/deep-insights'),
rootDir('node_modules/internal-carto.js')
]
},
{
test: /\.s?css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
alias: {
// This is because of Carto.js _leaflet partial
'../../img': '../img'
},
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
data: `$assetsDir: "/assets/${version}";`,
sourceMap: false,
includePaths: [
rootDir('node_modules/cartoassets/src/scss')
]
}
}
]
})
},
{
test: /\.(ttf|eot|woff|woff2|svg)(.+#.+)?$/,
use: {
loader: 'file-loader',
options: {
name: `[name].[ext]`,
outputPath: `${version}/fonts/`,
publicPath: `/assets/${version}/fonts/`
}
}
},
{
test: /\.(png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: `[name].[ext]`,
outputPath: `${version}/images/`,
publicPath: `/assets/${version}/images/`
}
}
}
]
},

Write Preview
Loading…
Cancel
Save