diff options
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/options.js | 30 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/bbcode.scss | 56 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/index.scss | 2 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/monsterpit.scss | 80 | ||||
| -rw-r--r-- | app/javascript/styles/application.scss | 2 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/bbcode.scss | 56 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/monsterpit.scss | 74 |
7 files changed, 295 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index 0c94f5514..46b32b4a3 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -25,6 +25,14 @@ const messages = defineMessages({ defaultMessage: 'Attach...', id: 'compose.attach', }, + bbcode: { + defaultMessage: 'BBCode', + id: 'compose.content-type.bbcode', + }, + bbdown: { + defaultMessage: 'BBdown', + id: 'compose.content-type.bbdown', + }, change_privacy: { defaultMessage: 'Adjust status privacy', id: 'privacy.change', @@ -232,7 +240,7 @@ class ComposerOptions extends ImmutablePureComponent { const contentTypeItems = { plain: { - icon: 'align-left', + icon: 'file-text', name: 'text/plain', text: <FormattedMessage {...messages.plain} />, }, @@ -242,10 +250,20 @@ class ComposerOptions extends ImmutablePureComponent { text: <FormattedMessage {...messages.html} />, }, markdown: { - icon: 'arrow-circle-down', + icon: 'hashtag', name: 'text/markdown', text: <FormattedMessage {...messages.markdown} />, }, + xbbcode: { + icon: 'thumb-tack', + name: 'text/x-bbcode', + text: <FormattedMessage {...messages.bbcode} />, + }, + xbbcodemarkdown: { + icon: 'arrow-circle-down', + name: 'text/x-bbcode+markdown', + text: <FormattedMessage {...messages.bbdown} />, + }, }; // The result. @@ -315,11 +333,13 @@ class ComposerOptions extends ImmutablePureComponent { {showContentTypeChoice && ( <Dropdown disabled={disabled} - icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon} + icon={(contentTypeItems[contentType.split('/')[1].replace(/[+-]/g, '')] || {}).icon} items={[ - contentTypeItems.plain, - contentTypeItems.html, + contentTypeItems.xbbcodemarkdown, contentTypeItems.markdown, + contentTypeItems.xbbcode, + contentTypeItems.html, + contentTypeItems.plain, ]} onChange={onChangeContentType} onModalClose={onModalClose} diff --git a/app/javascript/flavours/glitch/styles/bbcode.scss b/app/javascript/flavours/glitch/styles/bbcode.scss new file mode 100644 index 000000000..80b2aa57b --- /dev/null +++ b/app/javascript/flavours/glitch/styles/bbcode.scss @@ -0,0 +1,56 @@ +/* +// Original: +// https://github.com/computerfairies/mastodon/blob/master/app/javascript/styles/mastodon/bbcode.scss +*/ + +.bbcode { + &__flip-horizontal { + display: inline-block; + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); + } + + &__flip-vertical { + display: inline-block; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); + } + + @for $i from 1 through 6 { + &__size-#{$i} { + font-size: #{6 * $i}px; + + & .emojione { + width: #{6 * $i}px !important; + height: #{6 * $i}px !important; + } + + & .hoverplay { + padding-left: #{6 * $i}px !important; + } + } + } + + @for $i from 1 through 2 { + &__size-#{$i}:hover { + font-size: 12px; + } + } + + &__left { display: block; text-align: left; } + &__center { display: block; text-align: center; } + &__right { display: block; text-align: right; } + &__lfloat { float: left; } + &__rfloat { float: right; } + &__spoiler-wrapper { + background: black; + color: black; + padding: 1px 2em 1px 2em; + } + &__spoiler { color: black; visibility: hidden; } + &__spoiler-wrapper:hover > &__spoiler, + &__spoiler-wrapper:active > &__spoiler + { color: white; visibility: visible; } +} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index e1c25ac0d..90152c65c 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -24,3 +24,5 @@ @import 'accessibility'; @import 'rtl'; @import 'dashboard'; +@import 'bbcode'; +@import 'monsterpit'; diff --git a/app/javascript/flavours/glitch/styles/monsterpit.scss b/app/javascript/flavours/glitch/styles/monsterpit.scss new file mode 100644 index 000000000..7dccd81a4 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/monsterpit.scss @@ -0,0 +1,80 @@ +.status__content__text, +.reply-indicator__content, +.composer--reply > .content, +.account__header__content, +{ + s { text-decoration: line-through; } + del { text-decoration: line-through; } + h6 { font-size: 8px; font-weight: bold; } + hr { border-color: lighten($dark-text-color, 10%); } + sub { + vertical-align: sub; + font-size: smaller; + } + sup { + vertical-align: super; + font-size: smaller; + } + pre, code { + color: lighten($dark-text-color, 33%); + } + mark { + background-color: #ccff15; + color: black; + } + blockquote { + font-style: italic; + } + .caption { + display: block; + margin: auto; + font-size: 12px !important; + padding-top: 0; + text-align: center; + max-width: 80%; + } + .caption-hidden { + display: none; + } + p.signature { + color: lighten($dark-text-color, 20%); + font-style: italic; + font-size: 12px; + text-align: right; + } +} + +div.media-caption { + p { + font-size: 12px !important; + margin-bottom: 0; + text-align: center; + } + a { + color: $secondary-text-color; + text-decoration: none; + font-weight: bold; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .fa { + color: $dark-text-color; + } + } +} diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 6db3bc3dc..fe3edca47 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -26,3 +26,5 @@ @import 'mastodon/dashboard'; @import 'mastodon/rtl'; @import 'mastodon/accessibility'; +@import 'mastodon/bbcode'; +@import 'mastodon/monsterpit'; diff --git a/app/javascript/styles/mastodon/bbcode.scss b/app/javascript/styles/mastodon/bbcode.scss new file mode 100644 index 000000000..80b2aa57b --- /dev/null +++ b/app/javascript/styles/mastodon/bbcode.scss @@ -0,0 +1,56 @@ +/* +// Original: +// https://github.com/computerfairies/mastodon/blob/master/app/javascript/styles/mastodon/bbcode.scss +*/ + +.bbcode { + &__flip-horizontal { + display: inline-block; + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); + } + + &__flip-vertical { + display: inline-block; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); + } + + @for $i from 1 through 6 { + &__size-#{$i} { + font-size: #{6 * $i}px; + + & .emojione { + width: #{6 * $i}px !important; + height: #{6 * $i}px !important; + } + + & .hoverplay { + padding-left: #{6 * $i}px !important; + } + } + } + + @for $i from 1 through 2 { + &__size-#{$i}:hover { + font-size: 12px; + } + } + + &__left { display: block; text-align: left; } + &__center { display: block; text-align: center; } + &__right { display: block; text-align: right; } + &__lfloat { float: left; } + &__rfloat { float: right; } + &__spoiler-wrapper { + background: black; + color: black; + padding: 1px 2em 1px 2em; + } + &__spoiler { color: black; visibility: hidden; } + &__spoiler-wrapper:hover > &__spoiler, + &__spoiler-wrapper:active > &__spoiler + { color: white; visibility: visible; } +} diff --git a/app/javascript/styles/mastodon/monsterpit.scss b/app/javascript/styles/mastodon/monsterpit.scss new file mode 100644 index 000000000..98d7450ec --- /dev/null +++ b/app/javascript/styles/mastodon/monsterpit.scss @@ -0,0 +1,74 @@ +.status__content__text, +.reply-indicator__content, +.composer--reply > .content, +.account__header__content, +{ + s { text-decoration: line-through; } + del { text-decoration: line-through; } + h6 { font-size: 8px; font-weight: bold; } + hr { border-color: lighten($dark-text-color, 10%); } + sub { + vertical-align: sub; + font-size: smaller; + } + sup { + vertical-align: super; + font-size: smaller; + } + pre, code { + color: lighten($dark-text-color, 33%); + } + mark { + background-color: #ccff15; + color: black; + } + blockquote { + font-style: italic; + } + .caption { + display: block; + margin: auto; + font-size: 12px !important; + padding-top: 0; + text-align: center; + max-width: 80%; + } + .caption-hidden { + display: none; + } +} + +div.media-caption { + p { + font-size: 12px !important; + margin-bottom: 0; + text-align: center; + } + a { + color: $secondary-text-color; + text-decoration: none; + font-weight: bold; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .fa { + color: $dark-text-color; + } + } +} |