From bda50103112a8bd22625e4fc4c8f9b97bb57d0c1 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 4 Mar 2015 17:51:03 -0800 Subject: [PATCH 01/15] talking --- docs/pub/tree/src/readme.md | 12 ++ main/pub/talk/src/css/fonts.styl | 12 ++ main/pub/talk/src/css/main.styl | 5 +- .../js/components/MessagesComponent.coffee | 19 ++- .../src/js/components/StationComponent.coffee | 6 +- .../js/components/StationsComponent.coffee | 2 +- .../src/js/components/WritingComponent.coffee | 12 +- main/pub/talk/src/js/main.coffee | 32 ++-- main/pub/talk/src/js/main.js | 156 +++++++----------- 9 files changed, 119 insertions(+), 137 deletions(-) create mode 100644 docs/pub/tree/src/readme.md diff --git a/docs/pub/tree/src/readme.md b/docs/pub/tree/src/readme.md new file mode 100644 index 000000000..b6776e98d --- /dev/null +++ b/docs/pub/tree/src/readme.md @@ -0,0 +1,12 @@ +# installing + +`npm install` + +# building + +in `src/js/`: +`watchify -v -t coffeeify -o main.js main.coffee` + +in `src/css/`: +`stylus -w main.styl` + diff --git a/main/pub/talk/src/css/fonts.styl b/main/pub/talk/src/css/fonts.styl index 8048040a3..1e64aa386 100644 --- a/main/pub/talk/src/css/fonts.styl +++ b/main/pub/talk/src/css/fonts.styl @@ -69,4 +69,16 @@ src: url("http://storage.googleapis.com/urbit-extra/scp-medium.woff"); font-weight: 500; font-style: normal; +} +@font-face { + font-family: "scp"; + src: url("http://storage.googleapis.com/urbit-extra/scp-bold.woff"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "scp"; + src: url("http://storage.googleapis.com/urbit-extra/scp-black.woff"); + font-weight: 700; + font-style: normal; } \ No newline at end of file diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index c478b2031..a669dda95 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -202,7 +202,9 @@ body vertical-align top .attr - color #D7D7D7 + text-align right + display inline-block + margin-right .3rem .attr .iden color #000 @@ -212,7 +214,6 @@ body .mess font-size .9rem - line-height 1.6rem letter-spacing .03rem word-wrap break-word max-width 31rem diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index f721e7659..b15b33b28 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -1,7 +1,7 @@ moment = require 'moment-timezone' recl = React.createClass -[div,input,textarea] = [React.DOM.div,React.DOM.input,React.DOM.textarea] +[div,br,input,textarea] = [React.DOM.div,React.DOM.br,React.DOM.input,React.DOM.textarea] MessageStore = require '../stores/MessageStore.coffee' StationStore = require '../stores/StationStore.coffee' @@ -29,14 +29,16 @@ Message = recl console.log delivery name = if @props.name then @props.name else "" - audi = _.remove _.keys(@props.thought.audience), (stat) => - stat isnt "~"+window.urb.ship+"/"+@props.station + audi = _.keys(@props.thought.audience) + # audi = _.remove _.keys(@props.thought.audience), (stat) => + # stat isnt "~"+window.urb.ship+"/"+@props.station audi = audi.join " " div {className:"message "+pendingClass}, [ (div {className:"attr"}, [ - (Member {ship:@props.ship}, "") div {className:"audi"}, "#{audi}" + (Member {ship:@props.ship}, "") + (br {},"") div {className:"time"}, @convTime @props.thought.statement.date ]) div {className:"mess"}, @props.thought.statement.speech.lin.txt @@ -51,7 +53,7 @@ module.exports = recl last:MessageStore.getLast() fetching:MessageStore.getFetching() listening:MessageStore.getListening() - station:StationStore.getStation() + station:"court" stations:StationStore.getStations() configs:StationStore.getConfigs() typing:MessageStore.getTyping() @@ -106,9 +108,10 @@ module.exports = recl _station = "~"+window.urb.ship+"/"+station sources = _.clone @state.configs[@state.station]?.sources ? [] sources.push _station - _messages = _.filter @state.messages, (_message) -> - audience = _.keys(_message.thought.audience) - _.intersection(sources,audience).length > 0 + _messages = @state.messages + # _messages = _.filter @state.messages, (_message) -> + # audience = _.keys(_message.thought.audience) + # _.intersection(sources,audience).length > 0 _messages = _.sortBy _messages, (_message) -> _message.pending = _message.thought.audience[station] _message.thought.statement.time diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 0d6546bf4..a033d450c 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -15,7 +15,7 @@ module.exports = recl stateFromStore: -> { audi:StationStore.getAudience() members:StationStore.getMembers() - station:StationStore.getStation() + station:"court" stations:StationStore.getStations() configs:StationStore.getConfigs() typing:StationStore.getTyping() @@ -91,8 +91,8 @@ module.exports = recl sources = "" station = [] - station.push (a {className:"up",href:"\#/"}, [(div {className:"arow-up"}, "")]) - station.push (h1 {},@state.station) + # station.push (a {className:"up",href:"\#/"}, [(div {className:"arow-up"}, "")]) + # station.push (h1 {},@state.station) station.push (div {id:"members"},members) parts.push (div {id:"station-container"}, (div {id:"station-meta"},station)) diff --git a/main/pub/talk/src/js/components/StationsComponent.coffee b/main/pub/talk/src/js/components/StationsComponent.coffee index df5a5411d..1d1aea586 100644 --- a/main/pub/talk/src/js/components/StationsComponent.coffee +++ b/main/pub/talk/src/js/components/StationsComponent.coffee @@ -7,7 +7,7 @@ StationActions = require '../actions/StationActions.coffee' module.exports = recl stateFromStore: -> { stations: StationStore.getStations() - station: StationStore.getStation() + station: "~zod/court" } getInitialState: -> @stateFromStore() diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index f6888e543..d77e482b9 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -14,10 +14,9 @@ module.exports = recl if window.localStorage then window.localStorage.getItem 'writing' stateFromStore: -> { - audi:StationStore.getAudience() + audi:["~zod/court"] members:StationStore.getMembers() typing:StationStore.getTyping() - station:StationStore.getStation() } getInitialState: -> @stateFromStore() @@ -35,7 +34,7 @@ module.exports = recl @typing true sendMessage: -> - MessageActions.sendMessage @state.station,@$writing.text(),@state.audi + MessageActions.sendMessage @state.audi,@$writing.text(),@state.audi @$length.text "0/69" @$writing.text('') @set() @@ -109,13 +108,16 @@ module.exports = recl name = if iden then iden.name else "" k = "writing" - k+= " hidden" if not @state?.station - div {className:k,onClick:@_setFocus}, [ + div {className:k}, [ (div {className:"attr"}, [ (Member iden, "") (div {className:"time"}, @getTime()) ]) + (div { + id:"audi" + contentEditable:true + }, "~zod/court") (div { id:"writing" contentEditable:true diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 1610d6025..253517b96 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -86,26 +86,14 @@ $(() -> React.unmountComponentAtNode $('#writing-container')[0] React.unmountComponentAtNode $('#messages-container')[0] - routes = - '': -> - clean() - $c.html "
" - rend (StationsComponent {}, ""),$('#stations-container')[0] - '/:station': (station) -> - clean() - StationActions.switchStation station - $c.html "" - $c.append("
") - $d = $('#messaging-container') - $d.append("
") - $d.append("
") - $d.append("
") - $c.append("
BOTTOM
") - rend (StationComponent {}, ""),$('#station-parts-container')[0] - rend (MessagesComponent {}, ""),$('#messages-container')[0] - rend (WritingComponent {}, ""),$('#writing-container')[0] - - router = Router routes - if not window.location.hash then window.location.hash = "/" - router.init() + $c.html "" + $c.append("
") + $d = $('#messaging-container') + $d.append("
") + $d.append("
") + $d.append("
") + $c.append("
BOTTOM
") + rend (StationComponent {}, ""),$('#station-parts-container')[0] + rend (MessagesComponent {}, ""),$('#messages-container')[0] + rend (WritingComponent {}, ""),$('#writing-container')[0] ) \ No newline at end of file diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index e59436ea5..dbb6407d3 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -37,7 +37,7 @@ module.exports = { return window.chat.MessagePersistence.get(station, start, end); }, sendMessage: function(station, message, audience) { - var k, serial, v, _audi, _message; + var _audi, _message, k, serial, v; serial = window.util.uuid32(); if (station[0] !== "~") { station = "~" + window.urb.ship + "/" + station; @@ -167,11 +167,11 @@ module.exports = { },{"../dispatcher/Dispatcher.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/dispatcher/Dispatcher.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee":[function(require,module,exports){ -var div, input, recl, textarea, _ref; +var div, input, recl, ref, textarea; recl = React.createClass; -_ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = _ref[0], input = _ref[1], textarea = _ref[2]; +ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = ref[0], input = ref[1], textarea = ref[2]; module.exports = recl({ render: function() { @@ -196,13 +196,13 @@ module.exports = recl({ },{}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MessagesComponent.coffee":[function(require,module,exports){ -var Member, Message, MessageActions, MessageStore, StationActions, StationStore, div, input, moment, recl, textarea, _ref; +var Member, Message, MessageActions, MessageStore, StationActions, StationStore, br, div, input, moment, recl, ref, textarea; moment = require('moment-timezone'); recl = React.createClass; -_ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = _ref[0], input = _ref[1], textarea = _ref[2]; +ref = [React.DOM.div, React.DOM.br, React.DOM.input, React.DOM.textarea], div = ref[0], br = ref[1], input = ref[2], textarea = ref[3]; MessageStore = require('../stores/MessageStore.coffee'); @@ -239,11 +239,7 @@ Message = recl({ console.log(delivery); } name = this.props.name ? this.props.name : ""; - audi = _.remove(_.keys(this.props.thought.audience), (function(_this) { - return function(stat) { - return stat !== "~" + window.urb.ship + "/" + _this.props.station; - }; - })(this)); + audi = _.keys(this.props.thought.audience); audi = audi.join(" "); return div({ className: "message " + pendingClass @@ -251,11 +247,11 @@ Message = recl({ div({ className: "attr" }, [ - Member({ - ship: this.props.ship - }, ""), div({ + div({ className: "audi" - }, "" + audi), div({ + }, "" + audi), Member({ + ship: this.props.ship + }, ""), br({}, ""), div({ className: "time" }, this.convTime(this.props.thought.statement.date)) ]), div({ @@ -274,7 +270,7 @@ module.exports = recl({ last: MessageStore.getLast(), fetching: MessageStore.getFetching(), listening: MessageStore.getListening(), - station: StationStore.getStation(), + station: "court", stations: StationStore.getStations(), configs: StationStore.getConfigs(), typing: MessageStore.getTyping() @@ -335,16 +331,12 @@ module.exports = recl({ return this.setState(this.stateFromStore()); }, render: function() { - var messages, sources, station, _messages, _ref1, _ref2, _station; + var _messages, _station, messages, ref1, ref2, sources, station; station = this.state.station; _station = "~" + window.urb.ship + "/" + station; - sources = _.clone((_ref1 = (_ref2 = this.state.configs[this.state.station]) != null ? _ref2.sources : void 0) != null ? _ref1 : []); + sources = _.clone((ref1 = (ref2 = this.state.configs[this.state.station]) != null ? ref2.sources : void 0) != null ? ref1 : []); sources.push(_station); - _messages = _.filter(this.state.messages, function(_message) { - var audience; - audience = _.keys(_message.thought.audience); - return _.intersection(sources, audience).length > 0; - }); + _messages = this.state.messages; _messages = _.sortBy(_messages, function(_message) { _message.pending = _message.thought.audience[station]; return _message.thought.statement.time; @@ -373,11 +365,11 @@ module.exports = recl({ },{"../actions/MessageActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/MessageActions.coffee","../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/MessageStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/MessageStore.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee","moment-timezone":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/moment-timezone/index.js"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationComponent.coffee":[function(require,module,exports){ -var Member, StationActions, StationStore, a, div, h1, input, recl, textarea, _ref; +var Member, StationActions, StationStore, a, div, h1, input, recl, ref, textarea; recl = React.createClass; -_ref = [React.DOM.div, React.DOM.input, React.DOM.textarea, React.DOM.h1, React.DOM.a], div = _ref[0], input = _ref[1], textarea = _ref[2], h1 = _ref[3], a = _ref[4]; +ref = [React.DOM.div, React.DOM.input, React.DOM.textarea, React.DOM.h1, React.DOM.a], div = ref[0], input = ref[1], textarea = ref[2], h1 = ref[3], a = ref[4]; StationStore = require('../stores/StationStore.coffee'); @@ -390,7 +382,7 @@ module.exports = recl({ return { audi: StationStore.getAudience(), members: StationStore.getMembers(), - station: StationStore.getStation(), + station: "court", stations: StationStore.getStations(), configs: StationStore.getConfigs(), typing: StationStore.getTyping(), @@ -421,7 +413,7 @@ module.exports = recl({ return this.setState(this.stateFromStore()); }, _keyUp: function(e) { - var v, _sources; + var _sources, v; if (e.keyCode === 13) { v = this.$input.val(); if (this.state.configs[this.state.station].sources.indexOf(v) === -1) { @@ -442,7 +434,7 @@ module.exports = recl({ return StationActions.setSources(this.state.station, _sources); }, render: function() { - var members, parts, sourceCtrl, sourceInput, sources, station, _remove, _sources; + var _remove, _sources, members, parts, sourceCtrl, sourceInput, sources, station; parts = []; members = []; if (this.state.station && this.state.members[this.state.station]) { @@ -497,15 +489,6 @@ module.exports = recl({ sources = ""; } station = []; - station.push(a({ - className: "up", - href: "\#/" - }, [ - div({ - className: "arow-up" - }, "") - ])); - station.push(h1({}, this.state.station)); station.push(div({ id: "members" }, members)); @@ -530,11 +513,11 @@ module.exports = recl({ },{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationsComponent.coffee":[function(require,module,exports){ -var StationActions, StationStore, div, input, recl, _ref; +var StationActions, StationStore, div, input, recl, ref; recl = React.createClass; -_ref = [React.DOM.div, React.DOM.input], div = _ref[0], input = _ref[1]; +ref = [React.DOM.div, React.DOM.input], div = ref[0], input = ref[1]; StationStore = require('../stores/StationStore.coffee'); @@ -544,7 +527,7 @@ module.exports = recl({ stateFromStore: function() { return { stations: StationStore.getStations(), - station: StationStore.getStation() + station: "~zod/court" }; }, getInitialState: function() { @@ -587,7 +570,7 @@ module.exports = recl({ return e.preventDefault(); }, render: function() { - var station, stations, _click, _remove; + var _click, _remove, station, stations; station = this.state.station; _click = this._click; _remove = this._remove; @@ -632,11 +615,11 @@ module.exports = recl({ },{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee":[function(require,module,exports){ -var Member, MessageActions, StationActions, StationStore, div, input, recl, textarea, _ref; +var Member, MessageActions, StationActions, StationStore, div, input, recl, ref, textarea; recl = React.createClass; -_ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = _ref[0], input = _ref[1], textarea = _ref[2]; +ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = ref[0], input = ref[1], textarea = ref[2]; MessageActions = require('../actions/MessageActions.coffee'); @@ -659,10 +642,9 @@ module.exports = recl({ }, stateFromStore: function() { return { - audi: StationStore.getAudience(), + audi: ["~zod/court"], members: StationStore.getMembers(), - typing: StationStore.getTyping(), - station: StationStore.getStation() + typing: StationStore.getTyping() }; }, getInitialState: function() { @@ -682,7 +664,7 @@ module.exports = recl({ return this.typing(true); }, sendMessage: function() { - MessageActions.sendMessage(this.state.station, this.$writing.text(), this.state.audi); + MessageActions.sendMessage(this.state.audi, this.$writing.text(), this.state.audi); this.$length.text("0/69"); this.$writing.text(''); this.set(); @@ -698,14 +680,14 @@ module.exports = recl({ return this.set(); }, _input: function(e) { - var geturl, length, text, url, urls, _i, _len; + var geturl, i, len, length, text, url, urls; text = this.$writing.text(); length = text.length; geturl = new RegExp("(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))", "g"); urls = text.match(geturl); if (urls !== null && urls.length > 0) { - for (_i = 0, _len = urls.length; _i < _len; _i++) { - url = urls[_i]; + for (i = 0, len = urls.length; i < len; i++) { + url = urls[i]; length -= url.length; length += 10; } @@ -766,18 +748,14 @@ module.exports = recl({ return this.setState(this.stateFromStore()); }, render: function() { - var iden, k, name, ship, user, _ref1; + var iden, k, name, ship, user; user = "~" + window.urb.user; iden = StationStore.getMember(user); ship = iden ? iden.ship : user; name = iden ? iden.name : ""; k = "writing"; - if (!((_ref1 = this.state) != null ? _ref1.station : void 0)) { - k += " hidden"; - } return div({ - className: k, - onClick: this._setFocus + className: k }, [ div({ className: "attr" @@ -786,6 +764,9 @@ module.exports = recl({ className: "time" }, this.getTime()) ]), div({ + id: "audi", + contentEditable: true + }, "~zod/court"), div({ id: "writing", contentEditable: true, onFocus: this._focus, @@ -827,7 +808,7 @@ module.exports = _.merge(new Dispatcher(), { },{"flux":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/flux/index.js"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/main.coffee":[function(require,module,exports){ $(function() { - var $c, MessagesComponent, StationActions, StationComponent, StationsComponent, WritingComponent, clean, rend, router, routes; + var $c, $d, MessagesComponent, StationActions, StationComponent, StationsComponent, WritingComponent, clean, rend; StationActions = require('./actions/StationActions.coffee'); rend = React.render; window.chat = {}; @@ -851,10 +832,10 @@ $(function() { return window.chat.StationPersistence.addSource("main", window.urb.ship, ["~zod/" + name]); }, uuid32: function() { - var i, str, _i, _str; + var _str, i, j, str; str = "0v"; str += Math.ceil(Math.random() * 8) + "."; - for (i = _i = 0; _i <= 5; i = ++_i) { + for (i = j = 0; j <= 5; i = ++j) { _str = Math.ceil(Math.random() * 10000000).toString(32); _str = ("00000" + _str).substr(-5, 5); str += _str + "."; @@ -920,33 +901,16 @@ $(function() { React.unmountComponentAtNode($('#writing-container')[0]); return React.unmountComponentAtNode($('#messages-container')[0]); }; - routes = { - '': function() { - clean(); - $c.html("
"); - return rend(StationsComponent({}, ""), $('#stations-container')[0]); - }, - '/:station': function(station) { - var $d; - clean(); - StationActions.switchStation(station); - $c.html(""); - $c.append("
"); - $d = $('#messaging-container'); - $d.append("
"); - $d.append("
"); - $d.append("
"); - $c.append("
BOTTOM
"); - rend(StationComponent({}, ""), $('#station-parts-container')[0]); - rend(MessagesComponent({}, ""), $('#messages-container')[0]); - return rend(WritingComponent({}, ""), $('#writing-container')[0]); - } - }; - router = Router(routes); - if (!window.location.hash) { - window.location.hash = "/"; - } - return router.init(); + $c.html(""); + $c.append("
"); + $d = $('#messaging-container'); + $d.append("
"); + $d.append("
"); + $d.append("
"); + $c.append("
BOTTOM
"); + rend(StationComponent({}, ""), $('#station-parts-container')[0]); + rend(MessagesComponent({}, ""), $('#messages-container')[0]); + return rend(WritingComponent({}, ""), $('#writing-container')[0]); }); @@ -5325,13 +5289,13 @@ module.exports = { appl: "rodeo", path: "/f/" + station + "/" + since }, function(err, res) { - var _ref, _ref1; + var ref, ref1; console.log('m subscription updates'); console.log(res.data); if (res.data.ok === true) { MessageActions.listeningStation(station); } - if ((_ref = res.data) != null ? (_ref1 = _ref.grams) != null ? _ref1.tele : void 0 : void 0) { + if ((ref = res.data) != null ? (ref1 = ref.grams) != null ? ref1.tele : void 0 : void 0) { return MessageActions.loadMessages(res.data.grams); } }); @@ -5341,10 +5305,10 @@ module.exports = { appl: "rodeo", path: "/f/" + station + "/" + end + "/" + start }, function(err, res) { - var _ref, _ref1; + var ref, ref1; console.log('get'); console.log(res); - if ((_ref = res.data) != null ? (_ref1 = _ref.grams) != null ? _ref1.tele : void 0 : void 0) { + if ((ref = res.data) != null ? (ref1 = ref.grams) != null ? ref1.tele : void 0 : void 0) { MessageActions.loadMessages(res.data.grams, true); return window.urb.unsubscribe({ appl: "rodeo", @@ -5441,10 +5405,10 @@ module.exports = { appl: "rodeo", path: "/a/court" }, function(err, res) { - var _ref, _ref1; + var ref, ref1; console.log('membership updates'); console.log(res.data); - if ((_ref = res.data) != null ? (_ref1 = _ref.group) != null ? _ref1.global : void 0 : void 0) { + if ((ref = res.data) != null ? (ref1 = ref.group) != null ? ref1.global : void 0 : void 0) { return StationActions.loadMembers(res.data.group.global); } }); @@ -5466,13 +5430,13 @@ module.exports = { appl: "rodeo", path: "/ax/" + station }, function(err, res) { - var _ref; + var ref; console.log('station subscription updates'); console.log(res.data); if (res.data.ok === true) { StationActions.listeningStation(station); } - if ((_ref = res.data.group) != null ? _ref.local : void 0) { + if ((ref = res.data.group) != null ? ref.local : void 0) { StationActions.loadMembers(station, res.data.group.local); } if (res.data.config) { @@ -5485,7 +5449,7 @@ module.exports = { },{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/MessageStore.coffee":[function(require,module,exports){ -var EventEmitter, MessageDispatcher, MessageStore, moment, _fetching, _last, _listening, _messages, _station, _typing; +var EventEmitter, MessageDispatcher, MessageStore, _fetching, _last, _listening, _messages, _station, _typing, moment; moment = require('moment-timezone'); @@ -5730,8 +5694,8 @@ StationStore = _.merge(new EventEmitter, { return _station; }, joinStation: function(station) { - var _ref; - if (((_ref = _config.court) != null ? _ref.sources.indexOf(station) : void 0) === -1) { + var ref; + if (((ref = _config.court) != null ? ref.sources.indexOf(station) : void 0) === -1) { return _config.court.sources.push(station); } }, From 91ebe88f6de77afbe034fe76da9677c80ca6eb96 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Thu, 5 Mar 2015 19:58:23 -0800 Subject: [PATCH 02/15] talk reorg --- docs/pub/doc/arvo/clay/commentary.md | 2 +- main/pub/talk/src/css/main.css | 78 +++++++++--------- main/pub/talk/src/css/main.styl | 61 +++++++------- .../js/components/MessagesComponent.coffee | 6 +- .../src/js/components/StationComponent.coffee | 10 +-- .../src/js/components/WritingComponent.coffee | 38 +++++++-- main/pub/talk/src/js/main.js | 79 ++++++++++++------- .../talk/src/js/stores/MessageStore.coffee | 5 ++ 8 files changed, 158 insertions(+), 121 deletions(-) diff --git a/docs/pub/doc/arvo/clay/commentary.md b/docs/pub/doc/arvo/clay/commentary.md index d0edfea2d..daf8bc7df 100644 --- a/docs/pub/doc/arvo/clay/commentary.md +++ b/docs/pub/doc/arvo/clay/commentary.md @@ -1989,7 +1989,7 @@ try to get the aeon referred to by the starting case. If it doesn't exist yet, then we can't do anything interesting with this subscription, so we move on to the next one. -Otherwise, we try to get the aeon referrred to by the ending case. If it +Otherwise, we try to get the aeon referred to by the ending case. If it doesn't exist yet, then we produce all the information we can. We call `++lobes-at-path` at the given aeon and path to see if the requested path has actually changed. If it hasn't, then we don't produce anything; diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index ba91bd6a2..2e38121c8 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -70,6 +70,18 @@ font-weight: 500; font-style: normal; } +@font-face { + font-family: "scp"; + src: url("http://storage.googleapis.com/urbit-extra/scp-bold.woff"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "scp"; + src: url("http://storage.googleapis.com/urbit-extra/scp-black.woff"); + font-weight: 700; + font-style: normal; +} .iden, .audi, .time, @@ -124,22 +136,9 @@ body { margin-left: -12rem; font-size: 4rem; } -#station-container { - position: fixed; - top: 0; - left: 50%; - width: 28rem; - max-height: 2.6rem; - overflow: hidden; - margin-left: -14rem; +#station #station-container { + display: block; padding-top: 1rem; - background-color: #f5f5f5; - border-bottom: 3px solid #ededed; - transition: max-height 0.15s ease-out; -} -#station-container:hover { - max-height: 12rem; - transition: max-height 0.25s ease-in; } #stations-container, #messages-container { @@ -149,8 +148,8 @@ body { position: absolute; top: 4rem; left: 50%; - width: 24rem; - margin-left: -12rem; + width: 66rem; + margin-left: -46rem; margin-bottom: 4rem; } #station > div { @@ -161,9 +160,14 @@ body { margin-bottom: 1rem; } #sources-container { - width: 6rem; - float: right; - margin: 1rem -6rem 0 0; + position: fixed; + top: 0; + left: 50%; + margin-left: -35rem; + text-align: right; + background-color: #000; + color: #fff; + padding: 1rem; } #members { margin-left: 2rem; @@ -172,8 +176,6 @@ body { display: block; } .station { - display: inline-block; - width: 9rem; margin-bottom: 0.3rem; cursor: pointer; font-weight: 200; @@ -245,9 +247,6 @@ body { #messages .message:hover .time { opacity: 1; } -.time { - margin-right: 0.6rem; -} .member { width: 12rem; margin: 0.3rem 0.6rem 0.3rem 0; @@ -271,20 +270,21 @@ body { vertical-align: top; } .attr { - color: #d7d7d7; + text-align: right; + display: inline-block; + margin-right: 0.3rem; + min-width: 30rem; } .attr .iden { color: #000; -} -.attr > div { - margin-right: 0.3rem; + width: 6rem; } .mess { font-size: 0.9rem; - line-height: 1.6rem; letter-spacing: 0.03rem; word-wrap: break-word; - max-width: 31rem; + max-width: 30rem; + margin-left: 0.3rem; } .ship { font-weight: 600; @@ -303,7 +303,6 @@ body { #writing-container { bottom: 4rem; margin-bottom: 1rem; - float: left; } .writing { padding-top: 0.3rem; @@ -313,14 +312,20 @@ body { margin-left: 1rem; margin-top: 1.2rem; } +#audi { + background-color: #eee; + padding: 0.3rem; + margin-top: -0.3rem; + outline: none; +} #writing { font-size: 0.9rem; min-height: 1.6rem; - line-height: 1.6rem; min-width: 1.3rem; padding: 0; outline: none; background-color: #eee; + margin-left: 0.3rem; } #writing:focus { background-color: #fff; @@ -333,8 +338,9 @@ body { text-transform: lowercase; } input.join { + text-align: right; font-size: 4rem; - background-color: #fff; + background-color: transparent; outline: none; width: 24rem; } @@ -345,10 +351,10 @@ input.join { width: 12rem; } input.join::-webkit-input-placeholder { - color: #0003ff; + color: #fff; } input.join:focus::-webkit-input-placeholder { - color: #fff; + color: #000; } .pending { color: #ccc; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index a669dda95..f3fa99643 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -54,22 +54,9 @@ body margin-left -12rem font-size 4rem -#station-container - position fixed - top 0 - left 50% - width 28rem - max-height 2.6rem - overflow hidden - margin-left -14rem +#station #station-container + display block padding-top 1rem - background-color #f5f5f5 - border-bottom 3px solid #ededed - transition max-height 0.15s ease-out - -#station-container:hover - max-height 12rem - transition max-height 0.25s ease-in #stations-container #messages-container @@ -79,8 +66,8 @@ body position absolute top 4rem left 50% - width 24rem - margin-left -12rem + width 66rem + margin-left -46rem margin-bottom 4rem #station > div @@ -91,9 +78,14 @@ body margin-bottom 1rem #sources-container - width 6rem - float right - margin 1rem -6rem 0 0 + position fixed + top 0 + left 50% + margin-left -35rem + text-align right + background-color #000 + color #fff + padding 1rem #members margin-left 2rem @@ -102,8 +94,6 @@ body display block .station - display inline-block - width 9rem margin-bottom .3rem cursor pointer font-weight 200 @@ -176,9 +166,6 @@ body #messages .message:hover .time opacity 1 -.time - margin-right .6rem - .member width 12rem margin .3rem .6rem .3rem 0 @@ -205,18 +192,18 @@ body text-align right display inline-block margin-right .3rem + min-width 30rem .attr .iden color #000 - -.attr > div - margin-right .3rem + width 6rem .mess font-size .9rem letter-spacing .03rem word-wrap break-word - max-width 31rem + max-width 30rem + margin-left .3rem .ship font-weight 600 @@ -235,7 +222,6 @@ body #writing-container bottom 4rem margin-bottom 1rem - float left .writing padding-top .3rem @@ -245,14 +231,20 @@ body margin-left 1rem margin-top 1.2rem +#audi + background-color #eee + padding .3rem + margin-top -.3rem + outline none + #writing font-size .9rem min-height 1.6rem - line-height 1.6rem min-width 1.3rem padding 0 outline none background-color #eee + margin-left .3rem #writing:focus background-color #fff @@ -265,8 +257,9 @@ body text-transform lowercase input.join + text-align right font-size 4rem - background-color #fff + background-color transparent outline none width 24rem @@ -277,10 +270,10 @@ input.join width 12rem input.join::-webkit-input-placeholder - color #0003FF + color #fff input.join:focus::-webkit-input-placeholder - color #fff + color #000 .pending color #ccc diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index b15b33b28..5e8c713d4 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -3,11 +3,11 @@ moment = require 'moment-timezone' recl = React.createClass [div,br,input,textarea] = [React.DOM.div,React.DOM.br,React.DOM.input,React.DOM.textarea] -MessageStore = require '../stores/MessageStore.coffee' -StationStore = require '../stores/StationStore.coffee' MessageActions = require '../actions/MessageActions.coffee' +MessageStore = require '../stores/MessageStore.coffee' StationActions = require '../actions/StationActions.coffee' -Member = require './MemberComponent.coffee' +StationStore = require '../stores/StationStore.coffee' +Member = require './MemberComponent.coffee' Message = recl lz: (n) -> if n<10 then "0#{n}" else "#{n}" diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index a033d450c..90e4b9c9f 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -35,10 +35,6 @@ module.exports = recl componentWillUnmount: -> StationStore.removeChangeListener @_onChangeStore - _toggleAudi: (e) -> - $e = $(e.target).closest('.station') - station = $e.find('.path').text() - StationActions.toggleAudience station _onChangeStore: -> @setState @stateFromStore() @@ -77,12 +73,8 @@ module.exports = recl if @state.station and @state.configs[@state.station] _remove = @_remove _sources = _.clone @state.configs[@state.station].sources - _sources.push "twitter/hoontap" sources = _.map _sources,(source) => - toggleClass = "toggle " - if @state.audi.indexOf(source) isnt -1 then toggleClass += "active" - (div {className:"station",onClick:@_toggleAudi}, [ - (div {className:toggleClass}) + (div {className:"station"}, [ (div {className:"path"}, source), (div {className:"remove",onClick:_remove,"data-station":source},"×") ]) diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index d77e482b9..219a6c994 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -1,10 +1,11 @@ recl = React.createClass -[div,input,textarea] = [React.DOM.div,React.DOM.input,React.DOM.textarea] +[div,br,input,textarea] = [React.DOM.div,React.DOM.br,React.DOM.input,React.DOM.textarea] MessageActions = require '../actions/MessageActions.coffee' +MessageStore = require '../stores/MessageStore.coffee' StationActions = require '../actions/StationActions.coffee' -StationStore = require '../stores/StationStore.coffee' -Member = require './MemberComponent.coffee' +StationStore = require '../stores/StationStore.coffee' +Member = require './MemberComponent.coffee' module.exports = recl set: -> @@ -14,9 +15,10 @@ module.exports = recl if window.localStorage then window.localStorage.getItem 'writing' stateFromStore: -> { - audi:["~zod/court"] + audi:StationStore.getAudience() members:StationStore.getMembers() typing:StationStore.getTyping() + ludi:MessageStore.getLastAudience() } getInitialState: -> @stateFromStore() @@ -66,6 +68,17 @@ module.exports = recl _setFocus: -> @$writing.focus() + _commitAudi: -> + _checkAudi() + $('#writing').focus() + + _checkAudi: -> + v = $('#audi').text() + v = v.split "," + for a in v + a = a.trim() + StationActions.setAudience v + getTime: -> d = new Date() seconds = d.getSeconds() @@ -84,6 +97,7 @@ module.exports = recl componentDidMount: -> window.util.sendMessage = @sendMessage StationStore.addChangeListener @_onChangeStore + MessageStore.addChangeListener @_onChangeStore @$el = $ @getDOMNode() @$length = $('#length') @$writing = $('#writing') @@ -107,17 +121,25 @@ module.exports = recl ship = if iden then iden.ship else user name = if iden then iden.name else "" + audi = @state.audi + if audi.length is 0 + audi = @state.ludi + k = "writing" div {className:k}, [ (div {className:"attr"}, [ + (div { + id:"audi" + className:"audi" + contentEditable:true + onBlur:@_checkAudi + onKeyDown:@_commitAudi + }, audi.join(",")) (Member iden, "") + (br {},"") (div {className:"time"}, @getTime()) ]) - (div { - id:"audi" - contentEditable:true - }, "~zod/court") (div { id:"writing" contentEditable:true diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index dbb6407d3..63fea5013 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -204,14 +204,14 @@ recl = React.createClass; ref = [React.DOM.div, React.DOM.br, React.DOM.input, React.DOM.textarea], div = ref[0], br = ref[1], input = ref[2], textarea = ref[3]; -MessageStore = require('../stores/MessageStore.coffee'); - -StationStore = require('../stores/StationStore.coffee'); - MessageActions = require('../actions/MessageActions.coffee'); +MessageStore = require('../stores/MessageStore.coffee'); + StationActions = require('../actions/StationActions.coffee'); +StationStore = require('../stores/StationStore.coffee'); + Member = require('./MemberComponent.coffee'); Message = recl({ @@ -403,12 +403,6 @@ module.exports = recl({ componentWillUnmount: function() { return StationStore.removeChangeListener(this._onChangeStore); }, - _toggleAudi: function(e) { - var $e, station; - $e = $(e.target).closest('.station'); - station = $e.find('.path').text(); - return StationActions.toggleAudience(station); - }, _onChangeStore: function() { return this.setState(this.stateFromStore()); }, @@ -461,21 +455,12 @@ module.exports = recl({ if (this.state.station && this.state.configs[this.state.station]) { _remove = this._remove; _sources = _.clone(this.state.configs[this.state.station].sources); - _sources.push("twitter/hoontap"); sources = _.map(_sources, (function(_this) { return function(source) { - var toggleClass; - toggleClass = "toggle "; - if (_this.state.audi.indexOf(source) !== -1) { - toggleClass += "active"; - } return div({ - className: "station", - onClick: _this._toggleAudi + className: "station" }, [ div({ - className: toggleClass - }), div({ className: "path" }, source), div({ className: "remove", @@ -615,14 +600,16 @@ module.exports = recl({ },{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee":[function(require,module,exports){ -var Member, MessageActions, StationActions, StationStore, div, input, recl, ref, textarea; +var Member, MessageActions, MessageStore, StationActions, StationStore, br, div, input, recl, ref, textarea; recl = React.createClass; -ref = [React.DOM.div, React.DOM.input, React.DOM.textarea], div = ref[0], input = ref[1], textarea = ref[2]; +ref = [React.DOM.div, React.DOM.br, React.DOM.input, React.DOM.textarea], div = ref[0], br = ref[1], input = ref[2], textarea = ref[3]; MessageActions = require('../actions/MessageActions.coffee'); +MessageStore = require('../stores/MessageStore.coffee'); + StationActions = require('../actions/StationActions.coffee'); StationStore = require('../stores/StationStore.coffee'); @@ -642,9 +629,10 @@ module.exports = recl({ }, stateFromStore: function() { return { - audi: ["~zod/court"], + audi: StationStore.getAudience(), members: StationStore.getMembers(), - typing: StationStore.getTyping() + typing: StationStore.getTyping(), + ludi: MessageStore.getLastAudience() }; }, getInitialState: function() { @@ -705,6 +693,20 @@ module.exports = recl({ _setFocus: function() { return this.$writing.focus(); }, + _commitAudi: function() { + _checkAudi(); + return $('#writing').focus(); + }, + _checkAudi: function() { + var a, i, len, v; + v = $('#audi').text(); + v = v.split(","); + for (i = 0, len = v.length; i < len; i++) { + a = v[i]; + a = a.trim(); + } + return StationActions.setAudience(v); + }, getTime: function() { var d, seconds; d = new Date(); @@ -726,6 +728,7 @@ module.exports = recl({ componentDidMount: function() { window.util.sendMessage = this.sendMessage; StationStore.addChangeListener(this._onChangeStore); + MessageStore.addChangeListener(this._onChangeStore); this.$el = $(this.getDOMNode()); this.$length = $('#length'); this.$writing = $('#writing'); @@ -748,11 +751,15 @@ module.exports = recl({ return this.setState(this.stateFromStore()); }, render: function() { - var iden, k, name, ship, user; + var audi, iden, k, name, ship, user; user = "~" + window.urb.user; iden = StationStore.getMember(user); ship = iden ? iden.ship : user; name = iden ? iden.name : ""; + audi = this.state.audi; + if (audi.length === 0) { + audi = this.state.ludi; + } k = "writing"; return div({ className: k @@ -760,13 +767,16 @@ module.exports = recl({ div({ className: "attr" }, [ - Member(iden, ""), div({ + div({ + id: "audi", + className: "audi", + contentEditable: true, + onBlur: this._checkAudi, + onKeyDown: this._commitAudi + }, audi.join(",")), Member(iden, ""), br({}, ""), div({ className: "time" }, this.getTime()) ]), div({ - id: "audi", - contentEditable: true - }, "~zod/court"), div({ id: "writing", contentEditable: true, onFocus: this._focus, @@ -784,7 +794,7 @@ module.exports = recl({ -},{"../actions/MessageActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/MessageActions.coffee","../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/dispatcher/Dispatcher.coffee":[function(require,module,exports){ +},{"../actions/MessageActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/MessageActions.coffee","../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/MessageStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/MessageStore.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/dispatcher/Dispatcher.coffee":[function(require,module,exports){ var Dispatcher; Dispatcher = require('flux').Dispatcher; @@ -5501,6 +5511,15 @@ MessageStore = _.merge(new EventEmitter, { getTyping: function() { return _typing; }, + getLastAudience: function() { + if (_.keys(_messages).length === 0) { + return []; + } + _messages = _.sortBy(_messages, function(_message) { + return _message.thought.statement.time; + }); + return _.keys(_messages[_messages.length - 1].thought.audience); + }, setTyping: function(state) { return _typing = state; }, diff --git a/main/pub/talk/src/js/stores/MessageStore.coffee b/main/pub/talk/src/js/stores/MessageStore.coffee index ef533599f..4745e15ea 100644 --- a/main/pub/talk/src/js/stores/MessageStore.coffee +++ b/main/pub/talk/src/js/stores/MessageStore.coffee @@ -33,6 +33,11 @@ MessageStore = _.merge new EventEmitter,{ getTyping: -> _typing + getLastAudience: -> + if _.keys(_messages).length is 0 then return [] + _messages = _.sortBy _messages, (_message) -> _message.thought.statement.time + _.keys _messages[_messages.length-1].thought.audience + setTyping: (state) -> _typing = state setListening: (station) -> From 7373c47237c0d61dac99b64dd6df64c1754115d2 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Sat, 7 Mar 2015 11:09:30 -0800 Subject: [PATCH 03/15] talking --- main/pub/talk/src/css/main.css | 4 + main/pub/talk/src/css/main.styl | 4 + .../talk/src/js/actions/StationActions.coffee | 5 + .../js/components/MessagesComponent.coffee | 11 +- .../src/js/components/StationComponent.coffee | 2 +- .../src/js/components/WritingComponent.coffee | 49 ++++++-- main/pub/talk/src/js/main.coffee | 7 +- main/pub/talk/src/js/main.js | 109 ++++++++++++++---- .../talk/src/js/stores/MessageStore.coffee | 4 +- .../talk/src/js/stores/StationStore.coffee | 10 ++ 10 files changed, 160 insertions(+), 45 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 2e38121c8..40a71d1dc 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -318,6 +318,9 @@ body { margin-top: -0.3rem; outline: none; } +#audi.valid-false { + color: #ff2f2f; +} #writing { font-size: 0.9rem; min-height: 1.6rem; @@ -343,6 +346,7 @@ input.join { background-color: transparent; outline: none; width: 24rem; + color: #fff; } #station input.join { font-family: "scp"; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index f3fa99643..4afc89aca 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -237,6 +237,9 @@ body margin-top -.3rem outline none +#audi.valid-false + color #ff2f2f + #writing font-size .9rem min-height 1.6rem @@ -262,6 +265,7 @@ input.join background-color transparent outline none width 24rem + color #fff #station input.join font-family "scp" diff --git a/main/pub/talk/src/js/actions/StationActions.coffee b/main/pub/talk/src/js/actions/StationActions.coffee index 55ac7c54a..6e8bc11d6 100644 --- a/main/pub/talk/src/js/actions/StationActions.coffee +++ b/main/pub/talk/src/js/actions/StationActions.coffee @@ -17,6 +17,11 @@ module.exports = type:"station-set-audience" audience:audience + setValidAudience: (valid) -> + StationDispatcher.handleViewAction + type:"station-set-valid-audience" + valid:valid + toggleAudience: (station) -> StationDispatcher.handleViewAction type:"station-audience-toggle" diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index 5e8c713d4..8b09f7046 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -19,6 +19,11 @@ Message = recl s = @lz d.getSeconds() "~#{h}.#{m}.#{s}" + _handlePm: (e) -> + $t = $(e.target).closest('.iden') + console.log 'pm' + console.log window.util.mainStation $t.text().slice(1) + render: -> # pendingClass = if @props.pending isnt "received" then "pending" else "" delivery = _.uniq _.pluck @props.thought.audience, "delivery" @@ -30,14 +35,12 @@ Message = recl name = if @props.name then @props.name else "" audi = _.keys(@props.thought.audience) - # audi = _.remove _.keys(@props.thought.audience), (stat) => - # stat isnt "~"+window.urb.ship+"/"+@props.station audi = audi.join " " div {className:"message "+pendingClass}, [ (div {className:"attr"}, [ div {className:"audi"}, "#{audi}" - (Member {ship:@props.ship}, "") + (Member {onClick:@_handlePm,ship:@props.ship}, "") (br {},"") div {className:"time"}, @convTime @props.thought.statement.date ]) @@ -53,7 +56,7 @@ module.exports = recl last:MessageStore.getLast() fetching:MessageStore.getFetching() listening:MessageStore.getListening() - station:"court" + station:window.util.mainStation() stations:StationStore.getStations() configs:StationStore.getConfigs() typing:MessageStore.getTyping() diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 90e4b9c9f..ed48574de 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -15,7 +15,7 @@ module.exports = recl stateFromStore: -> { audi:StationStore.getAudience() members:StationStore.getMembers() - station:"court" + station:window.util.mainStation() stations:StationStore.getStations() configs:StationStore.getConfigs() typing:StationStore.getTyping() diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index 219a6c994..d63937a25 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -19,6 +19,7 @@ module.exports = recl members:StationStore.getMembers() typing:StationStore.getTyping() ludi:MessageStore.getLastAudience() + valid:StationStore.getValidAudience() } getInitialState: -> @stateFromStore() @@ -36,7 +37,15 @@ module.exports = recl @typing true sendMessage: -> - MessageActions.sendMessage @state.audi,@$writing.text(),@state.audi + if @_validateAudi() is false + $('#audi').focus() + return + if @state.audi.length is 0 and $('#audi').text().trim().length > 0 + audi = @state.ludi + @_setAudi() + else + audi = @state.audi + MessageActions.sendMessage audi,@$writing.text(),audi @$length.text "0/69" @$writing.text('') @set() @@ -68,16 +77,35 @@ module.exports = recl _setFocus: -> @$writing.focus() - _commitAudi: -> - _checkAudi() - $('#writing').focus() + _validateAudiPart: (a) -> + if a[0] isnt "~" + return false + if a.indexOf("/") is -1 + return false + _a = a.split("/") + if _a[0].length < 3 + return false + if _a[1].length is 0 + return false + return true - _checkAudi: -> + _validateAudi: -> v = $('#audi').text() v = v.split "," for a in v a = a.trim() - StationActions.setAudience v + valid = @_validateAudiPart(a) + valid + + _setAudi: -> + valid = _validateAudi() + StationActions.setValidAudience valid + if valid is true + v = $('#audi').text() + v = v.split "," + for a in v + a = a.trim() + StationActions.setAudience v getTime: -> d = new Date() @@ -121,9 +149,7 @@ module.exports = recl ship = if iden then iden.ship else user name = if iden then iden.name else "" - audi = @state.audi - if audi.length is 0 - audi = @state.ludi + audi = if @state.audi.length is 0 then @state.ludi else @state.audi k = "writing" @@ -131,10 +157,9 @@ module.exports = recl (div {className:"attr"}, [ (div { id:"audi" - className:"audi" + className:"audi valid-#{@state.valid}" contentEditable:true - onBlur:@_checkAudi - onKeyDown:@_commitAudi + onBlur:@_setAudi }, audi.join(",")) (Member iden, "") (br {},"") diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 253517b96..9cdf9f7e9 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -8,11 +8,12 @@ $(() -> window.chat.StationPersistence = require './persistence/StationPersistence.coffee' window.util = - mainStation: -> - switch window.urb.user.length + mainStation (user): -> + if not user then user = window.urb.user + switch user.length when 3 return "court" - when 5 + when 6 return "floor" when 13 return "porch" diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 63fea5013..454e783c4 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -108,6 +108,12 @@ module.exports = { audience: audience }); }, + setValidAudience: function(valid) { + return StationDispatcher.handleViewAction({ + type: "station-set-valid-audience", + valid: valid + }); + }, toggleAudience: function(station) { return StationDispatcher.handleViewAction({ type: "station-audience-toggle", @@ -230,6 +236,12 @@ Message = recl({ s = this.lz(d.getSeconds()); return "~" + h + "." + m + "." + s; }, + _handlePm: function(e) { + var $t; + $t = $(e.target).closest('.iden'); + console.log('pm'); + return console.log(window.util.mainStation($t.text().slice(1))); + }, render: function() { var audi, delivery, name, pendingClass; delivery = _.uniq(_.pluck(this.props.thought.audience, "delivery")); @@ -249,9 +261,11 @@ Message = recl({ }, [ div({ className: "audi" - }, "" + audi), Member({ + }, "" + audi), div({ + onClick: this._handlePm + }, Member({ ship: this.props.ship - }, ""), br({}, ""), div({ + }, "")), br({}, ""), div({ className: "time" }, this.convTime(this.props.thought.statement.date)) ]), div({ @@ -270,7 +284,7 @@ module.exports = recl({ last: MessageStore.getLast(), fetching: MessageStore.getFetching(), listening: MessageStore.getListening(), - station: "court", + station: window.util.mainStation(), stations: StationStore.getStations(), configs: StationStore.getConfigs(), typing: MessageStore.getTyping() @@ -382,7 +396,7 @@ module.exports = recl({ return { audi: StationStore.getAudience(), members: StationStore.getMembers(), - station: "court", + station: window.util.mainStation(), stations: StationStore.getStations(), configs: StationStore.getConfigs(), typing: StationStore.getTyping(), @@ -632,7 +646,8 @@ module.exports = recl({ audi: StationStore.getAudience(), members: StationStore.getMembers(), typing: StationStore.getTyping(), - ludi: MessageStore.getLastAudience() + ludi: MessageStore.getLastAudience(), + valid: StationStore.getValidAudience() }; }, getInitialState: function() { @@ -652,7 +667,18 @@ module.exports = recl({ return this.typing(true); }, sendMessage: function() { - MessageActions.sendMessage(this.state.audi, this.$writing.text(), this.state.audi); + var audi; + if (this._validateAudi() === false) { + $('#audi').focus(); + return; + } + if (this.state.audi.length === 0 && $('#audi').text().trim().length > 0) { + audi = this.state.ludi; + this._setAudi(); + } else { + audi = this.state.audi; + } + MessageActions.sendMessage(audi, this.$writing.text(), audi); this.$length.text("0/69"); this.$writing.text(''); this.set(); @@ -693,19 +719,47 @@ module.exports = recl({ _setFocus: function() { return this.$writing.focus(); }, - _commitAudi: function() { - _checkAudi(); - return $('#writing').focus(); + _validateAudiPart: function(a) { + var _a; + if (a[0] !== "~") { + return false; + } + if (a.indexOf("/") === -1) { + return false; + } + _a = a.split("/"); + if (_a[0].length < 3) { + return false; + } + if (_a[1].length === 0) { + return false; + } + return true; }, - _checkAudi: function() { - var a, i, len, v; + _validateAudi: function() { + var a, i, len, v, valid; v = $('#audi').text(); v = v.split(","); for (i = 0, len = v.length; i < len; i++) { a = v[i]; a = a.trim(); + valid = this._validateAudiPart(a); + } + return valid; + }, + _setAudi: function() { + var a, i, len, v, valid; + valid = _validateAudi(); + StationActions.setValidAudience(valid); + if (valid === true) { + v = $('#audi').text(); + v = v.split(","); + for (i = 0, len = v.length; i < len; i++) { + a = v[i]; + a = a.trim(); + } + return StationActions.setAudience(v); } - return StationActions.setAudience(v); }, getTime: function() { var d, seconds; @@ -756,10 +810,7 @@ module.exports = recl({ iden = StationStore.getMember(user); ship = iden ? iden.ship : user; name = iden ? iden.name : ""; - audi = this.state.audi; - if (audi.length === 0) { - audi = this.state.ludi; - } + audi = this.state.audi.length === 0 ? this.state.ludi : this.state.audi; k = "writing"; return div({ className: k @@ -769,10 +820,9 @@ module.exports = recl({ }, [ div({ id: "audi", - className: "audi", + className: "audi valid-" + this.state.valid, contentEditable: true, - onBlur: this._checkAudi, - onKeyDown: this._commitAudi + onBlur: this._setAudi }, audi.join(",")), Member(iden, ""), br({}, ""), div({ className: "time" }, this.getTime()) @@ -829,7 +879,7 @@ $(function() { switch (window.urb.user.length) { case 3: return "court"; - case 5: + case 6: return "floor"; case 13: return "porch"; @@ -5512,13 +5562,14 @@ MessageStore = _.merge(new EventEmitter, { return _typing; }, getLastAudience: function() { + var messages; if (_.keys(_messages).length === 0) { return []; } - _messages = _.sortBy(_messages, function(_message) { + messages = _.sortBy(_messages, function(_message) { return _message.thought.statement.time; }); - return _.keys(_messages[_messages.length - 1].thought.audience); + return _.keys(messages[messages.length - 1].thought.audience); }, setTyping: function(state) { return _typing = state; @@ -5604,7 +5655,7 @@ module.exports = MessageStore; },{"../dispatcher/Dispatcher.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/dispatcher/Dispatcher.coffee","events":"/usr/local/lib/node_modules/watchify/node_modules/browserify/node_modules/events/events.js","moment-timezone":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/moment-timezone/index.js"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee":[function(require,module,exports){ -var EventEmitter, StationDispatcher, StationStore, _audience, _config, _listening, _members, _station, _stations, _typing; +var EventEmitter, StationDispatcher, StationStore, _audience, _config, _listening, _members, _station, _stations, _typing, _validAudience; EventEmitter = require('events').EventEmitter; @@ -5624,6 +5675,8 @@ _config = {}; _typing = {}; +_validAudience = true; + StationStore = _.merge(new EventEmitter, { removeChangeListener: function(cb) { return this.removeListener("change", cb); @@ -5640,6 +5693,12 @@ StationStore = _.merge(new EventEmitter, { setAudience: function(audience) { return _audience = audience; }, + getValidAudience: function() { + return _validAudience; + }, + setValidAudience: function(valid) { + return _validAudience = valid; + }, toggleAudience: function(station) { if (_audience.indexOf(station) !== -1) { return _audience.splice(_audience.indexOf(station), 1); @@ -5745,6 +5804,10 @@ StationStore.dispatchToken = StationDispatcher.register(function(payload) { StationStore.setAudience(action.audience); StationStore.emitChange(); break; + case 'station-set-valid-audience': + StationStore.setValidAudience(action.valid); + StationStore.emitChange(); + break; case 'station-switch': StationStore.setAudience([]); StationStore.setStation(action.station); diff --git a/main/pub/talk/src/js/stores/MessageStore.coffee b/main/pub/talk/src/js/stores/MessageStore.coffee index 4745e15ea..1bd902a29 100644 --- a/main/pub/talk/src/js/stores/MessageStore.coffee +++ b/main/pub/talk/src/js/stores/MessageStore.coffee @@ -35,8 +35,8 @@ MessageStore = _.merge new EventEmitter,{ getLastAudience: -> if _.keys(_messages).length is 0 then return [] - _messages = _.sortBy _messages, (_message) -> _message.thought.statement.time - _.keys _messages[_messages.length-1].thought.audience + messages = _.sortBy _messages, (_message) -> _message.thought.statement.time + _.keys messages[messages.length-1].thought.audience setTyping: (state) -> _typing = state diff --git a/main/pub/talk/src/js/stores/StationStore.coffee b/main/pub/talk/src/js/stores/StationStore.coffee index 77c3f6085..bc5e6f1e9 100644 --- a/main/pub/talk/src/js/stores/StationStore.coffee +++ b/main/pub/talk/src/js/stores/StationStore.coffee @@ -10,6 +10,8 @@ _station = null _config = {} _typing = {} +_validAudience = true + StationStore = _.merge new EventEmitter,{ removeChangeListener: (cb) -> @removeListener "change", cb @@ -21,6 +23,10 @@ StationStore = _.merge new EventEmitter,{ setAudience: (audience) -> _audience = audience + getValidAudience: -> _validAudience + + setValidAudience: (valid) -> _validAudience = valid + toggleAudience: (station) -> if _audience.indexOf(station) isnt -1 _audience.splice _audience.indexOf(station), 1 @@ -94,6 +100,10 @@ StationStore.dispatchToken = StationDispatcher.register (payload) -> StationStore.setAudience action.audience StationStore.emitChange() break + when 'station-set-valid-audience' + StationStore.setValidAudience action.valid + StationStore.emitChange() + break when 'station-switch' StationStore.setAudience [] StationStore.setStation action.station From 7c846667e02a4a39ff4a2aaea0c318b893f1271a Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Mon, 9 Mar 2015 15:45:34 -0700 Subject: [PATCH 04/15] membership --- main/pub/talk/src/css/main.css | 21 +++-- main/pub/talk/src/css/main.styl | 21 +++-- .../talk/src/js/actions/StationActions.coffee | 3 +- .../js/components/MessagesComponent.coffee | 20 ++-- .../src/js/components/StationComponent.coffee | 7 +- .../src/js/components/WritingComponent.coffee | 2 +- main/pub/talk/src/js/main.coffee | 3 +- main/pub/talk/src/js/main.js | 93 ++++++++++++------- .../js/persistence/StationPersistence.coffee | 4 +- .../talk/src/js/stores/StationStore.coffee | 32 +++---- 10 files changed, 122 insertions(+), 84 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 40a71d1dc..68bc9539d 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -137,8 +137,9 @@ body { font-size: 4rem; } #station #station-container { - display: block; padding-top: 1rem; + min-width: 30rem; + text-align: right; } #stations-container, #messages-container { @@ -155,9 +156,13 @@ body { #station > div { display: inline-block; } -#station-meta { - margin-right: 1rem; - margin-bottom: 1rem; +#station-meta .audi, +#station-meta .iden { + display: inline-block; +} +#station-meta .iden { + width: 6rem; + margin-left: 0.3rem; } #sources-container { position: fixed; @@ -172,9 +177,6 @@ body { #members { margin-left: 2rem; } -#station .iden { - display: block; -} .station { margin-bottom: 0.3rem; cursor: pointer; @@ -247,6 +249,9 @@ body { #messages .message:hover .time { opacity: 1; } +#messages .message .ship { + cursor: pointer; +} .member { width: 12rem; margin: 0.3rem 0.6rem 0.3rem 0; @@ -278,6 +283,7 @@ body { .attr .iden { color: #000; width: 6rem; + margin-left: 0.3rem; } .mess { font-size: 0.9rem; @@ -317,6 +323,7 @@ body { padding: 0.3rem; margin-top: -0.3rem; outline: none; + margin-right: -0.3rem; } #audi.valid-false { color: #ff2f2f; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index 4afc89aca..a90c32a19 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -55,8 +55,9 @@ body font-size 4rem #station #station-container - display block padding-top 1rem + min-width 30rem + text-align right #stations-container #messages-container @@ -73,9 +74,13 @@ body #station > div display inline-block -#station-meta - margin-right 1rem - margin-bottom 1rem +#station-meta .audi +#station-meta .iden + display inline-block + +#station-meta .iden + width 6rem + margin-left .3rem #sources-container position fixed @@ -90,9 +95,6 @@ body #members margin-left 2rem -#station .iden - display block - .station margin-bottom .3rem cursor pointer @@ -166,6 +168,9 @@ body #messages .message:hover .time opacity 1 +#messages .message .ship + cursor pointer + .member width 12rem margin .3rem .6rem .3rem 0 @@ -197,6 +202,7 @@ body .attr .iden color #000 width 6rem + margin-left .3rem .mess font-size .9rem @@ -236,6 +242,7 @@ body padding .3rem margin-top -.3rem outline none + margin-right -.3rem #audi.valid-false color #ff2f2f diff --git a/main/pub/talk/src/js/actions/StationActions.coffee b/main/pub/talk/src/js/actions/StationActions.coffee index 6e8bc11d6..f7bac708d 100644 --- a/main/pub/talk/src/js/actions/StationActions.coffee +++ b/main/pub/talk/src/js/actions/StationActions.coffee @@ -58,11 +58,10 @@ module.exports = type:"stations-load" stations:stations - loadMembers: (station,members) -> + loadMembers: (members) -> StationDispatcher.handleServerAction type:"members-load" members:members - station:station createStation: (station) -> StationDispatcher.handleViewAction diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index 8b09f7046..399ecc829 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -20,19 +20,15 @@ Message = recl "~#{h}.#{m}.#{s}" _handlePm: (e) -> - $t = $(e.target).closest('.iden') - console.log 'pm' - console.log window.util.mainStation $t.text().slice(1) + return if not @props._handlePm + user = $(e.target).closest('.iden').text().slice(1) + @props._handlePm user render: -> # pendingClass = if @props.pending isnt "received" then "pending" else "" delivery = _.uniq _.pluck @props.thought.audience, "delivery" pendingClass = if delivery.indexOf("received") isnt -1 then "received" else "pending" - if pendingClass is "pending" - console.log @props.thought - console.log delivery - name = if @props.name then @props.name else "" audi = _.keys(@props.thought.audience) audi = audi.join " " @@ -40,7 +36,7 @@ Message = recl div {className:"message "+pendingClass}, [ (div {className:"attr"}, [ div {className:"audi"}, "#{audi}" - (Member {onClick:@_handlePm,ship:@props.ship}, "") + (div {onClick:@_handlePm}, (Member {ship:@props.ship}, "")) (br {},"") div {className:"time"}, @convTime @props.thought.statement.date ]) @@ -106,6 +102,13 @@ module.exports = recl _onChangeStore: -> @setState @stateFromStore() + _handlePm: (user) -> + audi = [ + window.util.mainStationPath(user) + window.util.mainStationPath(window.urb.user) + ] + StationActions.setAudience audi + render: -> station = @state.station _station = "~"+window.urb.ship+"/"+station @@ -128,5 +131,6 @@ module.exports = recl messages = _messages.map (_message) => _message.station = @state.station + _message._handlePm = @_handlePm Message _message, "" div {id: "messages"}, messages \ No newline at end of file diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index ed48574de..b3a7f294e 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -60,9 +60,10 @@ module.exports = recl parts = [] members = [] - if @state.station and @state.members[@state.station] - members = _.map @state.members[@state.station], (state,member) -> - Member {ship:member,presence:state.presence} + if @state.station and @state.members + members = _.map @state.members, (stations,member) -> + audi = _.map stations,(presence,station) -> (div {className:"audi"}, station) + (div {}, [audi,Member {ship:member}]) else members = "" diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index d63937a25..720a83689 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -98,7 +98,7 @@ module.exports = recl valid _setAudi: -> - valid = _validateAudi() + valid = @_validateAudi() StationActions.setValidAudience valid if valid is true v = $('#audi').text() diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 9cdf9f7e9..37b123823 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -8,7 +8,8 @@ $(() -> window.chat.StationPersistence = require './persistence/StationPersistence.coffee' window.util = - mainStation (user): -> + mainStationPath: (user) -> "~#{user}/#{window.util.mainStation(user)}" + mainStation: (user) -> if not user then user = window.urb.user switch user.length when 3 diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 454e783c4..f646b9176 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -154,11 +154,10 @@ module.exports = { stations: stations }); }, - loadMembers: function(station, members) { + loadMembers: function(members) { return StationDispatcher.handleServerAction({ type: "members-load", - members: members, - station: station + members: members }); }, createStation: function(station) { @@ -237,19 +236,17 @@ Message = recl({ return "~" + h + "." + m + "." + s; }, _handlePm: function(e) { - var $t; - $t = $(e.target).closest('.iden'); - console.log('pm'); - return console.log(window.util.mainStation($t.text().slice(1))); + var user; + if (!this.props._handlePm) { + return; + } + user = $(e.target).closest('.iden').text().slice(1); + return this.props._handlePm(user); }, render: function() { var audi, delivery, name, pendingClass; delivery = _.uniq(_.pluck(this.props.thought.audience, "delivery")); pendingClass = delivery.indexOf("received") !== -1 ? "received" : "pending"; - if (pendingClass === "pending") { - console.log(this.props.thought); - console.log(delivery); - } name = this.props.name ? this.props.name : ""; audi = _.keys(this.props.thought.audience); audi = audi.join(" "); @@ -344,6 +341,11 @@ module.exports = recl({ _onChangeStore: function() { return this.setState(this.stateFromStore()); }, + _handlePm: function(user) { + var audi; + audi = [window.util.mainStationPath(user), window.util.mainStationPath(window.urb.user)]; + return StationActions.setAudience(audi); + }, render: function() { var _messages, _station, messages, ref1, ref2, sources, station; station = this.state.station; @@ -367,6 +369,7 @@ module.exports = recl({ messages = _messages.map((function(_this) { return function(_message) { _message.station = _this.state.station; + _message._handlePm = _this._handlePm; return Message(_message, ""); }; })(this)); @@ -445,12 +448,19 @@ module.exports = recl({ var _remove, _sources, members, parts, sourceCtrl, sourceInput, sources, station; parts = []; members = []; - if (this.state.station && this.state.members[this.state.station]) { - members = _.map(this.state.members[this.state.station], function(state, member) { - return Member({ - ship: member, - presence: state.presence + if (this.state.station && this.state.members) { + members = _.map(this.state.members, function(stations, member) { + var audi; + audi = _.map(stations, function(presence, station) { + return div({ + className: "audi" + }, station); }); + return div({}, [ + audi, Member({ + ship: member + }) + ]); }); } else { members = ""; @@ -749,7 +759,7 @@ module.exports = recl({ }, _setAudi: function() { var a, i, len, v, valid; - valid = _validateAudi(); + valid = this._validateAudi(); StationActions.setValidAudience(valid); if (valid === true) { v = $('#audi').text(); @@ -875,8 +885,14 @@ $(function() { window.chat.MessagePersistence = require('./persistence/MessagePersistence.coffee'); window.chat.StationPersistence = require('./persistence/StationPersistence.coffee'); window.util = { - mainStation: function() { - switch (window.urb.user.length) { + mainStationPath: function(user) { + return "~" + user + "/" + (window.util.mainStation(user)); + }, + mainStation: function(user) { + if (!user) { + user = window.urb.user; + } + switch (user.length) { case 3: return "court"; case 6: @@ -5496,8 +5512,8 @@ module.exports = { if (res.data.ok === true) { StationActions.listeningStation(station); } - if ((ref = res.data.group) != null ? ref.local : void 0) { - StationActions.loadMembers(station, res.data.group.local); + if ((ref = res.data.group) != null ? ref.global : void 0) { + StationActions.loadMembers(res.data.group.global); } if (res.data.config) { return StationActions.loadConfig(station, res.data.config); @@ -5720,21 +5736,26 @@ StationStore = _.merge(new EventEmitter, { ship: ship }; }, - changeMember: function(dir, name, ship) { - if (dir === "out") { - _members = _.filter(_members, function(_member) { - return _member.ship !== ship; - }); + loadMembers: function(members) { + var list, member, presence, results, station; + _members = {}; + results = []; + for (station in members) { + list = members[station]; + results.push((function() { + var results1; + results1 = []; + for (member in list) { + presence = list[member]; + if (!_members[member]) { + _members[member] = {}; + } + results1.push(_members[member][station] = presence); + } + return results1; + })()); } - if (dir === "in") { - return _members.push({ - name: name, - ship: ship - }); - } - }, - loadMembers: function(station, members) { - return _members[station] = members; + return results; }, getMembers: function() { return _members; @@ -5835,7 +5856,7 @@ StationStore.dispatchToken = StationDispatcher.register(function(payload) { StationStore.emitChange(); break; case "members-load": - StationStore.loadMembers(action.station, action.members); + StationStore.loadMembers(action.members); StationStore.emitChange(); break; case "typing-set": diff --git a/main/pub/talk/src/js/persistence/StationPersistence.coffee b/main/pub/talk/src/js/persistence/StationPersistence.coffee index d774bf63b..83b63ed07 100644 --- a/main/pub/talk/src/js/persistence/StationPersistence.coffee +++ b/main/pub/talk/src/js/persistence/StationPersistence.coffee @@ -68,7 +68,7 @@ module.exports = console.log(res.data) if res.data.ok is true StationActions.listeningStation station - if res.data.group?.local - StationActions.loadMembers station,res.data.group.local + if res.data.group?.global + StationActions.loadMembers res.data.group.global if res.data.config StationActions.loadConfig station,res.data.config \ No newline at end of file diff --git a/main/pub/talk/src/js/stores/StationStore.coffee b/main/pub/talk/src/js/stores/StationStore.coffee index bc5e6f1e9..c7b8940ca 100644 --- a/main/pub/talk/src/js/stores/StationStore.coffee +++ b/main/pub/talk/src/js/stores/StationStore.coffee @@ -1,14 +1,14 @@ -EventEmitter = require('events').EventEmitter +EventEmitter = require('events').EventEmitter StationDispatcher = require '../dispatcher/Dispatcher.coffee' -_audience = [] -_members = {} -_stations = [] -_listening = [] -_station = null -_config = {} -_typing = {} +_audience = [] +_members = {} +_stations = [] +_listening = [] +_station = null +_config = {} +_typing = {} _validAudience = true @@ -41,14 +41,12 @@ StationStore = _.merge new EventEmitter,{ getMember: (ship) -> {ship:ship} - changeMember: (dir,name,ship) -> - if dir is "out" - _members = _.filter _members, (_member) -> - return (_member.ship isnt ship) - if dir is "in" - _members.push {name:name, ship:ship} - - loadMembers: (station,members) -> _members[station] = members + loadMembers: (members) -> + _members = {} + for station,list of members + for member,presence of list + _members[member] = {} if not _members[member] + _members[member][station] = presence getMembers: -> _members @@ -131,7 +129,7 @@ StationStore.dispatchToken = StationDispatcher.register (payload) -> StationStore.emitChange() break when "members-load" - StationStore.loadMembers action.station,action.members + StationStore.loadMembers action.members StationStore.emitChange() break when "typing-set" From 90fe0fef0e9c79e42ffb4f60def87fc4d79d5fa5 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Tue, 10 Mar 2015 11:49:01 -0700 Subject: [PATCH 05/15] better pms --- .../js/components/MessagesComponent.coffee | 11 ++- .../src/js/components/WritingComponent.coffee | 25 ++++--- main/pub/talk/src/js/main.coffee | 16 +++++ main/pub/talk/src/js/main.js | 67 ++++++++++++++----- 4 files changed, 89 insertions(+), 30 deletions(-) diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index 399ecc829..ad29d3233 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -19,6 +19,10 @@ Message = recl s = @lz d.getSeconds() "~#{h}.#{m}.#{s}" + _handleAudi: (e) -> + audi = $(e.target).closest('.audi').text().split(" ") + @props._handleAudi audi + _handlePm: (e) -> return if not @props._handlePm user = $(e.target).closest('.iden').text().slice(1) @@ -30,12 +34,12 @@ Message = recl pendingClass = if delivery.indexOf("received") isnt -1 then "received" else "pending" name = if @props.name then @props.name else "" - audi = _.keys(@props.thought.audience) + audi = window.util.clipAudi _.keys @props.thought.audience audi = audi.join " " div {className:"message "+pendingClass}, [ (div {className:"attr"}, [ - div {className:"audi"}, "#{audi}" + div {onClick:@_handleAudi,className:"audi"}, "#{audi}" (div {onClick:@_handlePm}, (Member {ship:@props.ship}, "")) (br {},"") div {className:"time"}, @convTime @props.thought.statement.date @@ -109,6 +113,8 @@ module.exports = recl ] StationActions.setAudience audi + _handleAudi: (audi) -> StationActions.setAudience audi + render: -> station = @state.station _station = "~"+window.urb.ship+"/"+station @@ -132,5 +138,6 @@ module.exports = recl messages = _messages.map (_message) => _message.station = @state.station _message._handlePm = @_handlePm + _message._handleAudi = @_handleAudi Message _message, "" div {id: "messages"}, messages \ No newline at end of file diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index 720a83689..dd11844fd 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -45,6 +45,7 @@ module.exports = recl @_setAudi() else audi = @state.audi + audi = window.util.expandAudi audi MessageActions.sendMessage audi,@$writing.text(),audi @$length.text "0/69" @$writing.text('') @@ -80,18 +81,20 @@ module.exports = recl _validateAudiPart: (a) -> if a[0] isnt "~" return false - if a.indexOf("/") is -1 - return false - _a = a.split("/") - if _a[0].length < 3 - return false - if _a[1].length is 0 + if a.indexOf("/") isnt -1 + _a = a.split("/") + if _a[1].length is 0 + return false + ship = _a[0] + else + ship = a + if ship.length < 3 return false return true _validateAudi: -> v = $('#audi').text() - v = v.split "," + v = v.split " " for a in v a = a.trim() valid = @_validateAudiPart(a) @@ -102,9 +105,8 @@ module.exports = recl StationActions.setValidAudience valid if valid is true v = $('#audi').text() - v = v.split "," - for a in v - a = a.trim() + v = v.split " " + v = window.util.expandAudi v StationActions.setAudience v getTime: -> @@ -150,6 +152,7 @@ module.exports = recl name = if iden then iden.name else "" audi = if @state.audi.length is 0 then @state.ludi else @state.audi + audi = window.util.clipAudi audi k = "writing" @@ -160,7 +163,7 @@ module.exports = recl className:"audi valid-#{@state.valid}" contentEditable:true onBlur:@_setAudi - }, audi.join(",")) + }, audi.join(" ")) (Member iden, "") (br {},"") (div {className:"time"}, @getTime()) diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 37b123823..360fa1b77 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -8,7 +8,10 @@ $(() -> window.chat.StationPersistence = require './persistence/StationPersistence.coffee' window.util = + mainStations: ["court","floor","porch"] + mainStationPath: (user) -> "~#{user}/#{window.util.mainStation(user)}" + mainStation: (user) -> if not user then user = window.urb.user switch user.length @@ -19,6 +22,19 @@ $(() -> when 13 return "porch" + clipAudi: (audi) -> + audi = audi.join " " + for v in window.util.mainStations + regx = new RegExp "/#{v}","g" + audi = audi.replace regx,"" + audi.split " " + + expandAudi: (audi) -> + for k,v of audi + if v.indexOf("/") is -1 + audi[k] = "#{v}/#{window.util.mainStation(v.slice(1))}" + audi + create: (name) -> window.chat.StationPersistence.createStation name, (err,res) -> diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index f646b9176..81f1b1894 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -235,6 +235,11 @@ Message = recl({ s = this.lz(d.getSeconds()); return "~" + h + "." + m + "." + s; }, + _handleAudi: function(e) { + var audi; + audi = $(e.target).closest('.audi').text().split(" "); + return this.props._handleAudi(audi); + }, _handlePm: function(e) { var user; if (!this.props._handlePm) { @@ -248,7 +253,7 @@ Message = recl({ delivery = _.uniq(_.pluck(this.props.thought.audience, "delivery")); pendingClass = delivery.indexOf("received") !== -1 ? "received" : "pending"; name = this.props.name ? this.props.name : ""; - audi = _.keys(this.props.thought.audience); + audi = window.util.clipAudi(_.keys(this.props.thought.audience)); audi = audi.join(" "); return div({ className: "message " + pendingClass @@ -257,6 +262,7 @@ Message = recl({ className: "attr" }, [ div({ + onClick: this._handleAudi, className: "audi" }, "" + audi), div({ onClick: this._handlePm @@ -346,6 +352,9 @@ module.exports = recl({ audi = [window.util.mainStationPath(user), window.util.mainStationPath(window.urb.user)]; return StationActions.setAudience(audi); }, + _handleAudi: function(audi) { + return StationActions.setAudience(audi); + }, render: function() { var _messages, _station, messages, ref1, ref2, sources, station; station = this.state.station; @@ -370,6 +379,7 @@ module.exports = recl({ return function(_message) { _message.station = _this.state.station; _message._handlePm = _this._handlePm; + _message._handleAudi = _this._handleAudi; return Message(_message, ""); }; })(this)); @@ -688,6 +698,7 @@ module.exports = recl({ } else { audi = this.state.audi; } + audi = window.util.expandAudi(audi); MessageActions.sendMessage(audi, this.$writing.text(), audi); this.$length.text("0/69"); this.$writing.text(''); @@ -730,18 +741,20 @@ module.exports = recl({ return this.$writing.focus(); }, _validateAudiPart: function(a) { - var _a; + var _a, ship; if (a[0] !== "~") { return false; } - if (a.indexOf("/") === -1) { - return false; + if (a.indexOf("/") !== -1) { + _a = a.split("/"); + if (_a[1].length === 0) { + return false; + } + ship = _a[0]; + } else { + ship = a; } - _a = a.split("/"); - if (_a[0].length < 3) { - return false; - } - if (_a[1].length === 0) { + if (ship.length < 3) { return false; } return true; @@ -749,7 +762,7 @@ module.exports = recl({ _validateAudi: function() { var a, i, len, v, valid; v = $('#audi').text(); - v = v.split(","); + v = v.split(" "); for (i = 0, len = v.length; i < len; i++) { a = v[i]; a = a.trim(); @@ -758,16 +771,13 @@ module.exports = recl({ return valid; }, _setAudi: function() { - var a, i, len, v, valid; + var v, valid; valid = this._validateAudi(); StationActions.setValidAudience(valid); if (valid === true) { v = $('#audi').text(); - v = v.split(","); - for (i = 0, len = v.length; i < len; i++) { - a = v[i]; - a = a.trim(); - } + v = v.split(" "); + v = window.util.expandAudi(v); return StationActions.setAudience(v); } }, @@ -821,6 +831,7 @@ module.exports = recl({ ship = iden ? iden.ship : user; name = iden ? iden.name : ""; audi = this.state.audi.length === 0 ? this.state.ludi : this.state.audi; + audi = window.util.clipAudi(audi); k = "writing"; return div({ className: k @@ -833,7 +844,7 @@ module.exports = recl({ className: "audi valid-" + this.state.valid, contentEditable: true, onBlur: this._setAudi - }, audi.join(",")), Member(iden, ""), br({}, ""), div({ + }, audi.join(" ")), Member(iden, ""), br({}, ""), div({ className: "time" }, this.getTime()) ]), div({ @@ -885,6 +896,7 @@ $(function() { window.chat.MessagePersistence = require('./persistence/MessagePersistence.coffee'); window.chat.StationPersistence = require('./persistence/StationPersistence.coffee'); window.util = { + mainStations: ["court", "floor", "porch"], mainStationPath: function(user) { return "~" + user + "/" + (window.util.mainStation(user)); }, @@ -901,6 +913,27 @@ $(function() { return "porch"; } }, + clipAudi: function(audi) { + var j, len, ref, regx, v; + audi = audi.join(" "); + ref = window.util.mainStations; + for (j = 0, len = ref.length; j < len; j++) { + v = ref[j]; + regx = new RegExp("/" + v, "g"); + audi = audi.replace(regx, ""); + } + return audi.split(" "); + }, + expandAudi: function(audi) { + var k, v; + for (k in audi) { + v = audi[k]; + if (v.indexOf("/") === -1) { + audi[k] = v + "/" + (window.util.mainStation(v.slice(1))); + } + } + return audi; + }, create: function(name) { return window.chat.StationPersistence.createStation(name, function(err, res) {}); }, From 818ff11b2f9a23f0f88ad98523e8924419bce926 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Thu, 19 Mar 2015 11:29:20 -0700 Subject: [PATCH 06/15] hanging talk --- main/pub/talk/src/js/actions/MessageActions.coffee | 2 -- main/pub/talk/src/js/components/StationsComponent.coffee | 6 +++--- main/pub/talk/src/js/stores/StationStore.coffee | 7 +++++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/main/pub/talk/src/js/actions/MessageActions.coffee b/main/pub/talk/src/js/actions/MessageActions.coffee index d904fadcd..da23ff5da 100644 --- a/main/pub/talk/src/js/actions/MessageActions.coffee +++ b/main/pub/talk/src/js/actions/MessageActions.coffee @@ -1,7 +1,5 @@ MessageDispatcher = require '../dispatcher/Dispatcher.coffee' -# hm - module.exports = loadMessages: (grams,get) -> MessageDispatcher.handleServerAction diff --git a/main/pub/talk/src/js/components/StationsComponent.coffee b/main/pub/talk/src/js/components/StationsComponent.coffee index 1d1aea586..7940a2aae 100644 --- a/main/pub/talk/src/js/components/StationsComponent.coffee +++ b/main/pub/talk/src/js/components/StationsComponent.coffee @@ -13,9 +13,9 @@ module.exports = recl getInitialState: -> @stateFromStore() componentDidMount: -> - @$el = $(@getDOMNode()) - @$add = $('#stations .add') - @$input = @$el.find('input') + @$el = $ @getDOMNode() + @$add = $ '#stations .add' + @$input = @$el.find 'input' StationStore.addChangeListener @_onChangeStore componentWillUnmount: -> diff --git a/main/pub/talk/src/js/stores/StationStore.coffee b/main/pub/talk/src/js/stores/StationStore.coffee index c7b8940ca..27a16970f 100644 --- a/main/pub/talk/src/js/stores/StationStore.coffee +++ b/main/pub/talk/src/js/stores/StationStore.coffee @@ -111,7 +111,7 @@ StationStore.dispatchToken = StationDispatcher.register (payload) -> StationStore.setListening action.station StationStore.emitChange() break - when "config-load" + when "config-load" #[name:'loadConfig', args:['station', 'config']] StationStore.loadConfig action.station,action.config StationStore.emitChange() break @@ -119,7 +119,10 @@ StationStore.dispatchToken = StationDispatcher.register (payload) -> StationStore.loadStations action.stations StationStore.emitChange() break - when "stations-leave" + when "stations-leave" # stations-leave:[{name:'loadStations' args:['stations']} ['unsetStation' 'station']] + # ... + # for command in actionVtable[action.type] + # StationStore[command[0]].apply(command[1..].map(argname -> action[argname])) StationStore.loadStations action.stations StationStore.unsetStation action.station StationStore.emitChange() From f10e4dea476cfdc093e435b247d49178d8573469 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Mon, 23 Mar 2015 11:30:08 -0700 Subject: [PATCH 07/15] talking --- main/pub/talk/src/css/main.css | 1 - main/pub/talk/src/css/main.styl | 1 - .../src/js/components/MessagesComponent.coffee | 1 - .../talk/src/js/components/PageComponent.coffee | 15 --------------- main/pub/talk/src/js/main.js | 2 +- main/pub/talk/src/js/package.json | 4 ++++ 6 files changed, 5 insertions(+), 19 deletions(-) delete mode 100644 main/pub/talk/src/js/components/PageComponent.coffee diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 68bc9539d..171bf9317 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -261,7 +261,6 @@ body { } .mess, .iden, -.attr > div, #station .member div, #writing { display: inline-block; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index a90c32a19..1b472ced0 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -180,7 +180,6 @@ body .mess .iden -.attr > div #station .member div #writing display inline-block diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index ad29d3233..b86193a18 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -41,7 +41,6 @@ Message = recl (div {className:"attr"}, [ div {onClick:@_handleAudi,className:"audi"}, "#{audi}" (div {onClick:@_handlePm}, (Member {ship:@props.ship}, "")) - (br {},"") div {className:"time"}, @convTime @props.thought.statement.date ]) div {className:"mess"}, @props.thought.statement.speech.lin.txt diff --git a/main/pub/talk/src/js/components/PageComponent.coffee b/main/pub/talk/src/js/components/PageComponent.coffee deleted file mode 100644 index ca8898d83..000000000 --- a/main/pub/talk/src/js/components/PageComponent.coffee +++ /dev/null @@ -1,15 +0,0 @@ -recl = React.createClass -[div,input,textarea] = [React.DOM.div,React.DOM.input,React.DOM.textarea] - -StationComponent = require './StationComponent.coffee' -MessagesComponent = require './MessagesComponent.coffee' -WritingComponent = require './WritingComponent.coffee' - -module.exports = recl - render: -> - div {id:"d"}, "asdf" - # div {id:"d"}, [ - # (div {id:'station-container'}, (StationComponent {}, "")) - # (div {id:'messages-container'}, (MessagesComponent {}, "")) - # (div {id:'writing-container'}, (WritingComponent {}, "")) - # ] \ No newline at end of file diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 81f1b1894..074f79274 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -268,7 +268,7 @@ Message = recl({ onClick: this._handlePm }, Member({ ship: this.props.ship - }, "")), br({}, ""), div({ + }, "")), div({ className: "time" }, this.convTime(this.props.thought.statement.date)) ]), div({ diff --git a/main/pub/talk/src/js/package.json b/main/pub/talk/src/js/package.json index b5f836ae1..dbb272bee 100644 --- a/main/pub/talk/src/js/package.json +++ b/main/pub/talk/src/js/package.json @@ -1,6 +1,10 @@ { "name": "urbit-radio", "version": "0.0.0", + "repository": { + "type":"git", + "url":"https://github.com/urbit/urbit" + }, "description": "urbit radio frontend", "main": "main.js", "dependencies": { From f7b24b74ee68429c470ab7c34b638081a2688ff9 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Tue, 24 Mar 2015 12:21:50 -0700 Subject: [PATCH 08/15] pruning --- main/pub/talk/src/css/main.css | 244 +++------------- main/pub/talk/src/css/main.styl | 266 ++++-------------- .../src/js/components/StationComponent.coffee | 9 +- .../src/js/components/WritingComponent.coffee | 1 - main/pub/talk/src/js/main.coffee | 22 +- main/pub/talk/src/js/main.js | 145 ++-------- 6 files changed, 124 insertions(+), 563 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 171bf9317..ddcf6047e 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -112,6 +112,9 @@ input.join, #station { font-size: 0.7rem; } +.iden { + font-weight: 600; +} html, body { font-size: 18px; @@ -125,34 +128,29 @@ body { display: none; } #c { - top: 0; - background-color: #fff; + position: absolute; + top: 4rem; + left: 50%; + width: 58rem; + margin-left: -29rem; + margin-bottom: 4rem; } -#stations-container { +#station-container { position: absolute; top: 1rem; - left: 50%; - width: 24rem; - margin-left: -12rem; - font-size: 4rem; } #station #station-container { padding-top: 1rem; min-width: 30rem; text-align: right; } -#stations-container, +#writing-container { + bottom: 4rem; + margin-bottom: 1rem; +} #messages-container { vertical-align: top; } -#messaging-container { - position: absolute; - top: 4rem; - left: 50%; - width: 66rem; - margin-left: -46rem; - margin-bottom: 4rem; -} #station > div { display: inline-block; } @@ -164,48 +162,6 @@ body { width: 6rem; margin-left: 0.3rem; } -#sources-container { - position: fixed; - top: 0; - left: 50%; - margin-left: -35rem; - text-align: right; - background-color: #000; - color: #fff; - padding: 1rem; -} -#members { - margin-left: 2rem; -} -.station { - margin-bottom: 0.3rem; - cursor: pointer; - font-weight: 200; -} -#stations .station { - display: block; - width: 24rem; -} -.station .name { - padding: 0.3rem; - border-bottom: 6px solid transparent; -} -.station .name:hover { - background-color: #f5f5f5; - border-bottom: 6px solid #ededed; -} -.station > div { - display: inline-block; -} -.toggle { - width: 0.4rem; - height: 0.4rem; - border: 2px solid #000; - margin-right: 0.6rem; -} -.toggle.active { - background-color: #000; -} .station .remove { display: none; float: right; @@ -216,15 +172,6 @@ body { .station:hover .remove { display: inline; } -#sources-container .station { - font-family: "scp"; - font-weight: 500; - text-transform: lowercase; -} -.sour-ctrl { - margin-bottom: 0.16rem; -} -.join-ctrl input, .sour-ctrl input { border: none; font-weight: 400; @@ -277,7 +224,7 @@ body { text-align: right; display: inline-block; margin-right: 0.3rem; - min-width: 30rem; + min-width: 10rem; } .attr .iden { color: #000; @@ -291,23 +238,18 @@ body { max-width: 30rem; margin-left: 0.3rem; } -.ship { - font-weight: 600; +#writing { + font-size: 0.9rem; + min-height: 1.6rem; + min-width: 1.3rem; + outline: none; + background-color: #eee; + padding: 0.3rem 0.1rem; + margin-left: 0.2rem; + margin-top: -0.3rem; } -.ship.talk:before { - content: "..."; - margin-left: -1.3rem; - margin-right: 0.3rem; - width: 1rem; - margin-top: -0.4rem; - vertical-align: middle; - display: inline-block; - line-height: 0.2rem; - letter-spacing: -0.1rem; -} -#writing-container { - bottom: 4rem; - margin-bottom: 1rem; +#writing:focus { + background-color: #fff; } .writing { padding-top: 0.3rem; @@ -317,73 +259,25 @@ body { margin-left: 1rem; margin-top: 1.2rem; } +.writing .iden { + display: block; + text-align: right; + width: 100%; +} +.writing .iden .ship { + margin-right: 0.3rem; +} #audi { + display: inline-block; background-color: #eee; - padding: 0.3rem; + padding: 0.3rem 0.1rem; margin-top: -0.3rem; + margin-right: -0.2rem; outline: none; - margin-right: -0.3rem; } #audi.valid-false { color: #ff2f2f; } -#writing { - font-size: 0.9rem; - min-height: 1.6rem; - min-width: 1.3rem; - padding: 0; - outline: none; - background-color: #eee; - margin-left: 0.3rem; -} -#writing:focus { - background-color: #fff; -} -#station h1 { - display: inline-block; - margin: 0; - font-weight: 200; - font-size: 2rem; - text-transform: lowercase; -} -input.join { - text-align: right; - font-size: 4rem; - background-color: transparent; - outline: none; - width: 24rem; - color: #fff; -} -#station input.join { - font-family: "scp"; - font-size: 0.7rem; - line-height: 1rem; - width: 12rem; -} -input.join::-webkit-input-placeholder { - color: #fff; -} -input.join:focus::-webkit-input-placeholder { - color: #000; -} -.pending { - color: #ccc; -} -a.up { - height: 2rem; - margin-top: 0.6rem; - vertical-align: middle; - display: inline-block; -} -.arow-up { - display: inline-block; - margin: 0 0.5rem 0 0.5rem; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-bottom: 9px solid #000; -} #scrolling { display: none; } @@ -399,67 +293,3 @@ a.up { font-size: 0.8rem; text-transform: uppercase; } -@media (max-width: 40rem) { - #c { - left: 0; - margin-left: 0; - width: 24rem; - } - #messages-container, - #writing-container { - margin-left: 1rem; - } - #stations-container, - #station-container { - position: relative; - float: left; - } - #stations-container { - width: 8rem; - } - #station-container { - left: auto; - } - .station { - width: 5rem; - } - .attr { - display: block; - text-align: left; - width: 2rem; - margin-right: 1rem; - } - .message { - height: 1.6rem; - } - .stations, - .iden, - #station { - font-size: 0.5rem; - } - .station .remove { - display: inline; - font-size: 0.6rem; - line-height: 0.6rem; - } - .ship.talk:before { - margin-left: -0.3rem; - margin-right: 0; - } - .attr { - width: 4rem; - } - .iden > div { - display: block; - } - .attr > .time { - display: none; - } - .mess { - max-width: 12rem; - margin-bottom: 1rem; - } - #writing { - max-width: 12rem; - } -} diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index 1b472ced0..8043712dc 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -1,3 +1,7 @@ +// +// fonts first +// + @import 'fonts' .iden @@ -30,10 +34,17 @@ input.join #station font-size .7rem +.iden + font-weight 600 + html body font-size 18px +// +// containers +// + body background-color #fefefe padding 0 @@ -43,33 +54,32 @@ body display none #c - top 0 - background-color #fff + position absolute + top 4rem + left 50% + width 58rem + margin-left -29rem + margin-bottom 4rem -#stations-container +#station-container position absolute top 1rem - left 50% - width 24rem - margin-left -12rem - font-size 4rem #station #station-container padding-top 1rem min-width 30rem text-align right -#stations-container +#writing-container + bottom 4rem + margin-bottom 1rem + #messages-container vertical-align top -#messaging-container - position absolute - top 4rem - left 50% - width 66rem - margin-left -46rem - margin-bottom 4rem +// +// station +// #station > div display inline-block @@ -82,48 +92,6 @@ body width 6rem margin-left .3rem -#sources-container - position fixed - top 0 - left 50% - margin-left -35rem - text-align right - background-color #000 - color #fff - padding 1rem - -#members - margin-left 2rem - -.station - margin-bottom .3rem - cursor pointer - font-weight 200 - -#stations .station - display block - width 24rem - -.station .name - padding .3rem - border-bottom 6px solid transparent - -.station .name:hover - background-color #f5f5f5 - border-bottom 6px solid #ededed - -.station > div - display inline-block - -.toggle - width .4rem - height .4rem - border 2px solid #000 - margin-right .6rem - -.toggle.active - background-color #000 - .station .remove display none float right @@ -134,16 +102,7 @@ body .station:hover .remove display inline -#sources-container .station - font-family "scp" - font-weight 500 - text-transform lowercase - -// hate this. -.sour-ctrl - margin-bottom .16rem - -.join-ctrl input +// add source .sour-ctrl input border none font-weight 400 @@ -155,6 +114,10 @@ body margin-left .6rem color #0003FF +// +// messages +// + .message padding-top .3rem @@ -196,7 +159,7 @@ body text-align right display inline-block margin-right .3rem - min-width 30rem + min-width 10rem .attr .iden color #000 @@ -210,23 +173,22 @@ body max-width 30rem margin-left .3rem -.ship - font-weight 600 +// +// writing +// -.ship.talk:before - content "..." - margin-left -1.3rem - margin-right .3rem - width 1rem - margin-top -.4rem - vertical-align middle - display inline-block - line-height .2rem - letter-spacing -.1rem +#writing + font-size .9rem + min-height 1.6rem + min-width 1.3rem + outline none + background-color #eee + padding .3rem .1rem + margin-left .2rem + margin-top -.3rem -#writing-container - bottom 4rem - margin-bottom 1rem +#writing:focus + background-color #fff .writing padding-top .3rem @@ -236,72 +198,28 @@ body margin-left 1rem margin-top 1.2rem +.writing .iden + display block + text-align right + width 100% + +.writing .iden .ship + margin-right .3rem + #audi + display inline-block background-color #eee - padding .3rem + padding .3rem .1rem margin-top -.3rem + margin-right -.2rem outline none - margin-right -.3rem #audi.valid-false color #ff2f2f -#writing - font-size .9rem - min-height 1.6rem - min-width 1.3rem - padding 0 - outline none - background-color #eee - margin-left .3rem - -#writing:focus - background-color #fff - -#station h1 - display inline-block - margin 0 - font-weight 200 - font-size 2rem - text-transform lowercase - -input.join - text-align right - font-size 4rem - background-color transparent - outline none - width 24rem - color #fff - -#station input.join - font-family "scp" - font-size .7rem - line-height 1rem - width 12rem - -input.join::-webkit-input-placeholder - color #fff - -input.join:focus::-webkit-input-placeholder - color #000 - -.pending - color #ccc - -a.up - height 2rem - margin-top .6rem - vertical-align middle - display inline-block - -.arow-up - display inline-block - margin 0 .5rem 0 .5rem - width 0 - height 0 - border-left 9px solid transparent - border-right 9px solid transparent - border-bottom 9px solid #000 +// +// scrolling +// #scrolling display none @@ -316,68 +234,4 @@ a.up background-color #f9f9f9 font-weight 500 font-size .8rem - text-transform uppercase - -@media (max-width: 40rem) - #c - left 0 - margin-left 0 - width 24rem - - #messages-container - #writing-container - margin-left 1rem - - #stations-container - #station-container - position relative - float left - - #stations-container - width 8rem - - #station-container - left auto - - .station - width 5rem - - .attr - display block - text-align left - width 2rem - margin-right 1rem - - .message - height 1.6rem - - .stations - .iden - #station - font-size .5rem - - .station .remove - display inline - font-size .6rem - line-height .6rem - - .ship.talk:before - margin-left -.3rem - margin-right 0 - - .attr - width 4rem - - .iden > div - display block - - .attr > .time - display none - - .mess - max-width 12rem - margin-bottom 1rem - - #writing - max-width 12rem - \ No newline at end of file + text-transform uppercase \ No newline at end of file diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index b3a7f294e..0d4f22cd6 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -68,7 +68,7 @@ module.exports = recl members = "" sourceInput = [(input {className:"join",onKeyUp:@_keyUp,placeholder:"+"}, "")] - sourceCtrl = div {className:"sour-ctrl"}, sourceInput + sourceCtrl = div {className:"sour-ctrl"},sourceInput sources = [] if @state.station and @state.configs[@state.station] @@ -79,16 +79,13 @@ module.exports = recl (div {className:"path"}, source), (div {className:"remove",onClick:_remove,"data-station":source},"×") ]) - else sources = "" station = [] - # station.push (a {className:"up",href:"\#/"}, [(div {className:"arow-up"}, "")]) - # station.push (h1 {},@state.station) station.push (div {id:"members"},members) - parts.push (div {id:"station-container"}, (div {id:"station-meta"},station)) - parts.push (div {id:"sources-container"}, [(div {class:"sources-list"},sources),sourceCtrl]) + parts.push (div {id:"audience"}, (div {},station)) + parts.push (div {id:"stations"}, [(div {},sources),sourceCtrl]) div {id:"station"},parts \ No newline at end of file diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index dd11844fd..4027f9b1a 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -165,7 +165,6 @@ module.exports = recl onBlur:@_setAudi }, audi.join(" ")) (Member iden, "") - (br {},"") (div {className:"time"}, @getTime()) ]) (div { diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 360fa1b77..0df82a85d 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -72,8 +72,7 @@ $(() -> send() getScroll: -> - @writingPosition = $('#messaging-container').outerHeight(true)+$('#messaging-container').offset().top-$(window).height() - #@writingPosition = $('#writing-container').position().top-$(window).height()+$('#writing-container').outerHeight(true) + @writingPosition = $('#c').outerHeight(true)+$('#c').offset().top-$(window).height() setScroll: -> window.util.getScroll() @@ -92,26 +91,21 @@ $(() -> window.chat.StationPersistence.listen() StationComponent = require './components/StationComponent.coffee' - StationsComponent = require './components/StationsComponent.coffee' MessagesComponent = require './components/MessagesComponent.coffee' WritingComponent = require './components/WritingComponent.coffee' $c = $('#c') clean = -> - React.unmountComponentAtNode $('#stations-container')[0] - React.unmountComponentAtNode $('#station-parts-container')[0] - React.unmountComponentAtNode $('#writing-container')[0] + React.unmountComponentAtNode $('#station-container')[0] React.unmountComponentAtNode $('#messages-container')[0] + React.unmountComponentAtNode $('#writing-container')[0] - $c.html "" - $c.append("
") - $d = $('#messaging-container') - $d.append("
") - $d.append("
") - $d.append("
") - $c.append("
BOTTOM
") - rend (StationComponent {}, ""),$('#station-parts-container')[0] + $c.append "
" + $c.append "
" + $c.append "
" + $c.append "
BOTTOM
" + rend (StationComponent {}, ""),$('#station-container')[0] rend (MessagesComponent {}, ""),$('#messages-container')[0] rend (WritingComponent {}, ""),$('#writing-container')[0] ) \ No newline at end of file diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 074f79274..331152ee0 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -512,17 +512,11 @@ module.exports = recl({ id: "members" }, members)); parts.push(div({ - id: "station-container" - }, div({ - id: "station-meta" - }, station))); + id: "audience" + }, div({}, station))); parts.push(div({ - id: "sources-container" - }, [ - div({ - "class": "sources-list" - }, sources), sourceCtrl - ])); + id: "stations" + }, [div({}, sources), sourceCtrl])); return div({ id: "station" }, parts); @@ -531,109 +525,7 @@ module.exports = recl({ -},{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationsComponent.coffee":[function(require,module,exports){ -var StationActions, StationStore, div, input, recl, ref; - -recl = React.createClass; - -ref = [React.DOM.div, React.DOM.input], div = ref[0], input = ref[1]; - -StationStore = require('../stores/StationStore.coffee'); - -StationActions = require('../actions/StationActions.coffee'); - -module.exports = recl({ - stateFromStore: function() { - return { - stations: StationStore.getStations(), - station: "~zod/court" - }; - }, - getInitialState: function() { - return this.stateFromStore(); - }, - componentDidMount: function() { - this.$el = $(this.getDOMNode()); - this.$add = $('#stations .add'); - this.$input = this.$el.find('input'); - return StationStore.addChangeListener(this._onChangeStore); - }, - componentWillUnmount: function() { - return StationStore.removeChangeListener(this._onChangeStore); - }, - _onChangeStore: function() { - return this.setState(this.stateFromStore()); - }, - _click: function(e) { - var s; - s = $(e.target).closest('.station').find('.name').text(); - return window.location.hash = "/" + (s.toLowerCase()); - }, - _keyUp: function(e) { - var v; - if (e.keyCode === 13) { - v = this.$input.val().toLowerCase(); - if (this.state.stations.indexOf(v) === -1) { - StationActions.createStation(v); - this.$input.val(''); - return this.$input.blur(); - } - } - }, - _remove: function(e) { - var _station, _stations; - _station = $(e.target).parent().find('.name').text(); - _stations = _.without(this.state.stations, _station); - StationActions.removeStation(_station, _stations); - e.stopPropagation(); - return e.preventDefault(); - }, - render: function() { - var _click, _remove, station, stations; - station = this.state.station; - _click = this._click; - _remove = this._remove; - stations = this.state.stations.map(function(_station) { - var k, parts; - k = "station"; - parts = [ - div({ - className: "name" - }, _station.name) - ]; - if (_station.name !== window.util.mainStation()) { - parts.push(div({ - className: "remove", - onClick: _remove, - dataStation: _station.name - }, "×")); - } - return div({ - className: k, - onClick: _click - }, parts); - }); - return div({ - id: "stations" - }, [ - div({ - className: "stations" - }, stations), div({ - className: "join-ctrl" - }, [ - input({ - className: "join", - onKeyUp: this._keyUp, - placeholder: "+" - }, "") - ]) - ]); - } -}); - - - -},{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee":[function(require,module,exports){ +},{"../actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","../stores/StationStore.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/stores/StationStore.coffee","./MemberComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MemberComponent.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee":[function(require,module,exports){ var Member, MessageActions, MessageStore, StationActions, StationStore, br, div, input, recl, ref, textarea; recl = React.createClass; @@ -844,7 +736,7 @@ module.exports = recl({ className: "audi valid-" + this.state.valid, contentEditable: true, onBlur: this._setAudi - }, audi.join(" ")), Member(iden, ""), br({}, ""), div({ + }, audi.join(" ")), Member(iden, ""), div({ className: "time" }, this.getTime()) ]), div({ @@ -889,7 +781,7 @@ module.exports = _.merge(new Dispatcher(), { },{"flux":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/flux/index.js"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/main.coffee":[function(require,module,exports){ $(function() { - var $c, $d, MessagesComponent, StationActions, StationComponent, StationsComponent, WritingComponent, clean, rend; + var $c, MessagesComponent, StationActions, StationComponent, WritingComponent, clean, rend; StationActions = require('./actions/StationActions.coffee'); rend = React.render; window.chat = {}; @@ -980,7 +872,7 @@ $(function() { return send(); }, getScroll: function() { - return this.writingPosition = $('#messaging-container').outerHeight(true) + $('#messaging-container').offset().top - $(window).height(); + return this.writingPosition = $('#c').outerHeight(true) + $('#c').offset().top - $(window).height(); }, setScroll: function() { window.util.getScroll(); @@ -1000,31 +892,26 @@ $(function() { $(window).on('scroll', window.util.checkScroll); window.chat.StationPersistence.listen(); StationComponent = require('./components/StationComponent.coffee'); - StationsComponent = require('./components/StationsComponent.coffee'); MessagesComponent = require('./components/MessagesComponent.coffee'); WritingComponent = require('./components/WritingComponent.coffee'); $c = $('#c'); clean = function() { - React.unmountComponentAtNode($('#stations-container')[0]); - React.unmountComponentAtNode($('#station-parts-container')[0]); - React.unmountComponentAtNode($('#writing-container')[0]); - return React.unmountComponentAtNode($('#messages-container')[0]); + React.unmountComponentAtNode($('#station-container')[0]); + React.unmountComponentAtNode($('#messages-container')[0]); + return React.unmountComponentAtNode($('#writing-container')[0]); }; - $c.html(""); - $c.append("
"); - $d = $('#messaging-container'); - $d.append("
"); - $d.append("
"); - $d.append("
"); + $c.append("
"); + $c.append("
"); + $c.append("
"); $c.append("
BOTTOM
"); - rend(StationComponent({}, ""), $('#station-parts-container')[0]); + rend(StationComponent({}, ""), $('#station-container')[0]); rend(MessagesComponent({}, ""), $('#messages-container')[0]); return rend(WritingComponent({}, ""), $('#writing-container')[0]); }); -},{"./actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","./components/MessagesComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MessagesComponent.coffee","./components/StationComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationComponent.coffee","./components/StationsComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationsComponent.coffee","./components/WritingComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee","./persistence/MessagePersistence.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/persistence/MessagePersistence.coffee","./persistence/StationPersistence.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/persistence/StationPersistence.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/flux/index.js":[function(require,module,exports){ +},{"./actions/StationActions.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/actions/StationActions.coffee","./components/MessagesComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/MessagesComponent.coffee","./components/StationComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/StationComponent.coffee","./components/WritingComponent.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/components/WritingComponent.coffee","./persistence/MessagePersistence.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/persistence/MessagePersistence.coffee","./persistence/StationPersistence.coffee":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/persistence/StationPersistence.coffee"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/flux/index.js":[function(require,module,exports){ /** * Copyright (c) 2014, Facebook, Inc. * All rights reserved. From 4eecaaccd7515e242288e4dfaa0fab15c56dbb25 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Tue, 24 Mar 2015 17:15:27 -0700 Subject: [PATCH 09/15] top bar --- main/pub/talk/src/css/main.css | 73 +++++++++++++++--- main/pub/talk/src/css/main.styl | 77 ++++++++++++++++--- .../src/js/components/StationComponent.coffee | 12 ++- main/pub/talk/src/js/main.js | 74 +++++++++++------- 4 files changed, 182 insertions(+), 54 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index ddcf6047e..64a1fc4a6 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -85,7 +85,9 @@ .iden, .audi, .time, -#length { +#length, +#where, +#who { font-family: "scp"; } .join-ctrl input { @@ -129,7 +131,7 @@ body { } #c { position: absolute; - top: 4rem; + top: 0rem; left: 50%; width: 58rem; margin-left: -29rem; @@ -137,7 +139,18 @@ body { } #station-container { position: absolute; - top: 1rem; + width: 100%; + max-height: 2.7rem; + background-color: #fff; + border-bottom: 0.3rem solid #000; + padding-bottom: 1rem; + overflow: hidden; + -webkit-transition: max-height 0.2s; +} +#station-container:hover { + max-height: 30rem; + height: auto; + -webkit-transition: max-height 0.2s; } #station #station-container { padding-top: 1rem; @@ -150,17 +163,55 @@ body { } #messages-container { vertical-align: top; + margin-top: 4rem; } -#station > div { +.caret, +.circle { display: inline-block; } -#station-meta .audi, -#station-meta .iden { - display: inline-block; +.caret { + width: 0; + height: 0; + border-top: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid #000; } -#station-meta .iden { - width: 6rem; - margin-left: 0.3rem; +.circle { + width: 6px; + height: 6px; + border: 3px solid #000; + border-radius: 6px; +} +#station-container #where .caret { + -webkit-transform: rotate(0deg); + -webkit-transform-origin: 0 50%; + -webkit-transition: -webkit-transform 0.2s; +} +#station-container:hover #where .caret { + transform: rotate(90deg); + transform-origin: 0 50%; + -webkit-transform: rotate(90deg); + -webkit-transition: -webkit-transform 0.2s; +} +#head { + width: 100%; + height: 4rem; +} +#head > div { + display: inline-block; + width: 17.3rem; + text-align: right; + height: 3rem; + vertical-align: middle; + margin-top: 1.5rem; +} +#where .caret { + border-left-color: #f00; + margin-left: 1rem; +} +#who > span { + margin-left: 1rem; } .station .remove { display: none; @@ -224,7 +275,7 @@ body { text-align: right; display: inline-block; margin-right: 0.3rem; - min-width: 10rem; + min-width: 16rem; } .attr .iden { color: #000; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index 8043712dc..d23e7dba0 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -8,6 +8,8 @@ .audi .time #length +#where +#who font-family "scp" .join-ctrl input @@ -55,7 +57,7 @@ body #c position absolute - top 4rem + top 0rem left 50% width 58rem margin-left -29rem @@ -63,7 +65,18 @@ body #station-container position absolute - top 1rem + width 100% + max-height 2.7rem + background-color white + border-bottom .3rem solid black + padding-bottom 1rem + overflow hidden + -webkit-transition max-height .2s + +#station-container:hover + max-height 30rem + height auto + -webkit-transition max-height .2s #station #station-container padding-top 1rem @@ -76,21 +89,63 @@ body #messages-container vertical-align top + margin-top 4rem + +// +// components +// + +.caret +.circle + display inline-block + +.caret + width 0 + height 0 + border-top 6px solid transparent + border-right 6px solid transparent + border-bottom 6px solid transparent + border-left 6px solid #000 + +.circle + width 6px + height 6px + border 3px solid black + border-radius 6px // // station // -#station > div - display inline-block +#station-container #where .caret + -webkit-transform rotate(0deg) + -webkit-transform-origin 0 50% + -webkit-transition -webkit-transform .2s -#station-meta .audi -#station-meta .iden - display inline-block +#station-container:hover #where .caret + transform rotate(90deg) + transform-origin 0 50% + -webkit-transform rotate(90deg) + -webkit-transition -webkit-transform .2s -#station-meta .iden - width 6rem - margin-left .3rem +#head + width 100% + height 4rem + +#head > div + display inline-block + width 17.3rem + text-align right + height 3rem + vertical-align middle + margin-top 1.5rem + +#where .caret + border-left-color red + margin-left 1rem + +#who > span + margin-left 1rem .station .remove display none @@ -159,7 +214,7 @@ body text-align right display inline-block margin-right .3rem - min-width 10rem + min-width 16rem .attr .iden color #000 diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 0d4f22cd6..1269c14a8 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -80,12 +80,16 @@ module.exports = recl (div {className:"remove",onClick:_remove,"data-station":source},"×") ]) else - sources = "" + sources = "" - station = [] - station.push (div {id:"members"},members) + head = (div {id:"head"}, + [(div {id:"where"},["/talk",(div {className:"caret"},"")]), + (div {id:"who"},[(div {className:"circle"},""),"~#{window.urb.user}"]) + ] + ) - parts.push (div {id:"audience"}, (div {},station)) + parts.push head + parts.push (div {id:"audience"}, (div {},[(div {id:"members"},members)])) parts.push (div {id:"stations"}, [(div {},sources),sourceCtrl]) div {id:"station"},parts \ No newline at end of file diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 331152ee0..1989db6f3 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -1,4 +1,4 @@ -(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Tue, 24 Mar 2015 17:36:45 -0700 Subject: [PATCH 10/15] audience --- .../talk/src/js/components/WritingComponent.coffee | 8 ++++++-- main/pub/talk/src/js/main.js | 12 +++++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index 4027f9b1a..b87abe325 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -52,7 +52,10 @@ module.exports = recl @set() @typing false - _keyDown: (e) -> + _audiKeyDown: (e) -> + if e.keyCode is 13 then $('#writing').focus() + + _writingKeyDown: (e) -> if e.keyCode is 13 e.preventDefault() @sendMessage() @@ -162,6 +165,7 @@ module.exports = recl id:"audi" className:"audi valid-#{@state.valid}" contentEditable:true + onKeyDown: @_audiKeyDown onBlur:@_setAudi }, audi.join(" ")) (Member iden, "") @@ -174,7 +178,7 @@ module.exports = recl onBlur: @_blur onInput: @_input onPaste: @_input - onKeyDown: @_keyDown + onKeyDown: @_writingKeyDown onFocus: @cursorAtEnd }, "") div {id:"length"}, "0/69" diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 1989db6f3..d8ea2467e 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -615,7 +615,12 @@ module.exports = recl({ this.set(); return this.typing(false); }, - _keyDown: function(e) { + _audiKeyDown: function(e) { + if (e.keyCode === 13) { + return $('#writing').focus(); + } + }, + _writingKeyDown: function(e) { if (e.keyCode === 13) { e.preventDefault(); this.sendMessage(); @@ -753,6 +758,7 @@ module.exports = recl({ id: "audi", className: "audi valid-" + this.state.valid, contentEditable: true, + onKeyDown: this._audiKeyDown, onBlur: this._setAudi }, audi.join(" ")), Member(iden, ""), div({ className: "time" @@ -764,7 +770,7 @@ module.exports = recl({ onBlur: this._blur, onInput: this._input, onPaste: this._input, - onKeyDown: this._keyDown, + onKeyDown: this._writingKeyDown, onFocus: this.cursorAtEnd }, ""), div({ id: "length" @@ -1249,7 +1255,7 @@ var invariant = function(condition, format, a, b, c, d, e, f) { module.exports = invariant; },{}],"/Users/galen/src/urbit/urb/zod/main/pub/talk/src/js/node_modules/moment-timezone/data/packed/latest.json":[function(require,module,exports){ -module.exports=module.exports=module.exports=module.exports={ +module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports={ "version": "2014j", "zones": [ "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q", From d8e5c1e0ae9e697ca27c4742a12ff5637c83d73b Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Tue, 24 Mar 2015 19:09:27 -0700 Subject: [PATCH 11/15] talk away --- main/pub/talk/src/css/main.css | 53 +++++++++++++++---- main/pub/talk/src/css/main.styl | 51 ++++++++++++++---- .../src/js/components/StationComponent.coffee | 8 +-- .../src/js/components/WritingComponent.coffee | 7 ++- main/pub/talk/src/js/main.js | 22 ++++---- 5 files changed, 108 insertions(+), 33 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 64a1fc4a6..450fd9b7a 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -87,7 +87,8 @@ .time, #length, #where, -#who { +#who, +.station { font-family: "scp"; } .join-ctrl input { @@ -145,6 +146,7 @@ body { border-bottom: 0.3rem solid #000; padding-bottom: 1rem; overflow: hidden; + z-index: 10; -webkit-transition: max-height 0.2s; } #station-container:hover { @@ -198,12 +200,23 @@ body { width: 100%; height: 4rem; } +#station-container h1 { + font-weight: 500; + font-size: 0.6rem; + letter-spacing: 0.06rem; + display: inline-block; + line-height: 1.2rem; +} +#audience, +#stations, #head > div { display: inline-block; width: 17.3rem; text-align: right; - height: 3rem; - vertical-align: middle; + vertical-align: top; +} +#head > div { + height: 2rem; margin-top: 1.5rem; } #where .caret { @@ -213,26 +226,46 @@ body { #who > span { margin-left: 1rem; } +#members > div { + display: block; +} +#members > div div { + display: inline-block; +} +#members .iden { + min-width: 6rem; +} +.station div { + display: inline-block; +} .station .remove { - display: none; - float: right; - margin-left: 1rem; + cursor: pointer; + width: 0.6rem; + margin-right: 0.6rem; font-weight: 600; color: #f00; } .station:hover .remove { - display: inline; + opacity: 1; } .sour-ctrl input { + font-family: "scp"; border: none; font-weight: 400; + text-align: right; + line-height: 1rem; + outline: none; + cursor: pointer; } .sour-ctrl input::-webkit-input-placeholder { - font-family: "bau"; + font-family: "scp"; font-size: 1rem; - font-weight: 200; + font-weight: 600; margin-left: 0.6rem; - color: #0003ff; + color: #000; +} +.sour-ctrl input:focus::-webkit-input-placeholder { + color: #fff; } .message { padding-top: 0.3rem; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index d23e7dba0..f69526963 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -10,6 +10,7 @@ #length #where #who +.station font-family "scp" .join-ctrl input @@ -71,6 +72,7 @@ body border-bottom .3rem solid black padding-bottom 1rem overflow hidden + z-index 10 -webkit-transition max-height .2s #station-container:hover @@ -132,12 +134,23 @@ body width 100% height 4rem +#station-container h1 + font-weight 500 + font-size .6rem + letter-spacing .06rem + display inline-block + line-height 1.2rem + +#audience +#stations #head > div display inline-block width 17.3rem text-align right - height 3rem - vertical-align middle + vertical-align top + +#head > div + height 2rem margin-top 1.5rem #where .caret @@ -147,27 +160,47 @@ body #who > span margin-left 1rem +#members > div + display block + +#members > div div + display inline-block + +#members .iden + min-width 6rem + +.station div + display inline-block + .station .remove - display none - float right - margin-left 1rem + cursor pointer + width .6rem + margin-right .6rem font-weight 600 color #ff0000 .station:hover .remove - display inline + opacity 1 // add source .sour-ctrl input + font-family "scp" border none font-weight 400 + text-align right + line-height 1rem + outline none + cursor pointer .sour-ctrl input::-webkit-input-placeholder - font-family "bau" + font-family "scp" font-size 1rem - font-weight 200 + font-weight 600 margin-left .6rem - color #0003FF + color #000 + +.sour-ctrl input:focus::-webkit-input-placeholder + color white // // messages diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 1269c14a8..351af0ca6 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -76,8 +76,8 @@ module.exports = recl _sources = _.clone @state.configs[@state.station].sources sources = _.map _sources,(source) => (div {className:"station"}, [ - (div {className:"path"}, source), - (div {className:"remove",onClick:_remove,"data-station":source},"×") + (div {className:"remove",onClick:_remove,"data-station":source},"×"), + (div {className:"path"}, source) ]) else sources = "" @@ -89,7 +89,7 @@ module.exports = recl ) parts.push head - parts.push (div {id:"audience"}, (div {},[(div {id:"members"},members)])) - parts.push (div {id:"stations"}, [(div {},sources),sourceCtrl]) + parts.push (div {id:"stations"}, [(h1 {}, "Sources"),(div {},sources),sourceCtrl]) + parts.push (div {id:"audience"}, (div {},[(h1 {}, "Audience"),(div {id:"members"},members)])) div {id:"station"},parts \ No newline at end of file diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index b87abe325..218db36ae 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -53,7 +53,12 @@ module.exports = recl @typing false _audiKeyDown: (e) -> - if e.keyCode is 13 then $('#writing').focus() + if e.keyCode is 13 + e.preventDefault() + setTimeout () -> + $('#writing').focus() + ,0 + return false _writingKeyDown: (e) -> if e.keyCode is 13 diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index d8ea2467e..b3f029ce9 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -495,12 +495,12 @@ module.exports = recl({ className: "station" }, [ div({ - className: "path" - }, source), div({ className: "remove", onClick: _remove, "data-station": source - }, "×") + }, "×"), div({ + className: "path" + }, source) ]); }; })(this)); @@ -525,16 +525,16 @@ module.exports = recl({ ]) ]); parts.push(head); + parts.push(div({ + id: "stations" + }, [h1({}, "Sources"), div({}, sources), sourceCtrl])); parts.push(div({ id: "audience" }, div({}, [ - div({ + h1({}, "Audience"), div({ id: "members" }, members) ]))); - parts.push(div({ - id: "stations" - }, [div({}, sources), sourceCtrl])); return div({ id: "station" }, parts); @@ -617,7 +617,11 @@ module.exports = recl({ }, _audiKeyDown: function(e) { if (e.keyCode === 13) { - return $('#writing').focus(); + e.preventDefault(); + setTimeout(function() { + return $('#writing').focus(); + }, 0); + return false; } }, _writingKeyDown: function(e) { @@ -1255,7 +1259,7 @@ var invariant = function(condition, format, a, b, c, d, e, f) { module.exports = invariant; },{}],"/Users/galen/src/urbit/urb/zod/main/pub/talk/src/js/node_modules/moment-timezone/data/packed/latest.json":[function(require,module,exports){ -module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports={ +module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports=module.exports={ "version": "2014j", "zones": [ "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q", From 6c97d8df87094b156e9612ece5682742ef0e3246 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 25 Mar 2015 14:05:46 -0700 Subject: [PATCH 12/15] talk details --- main/pub/talk/src/css/main.css | 59 ++++++++++++++++--- main/pub/talk/src/css/main.styl | 59 ++++++++++++++++--- .../js/components/MessagesComponent.coffee | 7 ++- .../src/js/components/StationComponent.coffee | 2 +- main/pub/talk/src/js/main.js | 59 +++++++++++-------- .../js/persistence/MessagePersistence.coffee | 10 ++-- .../js/persistence/StationPersistence.coffee | 18 +++--- 7 files changed, 152 insertions(+), 62 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 450fd9b7a..7e49bc5bf 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -136,11 +136,11 @@ body { left: 50%; width: 58rem; margin-left: -29rem; - margin-bottom: 4rem; + margin-bottom: 12rem; } #station-container { - position: absolute; - width: 100%; + position: fixed; + width: 58rem; max-height: 2.7rem; background-color: #fff; border-bottom: 0.3rem solid #000; @@ -208,10 +208,17 @@ body { line-height: 1.2rem; } #audience, +#who { + width: 34.6rem; +} #stations, +#where { + width: 17.3rem; +} +#stations, +#audience, #head > div { display: inline-block; - width: 17.3rem; text-align: right; vertical-align: top; } @@ -232,6 +239,9 @@ body { #members > div div { display: inline-block; } +#members .audi { + margin-right: 0.3rem; +} #members .iden { min-width: 6rem; } @@ -239,6 +249,7 @@ body { display: inline-block; } .station .remove { + opacity: 0; cursor: pointer; width: 0.6rem; margin-right: 0.6rem; @@ -290,20 +301,23 @@ body { #messages { height: auto; } +.message.pending { + color: #ccc; +} .mess, .iden, #station .member div, #writing { display: inline-block; } -.iden > div { - display: inline; -} .mess, #writing, #length { vertical-align: top; } +.attr > div { + max-width: 16rem; +} .attr { text-align: right; display: inline-block; @@ -311,10 +325,36 @@ body { min-width: 16rem; } .attr .iden { - color: #000; - width: 6rem; margin-left: 0.3rem; } +.audi { + white-space: nowrap; +} +.audi > div { + margin-right: 0.3rem; + max-width: 8rem; +} +.iden > div { + max-width: 16rem; +} +.iden > div, +.audi > div { + display: inline-block; + background-color: #fff; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -webkit-transition: max-height 0.2s; +} +.audi > div:last-child { + margin-right: 0; +} +.iden > div:hover, +.audi > div:hover { + position: relative; + max-width: 30rem; + -webkit-transition: max-height 0.2s; +} .mess { font-size: 0.9rem; letter-spacing: 0.03rem; @@ -358,6 +398,7 @@ body { margin-top: -0.3rem; margin-right: -0.2rem; outline: none; + overflow: hidden; } #audi.valid-false { color: #ff2f2f; diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index f69526963..320c504ef 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -62,11 +62,11 @@ body left 50% width 58rem margin-left -29rem - margin-bottom 4rem + margin-bottom 12rem #station-container - position absolute - width 100% + position fixed + width 58rem max-height 2.7rem background-color white border-bottom .3rem solid black @@ -142,10 +142,17 @@ body line-height 1.2rem #audience +#who + width 34.6rem + #stations +#where + width 17.3rem + +#stations +#audience #head > div display inline-block - width 17.3rem text-align right vertical-align top @@ -166,6 +173,9 @@ body #members > div div display inline-block +#members .audi + margin-right .3rem + #members .iden min-width 6rem @@ -173,6 +183,7 @@ body display inline-block .station .remove + opacity 0 cursor pointer width .6rem margin-right .6rem @@ -229,20 +240,23 @@ body #messages height auto +.message.pending + color #ccc + .mess .iden #station .member div #writing display inline-block -.iden > div - display inline - .mess #writing #length vertical-align top +.attr > div + max-width 16rem + .attr text-align right display inline-block @@ -250,10 +264,36 @@ body min-width 16rem .attr .iden - color #000 - width 6rem margin-left .3rem +.audi + white-space nowrap + +.audi > div + margin-right .3rem + max-width 8rem + +.iden > div + max-width 16rem + +.iden > div +.audi > div + display inline-block + background-color white + overflow hidden + white-space nowrap + text-overflow ellipsis + -webkit-transition max-height .2s + +.audi > div:last-child + margin-right 0 + +.iden > div:hover +.audi > div:hover + position relative + max-width 30rem + -webkit-transition max-height .2s + .mess font-size .9rem letter-spacing .03rem @@ -301,6 +341,7 @@ body margin-top -.3rem margin-right -.2rem outline none + overflow hidden #audi.valid-false color #ff2f2f diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index b86193a18..565a10e03 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -20,7 +20,7 @@ Message = recl "~#{h}.#{m}.#{s}" _handleAudi: (e) -> - audi = $(e.target).closest('.audi').text().split(" ") + audi = _.map $(e.target).closest('.audi').find('div'), (div) -> return $(div).text() @props._handleAudi audi _handlePm: (e) -> @@ -35,11 +35,11 @@ Message = recl name = if @props.name then @props.name else "" audi = window.util.clipAudi _.keys @props.thought.audience - audi = audi.join " " + audi = audi.map (_audi) -> (div {}, _audi) div {className:"message "+pendingClass}, [ (div {className:"attr"}, [ - div {onClick:@_handleAudi,className:"audi"}, "#{audi}" + div {onClick:@_handleAudi,className:"audi"}, audi (div {onClick:@_handlePm}, (Member {ship:@props.ship}, "")) div {className:"time"}, @convTime @props.thought.statement.date ]) @@ -110,6 +110,7 @@ module.exports = recl window.util.mainStationPath(user) window.util.mainStationPath(window.urb.user) ] + if user is window.urb.user then audi.pop() StationActions.setAudience audi _handleAudi: (audi) -> StationActions.setAudience audi diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 351af0ca6..65d5520f9 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -53,7 +53,7 @@ module.exports = recl e.preventDefault() _station = $(e.target).attr "data-station" _sources = _.clone @state.configs[@state.station].sources - _sources.slice _sources.indexOf(_station),1 + _sources.splice _sources.indexOf(_station),1 StationActions.setSources @state.station,_sources render: -> diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 7227ea708..1643b4a2b 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -1,4 +1,4 @@ -(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o window.urb.subscribe { - appl:"rodeo" + appl:"radio" path:"/f/#{station}/#{since}" }, (err,res) -> console.log('m subscription updates') @@ -15,7 +15,7 @@ module.exports = get: (station,start,end) -> window.urb.subscribe { - appl:"rodeo" + appl:"radio" path:"/f/#{station}/#{end}/#{start}" }, (err,res) -> console.log 'get' @@ -23,7 +23,7 @@ module.exports = if res.data?.grams?.tele MessageActions.loadMessages res.data.grams,true window.urb.unsubscribe { - appl:"rodeo" + appl:"radio" path:"/f/#{station}/#{end}/#{start}" }, (err,res) -> console.log 'done' @@ -31,8 +31,8 @@ module.exports = sendMessage: (message,cb) -> window.urb.send { - appl:"rodeo" - mark:"rodeo-command" + appl:"radio" + mark:"radio-command" data: publish: [ message diff --git a/main/pub/talk/src/js/persistence/StationPersistence.coffee b/main/pub/talk/src/js/persistence/StationPersistence.coffee index 83b63ed07..b90bdf164 100644 --- a/main/pub/talk/src/js/persistence/StationPersistence.coffee +++ b/main/pub/talk/src/js/persistence/StationPersistence.coffee @@ -3,8 +3,8 @@ StationActions = require '../actions/StationActions.coffee' module.exports = createStation: (name,cb) -> window.urb.send { - appl:"rodeo" - mark:"rodeo-command" + appl:"radio" + mark:"radio-command" data: design: party:name @@ -16,8 +16,8 @@ module.exports = removeStation: (name,cb) -> window.urb.send { - appl:"rodeo" - mark:"rodeo-command" + appl:"radio" + mark:"radio-command" data: design: party:name @@ -26,8 +26,8 @@ module.exports = setSources: (station,ship,sources) -> send = - appl:"rodeo" - mark:"rodeo-command" + appl:"radio" + mark:"radio-command" data: design: party:station @@ -41,7 +41,7 @@ module.exports = members: -> window.urb.subscribe { - appl:"rodeo" + appl:"radio" path:"/a/court" }, (err,res) -> console.log 'membership updates' @@ -51,7 +51,7 @@ module.exports = listen: -> window.urb.subscribe { - appl:"rodeo" + appl:"radio" path:"/" }, (err,res) -> console.log 'house updates' @@ -61,7 +61,7 @@ module.exports = listenStation: (station) -> window.urb.subscribe { - appl:"rodeo" + appl:"radio" path:"/ax/#{station}" }, (err,res) -> console.log('station subscription updates') From 985425932c20ac384a0afdd52d4221adf0834414 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 25 Mar 2015 15:02:49 -0700 Subject: [PATCH 13/15] var fix --- main/pub/talk/src/css/main.css | 6 ++++- main/pub/talk/src/css/main.styl | 4 ++++ .../talk/src/js/actions/MessageActions.coffee | 8 +++++-- .../js/components/MessagesComponent.coffee | 5 ++-- .../src/js/components/StationComponent.coffee | 1 + .../src/js/components/WritingComponent.coffee | 2 +- main/pub/talk/src/js/main.js | 24 ++++++++++++------- .../js/persistence/StationPersistence.coffee | 3 ++- 8 files changed, 38 insertions(+), 15 deletions(-) diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 7e49bc5bf..0b5af1b2b 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -291,7 +291,8 @@ body { #messages .message:hover .time { opacity: 1; } -#messages .message .ship { +#messages .message .ship, +#messages .message .audi > div { cursor: pointer; } .member { @@ -304,6 +305,9 @@ body { .message.pending { color: #ccc; } +.message.say .mess { + font-style: italic; +} .mess, .iden, #station .member div, diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index 320c504ef..20a6edc72 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -231,6 +231,7 @@ body opacity 1 #messages .message .ship +#messages .message .audi > div cursor pointer .member @@ -243,6 +244,9 @@ body .message.pending color #ccc +.message.say .mess + font-style italic + .mess .iden #station .member div diff --git a/main/pub/talk/src/js/actions/MessageActions.coffee b/main/pub/talk/src/js/actions/MessageActions.coffee index da23ff5da..ca98d42f3 100644 --- a/main/pub/talk/src/js/actions/MessageActions.coffee +++ b/main/pub/talk/src/js/actions/MessageActions.coffee @@ -30,8 +30,8 @@ module.exports = sendMessage: (station,message,audience) -> serial = window.util.uuid32() - if station[0] isnt "~" then station = "~"+window.urb.ship+"/"+station + if station[0] isnt "~" then station = "~"+window.urb.ship+"/"+station if audience.length is 0 then audience.push station _audi = {} @@ -51,9 +51,13 @@ module.exports = bouquet:[] speech: lin: - say:false + say:true txt:message date: Date.now() + + if message[0] is "@" + _message.thought.statement.speech.lin.txt = _message.thought.statement.speech.lin.txt.slice(1).trim() + _message.thought.statement.speech.lin.say = false MessageDispatcher.handleViewAction type:"message-send" diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index 565a10e03..fbf29a7d0 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -31,13 +31,14 @@ Message = recl render: -> # pendingClass = if @props.pending isnt "received" then "pending" else "" delivery = _.uniq _.pluck @props.thought.audience, "delivery" - pendingClass = if delivery.indexOf("received") isnt -1 then "received" else "pending" + klass = if delivery.indexOf("received") isnt -1 then " received" else " pending" + if @props.thought.statement.speech.lin.say is false then klass += " say" name = if @props.name then @props.name else "" audi = window.util.clipAudi _.keys @props.thought.audience audi = audi.map (_audi) -> (div {}, _audi) - div {className:"message "+pendingClass}, [ + div {className:"message #{klass}"}, [ (div {className:"attr"}, [ div {onClick:@_handleAudi,className:"audi"}, audi (div {onClick:@_handlePm}, (Member {ship:@props.ship}, "")) diff --git a/main/pub/talk/src/js/components/StationComponent.coffee b/main/pub/talk/src/js/components/StationComponent.coffee index 65d5520f9..27ed79455 100644 --- a/main/pub/talk/src/js/components/StationComponent.coffee +++ b/main/pub/talk/src/js/components/StationComponent.coffee @@ -47,6 +47,7 @@ module.exports = recl _sources.push v StationActions.setSources @state.station,_sources @$input.val('') + @$input.blur() _remove: (e) -> e.stopPropagation() diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index 218db36ae..4a890820a 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -46,7 +46,7 @@ module.exports = recl else audi = @state.audi audi = window.util.expandAudi audi - MessageActions.sendMessage audi,@$writing.text(),audi + MessageActions.sendMessage audi,@$writing.text().trim(),audi @$length.text "0/69" @$writing.text('') @set() diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 1643b4a2b..a5b02e1b6 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -65,7 +65,7 @@ module.exports = { bouquet: [], speech: { lin: { - say: false, + say: true, txt: message } }, @@ -73,6 +73,10 @@ module.exports = { } } }; + if (message[0] === "@") { + _message.thought.statement.speech.lin.txt = _message.thought.statement.speech.lin.txt.slice(1).trim(); + _message.thought.statement.speech.lin.say = false; + } MessageDispatcher.handleViewAction({ type: "message-send", message: _message @@ -251,16 +255,19 @@ Message = recl({ return this.props._handlePm(user); }, render: function() { - var audi, delivery, name, pendingClass; + var audi, delivery, klass, name; delivery = _.uniq(_.pluck(this.props.thought.audience, "delivery")); - pendingClass = delivery.indexOf("received") !== -1 ? "received" : "pending"; + klass = delivery.indexOf("received") !== -1 ? " received" : " pending"; + if (this.props.thought.statement.speech.lin.say === false) { + klass += " say"; + } name = this.props.name ? this.props.name : ""; audi = window.util.clipAudi(_.keys(this.props.thought.audience)); audi = audi.map(function(_audi) { return div({}, _audi); }); return div({ - className: "message " + pendingClass + className: "message " + klass }, [ div({ className: "attr" @@ -448,7 +455,8 @@ module.exports = recl({ _sources = _.clone(this.state.configs[this.state.station].sources); _sources.push(v); StationActions.setSources(this.state.station, _sources); - return this.$input.val(''); + this.$input.val(''); + return this.$input.blur(); } } }, @@ -616,7 +624,7 @@ module.exports = recl({ audi = this.state.audi; } audi = window.util.expandAudi(audi); - MessageActions.sendMessage(audi, this.$writing.text(), audi); + MessageActions.sendMessage(audi, this.$writing.text().trim(), audi); this.$length.text("0/69"); this.$writing.text(''); this.set(); @@ -5461,13 +5469,13 @@ module.exports = { appl: "radio", path: "/ax/" + station }, function(err, res) { - var ref; console.log('station subscription updates'); console.log(res.data); if (res.data.ok === true) { StationActions.listeningStation(station); } - if ((ref = res.data.group) != null ? ref.global : void 0) { + if (res.data.group) { + res.data.group.global[window.util.mainStationPath(window.urb.user)] = res.data.group.local; StationActions.loadMembers(res.data.group.global); } if (res.data.config) { diff --git a/main/pub/talk/src/js/persistence/StationPersistence.coffee b/main/pub/talk/src/js/persistence/StationPersistence.coffee index b90bdf164..aba591952 100644 --- a/main/pub/talk/src/js/persistence/StationPersistence.coffee +++ b/main/pub/talk/src/js/persistence/StationPersistence.coffee @@ -68,7 +68,8 @@ module.exports = console.log(res.data) if res.data.ok is true StationActions.listeningStation station - if res.data.group?.global + if res.data.group + res.data.group.global[window.util.mainStationPath(window.urb.user)] = res.data.group.local StationActions.loadMembers res.data.group.global if res.data.config StationActions.loadConfig station,res.data.config \ No newline at end of file From e6ed9e6ea701730f7f2b2d72fd6cf0e2a31a2bc2 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 25 Mar 2015 15:47:29 -0700 Subject: [PATCH 14/15] mini mobi --- main/pub/talk/src/css/main.css | 27 ++++++++++++++++++++++++++ main/pub/talk/src/css/main.styl | 4 +++- main/pub/talk/src/css/mobile.styl | 32 +++++++++++++++++++++++++++++++ main/pub/talk/src/js/main.coffee | 3 +++ main/pub/talk/src/js/main.js | 1 + 5 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 main/pub/talk/src/css/mobile.styl diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index 0b5af1b2b..aea876427 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -422,3 +422,30 @@ body { font-size: 0.8rem; text-transform: uppercase; } +@media only screen and (max-width: 1170px) { + #c, + #station-container { + width: 96%; + left: 0; + margin-left: 2%; + margin-right: 2%; + } + .mess, + #writing { + max-width: 40%; + line-height: 1.2rem; + } + .attr, + #stations, + #where { + width: 20%; + min-width: 20%; + } + #audience, + #who { + width: 60%; + } + #writing { + padding: 0.1rem; + } +} diff --git a/main/pub/talk/src/css/main.styl b/main/pub/talk/src/css/main.styl index 20a6edc72..4d56f565c 100644 --- a/main/pub/talk/src/css/main.styl +++ b/main/pub/talk/src/css/main.styl @@ -367,4 +367,6 @@ body background-color #f9f9f9 font-weight 500 font-size .8rem - text-transform uppercase \ No newline at end of file + text-transform uppercase + +@import 'mobile' \ No newline at end of file diff --git a/main/pub/talk/src/css/mobile.styl b/main/pub/talk/src/css/mobile.styl new file mode 100644 index 000000000..4751a5d47 --- /dev/null +++ b/main/pub/talk/src/css/mobile.styl @@ -0,0 +1,32 @@ +/* laptops / small screens ----------- */ +@media only screen and (max-width: 1170px) + #c + #station-container + width 96% + left 0 + margin-left 2% + margin-right 2% + + .mess + #writing + max-width 40% + line-height 1.2rem + + .attr + #stations + #where + width 20% + min-width 20% + + #audience + #who + width 60% + + #writing + padding .1rem + +/* tablets + phones ----------- */ +// @media only screen and (min-width: 320px) and (max-width: 1024px) + +/* phones portrait and landscape ----------- */ +// @media only screen and (min-device-width: 320px) and (max-device-width: 480px) \ No newline at end of file diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index 0df82a85d..a7b050f56 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -86,7 +86,10 @@ $(() -> else $('body').removeClass 'scrolling' + $(window).on 'scroll', window.util.checkScroll + $(window).on 'resize', window.util.checkResize + window.chat.StationPersistence.listen() diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index a5b02e1b6..54db8e58a 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -933,6 +933,7 @@ $(function() { } }; $(window).on('scroll', window.util.checkScroll); + $(window).on('resize', window.util.checkResize); window.chat.StationPersistence.listen(); StationComponent = require('./components/StationComponent.coffee'); MessagesComponent = require('./components/MessagesComponent.coffee'); From 15b67f181c892f1919a4aae8aac92d35f7e2d3d0 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Thu, 26 Mar 2015 13:55:26 -0700 Subject: [PATCH 15/15] talking it up --- main/pub/talk/fab/hymn.hook | 2 +- main/pub/talk/src/css/main.css | 15 +++ main/pub/talk/src/css/mobile.styl | 14 ++- .../talk/src/js/actions/MessageActions.coffee | 7 +- .../js/components/MessagesComponent.coffee | 7 +- .../src/js/components/WritingComponent.coffee | 22 ++-- main/pub/talk/src/js/main.coffee | 67 ++++++++++- main/pub/talk/src/js/main.js | 107 +++++++++++++++--- 8 files changed, 210 insertions(+), 31 deletions(-) diff --git a/main/pub/talk/fab/hymn.hook b/main/pub/talk/fab/hymn.hook index f19838b5e..bf60f251c 100644 --- a/main/pub/talk/fab/hymn.hook +++ b/main/pub/talk/fab/hymn.hook @@ -10,7 +10,7 @@ ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"); ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"); ;script(type "text/javascript", src "/gen/main/pub/talk/src/js/dep/director.js"); - ;meta(name "viewport", content "width=432, initial-scale=1"); + ;meta(name "viewport", content "width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"); ;link(type "text/css", rel "stylesheet", href "/gen/main/pub/talk/src/css/main.css"); ;script(type "text/javascript", src "/gop/hart.js"); ;title: Radio diff --git a/main/pub/talk/src/css/main.css b/main/pub/talk/src/css/main.css index aea876427..ff92ff80d 100644 --- a/main/pub/talk/src/css/main.css +++ b/main/pub/talk/src/css/main.css @@ -448,4 +448,19 @@ body { #writing { padding: 0.1rem; } + .m-down, + .m-up { + position: absolute; + } + .m-down.m-fixed { + position: fixed; + top: 0; + } +} +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { + .mess, + #writing { + max-width: 70%; + line-height: 1.2rem; + } } diff --git a/main/pub/talk/src/css/mobile.styl b/main/pub/talk/src/css/mobile.styl index 4751a5d47..af1a03336 100644 --- a/main/pub/talk/src/css/mobile.styl +++ b/main/pub/talk/src/css/mobile.styl @@ -24,9 +24,21 @@ #writing padding .1rem + + .m-down + .m-up + position absolute + + .m-down.m-fixed + position fixed + top 0 /* tablets + phones ----------- */ // @media only screen and (min-width: 320px) and (max-width: 1024px) /* phones portrait and landscape ----------- */ -// @media only screen and (min-device-width: 320px) and (max-device-width: 480px) \ No newline at end of file +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) + .mess + #writing + max-width 70% + line-height 1.2rem \ No newline at end of file diff --git a/main/pub/talk/src/js/actions/MessageActions.coffee b/main/pub/talk/src/js/actions/MessageActions.coffee index ca98d42f3..d8b83c6e6 100644 --- a/main/pub/talk/src/js/actions/MessageActions.coffee +++ b/main/pub/talk/src/js/actions/MessageActions.coffee @@ -27,12 +27,11 @@ module.exports = type:"messages-fetch" window.chat.MessagePersistence.get station,start,end - sendMessage: (station,message,audience) -> + sendMessage: (message,audience) -> serial = window.util.uuid32() - - if station[0] isnt "~" then station = "~"+window.urb.ship+"/"+station - if audience.length is 0 then audience.push station + audience.push window.util.mainStationPath window.urb.user + audience = _.uniq audience _audi = {} for k,v of audience diff --git a/main/pub/talk/src/js/components/MessagesComponent.coffee b/main/pub/talk/src/js/components/MessagesComponent.coffee index fbf29a7d0..75d78d593 100644 --- a/main/pub/talk/src/js/components/MessagesComponent.coffee +++ b/main/pub/talk/src/js/components/MessagesComponent.coffee @@ -35,7 +35,9 @@ Message = recl if @props.thought.statement.speech.lin.say is false then klass += " say" name = if @props.name then @props.name else "" - audi = window.util.clipAudi _.keys @props.thought.audience + audi = _.keys @props.thought.audience + audi = _.without audi,window.util.mainStationPath window.urb.user + audi = window.util.clipAudi audi audi = audi.map (_audi) -> (div {}, _audi) div {className:"message #{klass}"}, [ @@ -83,7 +85,8 @@ module.exports = recl componentDidMount: -> MessageStore.addChangeListener @_onChangeStore StationStore.addChangeListener @_onChangeStore - if @state.station and @state.listening.indexOf(@state.station) is -1 + if @state.station and + @state.listening.indexOf(@state.station) is -1 MessageActions.listenStation @state.station checkMore = @checkMore $(window).on 'scroll', checkMore diff --git a/main/pub/talk/src/js/components/WritingComponent.coffee b/main/pub/talk/src/js/components/WritingComponent.coffee index 4a890820a..c0a1d3443 100644 --- a/main/pub/talk/src/js/components/WritingComponent.coffee +++ b/main/pub/talk/src/js/components/WritingComponent.coffee @@ -14,13 +14,16 @@ module.exports = recl get: -> if window.localStorage then window.localStorage.getItem 'writing' - stateFromStore: -> { - audi:StationStore.getAudience() - members:StationStore.getMembers() - typing:StationStore.getTyping() - ludi:MessageStore.getLastAudience() - valid:StationStore.getValidAudience() - } + stateFromStore: -> + s = + audi:StationStore.getAudience() + ludi:MessageStore.getLastAudience() + members:StationStore.getMembers() + typing:StationStore.getTyping() + valid:StationStore.getValidAudience() + s.audi = _.without s.audi, window.util.mainStationPath window.urb.user + s.ludi = _.without s.ludi, window.util.mainStationPath window.urb.user + s getInitialState: -> @stateFromStore() @@ -46,7 +49,7 @@ module.exports = recl else audi = @state.audi audi = window.util.expandAudi audi - MessageActions.sendMessage audi,@$writing.text().trim(),audi + MessageActions.sendMessage @$writing.text().trim(),audi @$length.text "0/69" @$writing.text('') @set() @@ -102,6 +105,9 @@ module.exports = recl _validateAudi: -> v = $('#audi').text() + v = v.trim() + if v.length is 0 + return true v = v.split " " for a in v a = a.trim() diff --git a/main/pub/talk/src/js/main.coffee b/main/pub/talk/src/js/main.coffee index a7b050f56..704e25e88 100644 --- a/main/pub/talk/src/js/main.coffee +++ b/main/pub/talk/src/js/main.coffee @@ -85,11 +85,74 @@ $(() -> $('body').addClass 'scrolling' else $('body').removeClass 'scrolling' + + # checkScroll = -> + # if $(window).scrollTop() > 20 + # $('#nav').addClass 'scrolling' + # else + # $('#nav').removeClass 'scrolling' + # setInterval checkScroll, 500 + so = {} + so.ls = $(window).scrollTop() + so.cs = $(window).scrollTop() + so.w = null + so.$n = $('#station-container') + so.$d = $('#nav > div') + so.nh = so.$n.outerHeight(true) + setSo = -> + so.$n = $('#station-container') + so.w = $(window).width() + setInterval setSo,200 + + $(window).on 'resize', (e) -> + if so.w > 1170 + so.$n.removeClass 'm-up m-down m-fixed' + + $(window).on 'scroll', (e) -> + so.cs = $(window).scrollTop() + + if so.w > 1170 + so.$n.removeClass 'm-up m-down m-fixed' + if so.w < 1170 + dy = so.ls-so.cs + + so.$d.removeClass 'focus' + + if so.cs <= 0 + so.$n.removeClass 'm-up' + so.$n.addClass 'm-down m-fixed' + return + + if so.$n.hasClass 'm-fixed' and + so.w < 1024 + so.$n.css left:-1*$(window).scrollLeft() + + if dy > 0 + if not so.$n.hasClass 'm-down' + so.$n.removeClass('m-up').addClass 'm-down' + top = so.cs-so.nh + if top < 0 then top = 0 + so.$n.offset top:top + if so.$n.hasClass('m-down') and + not so.$n.hasClass('m-fixed') and + so.$n.offset().top >= so.cs + so.$n.addClass 'm-fixed' + so.$n.attr {style:''} + + if dy < 0 + if not so.$n.hasClass 'm-up' + so.$n.removeClass('m-down m-fixed').addClass 'm-up' + so.$n.attr {style:''} + top = so.cs + sto = so.$n.offset().top + if top < 0 then top = 0 + if top > sto and top < sto+so.nh then top = sto + so.$n.offset top:top + + so.ls = so.cs $(window).on 'scroll', window.util.checkScroll - $(window).on 'resize', window.util.checkResize - window.chat.StationPersistence.listen() diff --git a/main/pub/talk/src/js/main.js b/main/pub/talk/src/js/main.js index 54db8e58a..df508ee89 100644 --- a/main/pub/talk/src/js/main.js +++ b/main/pub/talk/src/js/main.js @@ -36,15 +36,11 @@ module.exports = { }); return window.chat.MessagePersistence.get(station, start, end); }, - sendMessage: function(station, message, audience) { + sendMessage: function(message, audience) { var _audi, _message, k, serial, v; serial = window.util.uuid32(); - if (station[0] !== "~") { - station = "~" + window.urb.ship + "/" + station; - } - if (audience.length === 0) { - audience.push(station); - } + audience.push(window.util.mainStationPath(window.urb.user)); + audience = _.uniq(audience); _audi = {}; for (k in audience) { v = audience[k]; @@ -262,7 +258,9 @@ Message = recl({ klass += " say"; } name = this.props.name ? this.props.name : ""; - audi = window.util.clipAudi(_.keys(this.props.thought.audience)); + audi = _.keys(this.props.thought.audience); + audi = _.without(audi, window.util.mainStationPath(window.urb.user)); + audi = window.util.clipAudi(audi); audi = audi.map(function(_audi) { return div({}, _audi); }); @@ -587,13 +585,17 @@ module.exports = recl({ } }, stateFromStore: function() { - return { + var s; + s = { audi: StationStore.getAudience(), + ludi: MessageStore.getLastAudience(), members: StationStore.getMembers(), typing: StationStore.getTyping(), - ludi: MessageStore.getLastAudience(), valid: StationStore.getValidAudience() }; + s.audi = _.without(s.audi, window.util.mainStationPath(window.urb.user)); + s.ludi = _.without(s.ludi, window.util.mainStationPath(window.urb.user)); + return s; }, getInitialState: function() { return this.stateFromStore(); @@ -624,7 +626,7 @@ module.exports = recl({ audi = this.state.audi; } audi = window.util.expandAudi(audi); - MessageActions.sendMessage(audi, this.$writing.text().trim(), audi); + MessageActions.sendMessage(this.$writing.text().trim(), audi); this.$length.text("0/69"); this.$writing.text(''); this.set(); @@ -696,6 +698,10 @@ module.exports = recl({ _validateAudi: function() { var a, i, len, v, valid; v = $('#audi').text(); + v = v.trim(); + if (v.length === 0) { + return true; + } v = v.split(" "); for (i = 0, len = v.length; i < len; i++) { a = v[i]; @@ -824,7 +830,7 @@ module.exports = _.merge(new Dispatcher(), { },{"flux":"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/node_modules/flux/index.js"}],"/Users/galen/Documents/src/urbit-test/urb/zod/main/pub/talk/src/js/main.coffee":[function(require,module,exports){ $(function() { - var $c, MessagesComponent, StationActions, StationComponent, WritingComponent, clean, rend; + var $c, MessagesComponent, StationActions, StationComponent, WritingComponent, clean, rend, setSo, so; StationActions = require('./actions/StationActions.coffee'); rend = React.render; window.chat = {}; @@ -932,8 +938,83 @@ $(function() { } } }; + so = {}; + so.ls = $(window).scrollTop(); + so.cs = $(window).scrollTop(); + so.w = null; + so.$n = $('#station-container'); + so.$d = $('#nav > div'); + so.nh = so.$n.outerHeight(true); + setSo = function() { + so.$n = $('#station-container'); + return so.w = $(window).width(); + }; + setInterval(setSo, 200); + $(window).on('resize', function(e) { + if (so.w > 1170) { + return so.$n.removeClass('m-up m-down m-fixed'); + } + }); + $(window).on('scroll', function(e) { + var dy, sto, top; + so.cs = $(window).scrollTop(); + if (so.w > 1170) { + so.$n.removeClass('m-up m-down m-fixed'); + } + if (so.w < 1170) { + dy = so.ls - so.cs; + so.$d.removeClass('focus'); + if (so.cs <= 0) { + so.$n.removeClass('m-up'); + so.$n.addClass('m-down m-fixed'); + return; + } + if (so.$n.hasClass('m-fixed' && so.w < 1024)) { + so.$n.css({ + left: -1 * $(window).scrollLeft() + }); + } + if (dy > 0) { + if (!so.$n.hasClass('m-down')) { + so.$n.removeClass('m-up').addClass('m-down'); + top = so.cs - so.nh; + if (top < 0) { + top = 0; + } + so.$n.offset({ + top: top + }); + } + if (so.$n.hasClass('m-down') && !so.$n.hasClass('m-fixed') && so.$n.offset().top >= so.cs) { + so.$n.addClass('m-fixed'); + so.$n.attr({ + style: '' + }); + } + } + if (dy < 0) { + if (!so.$n.hasClass('m-up')) { + so.$n.removeClass('m-down m-fixed').addClass('m-up'); + so.$n.attr({ + style: '' + }); + top = so.cs; + sto = so.$n.offset().top; + if (top < 0) { + top = 0; + } + if (top > sto && top < sto + so.nh) { + top = sto; + } + return so.$n.offset({ + top: top + }); + } + } + } + }); + so.ls = so.cs; $(window).on('scroll', window.util.checkScroll); - $(window).on('resize', window.util.checkResize); window.chat.StationPersistence.listen(); StationComponent = require('./components/StationComponent.coffee'); MessagesComponent = require('./components/MessagesComponent.coffee');