From 7a77f7b3bbafff6b8c9899e1c4404ab5e5cde853 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Mon, 17 Jul 2017 22:06:31 -0500 Subject: [PATCH] Add sourceRoot/includePaths to loaders Use the settings modal as an example/testcase --- .../glitch/components/settings/container.js | 6 +- .../glitch/components/settings/index.js | 2 + .../components/settings/stylesheet.scss | 84 +++++++++++++++++++ app/javascript/styles/components.scss | 83 ------------------ config/webpack/loaders/babel.js | 1 + config/webpack/loaders/sass.js | 2 +- 6 files changed, 91 insertions(+), 87 deletions(-) create mode 100644 app/javascript/glitch/components/settings/stylesheet.scss diff --git a/app/javascript/glitch/components/settings/container.js b/app/javascript/glitch/components/settings/container.js index 6034935ebd..5dfe228c0f 100644 --- a/app/javascript/glitch/components/settings/container.js +++ b/app/javascript/glitch/components/settings/container.js @@ -2,11 +2,11 @@ import { connect } from 'react-redux'; // Mastodon imports // -import { closeModal } from '../../../mastodon/actions/modal'; +import { closeModal } from 'mastodon/actions/modal'; // Our imports // -import { changeLocalSetting } from '../../actions/local_settings'; -import Settings from '../../components/settings'; +import { changeLocalSetting } from 'glitch/actions/local_settings'; +import Settings from 'glitch/components/settings'; const mapStateToProps = state => ({ settings: state.get('local_settings'), diff --git a/app/javascript/glitch/components/settings/index.js b/app/javascript/glitch/components/settings/index.js index afe7e9a871..04c05704e7 100644 --- a/app/javascript/glitch/components/settings/index.js +++ b/app/javascript/glitch/components/settings/index.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; +import './stylesheet'; + // Our imports // import SettingsItem from './item'; diff --git a/app/javascript/glitch/components/settings/stylesheet.scss b/app/javascript/glitch/components/settings/stylesheet.scss new file mode 100644 index 0000000000..48cc379842 --- /dev/null +++ b/app/javascript/glitch/components/settings/stylesheet.scss @@ -0,0 +1,84 @@ +@import 'variables'; + +.settings-modal { + position: relative; + display: flex; + flex-direction: row; + background: $ui-secondary-color; + color: $ui-base-color; + border-radius: 8px; + height: 80vh; + width: 80vw; + max-width: 740px; + max-height: 450px; + overflow: hidden; + + label { + display: block; + } + + h1 { + font-size: 18px; + font-weight: 500; + line-height: 24px; + margin-bottom: 20px; + } + + h2 { + font-size: 15px; + font-weight: 500; + line-height: 20px; + margin-top: 20px; + margin-bottom: 10px; + } +} + +.settings-modal__navigation { + background: $primary-text-color; + color: $ui-base-color; + width: 200px; + font-size: 15px; + line-height: 20px; + overflow-y: auto; + + .settings-modal__navigation-item, .settings-modal__navigation-close { + display: block; + padding: 15px 20px; + cursor: pointer; + outline: none; + text-decoration: none; + } + + .settings-modal__navigation-item { + background: $primary-text-color; + color: inherit; + border-bottom: 1px $ui-primary-color solid; + transition: background .3s; + + &:hover { + background: $ui-secondary-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + .settings-modal__navigation-close { + background: $error-value-color; + color: $primary-text-color; + } +} + +.settings-modal__content { + display: block; + flex: auto; + padding: 15px 20px 15px 20px; + width: 360px; + overflow-y: auto; + + select { + margin-bottom: 5px; + } +} \ No newline at end of file diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index a09a33e009..0a8fa5e6de 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3659,89 +3659,6 @@ button.icon-button.active i.fa-retweet { margin-bottom: 20px; } -.settings-modal { - position: relative; - display: flex; - flex-direction: row; - background: $ui-secondary-color; - color: $ui-base-color; - border-radius: 8px; - height: 80vh; - width: 80vw; - max-width: 740px; - max-height: 450px; - overflow: hidden; - - label { - display: block; - } - - h1 { - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 20px; - } - - h2 { - font-size: 15px; - font-weight: 500; - line-height: 20px; - margin-top: 20px; - margin-bottom: 10px; - } -} - -.settings-modal__navigation { - background: $primary-text-color; - color: $ui-base-color; - width: 200px; - font-size: 15px; - line-height: 20px; - overflow-y: auto; - - .settings-modal__navigation-item, .settings-modal__navigation-close { - display: block; - padding: 15px 20px; - cursor: pointer; - outline: none; - text-decoration: none; - } - - .settings-modal__navigation-item { - background: $primary-text-color; - color: inherit; - border-bottom: 1px $ui-primary-color solid; - transition: background .3s; - - &:hover { - background: $ui-secondary-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - } - - .settings-modal__navigation-close { - background: $error-value-color; - color: $primary-text-color; - } -} - -.settings-modal__content { - display: block; - flex: auto; - padding: 15px 20px 15px 20px; - width: 360px; - overflow-y: auto; - - select { - margin-bottom: 5px; - } -} - .onboard-sliders { display: inline-block; max-width: 30px; diff --git a/config/webpack/loaders/babel.js b/config/webpack/loaders/babel.js index a1992a450a..49b191d267 100644 --- a/config/webpack/loaders/babel.js +++ b/config/webpack/loaders/babel.js @@ -8,5 +8,6 @@ module.exports = { loader: 'babel-loader', options: { forceEnv: process.env.NODE_ENV || 'development', + sourceRoot: 'app/javascript', }, }; diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js index 88d94c6846..40e81b43b9 100644 --- a/config/webpack/loaders/sass.js +++ b/config/webpack/loaders/sass.js @@ -9,7 +9,7 @@ module.exports = { { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } }, { loader: 'postcss-loader', options: { sourceMap: true } }, 'resolve-url-loader', - 'sass-loader', + { loader: 'sass-loader', options: { includePaths: ['app/javascript/styles'] } }, ], }), };