diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index a0f099a24fcf7e..1a158750061744 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -232,8 +232,20 @@ export default class StatusContent extends React.PureComponent { const renderReadMore = this.props.onClick && status.get('collapsed'); const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); - const content = { __html: status.get('contentHtml') }; - const spoilerContent = { __html: status.get('spoilerHtml') }; + const htmlContent = htmlPare(status.get('contentHtml')); + htmlContent.querySelectorAll('.hashtag').forEach((e)=>{ + console.log(e.innerHTML); + e.set_content(e.innerHTML.replace('#', '#')); + }) + const content = { __html: htmlContent.toString() }; + + const htmlSpoilerContent = htmlPare(status.get('spoilerHtml')); + htmlSpoilerContent.querySelectorAll('.hashtag').forEach((e)=>{ + console.log(e.innerHTML); + e.set_content(e.innerHTML.replace('#', '#')); + }) + const spoilerContent = { __html: htmlSpoilerContent.toString() }; + const directionStyle = { direction: 'ltr' }; const classNames = classnames('status__content', { 'status__content--with-action': this.props.onClick && this.context.router, diff --git a/app/javascript/mastodon/features/compose/components/content_type_dropdown.js b/app/javascript/mastodon/features/compose/components/content_type_dropdown.js index 842c7a5dad0d13..32a716cf528bbb 100644 --- a/app/javascript/mastodon/features/compose/components/content_type_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/content_type_dropdown.js @@ -227,7 +227,7 @@ class ContentTypeDropdown extends React.PureComponent { const { intl: { formatMessage } } = this.props; this.options = [ - { icon: 'pen-nib:fas', value: 'text/plain', text: formatMessage(messages.plain), meta: null }, + { icon: 'feather:fas', value: 'text/plain', text: formatMessage(messages.plain), meta: null }, { icon: 'markdown:fab', value: 'text/markdown', text: formatMessage(messages.markdown), meta: null }, ]; } diff --git a/app/javascript/mastodon/features/compose/components/cw_mark_button.js b/app/javascript/mastodon/features/compose/components/cw_mark_button.js new file mode 100644 index 00000000000000..49d80ff6057f2b --- /dev/null +++ b/app/javascript/mastodon/features/compose/components/cw_mark_button.js @@ -0,0 +1,55 @@ +/** + * This file substitude `text_icon_button.js` + * @ mashiro + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import IconButton from '../../../components/icon_button'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' }, + unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' }, +}); + +const iconStyle = { + height: null, + lineHeight: '27px', +}; + +export default +@injectIntl +class CwMarkIconButton extends React.PureComponent { + + static propTypes = { + active: PropTypes.bool, + onClick: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + disabled: PropTypes.bool, + }; + + handleClick = (e) => { + e.preventDefault(); + this.props.onClick(); + } + + render () { + const { intl, disabled, active } = this.props; + + return ( +
+ +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js index 0b9dc8df3bcff2..d8063630aa2048 100644 --- a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; -import TextIconButton from '../components/text_icon_button'; +// import TextIconButton from '../components/text_icon_button'; +import CwMarkIconButton from '../components/cw_mark_button'; import { changeComposeSpoilerness } from '../../../actions/compose'; import { injectIntl, defineMessages } from 'react-intl'; @@ -23,4 +24,5 @@ const mapDispatchToProps = dispatch => ({ }); -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton)); +// export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton)); +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CwMarkIconButton)); \ No newline at end of file diff --git a/app/javascript/styles/transparent/neon-city.scss b/app/javascript/styles/transparent/neon-city.scss index eb96d3680778ea..08b9b62ec81685 100644 --- a/app/javascript/styles/transparent/neon-city.scss +++ b/app/javascript/styles/transparent/neon-city.scss @@ -14,43 +14,43 @@ /* Don't show outline around statuses if we're in * mouse or touch mode (rather than keyboard) */ - [data-whatinput="mouse"], - [data-whatinput="touch"] { - - .status__content:focus, - .status:focus, - .status__wrapper:focus, - .status__content__text:focus { - outline: none; - } - } - - /* Less emphatic show more */ - // .status__content__read-more-button { - // font-size: 14px; - // color: $dark-text-color; - - // .status__prepend-icon { - // padding-right: 4px; - // } - // } - - /* Show a little arrowey thing after the time in a +[data-whatinput="mouse"], +[data-whatinput="touch"] { + + .status__content:focus, + .status:focus, + .status__wrapper:focus, + .status__content__text:focus { + outline: none; + } +} + +/* Less emphatic show more */ +// .status__content__read-more-button { +// font-size: 14px; +// color: $dark-text-color; + +// .status__prepend-icon { +// padding-right: 4px; +// } +// } + +/* Show a little arrowey thing after the time in a * status to signal that you can click it to see * a detailed view */ - // .status time:after, - // .detailed-status__datetime span:after { - // font: normal normal normal 14px/1 'Font Awesome 5 Pro'; - // content: "\00a0\00a0\f08e"; - // } - - /* Don't display the elephant mascot (we have our +// .status time:after, +// .detailed-status__datetime span:after { +// font: normal normal normal 14px/1 'Font Awesome 5 Pro'; +// content: "\00a0\00a0\f08e"; +// } + +/* Don't display the elephant mascot (we have our * own, thanks) */ - /*.drawer__inner__mastodon { +/*.drawer__inner__mastodon { display: none; } */ - - /* Let the compose area/drawer be short, but + +/* Let the compose area/drawer be short, but * expand if necessary .drawer .drawer__inner { overflow: visible; @@ -60,91 +60,91 @@ .drawer__pager { overflow-y:auto; } */ - - /* Put a reasonable background on the single-column compose form */ - .layout-single-column .compose-panel { - height: auto; - overflow-y: visible; - margin-top: 65px; - } - - /* Better distinguish the search bar */ - .layout-single-column .compose-panel .search { - position: relative; - top: -55px; - margin-bottom: -55px; - } - - /* Use display: none instead of visibility:hidden + +/* Put a reasonable background on the single-column compose form */ +.layout-single-column .compose-panel { + height: auto; + overflow-y: visible; + margin-top: 65px; +} + +/* Better distinguish the search bar */ +.layout-single-column .compose-panel .search { + position: relative; + top: -55px; + margin-bottom: -55px; +} + +/* Use display: none instead of visibility:hidden * to hide the suggested follows list on non-mobile */ - @media screen and (min-width: 630px) { - .search-results .trends { - display: none; - } - } - - @keyframes floating { - from { - transform: translate(0, 0); - } - - 65% { - transform: translate(0, 4px); - } - - to { - transform: translate(0, -0); - } - } - - .about-body .mascot { - display: none; - } - - .muted { - - .status__content p, - .status__content a { - color: lighten($ui-base-color, 35%); - } - - .status__display-name strong { - color: lighten($ui-base-color, 35%); - } - } - - .compose-form__buttons button.active:last-child { - color: $ui-secondary-color; - background-color: $ui-highlight-color; - border-radius: 3px; - } - - .screenshot-with-signup { - min-height: 300px; - } - - .container.hero .closed-registrations-message .clock { - font-size: 150%; - margin: 1em auto; - } - - .actions .button.button-alternative { - background: $ui-highlight-color; - color: $ui-primary-color; - - &:active, - &:focus, - &:hover { - background-color: lighten($ui-highlight-color, 4%); - } - } - - @media screen and (max-width: 1280px) { - .landing-page .container.links { - top: -15px; - } - } - +@media screen and (min-width: 630px) { + .search-results .trends { + display: none; + } +} + +@keyframes floating { + from { + transform: translate(0, 0); + } + + 65% { + transform: translate(0, 4px); + } + + to { + transform: translate(0, -0); + } +} + +.about-body .mascot { + display: none; +} + +.muted { + + .status__content p, + .status__content a { + color: lighten($ui-base-color, 35%); + } + + .status__display-name strong { + color: lighten($ui-base-color, 35%); + } +} + +.compose-form__buttons button.active:last-child { + color: $ui-secondary-color; + background-color: $ui-highlight-color; + border-radius: 3px; +} + +.screenshot-with-signup { + min-height: 300px; +} + +.container.hero .closed-registrations-message .clock { + font-size: 150%; + margin: 1em auto; +} + +.actions .button.button-alternative { + background: $ui-highlight-color; + color: $ui-primary-color; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-highlight-color, 4%); + } +} + +@media screen and (max-width: 1280px) { + .landing-page .container.links { + top: -15px; + } +} + // .landing-page.alternative .header { // background-image: url('../images/transparent/header-cybre-colour.jpg'); // background-repeat: repeat-x; @@ -154,371 +154,379 @@ // position: absolute; // z-index: 1; // text-align: center; - + // display: unset !important; // } - - .landing-page.alternative .header img { - margin: auto; - max-height: 45vh; - } - - - .landing-page.alternative .grid { - position: relative; - z-index: 2; - margin-top: 15vh; - } - - .landing-page.alternative .landing-page__hero img { - visibility: hidden; - max-height: 170px; - } - - .landing-page.alternative .landing-page__forms { - height: auto; - } - - .landing-page.alternative .column-1 { - display: flex; - align-items: flex-end; - } - - .landing-page.alternative .column { - max-height: initial; - } - - .landing-page.alternative .row__mascot { - .floats { - position: absolute; - - img { - width: 100%; - height: 100%; - } - - transition: all 0.1s linear; - animation-name: floating; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; - } - - .float-1 { - width: 50px; - height: 50px; - bottom: 60px; - left: 110px; - animation-duration: 3s; - } - - .float-2 { - width: 130px; - height: 130px; - left: 85px; - bottom: -60px; - animation-duration: 3.5s; - animation-delay: 0.2s; - } - - .float-3 { - width: 100px; - height: 100px; - right: 50; - top: -10px; - animation-duration: 4s; - animation-delay: 0.5s; - } - } - - .public-layout { - - .header, - .table-of-contents, - .landing-page__call-to-action, - .nothing-here, - .contact-widget, - .box-widget, - .hero-widget__text, - .trends-widget, - .endorsements-widget, - .placeholder-widget, - .public-account-header, - .public-account-bio, - .footer { - // background: $ui-base-color; - background: $transparent-light; - } - - .contact-widget, - .trends-widget, - .public-account-header, - .footer { - border-radius: 4px; - } - - .footer { - padding: 25px 40px; - margin: 10px 0; - } - } - - .activity-stream { - .status.light { - .status__header .status__meta .status__relative-time { - color: $ui-primary-color-alt; - } - - .display-name span { - color: $ui-primary-color-alt; - } - - .status__content { - a.status__content__spoiler-link { - background: $ui-primary-color-alt; - - &:hover { - background: lighten($ui-primary-color-alt, 8%); - } - } - } - } - - .detailed-status.light { - .detailed-status__display-name .display-name span { - color: $ui-primary-color-alt; - } - - .status__content a.status__content__spoiler-link { - background: $ui-primary-color-alt; - - &:hover { - background: lighten($ui-primary-color-alt, 8%); - } - } - - .detailed-status__meta { - color: $ui-primary-color-alt; - } - } - - .media-spoiler { - background: $ui-primary-color-alt; - - &:hover { - background: darken($ui-primary-color-alt, 5%); - } - } - - .pre-header { - color: $ui-primary-color-alt; - - .status__display-name.muted strong { - color: $ui-primary-color-alt; - } - } - } - - .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button { - color: $ui-primary-color-alt; - - svg { - path:first-child { - fill: $ui-primary-color-alt; - } - } - - &:active, - &:focus, - &:hover { - svg path:first-child { - fill: lighten($ui-primary-color-alt, 4%); - } - } - } - - .emoji-mart-search { - background: $simple-background-color; - - input { - color: $ui-primary-color-alt; - border: 1px solid $ui-primary-color-alt; - } - } - - .emoji-mart-anchor { - color: $ui-primary-color-alt; - - &:hover { - color: darken($ui-primary-color-alt, 8%); - } - } - - .search-popout { - background: $ui-base-color; - color: $ui-primary-color; - - h4 { - color: $ui-primary-color; - } - - em { - color: $ui-highlight-color; - } - } - - /* customize color and opacity */ - .status__content a, - .status__content a.unhandled-link, - .hashtag, - .u-url.status-link:not(.unhandled-link) { - color: $ui-link-text-color; - background: $link-background-color; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; - } - - .muted .status__content a { - border-color: $ui-highlight-color; - } - - .status__content { - color: lighten($ui-primary-color, 6%); - } - - .status__display-name strong { - color: lighten($ui-primary-color, 15%); - } - - .column>.scrollable { - background-color: $transparent-light; - } - - .drawer__inner, - .drawer__inner__mastodon { - opacity: 0.8; - } - - body, - .landing-page, - .public-layout { - background-image: $background-image; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - } - - .layout-single-column .navigation-panel { - //background-color: $ui-highlight-color; - opacity: 0.8; - height: auto; - - .column-link { - background: lighten($ui-base-color, 5%); - color: $white; - - &:hover { - background: lighten($ui-base-color, 10%); - } - - &.active { - background: darken($ui-base-color, 5%); - } - } - - hr { - display: none; - } - } - - .getting-started { - opacity: 0.8; - - .column-link { - background: lighten($ui-base-color, 5%); - color: $white; - - &:hover { - background: lighten($ui-base-color, 10%); - } - } - } - - .landing__grid { - opacity: 0.9; - } - - .activity-stream .entry { - background-color: $transparent-light; - } - - .account__section-headline { - background-color: $transparent-dark; - } - - .notification__filter-bar, - .account__section-headline { - background: $transparent-dark; - } - - .notification__filter-bar button, - .account__section-headline button { - background: $transparent-dark; - } - - .notification__filter-bar button.active::after, - .notification__filter-bar a.active::after, - .account__section-headline button.active::after, - .account__section-headline a.active::after { - border-color: transparent transparent $transparent-light; - } - - - .search__input { - background: $transparent-light; - } - - .empty-column-indicator, - .error-column, - .follow_requests-unlocked_explanation { - background: transparent; - } - - .detailed-status, - .detailed-status__action-bar { - background: transparent; - } - - .simple_form .label_input__append:after { - background-image: linear-gradient(90deg, rgba(2, 2, 2, 0), transparent); - } - - .highlight { - background: rgba(45, 45, 45, .5); - } - - pre.highlight>code { - background-color: rgba(45, 45, 45, .5); - } - - .column-subheading { - color: $white; - } - - .getting-started__footer p { - color: $ui-secondary-color; - - a { - color: $ui-secondary-color; - } - } - - .drawer__tab, - .navigation-bar__profile-account, - .navigation-bar__profile-edit { - color: $white !important; - } \ No newline at end of file + +.landing-page.alternative .header img { + margin: auto; + max-height: 45vh; +} + + +.landing-page.alternative .grid { + position: relative; + z-index: 2; + margin-top: 15vh; +} + +.landing-page.alternative .landing-page__hero img { + visibility: hidden; + max-height: 170px; +} + +.landing-page.alternative .landing-page__forms { + height: auto; +} + +.landing-page.alternative .column-1 { + display: flex; + align-items: flex-end; +} + +.landing-page.alternative .column { + max-height: initial; +} + +.landing-page.alternative .row__mascot { + .floats { + position: absolute; + + img { + width: 100%; + height: 100%; + } + + transition: all 0.1s linear; + animation-name: floating; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; + } + + .float-1 { + width: 50px; + height: 50px; + bottom: 60px; + left: 110px; + animation-duration: 3s; + } + + .float-2 { + width: 130px; + height: 130px; + left: 85px; + bottom: -60px; + animation-duration: 3.5s; + animation-delay: 0.2s; + } + + .float-3 { + width: 100px; + height: 100px; + right: 50; + top: -10px; + animation-duration: 4s; + animation-delay: 0.5s; + } +} + +.public-layout { + + .header, + .table-of-contents, + .landing-page__call-to-action, + .nothing-here, + .contact-widget, + .box-widget, + .hero-widget__text, + .trends-widget, + .endorsements-widget, + .placeholder-widget, + .public-account-header, + .public-account-bio, + .footer { + // background: $ui-base-color; + background: $transparent-light; + } + + .contact-widget, + .trends-widget, + .endorsements-widget, + .public-account-header, + .footer { + border-radius: 4px; + } + + .footer { + padding: 25px 40px; + margin: 10px 0; + } +} + +.activity-stream { + .status.light { + .status__header .status__meta .status__relative-time { + color: $ui-primary-color-alt; + } + + .display-name span { + color: $ui-primary-color-alt; + } + + .status__content { + a.status__content__spoiler-link { + background: $ui-primary-color-alt; + + &:hover { + background: lighten($ui-primary-color-alt, 8%); + } + } + } + } + + .detailed-status.light { + .detailed-status__display-name .display-name span { + color: $ui-primary-color-alt; + } + + .status__content a.status__content__spoiler-link { + background: $ui-primary-color-alt; + + &:hover { + background: lighten($ui-primary-color-alt, 8%); + } + } + + .detailed-status__meta { + color: $ui-primary-color-alt; + } + } + + .media-spoiler { + background: $ui-primary-color-alt; + + &:hover { + background: darken($ui-primary-color-alt, 5%); + } + } + + .pre-header { + color: $ui-primary-color-alt; + + .status__display-name.muted strong { + color: $ui-primary-color-alt; + } + } +} + +.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button { + color: $ui-primary-color-alt; + + svg { + path:first-child { + fill: $ui-primary-color-alt; + } + } + + &:active, + &:focus, + &:hover { + svg path:first-child { + fill: lighten($ui-primary-color-alt, 4%); + } + } +} + +.emoji-mart-search { + background: $simple-background-color; + + input { + color: $ui-primary-color-alt; + border: 1px solid $ui-primary-color-alt; + } +} + +.emoji-mart-anchor { + color: $ui-primary-color-alt; + + &:hover { + color: darken($ui-primary-color-alt, 8%); + } +} + +.search-popout { + background: $ui-base-color; + color: $ui-primary-color; + + h4 { + color: $ui-primary-color; + } + + em { + color: $ui-highlight-color; + } +} + +/* customize color and opacity */ +.status__content a, +.status__content a.unhandled-link, +.hashtag, +.u-url.status-link:not(.unhandled-link) { + color: $ui-link-text-color; + background: $link-background-color; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} + +.muted .status__content a { + border-color: $ui-highlight-color; +} + +.status__content { + color: lighten($ui-primary-color, 6%); +} + +.status__display-name strong { + color: lighten($ui-primary-color, 15%); +} + +.column>.scrollable { + background-color: $transparent-light; +} + +.drawer__inner, +.drawer__inner__mastodon { + opacity: 0.8; +} + +body, +.landing-page, +.public-layout { + background-image: $background-image; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +.layout-single-column .navigation-panel { + //background-color: $ui-highlight-color; + opacity: 0.8; + height: auto; + + .column-link { + background: lighten($ui-base-color, 5%); + color: $white; + + &:hover { + background: lighten($ui-base-color, 10%); + } + + &.active { + background: darken($ui-base-color, 5%); + } + } + + hr { + display: none; + } +} + +.getting-started { + opacity: 0.8; + height: 100%; + + .column-link { + background: lighten($ui-base-color, 5%); + color: $white; + + &:hover { + background: lighten($ui-base-color, 10%); + } + } +} + +.landing__grid { + opacity: 0.9; +} + +.activity-stream .entry { + background-color: $transparent-light; +} + +.account__section-headline { + background-color: $transparent-dark; +} + +.notification__filter-bar, +.account__section-headline { + background: $transparent-dark; +} + +.notification__filter-bar button, +.account__section-headline button { + background: $transparent-dark; +} + +.notification__filter-bar button.active::after, +.notification__filter-bar a.active::after, +.account__section-headline button.active::after, +.account__section-headline a.active::after { + border-color: transparent transparent $transparent-light; +} + + +.search__input { + background: $transparent-light; +} + +.empty-column-indicator, +.error-column, +.follow_requests-unlocked_explanation { + background: transparent; +} + +.detailed-status, +.detailed-status__action-bar { + background: transparent; +} + +.columns-area__panels__pane__inner .compose-panel { + background: $transparent-dark; +} + +/*fix login form*/ +.simple_form .label_input__append:after { + background-image: linear-gradient(90deg, rgba(2, 2, 2, 0), transparent); +} + +/*code block*/ +.highlight { + background: rgba(45, 45, 45, .5); +} + +pre.highlight>code { + background-color: rgba(45, 45, 45, .5); +} + +.column-subheading { + color: $white; +} + +.getting-started__footer p { + color: $ui-secondary-color; + + a { + color: $ui-secondary-color; + } +} + +.drawer__tab, +.navigation-bar__profile-account, +.navigation-bar__profile-edit { + color: $white !important; +} \ No newline at end of file diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb index 0a3675a81cfeb0..f219a22f2e47a3 100644 --- a/app/lib/formatter.rb +++ b/app/lib/formatter.rb @@ -330,8 +330,8 @@ def link_html(url) end def hashtag_html(tag) - # "##{encode(tag)}" - "##{encode(tag)}" + "##{encode(tag)}" + # "##{encode(tag)}" end def mention_html(account)