From 687fec04750fb77564586622e33d08efd5abdd27 Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Sat, 25 May 2019 20:36:37 -0400 Subject: [PATCH 1/6] Use CSS module for Console component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Transfers Console styles into companion CSS module. Uses `css-loader` and `style-loader`; currently nothing fancy to extract the styles into an external stylesheet, but that will come. Also no `react-css-modules`; I don’t find referencing a `styles` object particularly onerous, and explicit is better than implicit. --- package.json | 2 + src/components/Console.jsx | 10 ++- src/components/Console.module.css | 29 +++++++ src/css/application.css | 29 ------- src/css/label.module.css | 9 ++ webpack.config.js | 7 ++ yarn.lock | 136 ++++++++++++++++++++++++++++-- 7 files changed, 180 insertions(+), 42 deletions(-) create mode 100644 src/components/Console.module.css create mode 100644 src/css/label.module.css diff --git a/package.json b/package.json index 4a357afabb..0afffdcea1 100644 --- a/package.json +++ b/package.json @@ -308,6 +308,7 @@ "check-dependencies": "^1.0.1", "circular-dependency-plugin": "^5.0.2", "cloudflare": "^2.1.1", + "css-loader": "^2.1.1", "cssnano": "^3.10.0", "doctoc": "^1.2.0", "eslint": "^5.6.0", @@ -356,6 +357,7 @@ "source-map-loader": "^0.2.2", "stats-webpack-plugin": "^0.6.2", "string-replace-loader": "^2.1.1", + "style-loader": "^0.23.1", "stylelint-selector-bem-pattern": "^2.0.0", "substitute-loader": "^1.0.0", "svg-react-loader": "^0.4.4", diff --git a/src/components/Console.jsx b/src/components/Console.jsx index 94a0a6f284..4b2bb9bcc7 100644 --- a/src/components/Console.jsx +++ b/src/components/Console.jsx @@ -12,6 +12,7 @@ import {t} from 'i18next'; import {EditorLocation} from '../records'; +import styles from './Console.module.css'; import ConsoleEntry from './ConsoleEntry'; import ConsoleInput from './ConsoleInput'; @@ -39,12 +40,13 @@ export default function Console({ const console = (
diff --git a/src/components/Console.module.css b/src/components/Console.module.css new file mode 100644 index 0000000000..306f8d5481 --- /dev/null +++ b/src/components/Console.module.css @@ -0,0 +1,29 @@ +.console { + flex: none; +} + +.repl { + display: flex; + flex-direction: column-reverse; + font-family: 'Inconsolata', monospace; + font-size: 14px; + max-height: 100%; + overflow: auto; +} + +.repl.zoomed { + font-size: 20px; +} + +.scrollContainer { + height: 40vh; + padding: 0.5em; +} + +.label { + composes: label from '../css/label.module.css'; + display: flex; + justify-content: space-between; + cursor: pointer; + background-color: var(--color-low-contrast-gray); +} diff --git a/src/css/application.css b/src/css/application.css index fb6a86aa38..1cf6d1b7d0 100644 --- a/src/css/application.css +++ b/src/css/application.css @@ -620,35 +620,6 @@ body { /** @define console */ -.console { - flex: none; -} - -.console__label { - display: flex; - justify-content: space-between; - cursor: pointer; - background-color: var(--color-low-contrast-gray); -} - -.console__scroll-container { - height: 40vh; - padding: 0.5em; -} - -.console__repl { - display: flex; - flex-direction: column-reverse; - font-family: 'Inconsolata', monospace; - font-size: 14px; - max-height: 100%; - overflow: auto; -} - -.console__repl_zoomed { - font-size: 20px; -} - .console__row { padding-left: 1em; position: relative; diff --git a/src/css/label.module.css b/src/css/label.module.css new file mode 100644 index 0000000000..668fb362cc --- /dev/null +++ b/src/css/label.module.css @@ -0,0 +1,9 @@ +.label { + background-color: var(--color-chrome); + color: var(--color-dark-gray); + cursor: pointer; + font-family: 'Roboto'; + font-size: var(--font-size-menu); + padding: 0.5em 1em; + user-select: none; +} diff --git a/webpack.config.js b/webpack.config.js index 229b8b4254..ef8b242e99 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -193,6 +193,13 @@ module.exports = (env = process.env.NODE_ENV || 'development') => { use: ['source-map-loader'], enforce: 'pre', }, + { + test: /\.module\.css$/u, + use: [ + 'style-loader', + {loader: 'css-loader', query: {modules: true}}, + ], + }, { include: [ path.resolve(__dirname, 'bower_components'), diff --git a/yarn.lock b/yarn.lock index a8778c556c..a5e32a904c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1436,6 +1436,11 @@ agent-base@4, agent-base@^4.1.0, agent-base@^4.2.0, agent-base@~4.2.0: dependencies: es6-promisify "^5.0.0" +ajv-errors@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d" + integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ== + ajv-keywords@^3.0.0, ajv-keywords@^3.1.0: version "3.4.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d" @@ -2748,6 +2753,11 @@ big.js@^3.1.3: resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q== +big.js@^5.2.2: + version "5.2.2" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" + integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== + binary-extensions@^1.0.0: version "1.13.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1" @@ -3336,10 +3346,10 @@ camelcase@^4.0.0, camelcase@^4.1.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0= -camelcase@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42" - integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA== +camelcase@^5.0.0, camelcase@^5.2.0: + version "5.3.1" + resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" + integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== caniuse-api@^1.5.2: version "1.6.1" @@ -4186,6 +4196,23 @@ css-in-js-utils@^2.0.0: hyphenate-style-name "^1.0.2" isobject "^3.0.1" +css-loader@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea" + integrity sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w== + dependencies: + camelcase "^5.2.0" + icss-utils "^4.1.0" + loader-utils "^1.2.3" + normalize-path "^3.0.0" + postcss "^7.0.14" + postcss-modules-extract-imports "^2.0.0" + postcss-modules-local-by-default "^2.0.6" + postcss-modules-scope "^2.1.0" + postcss-modules-values "^2.0.0" + postcss-value-parser "^3.3.0" + schema-utils "^1.0.0" + css-select-base-adapter@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7" @@ -4267,6 +4294,11 @@ cssesc@^1.0.1: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8" integrity sha512-S2hzrpWvE6G/rW7i7IxJfWBYn27QWfOIncUW++8Rbo1VB5zsJDSVPcnI+Q8z7rhxT6/yZeLOCja4cZnghJrNGA== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + cssnano@^3.10.0: version "3.10.0" resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38" @@ -7179,6 +7211,18 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@^0.4.5: dependencies: safer-buffer ">= 2.1.2 < 3" +icss-replace-symbols@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" + integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= + +icss-utils@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e" + integrity sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ== + dependencies: + postcss "^7.0.14" + ieee754@^1.1.11, ieee754@^1.1.4: version "1.1.12" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b" @@ -8552,6 +8596,13 @@ json5@^0.5.0, json5@^0.5.1: resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE= +json5@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" + integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== + dependencies: + minimist "^1.2.0" + json5@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850" @@ -8907,7 +8958,7 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@~0. json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@1.1.0, loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.0.3, loader-utils@^1.1.0: +loader-utils@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0= @@ -8916,6 +8967,15 @@ loader-utils@1.1.0, loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.0. emojis-list "^2.0.0" json5 "^0.5.0" +loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.0.3, loader-utils@^1.1.0, loader-utils@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" + integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA== + dependencies: + big.js "^5.2.2" + emojis-list "^2.0.0" + json5 "^1.0.1" + loadjs@^3.5.4: version "3.5.4" resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-3.5.4.tgz#ef0f4eb5a6ac2b86c7597a3d4de97b83816e36b8" @@ -11363,6 +11423,38 @@ postcss-minify-selectors@^2.0.4: postcss "^5.0.14" postcss-selector-parser "^2.0.0" +postcss-modules-extract-imports@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e" + integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ== + dependencies: + postcss "^7.0.5" + +postcss-modules-local-by-default@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63" + integrity sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA== + dependencies: + postcss "^7.0.6" + postcss-selector-parser "^6.0.0" + postcss-value-parser "^3.3.1" + +postcss-modules-scope@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb" + integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A== + dependencies: + postcss "^7.0.6" + postcss-selector-parser "^6.0.0" + +postcss-modules-values@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64" + integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w== + dependencies: + icss-replace-symbols "^1.1.0" + postcss "^7.0.6" + postcss-nesting@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-6.0.0.tgz#4c45276a065765ec063efe1e4daf75c131518991" @@ -11575,6 +11667,15 @@ postcss-selector-parser@^4.0.0: indexes-of "^1.0.1" uniq "^1.0.1" +postcss-selector-parser@^6.0.0: + version "6.0.2" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" + integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg== + dependencies: + cssesc "^3.0.0" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss-styled@>=0.33.0, postcss-styled@^0.33.0: version "0.33.0" resolved "https://registry.yarnpkg.com/postcss-styled/-/postcss-styled-0.33.0.tgz#69be377584105a582fda7e4f76888e5b97eed737" @@ -11646,10 +11747,10 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" -postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2: - version "7.0.14" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5" - integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg== +postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: + version "7.0.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2" + integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA== dependencies: chalk "^2.4.2" source-map "^0.6.1" @@ -13142,6 +13243,15 @@ schema-utils@^0.4.4, schema-utils@^0.4.5: ajv "^6.1.0" ajv-keywords "^3.1.0" +schema-utils@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" + integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g== + dependencies: + ajv "^6.1.0" + ajv-errors "^1.0.0" + ajv-keywords "^3.1.0" + scope-analyzer@^2.0.1: version "2.0.5" resolved "https://registry.yarnpkg.com/scope-analyzer/-/scope-analyzer-2.0.5.tgz#72c9c6770c3e66984f84c7d3c7045998a1a7db8a" @@ -14044,6 +14154,14 @@ structured-source@^3.0.2: dependencies: boundary "^1.0.1" +style-loader@^0.23.1: + version "0.23.1" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925" + integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg== + dependencies: + loader-utils "^1.1.0" + schema-utils "^1.0.0" + style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" From 723ce7c6f7c9d72aff0fd5a44eb384323278cfd3 Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Sat, 25 May 2019 20:58:06 -0400 Subject: [PATCH 2/6] Migrate ConsoleExpression to CSS modules --- src/components/Console.module.css | 9 +++++++++ src/components/ConsoleExpression.jsx | 9 +++++---- src/components/ConsoleExpression.module.css | 16 ++++++++++++++++ 3 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 src/components/ConsoleExpression.module.css diff --git a/src/components/Console.module.css b/src/components/Console.module.css index 306f8d5481..4c5d1ab0ba 100644 --- a/src/components/Console.module.css +++ b/src/components/Console.module.css @@ -27,3 +27,12 @@ cursor: pointer; background-color: var(--color-low-contrast-gray); } + +.row { + padding-left: 1em; + position: relative; +} + +.inactive { + color: var(--color-light-gray); +} diff --git a/src/components/ConsoleExpression.jsx b/src/components/ConsoleExpression.jsx index 5cc0970a6e..760164d0b5 100644 --- a/src/components/ConsoleExpression.jsx +++ b/src/components/ConsoleExpression.jsx @@ -7,6 +7,8 @@ import isNil from 'lodash-es/isNil'; import {ConsoleEntry as ConsoleEntryRecord} from '../records'; +import styles from './ConsoleExpression.module.css'; + export default function ConsoleExpression({entry: {expression}, isActive}) { if (isNil(expression)) { return null; @@ -16,13 +18,12 @@ export default function ConsoleExpression({entry: {expression}, isActive}) {
-
+
{expression} diff --git a/src/components/ConsoleExpression.module.css b/src/components/ConsoleExpression.module.css new file mode 100644 index 0000000000..0beef2ce96 --- /dev/null +++ b/src/components/ConsoleExpression.module.css @@ -0,0 +1,16 @@ +.expression { + composes: row from './Console.module.css'; +} + +.inactive { + composes: inactive from './Console.module.css'; +} + +.chevron { + color: var(--color-light-gray); + left: 0; + position: absolute; + top: 0; + transform: scale(0.6); + transform-origin: left center; +} From fe9c940c7a8e6c0a9f1e2b81fd2d7a5c417d0d15 Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Tue, 28 May 2019 07:11:31 -0400 Subject: [PATCH 3/6] CSS module for console input --- src/components/Console.module.css | 9 +++++++++ src/components/ConsoleExpression.module.css | 8 ++------ src/components/ConsoleInput.jsx | 9 ++++++--- src/components/ConsoleInput.module.css | 20 ++++++++++++++++++++ src/css/application.css | 18 +----------------- 5 files changed, 38 insertions(+), 26 deletions(-) create mode 100644 src/components/ConsoleInput.module.css diff --git a/src/components/Console.module.css b/src/components/Console.module.css index 4c5d1ab0ba..92b7485adb 100644 --- a/src/components/Console.module.css +++ b/src/components/Console.module.css @@ -36,3 +36,12 @@ .inactive { color: var(--color-light-gray); } + +.chevron { + color: var(--color-light-gray); + left: 0; + position: absolute; + top: 0; + transform: scale(0.6); + transform-origin: left center; +} diff --git a/src/components/ConsoleExpression.module.css b/src/components/ConsoleExpression.module.css index 0beef2ce96..4a10207522 100644 --- a/src/components/ConsoleExpression.module.css +++ b/src/components/ConsoleExpression.module.css @@ -1,5 +1,6 @@ .expression { composes: row from './Console.module.css'; + composes: entry from './Console.module.css'; } .inactive { @@ -7,10 +8,5 @@ } .chevron { - color: var(--color-light-gray); - left: 0; - position: absolute; - top: 0; - transform: scale(0.6); - transform-origin: left center; + composes: chevron from './Console.module.css'; } diff --git a/src/components/ConsoleInput.jsx b/src/components/ConsoleInput.jsx index 8cf4e9e777..24a583dee6 100644 --- a/src/components/ConsoleInput.jsx +++ b/src/components/ConsoleInput.jsx @@ -1,6 +1,7 @@ import {faChevronRight} from '@fortawesome/free-solid-svg-icons'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import bindAll from 'lodash-es/bindAll'; +import classnames from 'classnames'; import get from 'lodash-es/get'; import isNil from 'lodash-es/isNil'; import React, {Component} from 'react'; @@ -14,6 +15,8 @@ import { inheritFontStylesFromParentElement, } from '../util/ace'; +import styles from './ConsoleInput.module.css'; + export default class ConsoleInput extends Component { constructor() { super(); @@ -119,13 +122,13 @@ export default class ConsoleInput extends Component { render() { return (
-
+
-
+
); } diff --git a/src/components/ConsoleInput.module.css b/src/components/ConsoleInput.module.css new file mode 100644 index 0000000000..8e53ed0612 --- /dev/null +++ b/src/components/ConsoleInput.module.css @@ -0,0 +1,20 @@ +.input { + composes: row from './Console.module.css'; + /* TODO: This is mostly duplicated with console entry */ + flex: none; + margin-top: 0.5em; + padding-bottom: 0.5em; + height: 1em; +} + +.chevron { + composes: chevron from './Console.module.css'; +} + +.chevron.blue { + color: var(--color-blue); +} + +.console__editor { + margin-left: -4px; +} diff --git a/src/css/application.css b/src/css/application.css index 1cf6d1b7d0..e77934b811 100644 --- a/src/css/application.css +++ b/src/css/application.css @@ -634,33 +634,17 @@ body { transform-origin: left center; } -.console__chevron_blue { - color: var(--color-blue); -} - .console__chevron_outdent { text-indent: -0.1em; } -.console__entry, -.console__input { +.console__entry { flex: none; margin-top: 0.5em; padding-bottom: 0.5em; -} - -.console__input { - height: 1em; -} - -.console__entry { border-bottom: 1px solid var(--color-low-contrast-gray); } -.console__editor { - margin-left: -4px; -} - .console__value { white-space: pre-wrap; } From 7abc4528f397450836cba8ce6ff24e829c43145a Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Tue, 28 May 2019 07:19:25 -0400 Subject: [PATCH 4/6] ConsoleOutput CSS module --- src/components/ConsoleOutput.jsx | 13 +++++----- src/components/ConsoleOutput.module.css | 17 +++++++++++++ src/css/application.css | 32 ------------------------- 3 files changed, 24 insertions(+), 38 deletions(-) create mode 100644 src/components/ConsoleOutput.module.css diff --git a/src/components/ConsoleOutput.jsx b/src/components/ConsoleOutput.jsx index d8361acefb..62bda568c0 100644 --- a/src/components/ConsoleOutput.jsx +++ b/src/components/ConsoleOutput.jsx @@ -7,10 +7,12 @@ import classnames from 'classnames'; import {ConsoleEntry} from '../records'; +import styles from './ConsoleOutput.module.css'; + export default function ConsoleOutput({entry, isActive}) { const {expression, value, error} = entry; const chevron = expression ? - (
+ (
) : null; @@ -20,9 +22,8 @@ export default function ConsoleOutput({entry, isActive}) {
@@ -37,8 +38,8 @@ export default function ConsoleOutput({entry, isActive}) {
diff --git a/src/components/ConsoleOutput.module.css b/src/components/ConsoleOutput.module.css new file mode 100644 index 0000000000..bf1895e49a --- /dev/null +++ b/src/components/ConsoleOutput.module.css @@ -0,0 +1,17 @@ +.value { + composes: row from './Console.module.css'; + white-space: pre-wrap; +} + +.error { + color: var(--color-red); +} + +.inactive { + composes: inactive from './Console.module.css'; +} + +.chevron { + composes: chevron from './Console.module.css'; + text-indent: -0.1em; +} diff --git a/src/css/application.css b/src/css/application.css index e77934b811..200f4c51de 100644 --- a/src/css/application.css +++ b/src/css/application.css @@ -620,24 +620,6 @@ body { /** @define console */ -.console__row { - padding-left: 1em; - position: relative; -} - -.console__chevron { - color: var(--color-light-gray); - left: 0; - position: absolute; - top: 0; - transform: scale(0.6); - transform-origin: left center; -} - -.console__chevron_outdent { - text-indent: -0.1em; -} - .console__entry { flex: none; margin-top: 0.5em; @@ -645,20 +627,6 @@ body { border-bottom: 1px solid var(--color-low-contrast-gray); } -.console__value { - white-space: pre-wrap; -} - -.console__error { - color: var(--color-red); -} - -.console__expression_inactive, -.console__value_inactive, -.console__error_inactive { - color: var(--color-light-gray); -} - /** @define preview */ .preview { From 52caa0295044ddc07bd0bf7deb23388364372712 Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Tue, 28 May 2019 07:36:04 -0400 Subject: [PATCH 5/6] ConsoleEntry CSS module --- src/components/ConsoleEntry.jsx | 3 ++- src/components/ConsoleEntry.module.css | 6 ++++++ src/css/application.css | 9 --------- 3 files changed, 8 insertions(+), 10 deletions(-) create mode 100644 src/components/ConsoleEntry.module.css diff --git a/src/components/ConsoleEntry.jsx b/src/components/ConsoleEntry.jsx index ab785c7fd9..0a2e2524b6 100644 --- a/src/components/ConsoleEntry.jsx +++ b/src/components/ConsoleEntry.jsx @@ -5,10 +5,11 @@ import {ConsoleEntry as ConsoleEntryRecord} from '../records'; import ConsoleExpression from './ConsoleExpression'; import ConsoleOutput from './ConsoleOutput'; +import styles from './ConsoleEntry.module.css'; export default function ConsoleEntry({entry, isActive}) { return ( -
+
diff --git a/src/components/ConsoleEntry.module.css b/src/components/ConsoleEntry.module.css new file mode 100644 index 0000000000..1f173280ae --- /dev/null +++ b/src/components/ConsoleEntry.module.css @@ -0,0 +1,6 @@ +.entry { + flex: none; + margin-top: 0.5em; + padding-bottom: 0.5em; + border-bottom: 1px solid var(--color-low-contrast-gray); +} diff --git a/src/css/application.css b/src/css/application.css index 200f4c51de..e04e211ffb 100644 --- a/src/css/application.css +++ b/src/css/application.css @@ -618,15 +618,6 @@ body { animation: 0.2s ease-in 0.1s both fadeIn; } -/** @define console */ - -.console__entry { - flex: none; - margin-top: 0.5em; - padding-bottom: 0.5em; - border-bottom: 1px solid var(--color-low-contrast-gray); -} - /** @define preview */ .preview { From 27808d2a66c12cbd0b20e5b818a12a0ca6a0f92e Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Tue, 28 May 2019 07:39:09 -0400 Subject: [PATCH 6/6] Deduplicate entry styles --- src/components/ConsoleInput.module.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/ConsoleInput.module.css b/src/components/ConsoleInput.module.css index 8e53ed0612..22b3d57da0 100644 --- a/src/components/ConsoleInput.module.css +++ b/src/components/ConsoleInput.module.css @@ -1,10 +1,6 @@ .input { composes: row from './Console.module.css'; - /* TODO: This is mostly duplicated with console entry */ - flex: none; - margin-top: 0.5em; - padding-bottom: 0.5em; - height: 1em; + composes: entry from './ConsoleEntry.module.css'; } .chevron {