mirror of
https://github.com/urbit/shrub.git
synced 2024-12-11 23:48:22 +03:00
talking
This commit is contained in:
Galen Wolfe-Pauly
parent
53006273ee
commit
e9032c460b
1
web/module/test.md
Normal file
1
web/module/test.md
Normal file
@ -0,0 +1 @@
|
||||
<div><module js="/talk/main.js" css="/talk/main.css" component="talk"></module></div>
|
||||
@ -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 */
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user