add topic filters

app/.meteor/packages

@@ -12,13 +12,10 @@ jeeeyul:moment-with-langs
 tap:i18n
 raix:handlebar-helpers
 frozeman:animation-helper
-frozeman:global-notifications
 frozeman:template-var
-
-zimme:iron-router-active
 frozeman:persistent-minimongo
 frozeman:reactive-timer
+zimme:iron-router-active
 3stack:bignumber
 mistereo:identicon
 markdown
-mrt:jquery-visible

app/.meteor/versions

@@ -19,7 +19,6 @@ ejson@1.0.5
 fastclick@1.0.2
 follower-livedata@1.0.3
 frozeman:animation-helper@0.2.6
-frozeman:global-notifications@0.1.4
 frozeman:persistent-minimongo@0.1.3
 frozeman:reactive-timer@0.1.7
 frozeman:template-var@1.0.6
@@ -51,7 +50,6 @@ minimongo@1.0.6
 mistereo:identicon@1.0.0
 mobile-status-bar@1.0.2
 mongo@1.0.11
-mrt:jquery-visible@1.2.0
 observe-sequence@1.0.4
 ordered-dict@1.0.2
 raix:handlebar-helpers@0.2.4

app/client/index.html

@@ -2,6 +2,8 @@
     <meta charset="utf-8">
     <title>Whisper Chat Ðapp</title>
 
+    <base href="/">
+
     <meta name="description" content="A chat client implementation using the whisper protocol">
     <meta name="keywords" content="whisper, dapp, ethereum">
 
@@ -20,6 +22,6 @@
 
     <!-- Form Helper iFrame -->
     <iframe id="dapp-form-helper-iframe" name="dapp-form-helper-iframe" src="javascript:false;"></iframe>
-    <audio id="sound-message" preload="auto" src="/sounds/bloop.mp3"></audio>
-    <audio id="sound-invite" preload="auto" src="/sounds/invite.mp3"></audio>
+    <audio id="sound-message" preload="auto" src="sounds/bloop.mp3"></audio>
+    <audio id="sound-invite" preload="auto" src="sounds/invite.mp3"></audio>
 </body>

app/client/index.js

@@ -1,6 +1,6 @@
 
 // disconnect any meteor server
-if(location.hostname !== 'localhost' && location.hostname !== '127.0.0.1')
+if(location.host !== 'localhost:3000' && location.host !== '127.0.0.1:3000')
     Meteor.disconnect();
 
 

app/client/routes.js

