From 981846170deb1609b0b090f2d08d8e506fe30b66 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sun, 19 Jul 2020 18:40:32 +0200 Subject: [PATCH] chore: More work on events --- .../Workbench/DraftPattern/Events/index.js | 4 +- packages/css-theme/src/_prism.css | 108 +++++++++--------- packages/css-theme/src/components/_event.scss | 5 +- packages/css-theme/src/elements/_code.scss | 24 +++- packages/i18n/src/locales/en/app.yaml | 30 ++--- 5 files changed, 100 insertions(+), 71 deletions(-) diff --git a/packages/components/src/Workbench/DraftPattern/Events/index.js b/packages/components/src/Workbench/DraftPattern/Events/index.js index 40b678fec07..822c1978210 100644 --- a/packages/components/src/Workbench/DraftPattern/Events/index.js +++ b/packages/components/src/Workbench/DraftPattern/Events/index.js @@ -1,12 +1,12 @@ import React from 'react' import Event from './event' -const DraftEvents = ({ events, app }) => ( +const DraftEvents = ({ events }) => (
{['error', 'warning', 'info', 'debug'].map((type) => (
{events[type].map((event, index) => ( - + ))}
))} diff --git a/packages/css-theme/src/_prism.css b/packages/css-theme/src/_prism.css index 885caccbb49..adc514f6197 100644 --- a/packages/css-theme/src/_prism.css +++ b/packages/css-theme/src/_prism.css @@ -4,85 +4,88 @@ * @author Joe Gibson (@gibsjose) */ -code[class*="language-"], -pre[class*="language-"] { - color: #c5c8c6; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; +code[class*='language-'], +pre[class*='language-'] { + color: #c5c8c6; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } /* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #1d1f21; +.react-markdown > pre, +.react-markdown > pre > code[class*='language-'], +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: #1d1f21; } /* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; +div.react-markdown p > code, +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #7C7C7C; + color: #7c7c7c; } .token.punctuation { - color: #c5c8c6; + color: #c5c8c6; } .namespace { - opacity: .7; + opacity: 0.7; } .token.property, .token.keyword, .token.tag { - color: #96CBFE; + color: #96cbfe; } .token.class-name { - color: #FFFFB6; - text-decoration: underline; + color: #ffffb6; + text-decoration: underline; } .token.boolean, .token.constant { - color: #99CC99; + color: #99cc99; } .token.symbol, .token.deleted { - color: #f92672; + color: #f92672; } .token.number { - color: #FF73FD; + color: #ff73fd; } .token.selector, @@ -91,57 +94,56 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #A8FF60; + color: #a8ff60; } .token.variable { - color: #C6C5FE; + color: #c6c5fe; } .token.operator { - color: #EDEDED; + color: #ededed; } .token.entity { - color: #FFFFB6; - /* text-decoration: underline; */ + color: #ffffb6; + /* text-decoration: underline; */ } .token.url { - color: #96CBFE; + color: #96cbfe; } .language-css .token.string, .style .token.string { - color: #87C38A; + color: #87c38a; } .token.atrule, .token.attr-value { - color: #F9EE98; + color: #f9ee98; } .token.function { - color: #DAD085; + color: #dad085; } .token.regex { - color: #E9C062; + color: #e9c062; } .token.important { - color: #fd971f; + color: #fd971f; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } - diff --git a/packages/css-theme/src/components/_event.scss b/packages/css-theme/src/components/_event.scss index f22b4e56886..f86383c3020 100644 --- a/packages/css-theme/src/components/_event.scss +++ b/packages/css-theme/src/components/_event.scss @@ -41,6 +41,9 @@ div.draft-events { p:last-of-type { margin-bottom: 0; } + div.gatsby-highlight { + margin: 0.5rem 0; + } } div.draft-event.debug { border-color: $oc-grape-5; @@ -59,6 +62,6 @@ div.draft-events { list-style-position: outside; } div.draft-event details summary:hover { - cursor: help; + cursor: pointer; } } diff --git a/packages/css-theme/src/elements/_code.scss b/packages/css-theme/src/elements/_code.scss index dea093d95d3..76c76bea1bd 100644 --- a/packages/css-theme/src/elements/_code.scss +++ b/packages/css-theme/src/elements/_code.scss @@ -1,7 +1,9 @@ +div.react-markdown pre, code[class*='language-'], pre[class*='language-'] { text-shadow: none; } +.theme-wrapper.light .draft-events :not(pre) > code, .workbench.theme-wrapper.light :not(pre) > code, .theme-wrapper.light :not(pre) > code[class*='language-'] { padding: 0.1rem 0.25rem; @@ -9,6 +11,7 @@ pre[class*='language-'] { border: 1px $oc-yellow-2 solid; color: $oc-gray-9; } +.theme-wrapper.dark .draft-events :not(pre) > code, .workbench.theme-wrapper.dark :not(pre) > code, .theme-wrapper.dark :not(pre) > code[class*='language-'] { padding: 0.125rem 0.5rem; @@ -23,14 +26,18 @@ div.gatsby-highlight { div.react-markdown pre, div.gatsby-highlight pre { padding: 1.5rem 1rem; + margin: 0; } div.react-markdown.dense pre, +div.react-markdown.dense pre code, div.gatsby-highlight.dense pre { padding: 0.5rem 1rem; } pre.language-yaml:before, pre.language-js:before, +pre.language-js-error:before, +pre.language-js-trace:before, pre.language-jsx:before, pre.language-mdx:before, pre.language-json:before, @@ -56,6 +63,16 @@ pre.language-js:before { content: 'js'; background: rgba(255, 255, 0, 0.9); } +pre.language-js-error:before { + content: 'error'; + background: $oc-red-6; + color: $oc-gray-0; +} +pre.language-js-trace:before { + content: 'stacktrace'; + background: $oc-orange-6; + color: $oc-gray-0; +} pre.language-jsx:before { content: 'jsx'; background: rgba(255, 255, 0, 0.9); @@ -76,6 +93,7 @@ pre.language-svg:before { content: 'svg'; background: rgba(129, 197, 255, 0.9); } +div.react-markdown pre, pre code[class*='language-'], pre[class*='language-'] { white-space: pre-wrap; @@ -86,13 +104,17 @@ pre[class*='language-'] { .theme-wrapper.dark pre[class*='language-'] { border: 1px solid $oc-gray-8; } -div.react-markdown pre[class*='language-'], +div.react-markdown pre, div.react-markdown pre code[class*='language-'] { margin: 0.5rem 0; } div.react-markdown pre[class*='language-']:before { display: none; } +pre.language-js-error { + overflow: initial; + padding: 0.5rem 5rem 0.5rem 1rem !important; +} @include xs-screen { pre code[class*='language-'], diff --git a/packages/i18n/src/locales/en/app.yaml b/packages/i18n/src/locales/en/app.yaml index c7a00327672..6cddf7c0fd5 100644 --- a/packages/i18n/src/locales/en/app.yaml +++ b/packages/i18n/src/locales/en/app.yaml @@ -33,7 +33,7 @@ chooseAPerson: Choose a person chooseAPattern: Choose a pattern chooseYourOptions: Choose your options close: Close -colourYes: "Colour picture: Content is available in English" +colourYes: 'Colour picture: Content is available in English' community: Community configureLayout: Configure layout configureYourDraft: Configure your draft @@ -44,7 +44,7 @@ continue: Continue copiedToClipboard: Copied to clipboard copy: Copy couldYouTranslateThis: Could you translate this? -countModelsLackingForPattern: "{count} of your people lack the required measurements to draft {pattern}" +countModelsLackingForPattern: '{count} of your people lack the required measurements to draft {pattern}' created: Created custom: Custom customSeamAllowance: Custom seam allowance @@ -69,16 +69,16 @@ drafts: Drafts draftSettings: Draft settings dragAndDropImageHere: Drag and drop and image here, or select one manually with the button below emailAddress: E-mail address -emailWorksToo: 'If you don''t know your username, you can also use your E-mail address to login' +emailWorksToo: "If you don't know your username, you can also use your E-mail address to login" enterEmailPickPassword: Enter your E-mail address, and pick a password export: Export exportTiledPDF: Export tiled PDF faq: Frequently asked questions -fieldRemoved: "{field} removed" -fieldSaved: "{field} saved" +fieldRemoved: '{field} removed' +fieldSaved: '{field} saved' filterByPattern: Filter by pattern filterPatterns: Filter patterns -forgotLoginInstructions: 'If you don''t remember your password, enter your username or E-mail address below and click the Reset password button' +forgotLoginInstructions: "If you don't remember your password, enter your username or E-mail address below and click the Reset password button" freesewing: Freesewing freesewingOnGithub: Freesewing on GitHub github: GitHub @@ -92,7 +92,6 @@ howCanWeHelpYou: How can we help you? howToTakeMeasurements: How to take measurements i18n: Internationalization imperialUnits: Imperial units (inch) -info: Info instagram: Instagram invalidTldMessage: '.{tld} is not a valid TLD' joinTheChatMsg: We have a chatroom on Gitter with friendly people who are happy to help out. So don't be shy, and stop by for a chat. @@ -109,7 +108,7 @@ metadata: Metadata metricUnits: Metric units (cm) person: Person people: People -monochromeNo: "Monochrome picture: Content is not availabel in English" +monochromeNo: 'Monochrome picture: Content is not availabel in English' nameInfo: A name helps to keep things apart. You can pick any name you want. name: Name addThing: Add {thing} @@ -127,7 +126,7 @@ oneMoreThing: One more thing options: Options orPayPerYear: Or pay per year other: Other -otherThing: "Other {thing}" +otherThing: 'Other {thing}' ourPatrons: Our patrons patron-2: Powder monkey patron-4: First mate @@ -153,7 +152,7 @@ remove: Remove removeThing: Remove {thing} reportThisOnGithub: Report this on GitHub requiredMeasurements: Required measurements -resendActivationEmailMessage: 'Fill in the E-mail address you signed up with, and we''ll send you a new confirmation message.' +resendActivationEmailMessage: "Fill in the E-mail address you signed up with, and we'll send you a new confirmation message." resendActivationEmail: Re-send activation E-mail resetPassword: Reset password reset: Reset @@ -195,7 +194,7 @@ txt-footer: Freesewing is made by joost & contributors
with the financial s txt-tier2: Our most democractically priced tier. It may be less than the price of a latte, but your support means the world to us. txt-tier4: Subscribe to this tier and we'll send some of our much covetted freesewing swag to your home anywhere in the world. txt-tier8: "If you don't merely want to support us, but want to see freesewing thrive, this is the tier for you. Also: extra swag." -txt-tiers: "FreeSewing is fuelled by a voluntary subscription model" +txt-tiers: 'FreeSewing is fuelled by a voluntary subscription model' unitsInfo: Freesewing supports both the metric system and imperial units. Simply pick which one you'd like to use here. (the default is to use the units configured in your account). updated: Updated update: Update @@ -238,7 +237,7 @@ noModel: You haven't added any measurements (yet). FreeSewing can generate made- noModel2: So the first thing you should do is add a person, and crack out your measuring tape. noUserBrowsingTitle: "You can't just browse all users" noUserBrowsingText: "We've got thousands of them. Surely you have better things to do?" -usePatternMeasurements: "Use the measurements of the original pattern" +usePatternMeasurements: 'Use the measurements of the original pattern' createReplica: Create a replica showDetails: Show details hideDetails: Hide details @@ -263,7 +262,7 @@ oneMomentPlease: One moment please loadingMagic: We are loading the magic estimate: Estimate actual: Actual -weEstimateYM2B: "We estimate your {measurement} to be around:" +weEstimateYM2B: 'We estimate your {measurement} to be around:' exportAsData: Export as data availablePatterns: Available patterns browseCollection: Browse collection @@ -315,4 +314,7 @@ updateNotes-txt: Update the notes you keep along your pattern franceWarning: Beware users in France franceWarning-txt: Several French E-mail providers — including, free.fr, laposte.net, orange.fr, and sfr.fr — are known to routinely discard our E-mails. emailNotReceived: If you do not receive the activation email, please reach out so we can help you. - +error: Error +info: Info +warning: Warning +debug: Debug