-
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Translate Button: use text-wrap: balance
- Loading branch information
1 parent
762f167
commit 72f525c
Showing
1 changed file
with
70 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,70 @@ | ||
| // this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros | ||
| import css from "@emotion/css/macro"; | ||
| // these two lines make the css prop work on react elements | ||
| import { jsx } from "@emotion/core"; | ||
| /** @jsx jsx */ | ||
|
|
||
| import React from "react"; | ||
| import { FormattedMessage } from "react-intl"; | ||
| import { ReactComponent as TranslationIcon } from "../../assets/Translation.svg"; | ||
| import { Theme } from "@material-ui/core"; | ||
| import { commonUI } from "../../theme"; | ||
|
|
||
| // This file used to be the whole DownloadToBloomButton. Then we added the option of a GetTemplateButton | ||
| // when the book to be downloaded is a template. Now this is just the bits that are unique to non-templates. | ||
| export const TranslateButton: React.FunctionComponent = (props) => { | ||
| return ( | ||
| <React.Fragment> | ||
| <div | ||
| css={css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| `} | ||
| > | ||
| <div | ||
| css={css` | ||
| text-transform: initial; | ||
| font-weight: normal; | ||
| font-size: 14pt; | ||
| line-height: 1.2; | ||
| `} | ||
| > | ||
| <FormattedMessage | ||
| id="book.detail.translateButton.translate" | ||
| defaultMessage="Translate into <emphasis>your</emphasis> language!" | ||
| values={{ | ||
| emphasis: (str: string) => <em>{str}</em>, | ||
| }} | ||
| /> | ||
| </div> | ||
| <div | ||
| css={css` | ||
| font-size: 9pt; | ||
| line-height: 1.1; | ||
| text-transform: initial; | ||
| margin-top: 5px; | ||
| `} | ||
| > | ||
| <FormattedMessage | ||
| id="book.detail.translateButton.download" | ||
| defaultMessage="Download into Bloom Editor" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export function getTranslateIcon(theme: Theme, inCreate: boolean) { | ||
| return ( | ||
| <TranslationIcon | ||
| fill={ | ||
| inCreate | ||
| ? theme.palette.primary.main | ||
| : commonUI.colors.bloomBlue | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| // this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros | ||
| import css from "@emotion/css/macro"; | ||
| // these two lines make the css prop work on react elements | ||
| import { jsx } from "@emotion/core"; | ||
| /** @jsx jsx */ | ||
|
|
||
| import React from "react"; | ||
| import { FormattedMessage } from "react-intl"; | ||
| import { ReactComponent as TranslationIcon } from "../../assets/Translation.svg"; | ||
| import { Theme } from "@material-ui/core"; | ||
| import { commonUI } from "../../theme"; | ||
|
|
||
| // This file used to be the whole DownloadToBloomButton. Then we added the option of a GetTemplateButton | ||
| // when the book to be downloaded is a template. Now this is just the bits that are unique to non-templates. | ||
| export const TranslateButton: React.FunctionComponent = (props) => { | ||
| return ( | ||
| <React.Fragment> | ||
| <div | ||
| css={css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| `} | ||
| > | ||
| <div | ||
| css={css` | ||
| text-transform: initial; | ||
| font-weight: normal; | ||
| font-size: 14pt; | ||
| line-height: 1.2; | ||
| text-wrap: balance; | ||
| `} | ||
| > | ||
| <FormattedMessage | ||
| id="book.detail.translateButton.translate" | ||
| defaultMessage="Translate into <emphasis>your</emphasis> language!" | ||
| values={{ | ||
| emphasis: (str: string) => <em>{str}</em>, | ||
| }} | ||
| /> | ||
| </div> | ||
| <div | ||
| css={css` | ||
| font-size: 9pt; | ||
| line-height: 1.1; | ||
| text-transform: initial; | ||
| margin-top: 5px; | ||
| text-wrap: balance; | ||
| `} | ||
| > | ||
| <FormattedMessage | ||
| id="book.detail.translateButton.download" | ||
| defaultMessage="Download into Bloom Editor" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export function getTranslateIcon(theme: Theme, inCreate: boolean) { | ||
| return ( | ||
| <TranslationIcon | ||
| fill={ | ||
| inCreate | ||
| ? theme.palette.primary.main | ||
| : commonUI.colors.bloomBlue | ||
| } | ||
| /> | ||
| ); | ||
| } |