thredded 0.1.0 → 0.2.2

data/app/assets/javascripts/thredded/topic_form.es6

@@ -0,0 +1,55 @@
+(function($) {
+  const COMPONENT_SELECTOR = '[data-thredded-topic-form]';
+  class ThreddedTopicForm {
+    constructor() {
+      this.titleSelector = '[data-thredded-topic-form-title]';
+      this.textareaSelector = 'textarea';
+      this.compactSelector = 'form.thredded--is-compact';
+      this.expandedSelector = 'form.thredded--is-expanded';
+      this.escapeElements = 'input, textarea';
+      this.escapeKeyCode = 27;
+    }
+
+    toggleExpanded(child, expanded) {
+      jQuery(child).closest(expanded ? this.compactSelector : this.expandedSelector).toggleClass('thredded--is-compact thredded--is-expanded');
+    }
+
+    init($nodes) {
+      $nodes.find(this.textareaSelector).autosize();
+      $nodes.filter(this.compactSelector).
+        on('focus', this.titleSelector, e => {
+          this.toggleExpanded(e.target, true);
+        }).
+        on('keydown', this.escapeElements, e => {
+          if (e.keyCode == this.escapeKeyCode) {
+            this.toggleExpanded(e.target, false);
+            e.target.blur();
+          }
+        }).
+        on('blur', this.escapeElements, e => {
+          var blurredEl = e.target;
+          $(document.body).one('mouseup touchend', e => {
+            var $blurredElForm = $(blurredEl).closest('form');
+            // Un-expand if the new focus element is outside of the same form and
+            // all the input elements are empty.
+            if (!$(e.target).closest('form').is($blurredElForm) &&
+              $blurredElForm.find(this.escapeElements).is(function() {
+                return !this.value;
+              })) {
+              this.toggleExpanded(blurredEl, false);
+            }
+          })
+        });
+    }
+
+  }
+
+  $(function() {
+    var $nodes = $(COMPONENT_SELECTOR);
+    if ($nodes.length) {
+      new ThreddedTopicForm().init($nodes);
+    }
+  });
+})(jQuery);
+
+

data/app/assets/javascripts/thredded/users_select.es6

@@ -0,0 +1,5 @@
+jQuery(function($) {
+  $('[data-thredded-users-select]').select2({
+    dropdownCssClass: 'thredded--select2-drop'
+  });
+});

data/app/assets/javascripts/thredded.es6

@@ -0,0 +1,10 @@
+// We are not currently using any features that require the Babel polyfill
+// Enable this if we do:
+//- require babel/polyfill
+
+//= require jquery
+//= require jquery_ujs
+//= require jquery.autosize
+//= require rails-timeago
+//= require select2
+//= require_tree ./thredded

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

@@ -0,0 +1,11 @@
+// This Sass package defines Thredded variables, mixins, and placeholders.
+
+@import "base/variables";
+
+@import "base/alerts";
+@import "base/grid";
+@import "base/typography";
+@import "base/buttons";
+@import "base/forms";
+@import "base/lists";
+@import "base/tables";

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

@@ -0,0 +1 @@
+@import "select2";

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

@@ -0,0 +1,27 @@
+@import "base";
+
+.thredded {
+  @import "utilities/is-compact";
+  @import "utilities/is-expanded";
+
+  @import "layout/main-container";
+  @import "layout/main-navigation";
+  @import "layout/topic-navigation";
+  @import "layout/user-navigation";
+
+  @import "components/base";
+  @import "components/currently-online";
+  @import "components/empty";
+  @import "components/flash-message";
+  @import "components/form-list";
+  @import "components/main-section";
+  @import "components/messageboard";
+  @import "components/pagination";
+  @import "components/post";
+  @import "components/post-form";
+  @import "components/preferences";
+  @import "components/select2";
+  @import "components/topic-delete";
+  @import "components/topic-header";
+  @import "components/topics";
+}

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

@@ -0,0 +1,40 @@
+@mixin thredded-alert($font-color, $background-color, $border-color: lighten($font-color, 50%)) {
+  background: $background-color;
+  border-color: $border-color;
+  color: $font-color;
+
+  a {
+    color: darken($font-color, 10%);
+    text-decoration: underline;
+
+    &:focus,
+    &:hover {
+      color: darken($font-color, 15%);
+    }
+  }
+}
+
+%thredded--alert {
+  border: solid 1px;
+  border-radius: 3px;
+  margin-bottom: $thredded-base-spacing;
+  padding: $thredded-small-spacing;
+  text-decoration: none;
+}
+
+%thredded--alert--success {
+  @include thredded-alert($thredded-alert-success-color, $thredded-alert-success-background);
+}
+
+%thredded--alert--danger {
+  @include thredded-alert($thredded-alert-danger-color, $thredded-alert-danger-background);
+}
+
+%thredded--alert--info {
+  @include thredded-alert($thredded-alert-info-color, $thredded-alert-info-background);
+}
+
+%thredded--alert--warning {
+  @include thredded-alert($thredded-alert-warning-color, $thredded-alert-warning-background);
+}
+

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

