diff options
Diffstat (limited to 'app/javascript')
12 files changed, 417 insertions, 13 deletions
diff --git a/app/javascript/images/icon_email.svg b/app/javascript/images/icon_email.svg new file mode 100644 index 000000000..6d0ad9d9b --- /dev/null +++ b/app/javascript/images/icon_email.svg @@ -0,0 +1,4 @@ +<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> + <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/> + <path d="M0 0h24v24H0z" fill="none"/> +</svg> \ No newline at end of file diff --git a/app/javascript/images/icon_lock_open.svg b/app/javascript/images/icon_lock_open.svg new file mode 100644 index 000000000..3288b46d6 --- /dev/null +++ b/app/javascript/images/icon_lock_open.svg @@ -0,0 +1,4 @@ +<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/> +</svg> \ No newline at end of file diff --git a/app/javascript/images/logo_transparent.svg b/app/javascript/images/logo_transparent.svg new file mode 100644 index 000000000..abd6d1f67 --- /dev/null +++ b/app/javascript/images/logo_transparent.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M107.86523 0C78.203984.2425 49.672422 3.4535937 33.044922 11.089844c0 0-32.97656262 14.752031-32.97656262 65.082031 0 11.525-.224375 25.306175.140625 39.919925 1.19750002 49.22 9.02375002 97.72843 54.53124962 109.77343 20.9825 5.55375 38.99711 6.71547 53.505856 5.91797 26.31125-1.45875 41.08203-9.38867 41.08203-9.38867l-.86914-19.08984s-18.80171 5.92758-39.91796 5.20508c-20.921254-.7175-43.006879-2.25516-46.390629-27.94141-.3125-2.25625-.46875-4.66938-.46875-7.20313 0 0 20.536953 5.0204 46.564449 6.21289 15.915.73001 30.8393-.93343 45.99805-2.74218 29.07-3.47125 54.38125-21.3818 57.5625-37.74805 5.0125-25.78125 4.59961-62.916015 4.59961-62.916015 0-50.33-32.97461-65.082031-32.97461-65.082031C166.80539 3.4535938 138.255.2425 108.59375 0h-.72852zM74.296875 39.326172c12.355 0 21.710234 4.749297 27.896485 14.248047l6.01367 10.080078 6.01563-10.080078c6.185-9.49875 15.54023-14.248047 27.89648-14.248047 10.6775 0 19.28156 3.753672 25.85156 11.076172 6.36875 7.3225 9.53907 17.218828 9.53907 29.673828v60.941408h-24.14454V81.869141c0-12.46875-5.24453-18.798829-15.73828-18.798829-11.6025 0-17.41797 7.508516-17.41797 22.353516v32.375002H96.207031V85.423828c0-14.845-5.815468-22.353515-17.417969-22.353516-10.49375 0-15.740234 6.330079-15.740234 18.798829v59.148439H38.904297V80.076172c0-12.455 3.171016-22.351328 9.541015-29.673828 6.568751-7.3225 15.172813-11.076172 25.851563-11.076172z" fill="#fff"/></svg> \ No newline at end of file diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap index 533359ffe..29fdc2412 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap @@ -4,14 +4,16 @@ exports[`<DisplayName /> renders display name + account name 1`] = ` <span className="display-name" > - <strong - className="display-name__html" - dangerouslySetInnerHTML={ - Object { - "__html": "<p>Foo</p>", + <bdi> + <strong + className="display-name__html" + dangerouslySetInnerHTML={ + Object { + "__html": "<p>Foo</p>", + } } - } - /> + /> + </bdi> <span className="display-name__account" diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 81459731c..a3642e61d 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -93,7 +93,7 @@ export default class Account extends ImmutablePureComponent { {hidingNotificationsButton} </Fragment> ); - } else if (!account.get('moved')) { + } else if (!account.get('moved') || following) { buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />; } } diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index 2cf84f8f4..a1c56ae35 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -12,7 +12,7 @@ export default class DisplayName extends React.PureComponent { return ( <span className='display-name'> - <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span> + <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> <span className='display-name__account'>@{this.props.account.get('acct')}</span> </span> ); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index d23ff87fa..2600d68ad 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -162,7 +162,7 @@ export default class Status extends ImmutablePureComponent { prepend = ( <div className='status__prepend'> <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> - <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={display_name_html} /></a> }} /> + <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} /> </div> ); diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index b2399ae9b..0225e7308 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -103,7 +103,7 @@ export default class Header extends ImmutablePureComponent { } } - if (account.get('moved')) { + if (account.get('moved') && !account.getIn(['relationship', 'following'])) { actionBtn = ''; } diff --git a/app/javascript/mastodon/features/account_timeline/components/moved_note.js b/app/javascript/mastodon/features/account_timeline/components/moved_note.js index 1c0e081cc..280389bba 100644 --- a/app/javascript/mastodon/features/account_timeline/components/moved_note.js +++ b/app/javascript/mastodon/features/account_timeline/components/moved_note.js @@ -34,7 +34,7 @@ export default class MovedNote extends ImmutablePureComponent { <div className='account__moved-note'> <div className='account__moved-note__message'> <div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div> - <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <strong dangerouslySetInnerHTML={displayNameHtml} /> }} /> + <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} /> </div> <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'> diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js index 9d170cad5..6db62b330 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.js +++ b/app/javascript/mastodon/features/notifications/components/notification.js @@ -133,7 +133,7 @@ export default class Notification extends ImmutablePureComponent { const { notification } = this.props; const account = notification.get('account'); const displayNameHtml = { __html: account.get('display_name_html') }; - const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} />; + const link = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>; switch(notification.get('type')) { case 'follow': diff --git a/app/javascript/packs/mailer.js b/app/javascript/packs/mailer.js new file mode 100644 index 000000000..732fc1698 --- /dev/null +++ b/app/javascript/packs/mailer.js @@ -0,0 +1 @@ +require('../styles/mailer.scss'); diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss new file mode 100644 index 000000000..2fd3f2661 --- /dev/null +++ b/app/javascript/styles/mailer.scss @@ -0,0 +1,392 @@ +@import 'mastodon/variables'; +@import 'fonts/roboto'; + +table, +td, +div { + box-sizing: border-box; +} + +html, +body { + width: 100% !important; + min-width: 100%; + margin: 0; + padding: 0; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +.email_body { + td, + div, + a, + span { + line-height: inherit; + } +} + +a { + &, + &:visited, + span { + text-decoration: none; + color: $ui-highlight-color; + } + + #outlook & { + padding: 0; + } +} + +img { + outline: none; + border: 0; + text-decoration: none; + -ms-interpolation-mode: bicubic; + clear: both; + line-height: 100%; +} + +table { + border-spacing: 0; + mso-table-lspace: 0; + mso-table-rspace: 0; +} + +td { + vertical-align: top; +} + +.email-table, +.content-section, +.column, +.column-cell { + width: 100%; + min-width: 100%; +} + +.email-body { + font-size: 0 !important; + line-height: 100%; + text-align: center; + padding-left: 16px; + padding-right: 16px; +} + +.email-start { + padding-top: 32px; +} + +.email-end { + padding-bottom: 32px; +} + +.email-body, +html, +body { + background-color: lighten($ui-base-color, 4%); +} + +.email-container, +.email-row, +.col-0, +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, { + font-size: 0; + display: inline-block; + width: 100%; + min-width: 100%; + min-width: 0 !important; + vertical-align: top; +} + +.content-cell { + width: 100%; + min-width: 100%; + min-width: 0 !important; +} + +.column-cell { + padding-top: 16px; + padding-bottom: 16px; + vertical-align: top; + + &.button-cell { + padding-top: 0; + } +} + +.email-container { + max-width: 632px; + margin: 0 auto; + text-align: center; +} + +.email-row { + display: block; + max-width: 600px !important; + margin: 0 auto; + text-align: center; + clear: both; +} + +.col-0 { + max-width: 50px; +} + +.col-1 { + max-width: 100px; +} + +.col-2 { + max-width: 200px; +} + +.col-3 { + max-width: 300px; +} + +.col-4 { + max-width: 400px; +} + +.col-5 { + max-width: 500px; +} + +.col-6 { + max-width: 600px; +} + +.column-cell, +.column-cell td, +p { + font-family: Helvetica, Arial, sans-serif; + + @media only screen { + font-family: 'mastodon-font-sans-serif', sans-serif !important; + } +} + +.email-body .column-cell, +.column-cell, +p { + font-size: 15px; + line-height: 23px; + color: $ui-primary-color; + mso-line-height-rule: exactly; + text-rendering: optimizelegibility; +} + +p { + display: block; + margin-top: 0; + margin-bottom: 16px; + + &.small { + font-size: 13px; + } + + &.lead { + font-size: 19px; + line-height: 27px; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $ui-secondary-color; + margin-left: 0; + margin-right: 0; + margin-top: 20px; + margin-bottom: 8px; + padding: 0; + font-weight: 500; +} + +h1 { + font-size: 26px; + line-height: 36px; +} + +h2 { + font-size: 23px; + line-height: 30px; +} + +h3 { + font-size: 19px; + line-height: 25px; +} + +.input { + td { + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 16px; + line-height: 20px; + mso-line-height-rule: exactly; + border-radius: 4px; + text-align: center; + font-weight: 500; + font-size: 17px; + } +} + +.content-cell, +.blank-cell { + width: 100%; + font-size: 0; + text-align: center; + vertical-align: top; + padding-left: 16px; + padding-right: 16px; +} + +.content-cell { + background-color: darken($ui-base-color, 4%); +} + +.hero { + background-color: $ui-base-color; + padding-top: 20px; +} + +.header { + border-radius: 5px 5px 0 0; + background-color: darken($ui-base-color, 8%); + + .column-cell { + text-align: center; + padding-top: 20px; + padding-bottom: 8px; + } +} + +.content-start { + padding-top: 32px; +} + +.content-end { + border-radius: 0 0 5px 5px; + padding-top: 16px; +} + +.footer { + .column-cell, + p { + color: lighten($ui-base-color, 26%); + } + + p { + margin-bottom: 0; + font-size: 13px; + + &.small { + margin-bottom: 0; + } + } + + a { + color: lighten($ui-base-color, 26%); + text-decoration: underline; + } + + img { + opacity: 0.3; + } +} + +.logo { + position: relative; + left: -4px; +} + +.button { + display: table; + margin-left: auto; + margin-right: auto; + + td { + line-height: 20px; + mso-line-height-rule: exactly; + border-radius: 4px; + text-align: center; + font-weight: 500; + font-size: 17px; + padding: 0 !important; + + a, + a span { + color: $primary-text-color; + display: block !important; + text-align: center !important; + vertical-align: top !important; + line-height: inherit !important; + } + + a { + padding: 10px 22px !important; + line-height: 26px !important; + font-weight: 500 !important; + } + } +} + +.button-default { + background-color: darken($ui-base-color, 8%); +} + +.button-primary { + background-color: $ui-highlight-color; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.padded { + padding-left: 16px; + padding-right: 16px; +} + +.hero-icon { + width: 64px; + + td { + text-align: center; + vertical-align: middle; + line-height: 100%; + mso-line-height-rule: exactly; + padding: 16px; + border-radius: 80px; + background: $success-green; + } + + img { + max-width: 32px; + width: 32px; + height: 32px; + display: block; + line-height: 100%; + } +} + +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { + body { + min-height: 1024px !important; + } +} |
