thredded 0.10.1 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 584af3429d4903d4e71c2a9c6ade98a1ce121505
-  data.tar.gz: 0c4a78eaeb21357be674af2a152bf0e72a35ad9c
+  metadata.gz: 2ce9beaa49ff6dabd99f962836ab829e691de0bf
+  data.tar.gz: a2760f759370094628101ac41ab618a16f358393
 SHA512:
-  metadata.gz: 4fca75e1a3052d79bb58f55202add9746e393418a04d5afca1e07cfa95fd90301eaced3f63189493f94639722d1a689f06170e586388a06ba12fadbee65c0a72
-  data.tar.gz: 4bb3d36a5fa56b0180e5f73c6c4de8cd5130805e07d0057dabef25d580d1a1de178441b96df0321c8f9c5cd700759a72caf006b7abe7783e51dc2be77fa16501
+  metadata.gz: fa1e55d7ef10e1bfc8404746b7773bd3652c9f78b73ddb6300d698c32dd8f58f5ac09bf4eea6d0a4b84295e4d7d8efb50cbe0f5c6be0dbb28a8de80e89358c1b
+  data.tar.gz: be8da3f5f1ac118215a12b5122069b2c801c5e6941e8d8ec014cef9acdbb31f5ef09afb8185430e8287877983cf9e01bf6ec2daf9f0c26a3baeec06e3f2eca2a

data/README.md

@@ -56,7 +56,7 @@ Then, see the rest of this Readme for more information about using and customizi
 Add the gem to your Gemfile:
 
 ```ruby
-gem 'thredded', '~> 0.10.1'
+gem 'thredded', '~> 0.11.0'
 ```
 
 Add the Thredded [initializer] to your parent app by running the install generator.
@@ -300,6 +300,8 @@ any duplicate CSS.
 ### Email and other notifications
 
 Thredded sends several notification emails to the users. You can override in the same way as the views.