@@ -0,0 +1,39 @@
+%thredded--button {
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  background: $thredded-button-background;
+  border-radius: $thredded-button-border-radius;
+  border: none;
+  color: $thredded-button-color;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $thredded-button-font-family;
+  font-size: $thredded-button-font-size;
+  font-weight: $thredded-button-font-weight;
+  line-height: $thredded-button-line-height;
+  padding: 0.75em 1em;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    background-color: $thredded-button-hover-background;
+    color: #fff;
+  }
+
+  &:focus {
+    box-shadow: 0 0 3px $thredded-button-background;
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background: $thredded-button-background;
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+%thredded--form {
+  fieldset {
+    background-color: lighten($thredded-base-border-color, 10%);
+    border: $thredded-base-border;
+    margin: 0 0 $thredded-small-spacing;
+    padding: $thredded-base-spacing;
+  }
+
+  input,
+  label,
+  select {
+    display: block;
+    font-family: $thredded-base-font-family;
+    font-size: $thredded-base-font-size;
+  }
+
+  label {
+    font-weight: 600;
+    margin-bottom: $thredded-small-spacing / 2;
+
+    &.required::after {
+      content: "*";
+    }
+
+    abbr {
+      display: none;
+    }
+  }
+
+  [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'],
+  [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'],
+  [type='week'], input:not([type]), textarea, select[multiple=multiple] {
+    background-color: $thredded-base-background-color;
+    border: $thredded-form-border;
+    box-shadow: $thredded-form-box-shadow;
+    box-sizing: border-box;
+    font-family: $thredded-base-font-family;
+    font-size: $thredded-base-font-size;
+    padding: $thredded-small-spacing;
+    transition: border-color;
+    width: 100%;
+
+    &:hover {
+      border-color: darken($thredded-base-border-color, 10%);
+    }
+
+    &:focus {
+      border-color: $thredded-action-color;
+      box-shadow: $thredded-form-box-shadow, 0 0 3px $thredded-action-color;
+      outline: none;
+    }
+  }
+
+  textarea {
+    line-height: $thredded-base-line-height;
+    resize: vertical;
+  }
+
+  input[type="search"] {
+    appearance: none;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: inline;
+    margin-right: $thredded-small-spacing / 2;
+  }
+
+  input[type="file"] {
+    padding-bottom: $thredded-small-spacing;
+    width: 100%;
+  }
+
+  select {
+    margin-bottom: $thredded-small-spacing;
+    max-width: 100%;
+    width: auto;
+  }
+}

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

@@ -0,0 +1,19 @@
+@mixin thredded-media-mobile {
+  @media screen and (max-width: map-get($thredded-grid-breakpoint-max-widths, mobile)) {
+    @content;
+  }
+}
+
+@mixin thredded-media-tablet-and-up {
+  @media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, mobile) + 1px) {
+    @content;
+  }
+}
+
+@mixin thredded--clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

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

@@ -0,0 +1,31 @@
+%thredded--list-unstyled {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+%thredded--default-ul {
+  list-style-type: disc;
+  margin-bottom: $thredded-small-spacing;
+  padding-left: $thredded-base-spacing;
+}
+
+%thredded--default-ol {
+  list-style-type: decimal;
+  margin-bottom: $thredded-small-spacing;
+  padding-left: $thredded-base-spacing;
+}
+
+%thredded--dl {
+  margin-bottom: $thredded-small-spacing;
+
+  dt {
+    font-weight: bold;
+    margin-top: $thredded-small-spacing;
+  }
+
+  dd {
+    margin: 0;
+  }
+}
+

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

@@ -0,0 +1,25 @@
+%thredded--table {
+  font-feature-settings: "kern", "liga", "tnum";
+  border-collapse: collapse;
+  margin: $thredded-small-spacing 0;
+  table-layout: fixed;
+  width: 100%;
+
+  th {
+    border-bottom: 1px solid darken($thredded-base-border-color, 15%);
+    font-weight: 600;
+    padding: $thredded-small-spacing 0;
+    text-align: left;
+  }
+
+  td {
+    border-bottom: $thredded-base-border;
+    padding: $thredded-small-spacing 0;
+  }
+
+  tr,
+  td,
+  th {
+    vertical-align: middle;
+  }
+}

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

@@ -0,0 +1,36 @@
+%thredded--heading {
+  font-family: $thredded-heading-font-family;
+  font-size: $thredded-base-font-size;
+  line-height: $thredded-heading-line-height;
+  margin: 0 0 $thredded-small-spacing;
+}
+
+%thredded--link {
+  color: $thredded-action-color;
+  text-decoration: none;
+  transition: color 0.1s linear;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: darken($thredded-action-color, 15%);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+%thredded--hr {
+  border-bottom: $thredded-base-border;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin: $thredded-base-spacing 0;
+}
+
+%thredded--paragraph {
+  margin: 0 0 $thredded-small-spacing;
+}
+

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

@@ -0,0 +1,54 @@
+// Grid
+$thredded-grid-container-max-width: 720px !default;
+$thredded-grid-breakpoint-max-widths: (mobile: 400px, tablet: 600px) !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
+$thredded-font-size-small: 0.875rem !default; // 14px
+$thredded-base-line-height: 1.5 !default;
+$thredded-heading-font-family: inherit !default;
+$thredded-heading-line-height: 1.2 !default;
+
+// Spacings
+$thredded-large-spacing: $thredded-base-line-height * 2rem !default;
+$thredded-base-spacing: $thredded-base-line-height * 1rem !default;
+$thredded-small-spacing: $thredded-base-spacing / 2 !default;
+
+// Named colors
+$thredded-brand: #4a90e2 !default;
+$thredded-dark-gray: #333 !default;
+$thredded-light-gray: #eee !default;
+
+// Colors of text, background, and actions (links)
+$thredded-base-font-color: #575d6b !default;
+$thredded-base-background-color: #fff !default;
+$thredded-action-color: $thredded-brand !default;
+
+// Colors of alerts and flash messages
+$thredded-alert-danger-background: #fbe3e4 !default;
+$thredded-alert-danger-color: #a94442 !default;
+$thredded-alert-info-background: #e6f3fa !default;
+$thredded-alert-info-color: darken($thredded-brand, 15%) !default;
+$thredded-alert-success-background: #e6efc2 !default;
+$thredded-alert-success-color: #3c763d !default;
+$thredded-alert-warning-background: #fcf8e3 !default;
+$thredded-alert-warning-color: #8a6d3b !default;
+
+// Borders
+$thredded-base-border-color: $thredded-light-gray !default;
+$thredded-base-border: 1px solid $thredded-base-border-color !default;
+
+// Forms
+$thredded-form-border: 1px solid darken($thredded-base-border-color, 5%) !default;
+$thredded-form-box-shadow: inset 0 1px 3px rgba(#000, 0.06) !default;
+
+// Buttons
+$thredded-button-background: $thredded-action-color !default;
+$thredded-button-border-radius: 3px !default;
+$thredded-button-color: #fff !default;
+$thredded-button-font-family: $thredded-base-font-family !default;
+$thredded-button-font-size: $thredded-font-size-small !default;
+$thredded-button-font-weight: 600 !default;
+$thredded-button-hover-background: darken($thredded-button-background, 15%) !default;
+$thredded-button-line-height: 1 !default;

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

@@ -0,0 +1,13 @@
+// Common classes for base placeholders.
+
+&--button, &--form--submit {
+  @extend %thredded--button;
+}
+
+&--form {
+  @extend %thredded--form;
+}
+
+&--link {
+  @extend %thredded--link;
+}

data/app/assets/stylesheets/thredded/components/_currently-online.scss

@@ -0,0 +1,48 @@
+&--currently-online {
+  background-color: $thredded-base-border-color;
+  bottom: -1.25rem;
+  padding: $thredded-base-spacing;
+  position: fixed;
+  right: 0;
+  width: 16.25rem; // 260px
+
+  @include thredded-media-mobile {
+    display: none;
+  }
+
+  &.thredded--is-expanded {
+    bottom: 0;
+    position: fixed;
+    right: 0;
+  }
+
+  &--title {
+    @extend %thredded--heading;
+    margin-bottom: $thredded-base-spacing;
+  }
+
+  &--avatar {
+    background-color: $thredded-base-font-color;
+    border-radius: 50%;
+    display: inline-block;
+    height: 1.75rem;
+    margin-right: $thredded-small-spacing;
+    vertical-align: middle;
+    width: 1.75rem;
+  }
+
+  &--user {
+    padding: $thredded-small-spacing 0;
+  }
+
+  &--users {
+    @extend %thredded--list-unstyled;
+    height: 0;
+    visibility: hidden;
+  }
+
+  &.thredded--is-expanded &--users {
+    height: auto;
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,11 @@
+&--empty {
+  border: $thredded-base-border;
+  padding: $thredded-base-spacing;
+  text-align: center;
+}
+
+&--empty--title {
+  @extend %thredded--heading;
+  font-size: 1.5rem; // 24px
+  margin-bottom: $thredded-base-spacing;
+}

data/app/assets/stylesheets/thredded/components/_flash-message.scss

@@ -0,0 +1,19 @@
+&--flash-message {
+  @extend %thredded--alert;
+}
+
+&--flash-message--success {
+  @extend %thredded--alert--success;
+}
+
+&--flash-message--error {
+  @extend %thredded--alert--danger;
+}
+
+&--flash-message--notice {
+  @extend %thredded--alert--info;
+}
+
+&--flash-message--alert {
+  @extend %thredded--alert--warning;
+}

data/app/assets/stylesheets/thredded/components/_form-list.scss

@@ -0,0 +1,35 @@
+&--form-list {
+  @extend %thredded--list-unstyled;
+
+  &.on-top {
+    border-bottom: $thredded-base-border;
+    margin-bottom: $thredded-base-spacing * 1.5;
+    padding-bottom: $thredded-small-spacing;
+  }
+
+  li {
+    transition: all 0.15s ease-out 0s;
+    margin-bottom: $thredded-small-spacing;
+  }
+
+  label {
+    transition: all 0.15s ease-out 0s;
+  }
+}
+
+&--form-list--admin-options {
+  label {
+    cursor: pointer;
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: $thredded-base-spacing;
+  }
+}
+
+&--form-list--hint {
+  @extend %thredded--paragraph;
+  color: lighten($thredded-base-font-color, 20%);
+  font-size: $thredded-font-size-small;
+  font-weight: normal;
+  position: relative;
+}

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

@@ -0,0 +1,3 @@
+&--main-section {
+  margin-bottom: $thredded-large-spacing;
+}

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

@@ -0,0 +1,55 @@
+&--messageboard {
+  @extend %thredded--link;
+  border: $thredded-base-border;
+  display: block;
+  margin-bottom: $thredded-base-spacing;
+  padding: $thredded-base-spacing;
+  position: relative;
+
+  header {
+    margin-bottom: $thredded-small-spacing;
+  }
+
+  &:hover {
+    background-color: lighten($thredded-brand, 40%);
+  }
+}
+
+&--messageboard--title {
+  @extend %thredded--heading;
+  display: inline-block;
+  float: left;
+  font-size: 1.125rem; // 18px
+  line-height: 1.2;
+  margin-bottom: 0;
+  margin-right: $thredded-small-spacing;
+  vertical-align: baseline;
+}
+
+&--messageboard--meta {
+  @extend %thredded--heading;
+  color: lighten($thredded-base-font-color, 30%);
+  display: inline-block;
+  font-weight: normal;
+  margin-bottom: 0;
+  vertical-align: baseline;
+}
+
+&--messageboard--description {
+  @extend %thredded--paragraph;
+  clear: both;
+  margin-bottom: $thredded-small-spacing / 2;
+  color: $thredded-base-font-color;
+}
+
+&--messageboard--byline {
+  @extend %thredded--paragraph;
+  color: lighten($thredded-base-font-color, 30%);
+  font-size: 0.875em;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+&--messageboard--create {
+  text-align: center;
+}

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

@@ -0,0 +1,26 @@
+&--pagination {
+  border-top: $thredded-base-border;
+  margin-top: $thredded-base-spacing;
+  padding-top: $thredded-base-spacing;
+  text-align: center;
+
+  > span {
+    color: lighten($thredded-base-font-color, 30%);
+    display: inline-block;
+    margin-right: $thredded-small-spacing;
+
+    > a {
+      color: $thredded-base-font-color;
+      display: inline-block;
+
+      &:focus,
+      &:hover {
+        color: $thredded-action-color;
+      }
+    }
+
+    &.current, > a {
+      padding: ($thredded-small-spacing / 2) $thredded-small-spacing;
+    }
+  }
+}

data/app/assets/stylesheets/thredded/components/_post-form.scss

@@ -0,0 +1,21 @@
+&--post-form {
+  label {
+    display: none;
+  }
+
+  &--wrapper {
+    border-top: $thredded-base-border;
+    margin-top: $thredded-base-spacing;
+    padding-top: $thredded-large-spacing;
+  }
+
+  &--title {
+    @extend %thredded--heading;
+    font-size: 1.25rem; // 20px
+    margin-bottom: $thredded-base-spacing;
+  }
+
+  &--submit {
+    margin-top: $thredded-small-spacing;
+  }
+}