From e9032c460be823154240be6a0b02e59ce9e09a35 Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Mon, 1 Feb 2016 16:00:45 -0800 Subject: [PATCH] talking --- web/module/test.md | 1 + web/talk/main.css | 99 ++++++++++++++++++++++++++++++++++++++++++++-- web/talk/main.js | 91 ++++++++++++++++++++++++------------------ web/tree/main.css | 5 ++- web/tree/main.js | 15 ++++--- 5 files changed, 163 insertions(+), 48 deletions(-) create mode 100644 web/module/test.md diff --git a/web/module/test.md b/web/module/test.md new file mode 100644 index 0000000000..f12306530d --- /dev/null +++ b/web/module/test.md @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/web/talk/main.css b/web/talk/main.css index 3a88548992..f6e3880171 100644 --- a/web/talk/main.css +++ b/web/talk/main.css @@ -2,6 +2,10 @@ .room { font-family: 'scp'; } +.valid-false { + color: #E20B0B; + border-color: #E20B0B; } + div.meta { display: inline-block; } @@ -15,6 +19,7 @@ div.meta label { height: 1rem; width: 1rem; text-align: center; } + div.meta label:before { content: attr(data-glyph); color: #fff; @@ -23,10 +28,12 @@ div.meta label:before { font-weight: 500; line-height: 1rem; vertical-align: middle; } + div.meta label, div.meta h2, div.meta h3 { display: inline-block; } + div.meta h2, div.meta h3 { font-family: 'scp'; @@ -34,11 +41,16 @@ div.meta h3 { font-weight: 400; margin-top: 0; padding-top: 0; } + div.meta h3 { margin-left: 2rem; } + div.meta .time { padding-right: 2rem; } +div.gram.first { + margin-top: 1rem; } + div.gram.same div.meta { display: none; } @@ -55,6 +67,86 @@ div.gram.same:hover div.meta { @media (max-width: 767px) { div.meta > label { margin-right: 9px; } } + +div.gram label[data-glyph=">"], +div.gram label[data-glyph="="], +div.gram label[data-glyph="+"], +div.gram label[data-glyph="-"], +div.gram label[data-glyph="}"] { + background-color: #E20B0B; } + +div.gram label[data-glyph=")"], +div.gram label[data-glyph=","], +div.gram label[data-glyph="."], +div.gram label[data-glyph='"'], +div.gram label[data-glyph="'"] { + background-color: #FFF900; } + +div.gram label[data-glyph="*"], +div.gram label[data-glyph="`"], +div.gram label[data-glyph="^"], +div.gram label[data-glyph="$"], +div.gram label[data-glyph="%"], +div.gram label[data-glyph="&"], +div.gram label[data-glyph="@"] { + background-color: #0500F0; } + +input.action { + background-color: transparent; + border-color: transparent; + font-family: 'scp'; + font-size: .8rem; } + +input.action.valid-false { + color: #E20B0B; } + +input.action::-webkit-input-placeholder { + color: #000; + font-family: 'bau'; + font-size: 1rem; } + +input.action:-moz-placeholder { + color: #000; + font-family: 'bau'; + font-size: 1rem; } + +input.action::-moz-placeholder { + color: #000; + font-family: 'bau'; + font-size: 1rem; } + +input.action:-ms-input-placeholder { + color: #000; + font-family: 'bau'; + font-size: 1rem; } + +input.action:focus::-webkit-input-placeholder { + color: transparent; } + +input.action:focus:-moz-placeholder { + color: transparent; } + +input.action:focus::-moz-placeholder { + color: transparent; } + +input.action:focus:-ms-input-placeholder { + color: transparent; } + +.room .close { + display: none; + margin: 0; + float: none; + margin-left: .6rem; + font-weight: 600; + font-size: .8rem; + color: #E20B0B; } + +.room:hover .close { + display: inline; } + +.room.disabled { + opacity: .6; } + .input { border-bottom: 3px solid #000; display: inline-block; @@ -70,7 +162,7 @@ div.gram.same:hover div.meta { margin-left: 2rem; } .audience { - margin-bottom: 2rem; } + margin-bottom: 1rem; } .audience .input { border-color: #B1B7BD; @@ -83,6 +175,9 @@ div.gram.same:hover div.meta { border-color: #373a3c; font-family: 'bau'; } +.writing { + margin-top: 2rem; } + .length { display: inline-block; margin-left: 2rem; @@ -91,5 +186,3 @@ div.gram.same:hover div.meta { font-size: .7rem; font-weight: 500; letter-spacing: 1px; } - -/*# sourceMappingURL=main.css.map */ diff --git a/web/talk/main.js b/web/talk/main.js index df55e91403..be99cd160f 100644 --- a/web/talk/main.js +++ b/web/talk/main.js @@ -640,7 +640,7 @@ module.exports = recl({ },{"../actions/MessageActions.coffee":1,"../actions/StationActions.coffee":2,"../stores/MessageStore.coffee":13,"../stores/StationStore.coffee":14,"./MessageComponent.coffee":5,"react-infinite":26}],7:[function(require,module,exports){ -var Load, Member, MessageStore, StationActions, StationStore, a, clas, div, h1, h2, input, label, recl, ref, rele, span, style, textarea, +var Load, Member, MessageStore, StationActions, StationStore, a, clas, div, h1, h2, input, label, recl, ref, rele, span, style, indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; clas = require('classnames'); @@ -649,7 +649,7 @@ recl = React.createClass; rele = React.createElement; -ref = React.DOM, div = ref.div, style = ref.style, input = ref.input, textarea = ref.textarea, h1 = ref.h1, h2 = ref.h2, label = ref.label, span = ref.span, a = ref.a; +ref = React.DOM, div = ref.div, style = ref.style, input = ref.input, h1 = ref.h1, h2 = ref.h2, label = ref.label, span = ref.span, a = ref.a; MessageStore = require('../stores/MessageStore.coffee'); @@ -680,7 +680,6 @@ module.exports = recl({ }, componentDidMount: function() { this.$el = $(ReactDOM.findDOMNode()); - this.$input = this.$el.find('input'); StationStore.addChangeListener(this._onChangeStore); if (this.state.listening.indexOf(this.state.station) === -1) { return StationActions.listenStation(this.state.station); @@ -703,10 +702,11 @@ module.exports = recl({ return indexOf.call(sources, s) < 0 && indexOf.call(s, "/") >= 0 && s[0] === "~" && s.length >= 5; }, onKeyUp: function(e) { - var _sources, v; - $('.sour-ctrl .join').removeClass('valid-false'); + var $input, _sources, v; + $('.menu.depth-1 .add').removeClass('valid-false'); if (e.keyCode === 13) { - v = this.$input.val().toLowerCase(); + $input = $(e.target); + v = $input.val().toLowerCase(); if (v[0] !== "~") { v = "~" + v; } @@ -714,10 +714,10 @@ module.exports = recl({ _sources = _.clone(this.state.configs[this.state.station].sources); _sources.push(v); StationActions.setSources(this.state.station, _sources); - this.$input.val(''); - return this.$input.blur(); + $input.val(''); + return $input.blur(); } else { - return $('.sour-ctrl .join').addClass('valid-false'); + return $('.menu.depth-1 .add').addClass('valid-false'); } } }, @@ -731,9 +731,38 @@ module.exports = recl({ return StationActions.setSources(this.state.station, _sources); }, render: function() { - var _clas, members, parts; + var _clas, members, parts, source, sources, sourcesSum; parts = []; members = []; + if (this.state.station && this.state.configs[this.state.station]) { + sources = (function() { + var i, len, ref1, results; + ref1 = this.state.configs[this.state.station].sources; + results = []; + for (i = 0, len = ref1.length; i < len; i++) { + source = ref1[i]; + results.push(div({ + className: "room" + }, [ + source.slice(1), div({ + className: "close", + onClick: this._remove, + "data-station": source + }, "✕") + ])); + } + return results; + }).call(this); + sources.push(input({ + className: "action add", + placeholder: "+ Listen", + onKeyUp: this.onKeyUp + }, "")); + sourcesSum = this.state.configs[this.state.station].sources.length; + } else { + sources = ""; + sourcesSum = 0; + } _clas = clas({ open: this.props.open === true, closed: this.props.open !== true, @@ -750,34 +779,13 @@ module.exports = recl({ className: "contents" }, [ div({ - className: "close" + className: "close", + onClick: this.props.toggle }, "✕"), h2({}, [ - span({}, "Direct"), label({ - className: "sum" - }, 3) - ]), div({}, [ - div({ - className: "name" - }, "Galen"), div({ - className: "planet" - }, "~talsur-todres") - ]), div({ - className: "action create" - }, [label({}, ""), span({}, "Message")]), h2({}, [ span({}, "Stations"), label({ className: "sum" - }, 4) - ]), div({}, [ - div({ - className: "room" - }, "/meta"), div({ - className: "room" - }, "/help"), div({ - className: "room" - }, "~talsur-todres/room"), div({ - className: "action add" - }, [label({}, ""), span({}, "Listen")]) - ]) + }, sourcesSum) + ]), div({}, sources) ]) ]); } @@ -821,9 +829,11 @@ Audience = recl({ render: function() { return div({ className: 'audience', - id: 'audience' + id: 'audience', + key: 'audience' }, div({ className: "input valid-" + this.props.valid, + key: 'input', contentEditable: true, onKeyDown: this.onKeyDown, onBlur: this.props.onBlur @@ -1053,7 +1063,8 @@ module.exports = recl({ audi[k] = v.slice(1); } return div({ - className: 'writing' + className: 'writing', + key: 'writing' }, [ React.createElement(Audience, { audi: audi, @@ -1141,7 +1152,9 @@ TreeActions.registerComponent("talk", React.createClass({ }); }, render: function() { - return div({}, [ + return div({ + key: "talk-container" + }, [ div({ key: "grams-container" }, MessagesComponent({ @@ -1273,7 +1286,7 @@ module.exports = function(arg) { setSources: function(station, ship, sources) { var cordon; cordon = { - posture: "white", + posture: "black", list: [] }; return design(station, { diff --git a/web/tree/main.css b/web/tree/main.css index 8a7856d7ca..f27e26939e 100644 --- a/web/tree/main.css +++ b/web/tree/main.css @@ -261,7 +261,8 @@ img.logo.first { padding-right: 0; overflow: hidden; position: fixed; - z-index: 99; } + z-index: 99; + margin-top: -3rem; } .menu .contents { padding-left: 0.9375rem; padding-right: 0.9375rem; @@ -273,6 +274,8 @@ img.logo.first { transition: left 0.3s ease-in-out; } .menu .close { margin-top: -2rem; } + .menu .close:hover { + opacity: 1; } .menu h2 { font-size: 1rem; padding-top: 3rem; } diff --git a/web/tree/main.js b/web/tree/main.js index 7267ed1e95..81cc9910cb 100644 --- a/web/tree/main.js +++ b/web/tree/main.js @@ -63,7 +63,7 @@ module.exports = { },{"../dispatcher/Dispatcher.coffee":17,"../persistence/TreePersistence.coffee":19}],2:[function(require,module,exports){ -var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, recl, ref, ul, util; +var BodyComponent, Dpad, Nav, Sibs, TreeActions, TreeStore, a, button, clas, div, li, query, recl, ref, rend, ul, util; clas = require('classnames'); @@ -83,6 +83,8 @@ util = require('../utils/util.coffee'); recl = React.createClass; +rend = ReactDOM.render; + ref = React.DOM, div = ref.div, a = ref.a, ul = ref.ul, li = ref.li, button = ref.button; Nav = React.createFactory(query({ @@ -265,7 +267,7 @@ module.exports = query({ if (next !== this.props.path) { React.unmountComponentAtNode($('#body')[0]); TreeActions.setCurr(next); - return React.render(BodyComponent({}, ""), $('#body')[0]); + return rend(BodyComponent({}, ""), $('#body')[0]); } }, reset: function() { @@ -305,7 +307,8 @@ module.exports = query({ if (this.state.subnav) { kids.push(this.state.subnav({ key: "subnav", - open: this.state.open + open: this.state.open, + toggle: TreeActions.toggleNav }, "")); } return div({}, kids); @@ -544,7 +547,6 @@ module.exports = query({ className: "col-md-10 col-md-offset-2 body" }, [ div({ - id: 'body', key: "body" + this.props.path, className: className }, extra('spam'), extra('logo', { @@ -1029,6 +1031,7 @@ recl = React.createClass; ref = React.DOM, div = ref.div, span = ref.span, code = ref.code; module.exports = recl({ + displayName: "Module", getInitialState: function() { return { loaded: false @@ -1077,7 +1080,9 @@ module.exports = recl({ }, render: function() { if (!this.state.loaded) { - return div({}, ""); + return div({ + key: "module-loading" + }, ""); } else { return reactify({ gn: this.props.component,