thredded-workgroup 0.2.0 → 0.3.1

data/README.md

@@ -1,22 +1,25 @@
 # Thredded::Workgroup
 
-Extension to [Thredded](http://github.com/thredded/thredded) with features useful to workgroup messaging (Unread,
-Unreplied, Following).
-
+Extension to [Thredded](http://github.com/thredded/thredded) with features useful to workgroup messaging.
+ 
+The point of Thredded-workgroup is to enable migration of workgroup communication from non-shared email to shared opt-in communications -- everyone can see any of the workgroup communications.
+     
 originated in https://github.com/thredded/thredded/issues/347
 
 Out the box enables a homepage with a top-level nav menu consisting of:
 
 * Unread: a list of unread topics (ordered by last post) across all messageboards
-* Following: a list of followed topics (ordered by last post) across all messageboards
 * Awaiting reply: a list of all topics you follow where yours is the last post
-* All topics: a list of all topics (ordered by last post) across all messageboards
-* All messageboards: a list of messageboards (as present)
-
-It adds a navbar like this:
+* Following: a list of followed topics (ordered by last post) across all messageboards
+* All: a list of all topics (ordered by last post) across all messageboards
+* Messageboards: a list of messageboards (as Thredded's normal home page)
 
-<img width="898" alt="screenshot" src="https://cloud.githubusercontent.com/assets/18395/17519867/a07ca5e8-5e45-11e6-86e1-953fdc399168.png">
+![Screenshot of navbar](docs/navbar.png)
 
+It also shows you the followers of the current topic before you post, and allows you to remove unneeded followers. (The logic for this is that (unlike a social forum) you need to broadcast as little as possible (because the aim is to reduce unnecessary noise, because people can find messages they need to). When you are adding to a topic it may become less relevant to existing followers. The person adding the message is able to adjust followers,
+like you might adjust the cc-list of conversation).
+     
+![Screenshot of post form](docs/followers-above-post.png)
 
 ## Installation
 
@@ -73,6 +76,19 @@ Include thredded JavaScripts in your `application.js`:
 //= require thredded-workgroup
 ```
 
+### Configuration
+
+**Reveal on hover?** The last topic shown in the thredded workflow top level pages is by default condensed when too long and revealed by click. You can also have it reveal on hover. This requires adding a data attribute in the layout (e.g. the body, or another high container element), as <div data-thredded-condensable-hover="reveal">. You can preview this behaviour in the demo, by adding `?hover=reveal` to the url.
+
+### View hooks
+
+Thredded::Workgroup augments Thredded with some extra view hooks (see https://github.com/thredded/thredded/#view-hooks) for customization.
+
+To see the extra view hooks provided by Thredded::Workgroup (with their arguments), run:
+
+```bash
+grep view_hooks -R --include '*.html.erb' "$(bundle show thredded-workgroup)"
+```
 ## Master vs Released versions
 
 NB: if you are using the master version rather than a release version
@@ -104,8 +120,9 @@ bundle exec rake db:create db:migrate db:seed
 Run the server
 
 ```
-dummy-rails s -p 3012
+guard
 ```
+(you can alternatively run `dummy-rails s -p 3012` but guard runs livereload for you too, which makes development much more pleasant)
 
 ### Updating when thredded changes
 

data/RELEASE_CHECKLIST.md

@@ -2,7 +2,6 @@ The checklist for releasing a new version of Thredded.
 
 Pre-requisites for the releaser:
 
-* The [gem-release gem](https://github.com/svenfuchs/gem-release): `gem install gem-release`.
 * Push access to RubyGems.
 
 Release checklist:
@@ -14,6 +13,6 @@ Release checklist:
 - [ ] Tag the release and push it to rubygems:
 
   ```bash
-  gem tag && gem release
+  rake release
   ```
 - [ ] Copy the release notes from the changelog to [GitHub Releases](https://github.com/thredded/thredded/releases).

data/Rakefile

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 begin
   require "bundler/setup"
   require "bundler/gem_tasks"
@@ -14,6 +15,10 @@ rescue LoadError
   RDoc::Task = Rake::RDocTask
 end
 
+
+require "webdrivers"
+load "webdrivers/Rakefile"
+
 RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_dir = "rdoc"
   rdoc.title    = "Thredded Workgroup"

data/app/assets/config/thredded_workgroup_manifest.js

@@ -0,0 +1,3 @@
+//= link thredded-workgroup.js
+//= link thredded-workgroup.scss
+//= link_tree ../images/ .svg

data/app/assets/images/thredded/workgroup/envelope-o.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1504v-768q-32 36-69 66-268 206-426 338-51 43-83 67t-86.5 48.5-102.5 24.5h-2q-48 0-102.5-24.5t-86.5-48.5-83-67q-158-132-426-338-37-30-69-66v768q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm0-1051v-24.5l-.5-13-3-12.5-5.5-9-9-7.5-14-2.5h-1472q-13 0-22.5 9.5t-9.5 22.5q0 168 147 284 193 152 401 317 6 5 35 29.5t46 37.5 44.5 31.5 50.5 27.5 43 9h2q20 0 43-9t50.5-27.5 44.5-31.5 46-37.5 35-29.5q208-165 401-317 54-43 100.5-115.5t46.5-131.5zm128-37v1088q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1472q66 0 113 47t47 113z"/></svg>

data/app/assets/images/thredded/workgroup/envelope-open-o.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1474 913l39 51q8 11 6.5 23.5t-11.5 20.5q-43 34-126.5 98.5t-146.5 113-67 51.5q-39 32-60 48t-60.5 41-76.5 36.5-74 11.5h-2q-37 0-74-11.5t-76-36.5-61-41.5-60-47.5q-5-4-65-50.5t-143.5-111-122.5-94.5q-11-8-12.5-20.5t6.5-23.5l37-52q8-11 21.5-13t24.5 7q94 73 306 236 5 4 43.5 35t60.5 46.5 56.5 32.5 58.5 17h2q24 0 58.5-17t56.5-32.5 60.5-46.5 43.5-35q258-198 313-242 11-8 24-6.5t21 12.5zm190 719v-928q-90-83-159-139-91-74-389-304-3-2-43-35t-61-48-56-32.5-59-17.5h-2q-24 0-59 17.5t-56 32.5-61 48-43 35q-215 166-315.5 245.5t-129.5 104-82 74.5q-14 12-21 19v928q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm128-928v928q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-928q0-56 41-94 123-114 350-290.5t233-181.5q36-30 59-47.5t61.5-42 76-36.5 74.5-12h2q37 0 74.5 12t76 36.5 61.5 42 59 47.5q43 36 156 122t226 177 201 173q41 38 41 94z"/></svg>

data/app/assets/javascripts/thredded/workgroup/components/followers.es6

@@ -0,0 +1,24 @@
+(($) => {
+  function removeFollower($followerSelector) {
+    $followerSelector.remove();
+  }
+
+  function clickRemoveFollower(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var $this = $(this);
+    var $followerSelector = $this.closest('.thredded--follower');
+    var path = $this.data('kickPath');
+    $.ajax({
+      url: path, type: "POST", success: function (data) {
+        removeFollower($followerSelector);
+      }
+    });
+  }
+
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    $('.thredded--follower--remove').click(clickRemoveFollower);
+  });
+})(jQuery);

data/app/assets/javascripts/thredded/workgroup/components/overflow.es6

@@ -0,0 +1,60 @@
+(($) => {
+
+  const MAX_HEIGHT = 100; // $thredded-condensed-height
+  const MAX_SCROLL_HEIGHT = MAX_HEIGHT + 8; // why ?
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  function findOverflows() {
+    $('.thredded--condensable').each((i, elem) => {
+      let $elem = $(elem);
+      let sH = $elem.prop('scrollHeight');
+      if (sH > MAX_SCROLL_HEIGHT) {
+        // let h = $elem.height();
+        // let oH = $elem.prop('offsetHeight');;
+        // let overflow = sH - h;
+        // let id = $elem.closest(".thredded--topics--topic").attr("id");
+        // console.log({i, id, sH, h, oH, overflow});
+        $elem.addClass("thredded--condensable--overflowing");
+        $elem.find(".thredded--condensable--overflow-only").fadeIn()
+      }
+    });
+  }
+
+  function hoverOverflow() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    let $elem = $(this);
+    if ($elem.hasClass('thredded--condensable--condensed')) {
+      $elem.addClass('thredded--condensable--hover');
+    }
+  }
+
+  function unhoverOverflow() {
+    let $elem = $(this);
+    $elem.removeClass('thredded--condensable--hover');
+  }
+
+  function clickOverflow(e) {
+    e.preventDefault();
+    // e.stopPropagation(); actually it needs to propagate to topics.es6
+    let $elem = $(this);
+    if ($elem.hasClass('thredded--condensable--hover')) {
+      $elem.removeClass('thredded--condensable--hover');
+      $elem.removeClass('thredded--condensable--condensed').addClass('thredded--condensable--expanded');
+    } else {
+      // touch only or already condensed, so clicking again
+      $elem.toggleClass('thredded--condensable--condensed').toggleClass('thredded--condensable--expanded');
+    }
+  }
+
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    findOverflows();
+    $('.thredded--condensable.thredded--condensable--overflowing')
+      .hover(hoverOverflow, unhoverOverflow)
+      .click(clickOverflow);
+  })
+
+})(jQuery);

data/app/assets/javascripts/thredded/workgroup/components/topics.es6

@@ -0,0 +1,151 @@
+(($) => {
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  function updateFollowStatus($topic, followStatus) {
+    if (followStatus) {
+      $topic.removeClass('thredded--topic-notfollowing').addClass('thredded--topic-following')
+    } else {
+      $topic.removeClass('thredded--topic-following').addClass('thredded--topic-notfollowing')
+    }
+  };
+
+  function clickFollowToggle(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var $this = $(this);
+    var $topic = $this.parents('.thredded--topics--topic');
+    var following = $topic.hasClass('thredded--topic-following');
+    var topicId = $topic.data("topic");
+    var messageboardId = $topic.data("messageboard");
+    var rootPath = $('#thredded--container').data('thredded-root-url');
+
+    var path = "" + rootPath + messageboardId + "/" + topicId + "/" + (following ? 'unfollow.json' : 'follow.json');
+    // console.log("about to ajax: " + path);
+    $.ajax({
+      url: path, type: "POST", success: function (data) {
+        updateFollowStatus($topic, data["follow"])
+      }
+    });
+  }
+
+  function hoverTopicFollowToggle(){
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    console.log("i am trying to hover");
+    $(this).closest('.thredded--topics--topic').find('.js-thredded-follow-toggle').addClass("thredded--topic-hovering");
+  }
+  function unhoverTopicFollowToggle(){
+    $(this).closest('.thredded--topics--topic').find('.js-thredded-follow-toggle').removeClass("thredded--topic-hovering");
+  }
+  function hoverTopicTitle() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).closest('.thredded--topics--topic').addClass("thredded--topic-hovering");
+  }
+
+  function unhoverTopicTitle() {
+    $(this).closest('.thredded--topics--topic').removeClass("thredded--topic-hovering");
+  }
+
+  function hoverTopic() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).find('.thredded--topic-last-post-with-controls').addClass("thredded--topic-hovering");;
+  }
+
+  function revealControls($topic){
+    $topic
+  }
+
+  function toggleControlsOnTouch() {
+    if (ThreddedWorkgroup.touching) {
+      $(this).closest('.thredded--topics--topic').find('.thredded--topic-last-post-with-controls').toggleClass("thredded--topic-hovering");;
+    }
+  }
+
+  function unhoverTopic() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).find('.thredded--topic-last-post-with-controls').removeClass("thredded--topic-hovering");
+  }
+
+  function viewTopic(e) {
+    var $a = $(this).closest('.thredded--topics--topic').find("a.thredded--topic--view-button");
+    window.location.href = $a.attr('href');
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function hoverTopicReadToggle() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).closest('.thredded--topics--topic').find('.thredded--topic--read-state-toggle').addClass("thredded--topic-hovering");
+  }
+
+  function unhoverTopicReadToggle() {
+    $(this).closest('.thredded--topics--topic').find('.thredded--topic--read-state-toggle').removeClass("thredded--topic-hovering");
+  }
+
+  function updateReadStatus($topic, isRead) {
+    if (isRead) {
+      $topic.addClass("thredded--topic-read").removeClass("thredded--topic-unread");
+    } else {
+      $topic.addClass("thredded--topic-unread").removeClass("thredded--topic-read");
+    }
+  }
+
+  function readToggle() {
+    let $topic = $(this).closest('.thredded--topics--topic');
+    let path;
+    if ($topic.hasClass("thredded--topic-read")) {
+      path = $topic.find('a.thredded--topic--read-state-toggle.thredded--topic--mark-as-unread').data("postPath");
+    } else {
+      path = $topic.find('a.thredded--topic--read-state-toggle.thredded--topic--mark-as-read').data("postPath");
+    }
+    $.ajax({
+      url: path, type: "POST", success: function (data) {
+        updateReadStatus($topic, data["read"]);
+      }
+    });
+  }
+
+  function hoverHighlight() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).addClass('thredded--topic-hovering');
+  }
+
+  function unhoverHighlight() {
+    $(this).removeClass('thredded--topic-hovering');
+  }
+
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    console.log("I am load");
+    $('.js-thredded-follow-toggle')
+      .hover(hoverTopicFollowToggle, unhoverTopicFollowToggle)
+      .click(clickFollowToggle);
+    $('.thredded--topics--topic .thredded--topic-title')
+      .hover(hoverTopicTitle, unhoverTopicTitle)
+      .click(viewTopic);
+    $('.thredded--topic--read-state-toggle')
+      .hover(hoverTopicReadToggle, unhoverTopicReadToggle)
+      .click(readToggle);
+    $('.thredded--topics--topic')
+      .hover(hoverTopic, unhoverTopic)
+    $('.thredded--topics--topic thredded--topic--view-button')
+      .click(viewTopic);
+    $('.thredded--topic-last-post-with-controls')
+      .hover(hoverHighlight, unhoverHighlight)
+      .click(toggleControlsOnTouch);
+  });
+
+})(jQuery);
+

data/app/assets/javascripts/thredded/workgroup/core/thredded_workgroup.js

@@ -0,0 +1 @@
+window.ThreddedWorkgroup = window.ThreddedWorkgroup || {}

data/app/assets/javascripts/thredded/workgroup/core/touch.es6

@@ -0,0 +1,16 @@
+(($) => {
+  const Thredded = window.Thredded;
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  Thredded.onPageLoad(() => {
+    ThreddedWorkgroup.touching = undefined;
+    $(document)
+      .on("touchstart", () => {
+        ThreddedWorkgroup.touching = true;
+      })
+      .on("touchend", () => {
+        // timeout to make sure it happens after any spurious hovers have happened
+        window.setTimeout(()=>{ ThreddedWorkgroup.touching = undefined; }, 200);
+      });
+  });
+})(jQuery);

data/app/assets/javascripts/thredded/workgroup/index.js

@@ -0,0 +1,3 @@
+//= require_tree ./core
+//= require_tree ./components
+

data/app/assets/javascripts/thredded-workgroup.js

@@ -1,13 +1 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree ./thredded/workgroup
+//= require thredded/workgroup

data/app/assets/stylesheets/thredded/workgroup/_followers.scss

@@ -0,0 +1,51 @@
+.thredded--topic-header {
+  .thredded--topic-header--follow-info form {
+    position: static;
+  }
+}
+
+.thredded--topic-followers {
+  line-height: 1.75rem;
+  @include thredded--clearfix;
+}
+
+.thredded--follower {
+  background-color: #eeeeee;
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  padding: 2px;
+  margin: 2px;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: 1rem;
+
+  button {
+    color: rgba(0, 0, 0, 0.54);
+    background: inherit;
+    padding: 0;
+    border-style: none;
+    .thredded--topics--follow-icon,
+    .thredded--topics--unfollow-icon {
+      position: static;
+      opacity: 0.5;
+      height: 0.75rem;
+      width: 0.75rem;
+    }
+
+    & .thredded--topics--follow-icon,
+    &:hover .thredded--topics--unfollow-icon {
+      display: inline-block;
+    }
+
+    & .thredded--topics--unfollow-icon,
+    &:hover .thredded--topics--follow-icon {
+      display: none;
+    }
+
+    &:hover .thredded--topics--unfollow-icon {
+      opacity: 0.75;
+    }
+  }
+
+}
+

data/app/assets/stylesheets/thredded/workgroup/_navs.scss

@@ -8,17 +8,33 @@ ul.thredded--workgroup {
   padding-left: 0;
   li {
     display: inline-block;
-    margin-right: 1rem;
-    &.active {
-      font-weight: bold;
-    }
     a {
       display: inline-block;
-      color: #a5aab6;
-      padding: 0.75rem 0;
+      color: $thredded-secondary-nav-color;
+      padding: 0.75rem 0.5rem;
+      @include thredded-media-tablet-and-up {
+        padding: 0.75rem 1rem;
+      }
+      @include thredded-media-desktop-and-up {
+        padding: 0.75rem 1.5rem;
+      }
       text-decoration: none;
       &:hover {
-        text-decoration: underline;
+        text-decoration: none;
+        background-color: #eeeeee;
+      }
+    }
+    &.active {
+      font-weight: bold;
+      position: relative;
+      top: 1px;
+      border: 1px solid #eee;
+      border-bottom: 1px solid white;
+      a {
+        color: $thredded-brand;
+        &:hover{
+          background-color: white;
+        }
       }
     }
     .expanded {
@@ -31,5 +47,11 @@ ul.thredded--workgroup {
         display: none;
       }
     }
+    .thredded--user-navigation--unread-topics--followed-count{
+      display: none;
+      @include thredded-media-desktop-and-up{
+        display: inline-block;
+      }
+    }
   }
 }

data/app/assets/stylesheets/thredded/workgroup/_overflow.scss

@@ -0,0 +1,71 @@
+$thredded-condensed-height: 100px;
+.thredded--condensable {
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
+  z-index: 1;
+
+  &.thredded--condensable--condensed {
+    max-height: $thredded-condensed-height;
+    overflow: hidden;
+    opacity: 0.7;
+
+    &.thredded--topic-hovering, &.thredded--condensable--hover, .thredded--topic-hovering & {
+      opacity: 1;
+    }
+  }
+
+  &.thredded--condensable--expanded,
+  [data-thredded-condensable-hover=reveal] &.thredded--condensable--condensed.thredded--condensable--hover {
+    max-height: unset;
+    overflow: unset;
+  }
+
+  cursor: pointer;
+}
+
+.thredded--condensable--expand, .thredded--condensable--condense {
+  color: #cccccc;
+  float: right;
+  font-size: 0.75rem;
+
+  .thredded--condensable.thredded--condensable--hover & {
+    color: $thredded-brand;
+  }
+}
+
+.thredded--condensable--overflow-only {
+  display: none;
+}
+
+.thredded--condensable--overflowing {
+  $overflow-only-height: 20px;
+
+  .thredded--condensable--overflow-only {
+    display: block;
+    width: 100%;
+    display: none;
+    height: $overflow-only-height;
+    background-color: white;
+    z-index: 3;
+    border-top: 1px dashed #cccccc;
+  }
+
+  &.thredded--condensable--condensed .thredded--condensable--overflow-only {
+    position: absolute;
+    top: $thredded-condensed-height - $overflow-only-height;
+    .thredded--condensable--condense {
+      display: none;
+    }
+  }
+
+  &.thredded--condensable--expanded .thredded--condensable--overflow-only,
+  [data-thredded-condensable-hover=reveal] &.thredded--condensable--condensed.thredded--condensable--hover .thredded--condensable--overflow-only{
+    position: static;
+    border-top: none;
+    .thredded--condensable--expand {
+      display: none;
+    }
+  }
+
+}