Show toggle

Author: nattsw

assets/javascripts/discourse/components/show-original-content.gjs

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import { tracked } from "@glimmer/tracking";
+
+export default class ShowOriginalContent extends Component {
+  @service router;
+  @tracked active = true;
+
+  constructor() {
+    super(...arguments);
+    this.active = !new URLSearchParams(window.location.search).has("show_original");
+  }
+
+  @action
+  async showOriginal() {
+    this.active = !this.active;
+    window.location.search = this.active ? "" : `show_original=1`;
+  }
+
+  get title() {
+    return this.active
+      ? "translator.hide_translation"
+      : "translator.show_translation";
+  }
+
+  <template>
+    <div class="discourse-translator_toggle-original">
+      <DButton
+        @icon="language"
+        @title={{this.title}}
+        class={{concatClass "btn btn-default" (if this.active "active")}}
+        @action={{this.showOriginal}}
+      >
+      </DButton>
+    </div>
+  </template>
+}

assets/javascripts/discourse/initializers/extend-for-translate-button.js

@@ -6,6 +6,7 @@ import { i18n } from "discourse-i18n";
 import LanguageSwitcher from "../components/language-switcher";
 import ToggleTranslationButton from "../components/post-menu/toggle-translation-button";
 import TranslatedPost from "../components/translated-post";
+import ShowOriginalContent from "../components/show-original-content";
 
 function initializeTranslation(api) {
   const siteSettings = api.container.lookup("service:site-settings");
@@ -23,7 +24,9 @@ function initializeTranslation(api) {
     );
   }
 
-  if (currentUser) {
+  if (siteSettings.experimental_topic_translation) {
+    api.renderInOutlet("timeline-controls-before", ShowOriginalContent);
+  } else {
     customizePostMenu(api);
   }
 }

assets/stylesheets/common/common.scss

@@ -2,3 +2,15 @@
   .fk-d-menu__inner-content {
   max-height: 50vh;
 }
+
+.timeline-controls {
+  display: flex;
+
+  .discourse-translator_toggle-original {
+    margin-right: 0.5em;
+
+    button.active svg {
+      color: var(--tertiary);
+    }
+  }
+}

plugin.rb

@@ -55,7 +55,7 @@ module ::DiscourseTranslator
 
   add_to_serializer :post, :cooked, false do
     return super() if !SiteSetting.experimental_topic_translation
-    return super() if scope.request.params["show-original"].present?
+    return super() if scope.request.params["show_original"].present?
     return super() if !object.has_translation?(I18n.locale)
     translated = object.custom_fields[::DiscourseTranslator::TRANSLATED_CUSTOM_FIELD]
     translated[I18n.locale]