reimplement monsterpit bbcode and markdown extensions on top of new glitch-soc formatting system + bbcode feature parity + new `i:am` footer + set content type from `format` bangtag

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;
+		}
+	}
+}