message_train 0.7.5 → 1.0.0

data/app/assets/stylesheets/message_train.scss

@@ -1,11 +1,66 @@
-@import 'tokenfield-typeahead';
-@import 'bootstrap-tokenfield';
+// Design tokens. Custom properties are global by nature (unlike a scoped
+// class), so names are prefixed the same way message-train-* classes are -
+// a host app's own --space-sm shouldn't silently collide with ours.
+:root {
+  // Type scale (TYPOGRAPHY.md): base 1rem, 1.25 ratio, one deliberate
+  // exception below base (0.875rem lands on a clean 14px; strict ratio
+  // math would give 0.8rem).
+  --message-train-fs-sm: 0.875rem;
+  --message-train-fs-base: 1rem;
+  --message-train-fs-lg: 1.25rem;
+  --message-train-fs-xl: 1.563rem;
+  --message-train-fs-2xl: 1.953rem;
 
-img {
+  // Spacing scale (CSS.md): clean multiples/fractions of the type scale's
+  // own base unit, so spacing and type can never drift apart.
+  --message-train-space-3xs: 0.125rem;
+  --message-train-space-xs: 0.25rem;
+  --message-train-space-sm: 0.5rem;
+  --message-train-space-md: 1rem;
+  --message-train-space-lg: 1.5rem;
+  --message-train-space-xl: 2rem;
+  --message-train-space-2xl: 3rem;
+
+  // Color palette
+  --message-train-color-accent: #337ab7;
+  --message-train-color-accent-contrast: #fff;
+  --message-train-color-border: #ccc;
+  --message-train-color-border-subtle: #eee;
+  --message-train-color-surface: #f7f7f7;
+  --message-train-color-surface-hover: #eee;
+  --message-train-color-surface-elevated: #fff;
+  --message-train-color-row-read: #f2f2f2;
+  --message-train-color-row-selected: #fcf8e3;
+  --message-train-color-danger: #d9534f;
+}
+
+.message-train-lightbox-image,
+.message-train-thumbnail {
   max-width: 100%;
 }
 
-.attachment-thumbnails {
+.message-train-icon {
+  display: inline-block;
+  // Icon glyphs are emoji, and different emoji can carry different
+  // built-in line-height metrics depending on the browser/OS font
+  // fallback - left on "normal", that can make two buttons with
+  // otherwise-identical padding/font-size render at different heights
+  // depending purely on which emoji happens to be inside. Pinning it
+  // makes the icon's contribution to line height deterministic.
+  line-height: 1;
+  margin-right: var(--message-train-space-xs);
+}
+
+.message-train-badge {
+  display: inline-block;
+  padding: var(--message-train-space-3xs) var(--message-train-space-sm);
+  border-radius: 1em;
+  background-color: var(--message-train-color-accent);
+  color: var(--message-train-color-accent-contrast);
+  font-size: var(--message-train-fs-sm);
+}
+
+.message-train-attachment-thumbnails {
   text-align: center;
 
   .thumbnail {
@@ -13,11 +68,90 @@ img {
   }
 }
 
+// The thread page's list of individual messages - laid out as a grid so
+// each message reads as its own separated card, with the grid gap itself
+// providing the separation instead of per-card margins.
+.message-train-messages {
+  display: grid;
+  gap: var(--message-train-space-md);
+}
+
+.message-train-message {
+  padding: var(--message-train-space-md);
+  border: 1px solid var(--message-train-color-border);
+  border-radius: var(--message-train-space-xs);
+  background: var(--message-train-color-surface-elevated);
+}
+
 .message-train-conversations {
+  width: 100%;
+  border-collapse: collapse;
+
+  // Mobile-first (RESPONSIVE.md): a real table row is too wide to fit a
+  // narrow screen without horizontal scrolling, so below the breakpoint
+  // each row becomes a small CSS grid "card" instead - sender/subject/
+  // date/etc. wrap onto their own lines within the row's own width
+  // rather than the row extending past the viewport. Real table layout
+  // returns once there's room, at the same breakpoint used elsewhere.
+  tr.message_train_conversation {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'checkbox sender attachment'
+      'checkbox subject subject'
+      'checkbox date actions';
+    align-items: center;
+    column-gap: var(--message-train-space-sm);
+    row-gap: var(--message-train-space-3xs);
+    padding: var(--message-train-space-sm) var(--message-train-space-md);
+    border-bottom: 1px solid var(--message-train-color-border-subtle);
+  }
+
+  td {
+    padding: 0;
+    vertical-align: middle;
+    border-bottom: none;
+  }
+
+  .message-train-conversation-checkbox {
+    grid-area: checkbox;
+  }
+
+  .message-train-conversation-sender {
+    grid-area: sender;
+  }
+
+  .message-train-conversation-subject {
+    grid-area: subject;
+  }
+
+  .message-train-conversation-attachment {
+    grid-area: attachment;
+  }
+
+  .message-train-date-column {
+    grid-area: date;
+  }
+
+  .message-train-conversation-actions {
+    grid-area: actions;
+  }
+
+  @media (min-width: 48rem) {
+    tr.message_train_conversation {
+      display: table-row;
+    }
+
+    td {
+      padding: var(--message-train-space-sm) var(--message-train-space-md);
+      border-bottom: 1px solid var(--message-train-color-border-subtle);
+    }
+  }
+
   a,
   a:link,
   a:visited {
-    color: $text-color;
+    color: inherit;
   }
 
   a:hover {
@@ -25,112 +159,316 @@ img {
   }
 
   input[type='checkbox'] {
-    margin-right: 1em;
+    margin-right: var(--message-train-space-md);
+  }
+
+  // Zebra/tiger striping so adjacent rows stay visually separated even
+  // when they share the same read state (several unread rows in a row
+  // otherwise all render on the same plain background and blend
+  // together). Read/selected below override this per-row regardless of
+  // position - matched specificity (tr.message_train_conversation.___)
+  // plus coming later in the source is what makes that override work.
+  tr.message_train_conversation:nth-child(even) {
+    background-color: var(--message-train-color-surface);
   }
 
   .unread {
     font-weight: bold;
   }
 
-  .read {
-    background-color: rgba($list-group-disabled-bg, .75);
-
-    .flicker.flicker-out {
-      background-color: $list-group-disabled-bg;
-      transition: background-color 1s ease-out;
-    }
+  tr.message_train_conversation.read {
+    background-color: var(--message-train-color-row-read);
   }
 
   .draft {
     font-style: italic;
   }
 
-  .selected,
-  .read.selected {
-    background-color: $state-warning-bg;
-
-    a {
-      color: $state-warning-text;
-    }
+  tr.message_train_conversation.selected,
+  tr.message_train_conversation.read.selected {
+    background-color: var(--message-train-color-row-selected);
   }
+}
 
-  .flicker,
-  .read.flicker,
-  .selected.flicker {
-    background-color: $state-info-bg;
-    transition: background-color .1s ease-in;
-  }
+.message-train-box-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--message-train-space-sm);
+  margin: var(--message-train-space-xl) 0 var(--message-train-space-md);
+}
 
-  .flicker.flicker-out,
-  .unread.flicker.flicker-out {
-    background-color: $list-group-bg;
-    transition: background-color 1s ease-out;
-  }
+.message-train-box-actions-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--message-train-space-md);
 }
 
-.box-actions {
-  margin: 2em 0 1em;
+// Doubled class rather than plain .message-train-button: these render as
+// <a>, <button>, and <input type="submit"> across different call sites,
+// and a host app commonly has its own generic reset for at least one of
+// those tags (e.g. button[type="submit"]) - which sits at the same or a
+// higher specificity tier than a single class, and (since a host app's
+// own stylesheet almost always loads after this one) would silently win
+// that tie. Repeating the class costs nothing and reliably beats a
+// single class-or-attribute-qualified host rule regardless of load
+// order, with no !important needed.
+.message-train-button.message-train-button {
+  // Without this, .message-train-btn-compose's `width: 100%` sizes only
+  // the content box, then adds padding/border on top - overflowing its
+  // container by the padding amount (found while sizing the sidebar
+  // compose button: it rendered ~66px wider than the column it was in).
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  // Pinned rather than "normal" for the same reason as .message-train-icon
+  // below - a button whose only difference from another is which emoji
+  // icon it contains shouldn't end up a different height because that
+  // emoji happens to carry different line-height metrics in some
+  // browser/OS font fallback.
+  line-height: 1.2;
+  padding: var(--message-train-space-sm) var(--message-train-space-md);
+  border: 1px solid var(--message-train-color-border);
+  border-radius: var(--message-train-space-xs);
+  background: var(--message-train-color-surface);
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: var(--message-train-fs-base);
+}
 
-  .check-all button {
-    min-height: 2.5em;
-  }
+.message-train-button.message-train-button:hover {
+  background: var(--message-train-color-surface-hover);
 }
 
-div.conversation-actions {
-  margin: 1em 0;
+.message-train-button--small {
+  padding: var(--message-train-space-xs) var(--message-train-space-sm);
+  font-size: var(--message-train-fs-sm);
 }
 
-td.conversation-actions {
-  white-space: nowrap;
+.message-train-button--large {
+  padding: var(--message-train-space-md) var(--message-train-space-xl);
+  font-size: var(--message-train-fs-lg);
 }
 
-.date-column {
-  white-space: nowrap;
+// Emphasize the primary action in a pair of same-size, same-shape
+// buttons (e.g. Send vs. Save As Draft) with color rather than size, so
+// they read as equally substantial actions and only differ in which one
+// is the recommended path forward.
+.message-train-button--primary {
+  border-color: var(--message-train-color-accent);
+  background: var(--message-train-color-accent);
+  color: var(--message-train-color-accent-contrast);
+}
+
+.message-train-button--primary:hover {
+  background: var(--message-train-color-accent);
+  opacity: 0.9;
+}
+
+// Add/remove attachment - pill-shaped, outline-only, colored by intent
+// (accent for adding, danger for removing) rather than filled, so they
+// read as lightweight row-level actions instead of primary form actions.
+.message-train-button--add-attachment,
+.message-train-button--remove-attachment {
+  border-radius: 999px;
+  background: none;
 }
 
-.glyphicon-thumbnail {
-  font-size: 170px;
+.message-train-button--add-attachment {
+  border-color: var(--message-train-color-accent);
+  color: var(--message-train-color-accent);
 }
 
-.glyphicon.spinning {
-  -webkit-animation: spin2 1s infinite linear;
-  animation: spin 1s infinite linear;
+.message-train-button--add-attachment:hover {
+  background: var(--message-train-color-accent);
+  color: var(--message-train-color-accent-contrast);
 }
 
-@keyframes spin {
-  from { transform: scale(1) rotate(0deg);}
-  to { transform: scale(1) rotate(360deg);}
+.message-train-button--remove-attachment {
+  border-color: var(--message-train-color-danger);
+  color: var(--message-train-color-danger);
 }
 
-@-webkit-keyframes spin2 {
-  from { -webkit-transform: rotate(0deg);}
-  to { -webkit-transform: rotate(360deg);}
+.message-train-button--remove-attachment:hover {
+  background: var(--message-train-color-danger);
+  color: var(--message-train-color-accent-contrast);
 }
 
-.clear-left {
-  clear: left;
+.message-train-select-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--message-train-space-sm);
 }
 
-.clear-right {
-  clear: right;
+.message-train-message-actions {
+  float: right;
+  display: flex;
+  gap: var(--message-train-space-sm);
 }
 
-.clear-both {
-  clear: both;
+.message-train-mark-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--message-train-space-sm);
 }
 
-.btn-compose {
-  margin: 0 auto 10px;
+div.message-train-conversation-actions {
+  margin: var(--message-train-space-md) 0;
+}
+
+td.message-train-conversation-actions {
+  white-space: nowrap;
+}
+
+.message-train-date-column {
+  white-space: nowrap;
+}
+
+.message-train-btn-compose {
+  margin: 0 auto var(--message-train-space-sm);
   white-space: inherit;
   width: 100%;
 }
 
-.tt-menu {
-  @extend .tt-dropdown-menu;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+// The boxes/collectives sidebar widget (compose button + box list) -
+// meant to render alongside a page's main content, not above/below it;
+// see the dummy app's own application.scss for the page-level grid that
+// actually places it as a sidebar. Not meaningful on a printed page.
+.message-train-widget {
+  display: flex;
+  flex-direction: column;
+  gap: var(--message-train-space-md);
+
+  h3 {
+    margin: 0;
+    font-size: var(--message-train-fs-lg);
+    font-weight: 600;
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.message-train-list-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--message-train-color-border);
+  border-radius: var(--message-train-space-xs);
+  overflow: hidden;
+}
+
+.message-train-list-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--message-train-space-sm);
+  padding: var(--message-train-space-sm) var(--message-train-space-md);
+  border-bottom: 1px solid var(--message-train-color-border-subtle);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+// Plain <details>/<summary> - click/tap-to-toggle and keyboard support
+// come for free, with no JS required. The popover (ul) is explicitly
+// hidden by default rather than relying on the browser's own
+// closed-<details> hiding: giving it `position: absolute` (so it floats
+// over page content without affecting this element's own box) means
+// it's no longer an in-flow child, and at least one tested engine
+// renders it unconditionally in that case instead of respecting the
+// native closed state.
+.message-train-dropdown-nav-item {
+  position: relative;
+
+  ul {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    min-width: 15rem;
+    list-style: none;
+    margin: 0;
+    padding: var(--message-train-space-sm);
+    background: var(--message-train-color-surface-elevated);
+    border: 1px solid var(--message-train-color-border);
+  }
+
+  &[open] ul {
+    display: block;
+  }
 }
 
-.dropdown-menu {
-  width: 240px;
+// The message compose/reply form (recipient, subject, body, attachments).
+// Scoped under .message-train-form rather than bare input/textarea/label
+// selectors, so these rules can't leak onto unrelated forms elsewhere on
+// a host app's page - the same collision-avoidance reasoning as the
+// message-train- class prefix itself.
+.message-train-form {
+  label {
+    display: block;
+    margin-bottom: var(--message-train-space-xs);
+    font-weight: 600;
+  }
+
+  input[type='text'],
+  input[type='email'],
+  textarea {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--message-train-space-sm) var(--message-train-space-md);
+    border: 1px solid var(--message-train-color-border);
+    border-radius: var(--message-train-space-xs);
+    background: var(--message-train-color-surface-elevated);
+    font-size: var(--message-train-fs-base);
+    font-family: inherit;
+    color: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  input[type='text']:focus,
+  input[type='email']:focus,
+  textarea:focus {
+    border-color: var(--message-train-color-accent);
+  }
+
+  textarea {
+    resize: vertical;
+    min-height: 5rem;
+    line-height: 1.6;
+  }
+
+  input[type='file'] {
+    font-size: var(--message-train-fs-base);
+  }
+
+  // The file input's own picker button - styled to match
+  // .message-train-button rather than the browser's default appearance,
+  // since ::file-selector-button can't take a class of its own.
+  input[type='file']::file-selector-button {
+    margin-right: var(--message-train-space-sm);
+    padding: var(--message-train-space-xs) var(--message-train-space-md);
+    border: 1px solid var(--message-train-color-border);
+    border-radius: var(--message-train-space-xs);
+    background: var(--message-train-color-surface);
+    font-size: var(--message-train-fs-base);
+    font-family: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .message-train-hint {
+    display: block;
+    margin-bottom: var(--message-train-space-xs);
+    font-size: var(--message-train-fs-sm);
+    opacity: 0.75;
+  }
 }

data/app/controllers/concerns/message_train_support.rb

@@ -91,7 +91,7 @@ module MessageTrainSupport
     respond_to do |format|
       format.html do
         flash[:error] = @box.message
-        show
+        redirect_to request.path
       end
       format.json { render :results, status: :unprocessable_entity }
     end
@@ -102,7 +102,7 @@ module MessageTrainSupport
       format.html do
         flash_type = @box.results.any? ? :notice : :alert
         flash[flash_type] = @box.message
-        show
+        redirect_to request.path
       end
       format.json { render :results, status: :accepted }
     end

data/app/controllers/message_train/boxes_controller.rb

@@ -5,8 +5,10 @@ module MessageTrain
 
     # GET /box/:division
     def show
-      @conversations = @conversations.order(updated_at: :desc)
-                                     .page(params[:page])
+      @conversations = @conversations
+                       .includes(:ignores, :attachments, messages: :sender)
+                       .order(updated_at: :desc)
+                       .page(params[:page])
       render :show
     end
 

data/app/controllers/message_train/conversations_controller.rb

@@ -7,6 +7,7 @@ module MessageTrain
     # GET /box/:division/conversations/:id
     def show
       @messages = @conversation.messages
+                               .includes(:sender, :attachments)
                                .order(updated_at: :desc)
                                .page(params[:page])
       render :show

data/app/helpers/message_train/application_helper.rb

@@ -1,10 +1,30 @@
 module MessageTrain
   # Application helper
   module ApplicationHelper
+    ICON_LABELS = {
+      'plus' => '+',
+      'trash' => '🗑',
+      'inbox' => '📥',
+      'eye-open' => '👁',
+      'eye-close' => '🚫',
+      'remove' => '✕',
+      'volume-up' => '🔔',
+      'volume-off' => '🔕',
+      'paperclip' => '📎',
+      'refresh spinning' => '⟳',
+      'check' => '✓'
+    }.freeze
+
     def message_train_widget
       render partial: 'message_train/application/widget'
     end
 
+    FLASH_ALERT_CLASSES = { notice: 'info', alert: 'warning', error: 'danger' }.freeze
+
+    def flash_alert_class(flash_type)
+      FLASH_ALERT_CLASSES.fetch(flash_type.to_sym, flash_type.to_s)
+    end
+
     def fuzzy_date(date)
       time = Time.parse(date.strftime('%F %T'))
       change_in_time = Time.now - time
@@ -12,6 +32,54 @@ module MessageTrain
       l(time, format: fuzzy_date_format(change_in_time))
     end
 
+    # Replacements for the bootstrap_leather helpers the views used to
+    # depend on, backed by plain semantic HTML instead of Bootstrap markup.
+
+    def add_title(text)
+      content_for(:title) { text }
+    end
+
+    def add_subtitle(text)
+      content_for(:subtitle) { text }
+    end
+
+    def icon(name, extra_class: nil)
+      content_tag(
+        :span, ICON_LABELS.fetch(name, ''),
+        class: ['message-train-icon', extra_class].compact.join(' '),
+        aria: { hidden: 'true' }
+      )
+    end
+
+    def badge(text, extra_class = nil)
+      content_tag(
+        :span, text, class: ['message-train-badge', extra_class].compact.join(' ')
+      )
+    end
+
+    def nav_item(text, link, options = {})
+      content_tag(:li, link_to(text, link, options))
+    end
+
+    def dropdown_nav_item(text, _url, &block)
+      content_tag(:details, class: 'message-train-dropdown-nav-item') do
+        content_tag(:summary, text) + content_tag(:ul, capture(&block), class: 'message-train-dropdown-menu')
+      end
+    end
+
+    def icon_button_to(extra_class, icon_name, text, url, options = {})
+      button_to(
+        icon(icon_name) + text, url,
+        options.merge(class: [options[:class], extra_class].compact.join(' '))
+      )
+    end
+
+    def modal(id, title, &block)
+      content_tag(:dialog, id: id) do
+        content_tag(:h2, title) + capture(&block)
+      end
+    end
+
     private
 
     def fuzzy_date_format(change_in_time)

data/app/helpers/message_train/attachments_helper.rb

@@ -2,10 +2,13 @@ module MessageTrain
   # Attachments helper
   module AttachmentsHelper
     def attachment_icon(attachment)
-      return image_tag(attachment.attachment.url(:thumb)) if attachment.image?
-      icon_class = 'glyphicon glyphicon-save-file glyphicon-thumbnail'
-      html = content_tag(:span, '', class: icon_class)
-      html << tag(:br) + attachment.attachment_file_name
+      if attachment.image?
+        return image_tag(
+          main_app.url_for(attachment.thumb), class: 'message-train-thumbnail'
+        )
+      end
+      html = content_tag(:span, '', class: 'message-train-icon icon-file')
+      html << tag(:br) + attachment.attachment.filename.to_s
       html.html_safe
     end