+See [this page](https://github.com/thredded/thredded/wiki/Styling-email-content) on how to style the emails.
+
 If you use [Rails Email Preview], you can include Thredded emails into the list of previews by adding
 `Thredded::BaseMailerPreview.preview_classes` to the [Rails Email Preview] `preview_classes` config option.
 
@@ -310,18 +312,26 @@ You can also turn off the email notifier totally, or add other notifiers (e.g. P
 
 ## I18n
 
-Thredded is mostly internationalized. It is currently available in English, Brazilian Portuguese, Polish, and Spanish.
+Thredded is mostly internationalized. It is currently available in English, Brazilian Portuguese, Polish, Russian,
+and Spanish.
 We welcome PRs adding support for new languages.
 
-If you use thredded in languages other than English, you probably want to add `rails-i18n` to your Gemfile.
-Additionally, you will need to require the translations for rails-timeago in your JavaScript before `thredded` but
-after `jquery.timeago` (included in `thredded/dependencies`). E.g. for Brazilian Portuguese:
+Here are the steps to ensure the best support for your language if it isn't English:
 
-```js
-//= require thredded/dependencies
-//= require locales/jquery.timeago.pt-br
-//= require thredded/thredded
-```
+1. Add `rails-i18n` to your Gemfile.
+
+2. Require the translations for rails-timeago in your JavaScript before `thredded` but after `jquery.timeago`
+   (included in `thredded/dependencies`). E.g. for Brazilian Portuguese:
+
+   ```js
+   //= require thredded/dependencies
+   //= require locales/jquery.timeago.pt-br
+   //= require thredded/thredded
+   ```
+
+3. To generate URL slugs for messageboards, categories, and topics with support for more language than English,
+   you can use a gem like [babosa](https://github.com/norman/babosa).
+   Add babosa to your Gemfile and uncomment the `Thredded.slugifier` proc for babosa in the initializer.
 
 ## Permissions
 
@@ -494,6 +504,16 @@ To disable moderation, e.g. if you run internal forums that do not need moderati
 change_column_default :thredded_user_details, :moderation_state, 1 # approved
 ```
 
+### Enabling auto-follow
+
+In some cases, you'll want all users to auto-follow new messageboard topics by default. This might be useful
+for a team messageboard or a company announcements board, for example. To enable user auto-follow of new topics,
+run the following migration(s):
+
+```ruby
+change_column_default :thredded_user_preferences, :auto_follow_topics, 1
+```
+
 ## Plugins
 
 The following official plugins are available for Thredded:

data/app/assets/images/favicons/README.md

@@ -0,0 +1,3 @@
+These icons are copied from the Discourse repo:
+
+https://github.com/discourse/discourse/tree/a43ec88f46b1698cb2fbd08983b715011f882c45/app/assets/images/favicons

data/app/assets/javascripts/thredded/components/user_preferences_form.es6

@@ -1,6 +1,7 @@
 (($) => {
   const COMPONENT_SELECTOR = '[data-thredded-user-preferences-form]';
   const BOUND_MESSAGEBOARD_NAME = 'data-thredded-bound-messageboard-pref';
+  const UPDATE_ON_CHANGE_NAME = 'data-thredded-update-checkbox-on-change';
 
   class MessageboardPreferenceBinding {
     constructor($form, genericCheckboxName, messageboardCheckboxName) {
@@ -26,15 +27,29 @@
         .prop('disabled', !enabled)
         .filter(':checkbox').prop('checked', enabled ? this.messageboardCheckedWas : false);
     }
+  }
 
+  class UpdateOnChange {
+    constructor($form, $sourceElement, targetName) {
+      const $target = $form.find(`:checkbox[name="${targetName}"]`);
+      if (!$target.length) return;
+      $sourceElement.on('change', () => {
+        $target.prop('checked', $sourceElement.prop('checked'));
+      });
+    }
   }
+
   class UserPreferencesForm {
     constructor(form) {
       const $form = $(form);
       $form.find(`input[${BOUND_MESSAGEBOARD_NAME}]`).each((index, element) => {
         const $elem = $(element);
         new MessageboardPreferenceBinding($form, $elem.attr('name'), $elem.attr(BOUND_MESSAGEBOARD_NAME));
-      })
+      });
+      $form.find(`input[${UPDATE_ON_CHANGE_NAME}]`).each((index, element) => {
+        const $elem = $(element);
+        new UpdateOnChange($form, $elem, $elem.attr(UPDATE_ON_CHANGE_NAME))
+      });
     }
   }
 

data/app/assets/stylesheets/thredded/_email.scss

@@ -0,0 +1,52 @@
+@import "thredded/base";
+@import "thredded/components/post";
+@import "thredded/components/onebox";
+
+.thredded--email {
+  font-family: $thredded-base-font-family;
+  color: $thredded-text-color;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  line-height: 1.5;
+
+  a {
+    @extend %thredded--link;
+  }
+  hr {
+    @extend %thredded--hr;
+  }
+}
+
+.thredded--email-post {
+  margin: 0;
+
+  &--author {
+    margin-bottom: 1em;
+  }
+
+  .thredded--post--content {
+    font-size: inherit;
+    border-left: solid 5px $thredded-blockquote-border-color;
+    margin: 0 0 0.75rem;
+    padding: ($thredded-small-spacing / 2) $thredded-small-spacing;
+
+    .onebox-wrapper-table {
+      width: 100%;
+      td {
+        border: $thredded-base-border;
+        text-align: left;
+        padding: $thredded-small-spacing;
+        > aside.onebox {
+          margin-bottom: 0;
+          padding: 0;
+          border: 0;
+          box-shadow: none;
+        }
+      }
+    }
+
+    aside.onebox {
+      margin-bottom: $thredded-small-spacing;
+    }
+  }
+}

data/app/assets/stylesheets/thredded/_thredded.scss

@@ -31,3 +31,4 @@
 @import "components/topic-header";
 @import "components/topics";
 @import "components/preview_area";
+@import "components/onebox";

data/app/assets/stylesheets/thredded/base/_grid.scss

@@ -30,8 +30,21 @@
   }
 }
 
+@mixin thredded-media-content-breakout {
+  @media (min-width: $thredded-grid-container-max-width + $thredded-content-breakout-min-width + 0.00001rem) {
+    @content;
+  }
+}
+
+@mixin thredded-media-content-no-breakout {
+  @media (max-width: $thredded-grid-container-max-width + $thredded-content-breakout-min-width) {
+    @content;
+  }
+}
+
 @mixin thredded-media-avatar-breakout {
-  @media (min-width: $thredded-grid-container-max-width + 4rem) {
+  @warn "thredded-media-avatar-breakout is deprecated, use thredded-media-content-breakout instead";
+  @include thredded-media-content-breakout {
     @content;
   }
 }

data/app/assets/stylesheets/thredded/base/_typography.scss

@@ -47,6 +47,10 @@
   p:last-of-type {
     margin-bottom: 0;
   }
+
+  @include thredded-media-mobile {
+    padding: ($thredded-small-spacing / 2) $thredded-small-spacing;
+  }
 }
 
 %thredded--embed-16-by-9 {

data/app/assets/stylesheets/thredded/base/_variables.scss

@@ -2,6 +2,10 @@
 $thredded-grid-container-max-width: 43.125rem !default;
 $thredded-grid-breakpoint-max-widths: (mobile: 34rem, tablet: 48rem) !default;
 
+// Minimum width required for the content that breaks out of the container, such
+// as post avatars and topic post counts
+$thredded-content-breakout-min-width: 4rem !default;
+
 // Typography
 $thredded-base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
 $thredded-base-font-size: 1rem !default; // 16px
@@ -31,11 +35,12 @@ $thredded-action-transition: color 0.1s linear !default;
 $thredded-nav-color: $thredded-text-color !default;
 $thredded-nav-hover-color: $thredded-action-color !default;
 $thredded-nav-current-color: $thredded-action-color !default;
-$thredded-overlay-background-color: $thredded-background-color !default;
+$thredded-overlay-background-color: opacify($thredded-background-color, 1) !default;
 $thredded-overlay-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 $thredded-secondary-nav-color: $thredded-secondary-text-color !default;
 $thredded-spoiler-hidden-color: $thredded-light-gray !default;
 $thredded-spoiler-shown-color: black !default;
+$thredded-code-selected-line-background: #f8eec7 !default;
 
 
 // Colors of alerts and flash messages
@@ -86,6 +91,22 @@ $thredded-badge-active-background: $thredded-action-color !default;
 $thredded-badge-inactive-color: $thredded-button-color !default;
 $thredded-badge-inactive-background: rgba($thredded-text-color, 0.3) !default;
 
+// Onebox
+$thredded-onebox-favicons: (
+  'amazon': 'favicons/amazon.png',
+  'githubblob': 'favicons/github.png',
+  'githubcommit': 'favicons/github.png',
+  'githubgist': 'favicons/github.png',
+  'githubissue': 'favicons/github.png',
+  'githubpullrequest': 'favicons/github.png',
+  'googledocs': 'favicons/google_branding/logo_drive_48px.png',
+  'stackexchange': 'favicons/stackexchange.png',
+  'twitterstatus': 'favicons/twitter.png',
+  'wikipedia': 'favicons/wikipedia.png',
+) !default;
+// Properties applied based on the image filename:
+$thredded-onebox-favicon-properties: () !default;
+
 // Layout features
 
 // Messageboards grid
@@ -112,3 +133,5 @@ $thredded-messageboards-grid-item-flex-basis: 21.5rem !default;
 
 // Topics list
 $thredded-topics-list-gutter-y: $thredded-base-spacing !default;
+$thredded-topics-topic-posts-counter-width: 3rem !default;
+$thredded-topics-topic-follow-icon-width: 2rem !default;

data/app/assets/stylesheets/thredded/components/_main-section.scss

@@ -1,3 +1,9 @@
 .thredded--main-section {
   margin-bottom: $thredded-large-spacing;
+  @include thredded-media-tablet {
+    margin-bottom: $thredded-base-spacing;
+  }
+  @include thredded-media-mobile {
+    margin-bottom: $thredded-small-spacing;
+  }
 }

data/app/assets/stylesheets/thredded/components/_messageboard.scss

@@ -1,6 +1,9 @@
 .thredded--messageboards-group {
   box-sizing: border-box;
-  margin-bottom: $thredded-base-spacing;
+  &--title {
+    font-size: 1em;
+    margin: 0.75em 0 0.625em 0;
+  }
 }
 
 .thredded--messageboard {

data/app/assets/stylesheets/thredded/components/_onebox.scss

@@ -0,0 +1,284 @@
+// Roughly based on the Discourse onebox styles:
+// https://github.com/discourse/discourse/blob/a6dd1a2cd4f13965bcd59ad2f9af44e13b45cbe6/app/assets/stylesheets/common/base/onebox.scss
+
+aside.onebox,
+.maps-onebox,
+.thredded--embed-16-by-9 {
+  margin-bottom: $thredded-small-spacing;
+}
+
+aside.onebox {
+  border: $thredded-base-border;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+  padding: $thredded-small-spacing;
+  line-height: normal;
+  font-size: 0.85em;
+
+  %onebox-favicon {
+    background: no-repeat 50% 50%;
+    background-size: 16px 16px;
+    content: ' ';
+    display: inline-block;
+    height: 16px;
+    vertical-align: bottom;
+    width: 16px;
+    margin-right: 0.4em;
+  }
+
+  @each $class, $image in $thredded-onebox-favicons {
+    &.#{$class} .source > a::before {
+      @extend %onebox-favicon;
+      background-image: image-url($image);
+      @each $name, $value in map-get($thredded-onebox-favicon-properties, $image) {
+        #{$name}: $value;
+      }
+    }
+  }
+
+  header {
+    a[href] {
+      color: $thredded-secondary-text-color;
+      text-decoration: none;
+    }
+  }
+
+  .onebox-body {
+    clear: both;
+
+    h3, h4 {
+      font-size: 1em;
+      margin: 10px 0;
+    }
+
+    img {
+      max-height: 80%;
+      max-width: 20%;
+      height: auto;
+      float: left;
+      margin-right: 1em;
+    }
+
+    .tweet-images {
+      display: block;
+      clear: both;
+
+      img.tweet-image {
+        margin-top: 1em;
+        max-width: 100%;
+        max-height: 100%;
+        float: none;
+      }
+    }
+  }
+}
+
+.googledocs-onebox-logo {
+  width: 60px;
+  height: 50px;
+  float: left;
+  @each $type in docs, forms, sheets, slides, calendar, drive {
+    &.g-#{$type}-logo {
+      background: image-url("favicons/google_branding/logo_#{$type}_48px.png") no-repeat;
+    }
+  }
+}
+
+// Google Calendar Placeholder
+.gdocs-onebox-splash {
+  background-color: $thredded-overlay-background-color;
+  color: $thredded-text-color;
+  border: 1px inset $thredded-text-color;
+  .gdocs-onebox-logo {
+    display: inline-block;
+    width: 128px;
+    height: 128px;
+    &.g-calendar-logo {
+      background: image-url("favicons/google_branding/logo_calendar_128px.png") no-repeat;
+    }
+  }
+}
+
+aside.onebox .onebox-body .onebox-avatar {
+  max-height: none;
+  max-width: none;
+  height: 90px;
+  width: 90px;
+}
+
+// -- Onebox Github Code Blob --
+pre.onebox code {
+  font-size: 14px;
+  tab-size: 4;
+  white-space: normal;
+
+  ol.lines li:before {
+    position: absolute;
+    display: inline-block;
+    width: 35px;
+    left: -40px;
+    color: #afafaf;
+    text-align: right;
+    padding-right: 5px;
+    font-size: 12px;
+    line-height: 1.9em;
+    content: counter(li-counter);
+    counter-increment: li-counter;
+  }
+
+  ol {
+    margin-left: 0;
+    line-height: 1.5em;
+  }
+
+  li {
+    padding-left: 5px;
+  }
+
+  ol.lines {
+    padding: 0;
+    margin: 0 0 0.2rem 2rem;
+    position: relative;
+  }
+
+  ol.lines li {
+    border-left: 1px solid $thredded-base-border-color;
+    list-style-type: none;
+    margin: 0;
+    min-height: 1.5em; // show empty li lines
+    padding-left: 5px;
+    white-space: pre;
+  }
+
+  li.selected {
+    background-color: $thredded-code-selected-line-background;
+  }
+}
+
+// Onebox - Github - Pull request
+.onebox-body {
+  .github-commit-status {
+    background: #f5f5f5;
+    border-radius: 5px;
+    margin: 0 0 5px 100px;
+    padding: 10px;
+  }
+
+  .status_tag {
+    display: inline-block;
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-transform: capitalize;
+  }
+
+  .build_status {
+    padding: 2px;
+    font-size: 12px;
+  }
+
+  .status_tag.open {
+    background-color: #6cc644;
+  }
+
+  .status_tag.merged {
+    background-color: #6e5494;
+  }
+
+  .status_tag.closed {
+    background-color: #bd2c00;
+  }
+
+  .github-content-right {
+    margin-left: 100px;
+  }
+}
+
+// Onebox - Google Maps
+.maps-onebox {
+  // The onebox gem adds a div with inline styles that breaks mobile
+  // Hide the div
+  > div:first-child {
+    display: none;
+  }
+}
+
+// Onebox - Twitter - Status
+aside.onebox.twitterstatus .onebox-body {
+  h4 {
+    margin-bottom: 0;
+  }
+}
+
+.onebox.twitterstatus {
+  .thumbnail {
+    float: left;
+  }
+  p, .tweet {
+    float: left;
+    display: inline-block;
+    white-space: pre-wrap;
+    padding-top: 3px;
+    width: 85%;
+  }
+  .date {
+    clear: left;
+    padding-top: 5px;
+  }
+}
+
+// Onebox - Imgur - Album
+.onebox.imgur-album {
+  .outer-box {
+    position: absolute;
+    z-index: 935;
+    height: 30px;
+    overflow: hidden;
+    font-size: 12px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+    text-overflow: ellipsis;
+    max-width: 100%;
+
+    .inner-box {
+      padding-left: 10px;
+      padding-right: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-wrap: normal;
+      white-space: nowrap;
+
+      .album-title {
+        width: 100%;
+        font-size: 13px;
+        line-height: 30px;
+        color: #ccc;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+// Resize stackexchange onebox image
+aside.onebox.stackexchange .onebox-body {
+  img {
+    max-height: 60%;
+    max-width: 10%;
+  }
+
+  .tags {
+    color: gray;
+  }
+}
+
+.onebox-metadata {
+  color: $thredded-secondary-text-color;
+}
+
+.onebox.xkcd .onebox-body {
+  img {
+    max-width: 100% !important;
+    float: none !important;
+  }
+}