Merge pull request #945 from Retrospring/feature/formatting-help

Add formatting help

app/assets/stylesheets/_utilities.scss

@@ -6,6 +6,10 @@
   font-size: 10em;
 }
 
+.fs-7 {
+  font-size: .8rem;
+}
+
 .pe-none {
   pointer-events: none;
 }

app/assets/stylesheets/application.sass.scss

@@ -80,6 +80,7 @@ $unicodeRangeValues in Lexend.$unicodeMap {
 "overrides/minicolors",
 "overrides/modal",
 "overrides/navbar",
+"overrides/popover",
 "overrides/turbolinks",
 "overrides/toasts",
 "overrides/sweet-alert";

app/assets/stylesheets/components/_inbox-entry.scss

@@ -1,4 +1,6 @@
 .inbox-entry {
+  $this: &;
+
   &--new {
     box-shadow: 0 0.125rem 0.25rem var(--primary);
 
@@ -19,4 +21,13 @@
       }
     }
   }
+
+  .format-help {
+    opacity: .3;
+  }
+
+  &:focus-within .format-help,
+  &:hover .format-help {
+    opacity: 1;
+  }
 }

app/assets/stylesheets/overrides/_popover.scss

@@ -0,0 +1,13 @@
+.popover {
+  box-shadow: $box-shadow;
+  background-color: var(--raised-bg);
+}
+
+.rs-popover {
+  --popover-arrow-border: transparent;
+  --popover-border-color: transparent;
+}
+
+.popover-body p:last-child {
+  margin-bottom: 0;
+}

app/javascript/retrospring/controllers/format_popup_controller.ts

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+import { Popover } from 'bootstrap';
+
+export default class extends Controller {
+  connect(): void {
+    const formatOptionsElement = document.getElementById('formatting-options');
+
+    this.element.addEventListener('click', e => e.preventDefault());
+
+    new Popover(this.element, {
+      html: true,
+      content: formatOptionsElement.innerHTML,
+      placement: 'bottom',
+      trigger: 'focus',
+      customClass: 'rs-popover'
+    })
+  }
+}

app/javascript/retrospring/initializers/stimulus.ts

@@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus";
 import AnnouncementController from "retrospring/controllers/announcement_controller";
 import AutofocusController from "retrospring/controllers/autofocus_controller";
 import CharacterCountController from "retrospring/controllers/character_count_controller";
+import FormatPopupController from "retrospring/controllers/format_popup_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -15,4 +16,5 @@ export default function (): void {
   window['Stimulus'].register('announcement', AnnouncementController);
   window['Stimulus'].register('autofocus', AutofocusController);
   window['Stimulus'].register('character-count', CharacterCountController);
+  window['Stimulus'].register('format-popup', FormatPopupController);
 }

app/views/inbox/_entry.html.haml

@@ -23,15 +23,17 @@
             = render "actions/question", question: i.question
   - if current_user == i.user
     .card-body
-      %textarea.form-control{ name: "ib-answer", placeholder: t(".placeholder"), data: { id: i.id } }
-      %br/
-      %button.btn.btn-success{ name: "ib-answer", data: { ib_id: i.id } }
-        = t("voc.answer")
-      %button.btn.btn-danger{ name: "ib-destroy", data: { ib_id: i.id } }
-        = t("voc.delete")
-      %button.btn.btn-default{ name: "ib-options", data: { ib_id: i.id, state: :hidden } }
-        %i.fa.fa-chevron-down
-        %span.pe-none= t(".options")
+      %textarea.form-control.mb-3{ name: "ib-answer", placeholder: t(".placeholder"), data: { id: i.id } }
+      .d-sm-flex
+        %button.btn.btn-success.me-sm-1{ name: "ib-answer", data: { ib_id: i.id } }
+          = t("voc.answer")
+        %button.btn.btn-danger.me-sm-1{ name: "ib-destroy", data: { ib_id: i.id } }
+          = t("voc.delete")
+        %button.btn.btn-default.px-1{ name: "ib-options", data: { ib_id: i.id, state: :hidden } }
+          %i.fa.fa-chevron-down
+          %span.pe-none= t(".options")
+        %p.format-help.ms-auto.align-self-center.mt-2.mt-sm-0.text-center
+          = render "shared/format_link"
     .card-footer.d-none{ id: "ib-options-#{i.id}" }
       %h4= t(".sharing.heading")
       - if current_user.services.count.positive?

app/views/layouts/base.html.haml

@@ -30,6 +30,7 @@
       = render 'navigation/guest'
     = render 'shared/announcements'
     = yield
+    = render "shared/formatting"
     - if Rails.env.development?
       #debug
         %hr

app/views/shared/_format_link.html.haml

@@ -0,0 +1,3 @@
+%a.text-muted.text-decoration-none.fs-7{ href: "#", data: { controller: "format-popup" }, tabindex: "0" }
+  %i.fab.fa-markdown
+  = t("voc.format_markdown")

app/views/shared/_formatting.html.haml

@@ -0,0 +1,2 @@
+#formatting-options.d-none{ aria: { hidden: true } }
+  = t(".body_html", app_name: APP_CONFIG["site_name"])

config/locales/views.en.yml

@@ -550,6 +550,13 @@ en:
       unsubscribe_all: "Disable on all devices"
       description: "Here you can set up or disable push notifications for new questions in your inbox."
   shared:
+    formatting:
+      body_html: |
+        <p>%{app_name} uses <b>Markdown</b> for formatting</p>
+        <p>A blank line starts a new paragraph</p>
+        <p><code>*italic text*</code> for <i>italic text</i></p>
+        <p><code>**bold text**</code> for <b>bold text</b></p>
+        <p><code>[link](https://example.com)</code> for <a href="https://example.com">link</a></p>
     links:
       about: "About"
       source: "Source code"

config/locales/voc.en.yml

@@ -10,6 +10,7 @@ en:
     delete: "Delete"
     edit: "Edit"
     follow: "Follow"
+    format_markdown: "Styling with Markdown is supported"
     load: "Load more"
     login: "Sign in"
     logout: "Sign out"