@@ -169,6 +169,7 @@ Router.route('/chat/:sessionKey', function () {
             Chats.insert({
                 _id: this.params.sessionKey,
                 name: null,
+                filteredTopics: null,
                 lastActivity: new Date(),
                 messages: [],
                 privateChat: this.params.sessionKey,
@@ -196,6 +197,7 @@ Router.route('/chat/:sessionKey', function () {
             Chats.insert({
                 _id: this.params.sessionKey,
                 name: null,
+                filteredTopics: null,
                 lastActivity: new Date(),
                 messages: [],
                 users: [] // should i add myself? Whisper.getIdentity().identity

app/client/styles/main.less

@@ -1,6 +1,5 @@
 // libs
-// @import 'lib/dapp-styles/dapp-main.import.less';
-@import 'packages/meteor-dapp-styles/dapp-main.import.less';
+@import 'public/dapp-styles/dapp-styles.less';
 
 
 
@@ -121,7 +120,6 @@
         font-weight: 300;
         color: @colorTextSecondary;
     }
-
     textarea {
         clear: left;
         float: left;
@@ -134,6 +132,13 @@
         // word-wrap: break-word;
     }
 
+
+    .whisper-topic-list {
+        .dapp-horizontal-menu;
+        clear: left;
+        float: left;
+    }
+
 }
 .dapp-modal-header {
     .whisper-username {

app/client/templates/views/chats.html

@@ -71,6 +71,19 @@
                 </div>
 
                 <textarea name="write-message" placeholder="{{i18n 'whisper.chat.placeholder.writeHere'}}"></textarea>
+
+                {{#if topics ../messages}}
+                    <ul class="whisper-topic-list">
+                        <li>
+                            <button class="dapp-tag-button show-all-topics {{#if showAllTopics ../filteredTopics}}active{{/if}}">{{i18n 'whisper.chat.buttons.showAllTopics'}}</button>
+                        </li>
+                        {{#each topics ../messages}}
+                            <li>
+                                <button class="dapp-tag-button filter-by-topic {{#if isSelectedTopic ../../filteredTopics}}active{{/if}}">{{this}}</button>
+                            </li>
+                        {{/each}}
+                    </ul>
+                {{/if}}
             </header>
         {{/with}}
 

app/client/templates/views/chats.js

@@ -33,6 +33,36 @@ Template['views_chats'].created = function(){
 
 
 Template['views_chats'].helpers({
+    /**
+    Returns all topics, available in this chat
+
+    @method (topics)
+    @return {Array}
+    */
+    'topics': function(messages){
+        if(_.isArray(messages)) {
+            var messages = Messages.find({_id: {$in: messages}}).fetch();
+            return _.uniq(_.compact(_.pluck(messages, 'topic')));
+        }
+    },
+    /**
+    If no topic is filtered it will return TRUE.
+
+    @method (showAllTopics)
+    @return {Boolean}
+    */
+    'showAllTopics': function(filteredTopics){
+        return _.isEmpty(filteredTopics);
+    },
+    /**
+    Returns true if the current topic is filtered by.
+
+    @method (isSelectedTopic)
+    @return {Boolean}
+    */
+    'isSelectedTopic': function(filteredTopics){
+        return _.contains(filteredTopics, String(this));
+    },
     /**
     Get the messages for this chat, group them by user e.g.:
 
@@ -58,7 +88,13 @@ Template['views_chats'].helpers({
     */
     'groupedMessages': function(){
         if(_.isArray(this.messages)) {
-            var messages = Messages.find({_id: {$in: this.messages}}, {limit: TemplateVar.get('limitMessages'),sort: {timestamp: -1, privateChat: 1}}).fetch();
+            var query = {_id: {$in: this.messages}};
+
+            // filter by topic
+            if(this.filteredTopics)
+                query['$or'] = [{topic: {$in: this.filteredTopics}}, {type: 'notification'}];
+
+            var messages = Messages.find(query, {limit: TemplateVar.get('limitMessages'),sort: {timestamp: -1, privateChat: 1}}).fetch();
 
             var messageBlocks = [],
                 lastTopic = null;
@@ -152,14 +188,52 @@ Template['views_chats'].helpers({
     @return {Boolean}
     */
     'showMoreButton': function(){
-        if(_.isArray(this.messages))
-            return Messages.find({_id: {$in: this.messages}}).count() >= TemplateVar.get('limitMessages');
+        if(_.isArray(this.messages)) {
+            var query = {_id: {$in: this.messages}};
+
+            // filter by topic
+            if(this.filteredTopics)
+                query['$or'] = [{topic: {$in: this.filteredTopics}}, {type: 'notification'}];
+
+            return Messages.find(query).count() >= TemplateVar.get('limitMessages');
+        }
     }
 });
 
 
 
 Template['views_chats'].events({
+    /**
+    Clear the filter and show all topics.
+    
+    @event click button.show-all-topics
+    */
+    'click button.show-all-topics': function(e, template) {
+        Chats.update(template.data._id, {$set: {
+            filteredTopics: null
+        }});
+    },
+    /**
+    Add the clicked topic to the filter.
+    
+    @event click button.filter-by-topic
+    */
+    'click button.filter-by-topic': function(e, template) {
+        var topics = template.data.filteredTopics,
+            topic = String(this);
+
+        if(!_.isArray(topics))
+            topics = [];
+
+        if(_.contains(template.data.filteredTopics, topic))
+            topics = _.without(topics, topic);
+        else
+            topics.push(topic);
+
+        Chats.update(template.data._id, {$set: {
+            filteredTopics: topics
+        }});
+    },
     /**
     Show more messages
     

app/client/whisperConnector.js

@@ -159,6 +159,7 @@ Meteor.startup(function(){
                 Chats.insert({
                     _id: chatId,
                     name: (!payload.privateChat) ? payload.name : undefined,
+                    filteredTopics: null,
                     lastActivity: new Date(),
                     messages: [],
                     users: users,
@@ -600,7 +601,6 @@ Meteor.startup(function(){
 
 
                 try {
-
                     // SEND
                     web3.shh.post(message);
 

app/i18n/whisper.en.i18n.json

@@ -15,14 +15,15 @@
                 "unnamedChat": "Unnamed chat"
             },
             "buttons": {
-                "showMore": "Show more messages"
+                "showMore": "Show more messages",
+                "showAllTopics": "Show all topics"
             },
             "notifications": {
                 "invitation": "invited __users__ into the chat.",
                 "topicChanged": "is now talking about __topic__.",
                 "topicChangedEmpty": "is now talking about everything",
-                "chatNameChanged": "changed the chats name to \"__name__.\"",
-                "chatNameChangedEmpty": "removed the chats name"
+                "chatNameChanged": "changed the channels name to \"__name__.\"",
+                "chatNameChangedEmpty": "removed the channels name"
             },
             "texts": {
                 "home": "Click \"New chat\" to start a private or group chat.",

app/public/dapp-styles/README.md

@@ -0,0 +1,24 @@
+# Ðapp styles
+
+These styles give a simple basic layout for your Ðapps.
+
+## Usage
+
+
+### CSS
+To use it as CSS file just link the css file from the `dist/` folder.
+
+
+### LESS
+To use it as less file, which would allow you to overwrite all constants
+from the `constant.import.less`, link the `dapp-styles.less`.
+
+### Meteor
+To use it in a Meteor app add the `less` package:
+
+    $ meteor add less
+
+Copy this dapp-styles repo into your apps `public` folder
+and link to the `dapp-styles.less` in the any of our less files in the project with:
+
+    @import 'public/dapp-styles/dapp-styles.less';

app/public/dapp-styles/buttons.import.less

@@ -0,0 +1,50 @@
+
+// buttons
+
+// TODO we could add a circle on hover
+.dapp-icon-button {
+    .dapp-button-reset;
+    display: inline-block;
+    color: @colorBlack;
+
+    // make smaller on click
+    &:active {
+        .scale(0.95);
+    }
+    &:hover {
+        opacity: 0.9;
+    }
+}
+
+.dapp-block-button,
+.dapp-block-button:visited {
+    .dapp-button-reset;
+    height: @gridHeight * 2;
+    padding: @gridHeight/4 @gridWidth/4;
+    background: @colorLink;
+    color: @colorWhite;
+    border-bottom: solid 2px darken(@colorLink, 5%);
+    .border-radius(2px);
+    .dapp-shorten-text;
+
+    font-family: @fontFamily;
+    font-size: 1em;
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+
+.dapp-tag-button {
+    .dapp-button-reset;
+    padding: @gridHeight/4 @gridWidth/4;
+    background: @colorGray;
+    color: @colorTextPrimary;
+    .border-radius(4px);
+    .dapp-shorten-text;
+    font-size: 0.8em;
+
+    &.active {
+        background: @colorLink;
+        color: @colorWhite;
+    }
+}