talking

web/module/test.md

@@ -0,0 +1 @@
+<div><module js="/talk/main.js" css="/talk/main.css" component="talk"></module></div>

web/talk/main.css

@@ -2,6 +2,10 @@
 .room {
   font-family: 'scp'; }
 
+.valid-false {
+  color: #E20B0B;
+  border-color: #E20B0B; }
+
 div.meta {
   display: inline-block; }
 
@@ -15,6 +19,7 @@ div.meta label {
   height: 1rem;
   width: 1rem;
   text-align: center; }
+
 div.meta label:before {
   content: attr(data-glyph);
   color: #fff;
@@ -23,10 +28,12 @@ div.meta label:before {
   font-weight: 500;
   line-height: 1rem;
   vertical-align: middle; }
+
 div.meta label,
 div.meta h2,
 div.meta h3 {
   display: inline-block; }
+
 div.meta h2,
 div.meta h3 {
   font-family: 'scp';
@@ -34,11 +41,16 @@ div.meta h3 {
   font-weight: 400;
   margin-top: 0;
   padding-top: 0; }
+
 div.meta h3 {
   margin-left: 2rem; }
+
 div.meta .time {
   padding-right: 2rem; }
 
+div.gram.first {
+  margin-top: 1rem; }
+
 div.gram.same div.meta {
   display: none; }
 
@@ -55,6 +67,86 @@ div.gram.same:hover div.meta {
 @media (max-width: 767px) {
   div.meta > label {
     margin-right: 9px; } }
+
+div.gram label[data-glyph=">"],
+div.gram label[data-glyph="="],
+div.gram label[data-glyph="+"],
+div.gram label[data-glyph="-"],
+div.gram label[data-glyph="}"] {
+  background-color: #E20B0B; }
+
+div.gram label[data-glyph=")"],
+div.gram label[data-glyph=","],
+div.gram label[data-glyph="."],
+div.gram label[data-glyph='"'],
+div.gram label[data-glyph="'"] {
+  background-color: #FFF900; }
+
+div.gram label[data-glyph="*"],
+div.gram label[data-glyph="`"],
+div.gram label[data-glyph="^"],
+div.gram label[data-glyph="$"],
+div.gram label[data-glyph="%"],
+div.gram label[data-glyph="&"],
+div.gram label[data-glyph="@"] {
+  background-color: #0500F0; }
+
+input.action {
+  background-color: transparent;
+  border-color: transparent;
+  font-family: 'scp';
+  font-size: .8rem; }
+
+input.action.valid-false {
+  color: #E20B0B; }
+
+input.action::-webkit-input-placeholder {
+  color: #000;
+  font-family: 'bau';
+  font-size: 1rem; }
+
+input.action:-moz-placeholder {
+  color: #000;
+  font-family: 'bau';
+  font-size: 1rem; }
+
+input.action::-moz-placeholder {
+  color: #000;
+  font-family: 'bau';
+  font-size: 1rem; }
+
+input.action:-ms-input-placeholder {
+  color: #000;
+  font-family: 'bau';
+  font-size: 1rem; }
+
+input.action:focus::-webkit-input-placeholder {
+  color: transparent; }
+
+input.action:focus:-moz-placeholder {
+  color: transparent; }
+
+input.action:focus::-moz-placeholder {
+  color: transparent; }
+
+input.action:focus:-ms-input-placeholder {
+  color: transparent; }
+
+.room .close {
+  display: none;
+  margin: 0;
+  float: none;
+  margin-left: .6rem;
+  font-weight: 600;
+  font-size: .8rem;
+  color: #E20B0B; }
+
+.room:hover .close {
+  display: inline; }
+
+.room.disabled {
+  opacity: .6; }
+
 .input {
   border-bottom: 3px solid #000;
   display: inline-block;
@@ -70,7 +162,7 @@ div.gram.same:hover div.meta {
   margin-left: 2rem; }
 
 .audience {
-  margin-bottom: 2rem; }
+  margin-bottom: 1rem; }
 
 .audience .input {
   border-color: #B1B7BD;
@@ -83,6 +175,9 @@ div.gram.same:hover div.meta {
   border-color: #373a3c;
   font-family: 'bau'; }
 
+.writing {
+  margin-top: 2rem; }
+
 .length {
   display: inline-block;
   margin-left: 2rem;
@@ -91,5 +186,3 @@ div.gram.same:hover div.meta {
   font-size: .7rem;
   font-weight: 500;
   letter-spacing: 1px; }
-
-/*# sourceMappingURL=main.css.map */

web/talk/main.js

@@ -640,7 +640,7 @@ module.exports = recl({
 
 
 },{"../actions/MessageActions.coffee":1,"../actions/StationActions.coffee":2,"../stores/MessageStore.coffee":13,"../stores/StationStore.coffee":14,"./MessageComponent.coffee":5,"react-infinite":26}],7:[function(require,module,exports){
-var Load, Member, MessageStore, StationActions, StationStore, a, clas, div, h1, h2, input, label, recl, ref, rele, span, style, textarea,
+var Load, Member, MessageStore, StationActions, StationStore, a, clas, div, h1, h2, input, label, recl, ref, rele, span, style,
   indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
 clas = require('classnames');
@@ -649,7 +649,7 @@ recl = React.createClass;
 
 rele = React.createElement;
 
-ref = React.DOM, div = ref.div, style = ref.style, input = ref.input, textarea = ref.textarea, h1 = ref.h1, h2 = ref.h2, label = ref.label, span = ref.span, a = ref.a;
+ref = React.DOM, div = ref.div, style = ref.style, input = ref.input, h1 = ref.h1, h2 = ref.h2, label = ref.label, span = ref.span, a = ref.a;
 
 MessageStore = require('../stores/MessageStore.coffee');
 
@@ -680,7 +680,6 @@ module.exports = recl({
   },
   componentDidMount: function() {
     this.$el = $(ReactDOM.findDOMNode());
-    this.$input = this.$el.find('input');
     StationStore.addChangeListener(this._onChangeStore);
     if (this.state.listening.indexOf(this.state.station) === -1) {
       return StationActions.listenStation(this.state.station);
@@ -703,10 +702,11 @@ module.exports = recl({
     return indexOf.call(sources, s) < 0 && indexOf.call(s, "/") >= 0 && s[0] === "~" && s.length >= 5;
   },
   onKeyUp: function(e) {
-    var _sources, v;
+    var $input, _sources, v;
-    $('.sour-ctrl .join').removeClass('valid-false');
+    $('.menu.depth-1 .add').removeClass('valid-false');
     if (e.keyCode === 13) {
-      v = this.$input.val().toLowerCase();
+      $input = $(e.target);
+      v = $input.val().toLowerCase();
       if (v[0] !== "~") {
         v = "~" + v;
       }
@@ -714,10 +714,10 @@ module.exports = recl({
         _sources = _.clone(this.state.configs[this.state.station].sources);
         _sources.push(v);
         StationActions.setSources(this.state.station, _sources);
-        this.$input.val('');
+        $input.val('');
-        return this.$input.blur();
+        return $input.blur();
       } else {
-        return $('.sour-ctrl .join').addClass('valid-false');
+        return $('.menu.depth-1 .add').addClass('valid-false');
       }
     }
   },
@@ -731,9 +731,38 @@ module.exports = recl({
     return StationActions.setSources(this.state.station, _sources);
   },
   render: function() {
-    var _clas, members, parts;
+    var _clas, members, parts, source, sources, sourcesSum;
     parts = [];
     members = [];
+    if (this.state.station && this.state.configs[this.state.station]) {
+      sources = (function() {
+        var i, len, ref1, results;
+        ref1 = this.state.configs[this.state.station].sources;
+        results = [];
+        for (i = 0, len = ref1.length; i < len; i++) {
+          source = ref1[i];
+          results.push(div({
+            className: "room"
+          }, [
+            source.slice(1), div({
+              className: "close",
+              onClick: this._remove,
+              "data-station": source
+            }, "✕")
+          ]));
+        }
+        return results;
+      }).call(this);
+      sources.push(input({
+        className: "action add",
+        placeholder: "+ Listen",
+        onKeyUp: this.onKeyUp
+      }, ""));
+      sourcesSum = this.state.configs[this.state.station].sources.length;
+    } else {
+      sources = "";
+      sourcesSum = 0;
+    }
     _clas = clas({
       open: this.props.open === true,
       closed: this.props.open !== true,
@@ -750,34 +779,13 @@ module.exports = recl({
         className: "contents"
       }, [
         div({
-          className: "close"
+          className: "close",
+          onClick: this.props.toggle
         }, "✕"), h2({}, [
-          span({}, "Direct"), label({
-            className: "sum"
-          }, 3)
-        ]), div({}, [
-          div({
-            className: "name"
-          }, "Galen"), div({
-            className: "planet"
-          }, "~talsur-todres")
-        ]), div({
-          className: "action create"
-        }, [label({}, ""), span({}, "Message")]), h2({}, [
           span({}, "Stations"), label({
             className: "sum"
-          }, 4)
+          }, sourcesSum)
-        ]), div({}, [
+        ]), div({}, sources)
-          div({
-            className: "room"
-          }, "/meta"), div({
-            className: "room"
-          }, "/help"), div({
-            className: "room"
-          }, "~talsur-todres/room"), div({
-            className: "action add"
-          }, [label({}, ""), span({}, "Listen")])
-        ])
       ])
     ]);
   }
@@ -821,9 +829,11 @@ Audience = recl({
   render: function() {
     return div({
       className: 'audience',
-      id: 'audience'
+      id: 'audience',
+      key: 'audience'
     }, div({
       className: "input valid-" + this.props.valid,
+      key: 'input',
       contentEditable: true,
       onKeyDown: this.onKeyDown,
       onBlur: this.props.onBlur
@@ -1053,7 +1063,8 @@ module.exports = recl({
       audi[k] = v.slice(1);
     }
     return div({
-      className: 'writing'
+      className: 'writing',
+      key: 'writing'
     }, [
       React.createElement(Audience, {
         audi: audi,
@@ -1141,7 +1152,9 @@ TreeActions.registerComponent("talk", React.createClass({
     });
   },
   render: function() {
-    return div({}, [
+    return div({
+      key: "talk-container"
+    }, [
       div({
         key: "grams-container"
       }, MessagesComponent({
@@ -1273,7 +1286,7 @@ module.exports = function(arg) {
     setSources: function(station, ship, sources) {
       var cordon;
       cordon = {
-        posture: "white",
+        posture: "black",
         list: []
       };
       return design(station, {

web/tree/main.css

@@ -261,7 +261,8 @@ img.logo.first {
   padding-right: 0;
   overflow: hidden;
   position: fixed;
-  z-index: 99; }
+  z-index: 99;
+  margin-top: -3rem; }
   .menu .contents {
     padding-left: 0.9375rem;
     padding-right: 0.9375rem;
@@ -273,6 +274,8 @@ img.logo.first {
     transition: left 0.3s ease-in-out; }
   .menu .close {
     margin-top: -2rem; }
+  .menu .close:hover {
+    opacity: 1; }
   .menu h2 {
     font-size: 1rem;
     padding-top: 3rem; }

web/tree/main.js

@@ -63,7 +63,7 @@ module.exports = {
 
 
 },{"../dispatcher/Dispatcher.coffee":17,"../persistence/TreePersistence.coffee":19}],2:[function(require,module,exports){
-var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, recl, ref, ul, util;
+var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, recl, ref, rend, ul, util;
 
 clas = require('classnames');
 
@@ -83,6 +83,8 @@ util = require('../utils/util.coffee');
 
 recl = React.createClass;
 
+rend = ReactDOM.render;
+
 ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button;
 
 Nav = React.createFactory(query({
@@ -265,7 +267,7 @@ module.exports = query({
     if (next !== this.props.path) {
       React.unmountComponentAtNode($('#body')[0]);
       TreeActions.setCurr(next);
-      return React.render(BodyComponent({}, ""), $('#body')[0]);
+      return rend(BodyComponent({}, ""), $('#body')[0]);
     }
   },
   reset: function() {
@@ -305,7 +307,8 @@ module.exports = query({
     if (this.state.subnav) {
       kids.push(this.state.subnav({
         key: "subnav",
-        open: this.state.open
+        open: this.state.open,
+        toggle: TreeActions.toggleNav
       }, ""));
     }
     return div({}, kids);
@@ -544,7 +547,6 @@ module.exports = query({
       className: "col-md-10 col-md-offset-2 body"
     }, [
       div({
-        id: 'body',
         key: "body" + this.props.path,
         className: className
       }, extra('spam'), extra('logo', {
@@ -1029,6 +1031,7 @@ recl = React.createClass;
 ref = React.DOM, div = ref.div, span = ref.span, code = ref.code;
 
 module.exports = recl({
+  displayName: "Module",
   getInitialState: function() {
     return {
       loaded: false
@@ -1077,7 +1080,9 @@ module.exports = recl({
   },
   render: function() {
     if (!this.state.loaded) {
-      return div({}, "");
+      return div({
+        key: "module-loading"
+      }, "");
     } else {
       return reactify({
         gn: this.props.component,