mirror of
https://github.com/urbit/shrub.git
synced 2024-12-04 04:35:02 +03:00
Merge pull request #1413 from urbit/la-chat-styles
Updated styles of chat and build systems for JS
This commit is contained in:
ixv
GitHub
commit
37464d9da2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,16 +1,14 @@
|
||||
var gulp = require('gulp');
|
||||
var cssimport = require('gulp-cssimport');
|
||||
var rollup = require('gulp-better-rollup');
|
||||
var cssnano = require('cssnano');
|
||||
var postcss = require('gulp-postcss');
|
||||
var sucrase = require('@sucrase/gulp-plugin');
|
||||
var minify = require('gulp-minify');
|
||||
var exec = require('child_process').exec;
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
var resolve = require('rollup-plugin-node-resolve');
|
||||
var commonjs = require('rollup-plugin-commonjs');
|
||||
var replace = require('rollup-plugin-replace');
|
||||
var json = require('rollup-plugin-json');
|
||||
var builtins = require('@joseph184/rollup-plugin-node-builtins');
|
||||
var rootImport = require('rollup-plugin-root-import');
|
||||
var globals = require('rollup-plugin-node-globals');
|
||||
|
||||
@ -25,9 +23,13 @@ var urbitrc = require('../urbitrc');
|
||||
***/
|
||||
|
||||
gulp.task('css-bundle', function() {
|
||||
let plugins = [
|
||||
cssnano()
|
||||
];
|
||||
return gulp
|
||||
.src('src/index.css')
|
||||
.pipe(cssimport())
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(gulp.dest('../../arvo/app/chat/css'));
|
||||
});
|
||||
|
||||
@ -57,17 +59,12 @@ gulp.task('js-imports', function(cb) {
|
||||
'node_modules/react-is/index.js': [ 'isValidElementType' ],
|
||||
}
|
||||
}),
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
}),
|
||||
rootImport({
|
||||
root: `${__dirname}/dist/js`,
|
||||
useEntry: 'prepend',
|
||||
extensions: '.js'
|
||||
}),
|
||||
json(),
|
||||
globals(),
|
||||
builtins(),
|
||||
resolve()
|
||||
]
|
||||
}, 'umd'))
|
||||
@ -93,9 +90,7 @@ gulp.task('tile-js-imports', function(cb) {
|
||||
useEntry: 'prepend',
|
||||
extensions: '.js'
|
||||
}),
|
||||
json(),
|
||||
globals(),
|
||||
builtins(),
|
||||
resolve()
|
||||
]
|
||||
}, 'umd'))
|
||||
@ -107,7 +102,6 @@ gulp.task('tile-js-imports', function(cb) {
|
||||
.on('end', cb);
|
||||
});
|
||||
|
||||
|
||||
gulp.task('js-minify', function () {
|
||||
return gulp.src('../../arvo/app/chat/js/index.js')
|
||||
.pipe(minify())
|
||||
@ -132,18 +126,6 @@ gulp.task('rename-tile-min', function() {
|
||||
.pipe(gulp.dest('../../arvo/app/chat/js/'));
|
||||
});
|
||||
|
||||
gulp.task('js-cachebust', function(cb) {
|
||||
return Promise.resolve(
|
||||
exec('git log', function (err, stdout, stderr) {
|
||||
let firstLine = stdout.split("\n")[0];
|
||||
let commitHash = firstLine.split(' ')[1].substr(0, 10);
|
||||
let newFilename = "index-" + commitHash + "-min.js";
|
||||
|
||||
exec('mv ../../arvo/app/chat/js/index-min.js ../../arvo/app/chat/js/' + newFilename);
|
||||
})
|
||||
);
|
||||
})
|
||||
|
||||
gulp.task('urbit-copy', function () {
|
||||
let ret = gulp.src('../../arvo/**/*');
|
||||
|
||||
|
||||
1469
pkg/interface/chat/package-lock.json
generated
1469
pkg/interface/chat/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,9 +9,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@joseph184/rollup-plugin-node-builtins": "^2.1.4",
|
||||
"@sucrase/gulp-plugin": "^2.0.0",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-better-rollup": "^4.0.1",
|
||||
@ -21,10 +19,8 @@
|
||||
"gulp-rename": "^1.4.0",
|
||||
"rollup": "^1.6.0",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-node-globals": "^1.4.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-root-import": "^0.2.3",
|
||||
"sucrase": "^3.8.0"
|
||||
},
|
||||
@ -32,11 +28,10 @@
|
||||
"classnames": "^2.2.6",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "^2.20.1",
|
||||
"mousetrap": "^1.6.1",
|
||||
"mousetrap": "^1.6.3",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"rollup-plugin-postcss": "^2.0.3",
|
||||
"urbit-ob": "^3.1.1",
|
||||
"urbit-sigil-js": "^1.3.2"
|
||||
},
|
||||
|
||||
@ -191,13 +191,29 @@ export class ChatScreen extends Component {
|
||||
.slice(messages.length - (50 * state.numPages), messages.length);
|
||||
}
|
||||
|
||||
let chatMessages = messages.reverse().map((msg) => {
|
||||
let reversedMessages = messages.reverse();
|
||||
let chatMessages = reversedMessages.map((msg, i) => {
|
||||
// Render sigil if previous message is not by the same sender
|
||||
let gamAut = ['gam', 'aut'];
|
||||
let renderSigil =
|
||||
_.get(reversedMessages[i + 1], gamAut) !== _.get(msg, gamAut);
|
||||
|
||||
// More padding top if previous message is not by the same sender
|
||||
let paddingTop = renderSigil;
|
||||
// More padding bot if next message is not by the same sender
|
||||
let paddingBot =
|
||||
_.get(reversedMessages[i - 1], gamAut) !== _.get(msg, gamAut);
|
||||
|
||||
return (
|
||||
<Message
|
||||
key={msg.gam.uid}
|
||||
msg={msg.gam} />
|
||||
msg={msg.gam}
|
||||
renderSigil={renderSigil}
|
||||
paddingTop={paddingTop}
|
||||
paddingBot={paddingBot} />
|
||||
);
|
||||
});
|
||||
|
||||
let peers = props.peers[state.station] || [window.ship];
|
||||
|
||||
return (
|
||||
|
||||
@ -27,8 +27,34 @@ export class LandingScreen extends Component {
|
||||
}
|
||||
|
||||
onClickSubscribe() {
|
||||
const { props } = this;
|
||||
|
||||
let station = props.match.params.ship + '/' + props.match.params.station;
|
||||
this.props.api.source(station, true);
|
||||
let actions = [
|
||||
{
|
||||
create: {
|
||||
nom: 'hall-internal-' + props.match.params.station,
|
||||
des: "chatroom",
|
||||
sec: "channel"
|
||||
}
|
||||
},
|
||||
{
|
||||
source: {
|
||||
nom: "inbox",
|
||||
sub: true,
|
||||
srs: [station]
|
||||
}
|
||||
},
|
||||
{
|
||||
source: {
|
||||
nom: "inbox",
|
||||
sub: true,
|
||||
srs: [`~${window.ship}/hall-internal-${props.match.params.station}`]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
this.props.api.chat(actions);
|
||||
this.props.history.push('/~chat');
|
||||
}
|
||||
|
||||
@ -50,7 +76,7 @@ export class LandingScreen extends Component {
|
||||
<br />
|
||||
<button
|
||||
onClick={this.onClickSubscribe.bind(this)}
|
||||
className="label-r"
|
||||
className="label-regular fw-bold pointer"
|
||||
>Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,11 +6,9 @@ export class Sigil extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
|
||||
console.log("sigil ship", props.ship);
|
||||
|
||||
if (props.ship.length > 14) {
|
||||
return (
|
||||
<div className="bg-black" style={{width: 32, height: 32}}>
|
||||
<div className="bg-black" style={{width: 36, height: 36}}>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
||||
@ -58,7 +58,7 @@ export class Message extends Component {
|
||||
if (typeof url !== 'string') { throw 'Only transmogrify strings!'; }
|
||||
const ship = window.ship;
|
||||
if (url.indexOf('arvo://') === 0) {
|
||||
return `http://${ship}.arvo.network` + url.split('arvo://')[1];
|
||||
return url.split('arvo://')[1];
|
||||
}
|
||||
return url;
|
||||
}
|
||||
@ -66,32 +66,51 @@ export class Message extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
let pending = !!props.msg.pending ? ' o-80' : '';
|
||||
let timestamp = moment.unix(props.msg.wen / 1000).format('hh:mm');
|
||||
let datestamp = moment.unix(props.msg.wen / 1000).format('LL');
|
||||
|
||||
return (
|
||||
<div className={"w-100 pl3 pr3 pt2 pb2 cf flex" + pending}
|
||||
style={{
|
||||
minHeight: 'min-content'
|
||||
}}>
|
||||
<div className="fl mr2">
|
||||
<Sigil ship={props.msg.aut} size={36} />
|
||||
</div>
|
||||
<div className="fr" style={{ flexGrow: 1, marginTop: -8 }}>
|
||||
<div className="hide-child">
|
||||
<p className="v-top label-small-mono gray dib mr3">
|
||||
~{props.msg.aut}
|
||||
</p>
|
||||
<p className="v-top label-small-mono gray dib">{timestamp}</p>
|
||||
<p className="v-top label-small-mono ml2 gray dib child">
|
||||
{datestamp}
|
||||
</p>
|
||||
|
||||
let paddingTop = props.paddingTop ? 'pt3' : '';
|
||||
let paddingBot = props.paddingBot ? 'pb2' : 'pb1';
|
||||
|
||||
if (props.renderSigil) {
|
||||
let timestamp = moment.unix(props.msg.wen / 1000).format('hh:mm a');
|
||||
|
||||
return (
|
||||
<div className={"w-100 pl3 pr3 cf flex " + paddingTop + " " + paddingBot + pending}
|
||||
style={{
|
||||
minHeight: 'min-content'
|
||||
}}>
|
||||
<div className="fl mr2">
|
||||
<Sigil ship={props.msg.aut} size={36} />
|
||||
</div>
|
||||
<div className="fr" style={{ flexGrow: 1, marginTop: -8 }}>
|
||||
<div className="hide-child">
|
||||
<p className="v-top label-small-mono gray dib mr3">
|
||||
~{props.msg.aut}
|
||||
</p>
|
||||
<p className="v-top label-small-mono gray dib">{timestamp}</p>
|
||||
<p className="v-top label-small-mono ml2 gray dib child">
|
||||
{datestamp}
|
||||
</p>
|
||||
</div>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
} else {
|
||||
let timestamp = moment.unix(props.msg.wen / 1000).format('hh:mm');
|
||||
|
||||
return (
|
||||
<div className={"w-100 pr3 pb1 cf hide-child flex" + pending}
|
||||
style={{
|
||||
minHeight: 'min-content'
|
||||
}}>
|
||||
<p className="child pl3 pr2 label-small-mono gray dib">{timestamp}</p>
|
||||
<div className="fr" style={{ flexGrow: 1 }}>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -127,7 +127,6 @@ class Clock extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('hi')
|
||||
return <div style={{position:'relative'}}>
|
||||
|
||||
<svg style={{position:'absolute'}} width="218" height="218" viewBox="0 0 234 234" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -2,18 +2,13 @@ var gulp = require('gulp');
|
||||
var cssimport = require('gulp-cssimport');
|
||||
var rollup = require('gulp-better-rollup');
|
||||
var cssnano = require('cssnano');
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var postcss = require('gulp-postcss')
|
||||
var sucrase = require('@sucrase/gulp-plugin');
|
||||
var minify = require('gulp-minify');
|
||||
var exec = require('child_process').exec;
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
var resolve = require('rollup-plugin-node-resolve');
|
||||
var commonjs = require('rollup-plugin-commonjs');
|
||||
var replace = require('rollup-plugin-replace');
|
||||
var json = require('rollup-plugin-json');
|
||||
var builtins = require('@joseph184/rollup-plugin-node-builtins');
|
||||
var rootImport = require('rollup-plugin-root-import');
|
||||
var globals = require('rollup-plugin-node-globals');
|
||||
|
||||
@ -29,7 +24,6 @@ var urbitrc = require('../urbitrc');
|
||||
|
||||
gulp.task('css-bundle', function() {
|
||||
let plugins = [
|
||||
autoprefixer({ browsers: ['last 1 version'] }),
|
||||
cssnano()
|
||||
];
|
||||
return gulp
|
||||
@ -57,17 +51,12 @@ gulp.task('js-imports', function(cb) {
|
||||
'node_modules/react-is/index.js': [ 'isValidElementType' ],
|
||||
}
|
||||
}),
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
}),
|
||||
rootImport({
|
||||
root: `${__dirname}/dist/js`,
|
||||
useEntry: 'prepend',
|
||||
extensions: '.js'
|
||||
}),
|
||||
json(),
|
||||
globals(),
|
||||
builtins(),
|
||||
resolve()
|
||||
]
|
||||
}, 'umd'))
|
||||
@ -91,18 +80,6 @@ gulp.task('rename-index-min', function() {
|
||||
.pipe(gulp.dest('../../arvo/app/launch/js/'));
|
||||
});
|
||||
|
||||
gulp.task('js-cachebust', function(cb) {
|
||||
return Promise.resolve(
|
||||
exec('git log', function (err, stdout, stderr) {
|
||||
let firstLine = stdout.split("\n")[0];
|
||||
let commitHash = firstLine.split(' ')[1].substr(0, 10);
|
||||
let newFilename = "index-" + commitHash + "-min.js";
|
||||
|
||||
exec('mv ../../arvo/app/launch/js/index-min.js ../../arvo/app/launch/js/' + newFilename);
|
||||
})
|
||||
);
|
||||
})
|
||||
|
||||
gulp.task('urbit-copy', function () {
|
||||
let ret = gulp.src('../../arvo/**/*');
|
||||
|
||||
|
||||
857
pkg/interface/launch/package-lock.json
generated
857
pkg/interface/launch/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,9 +9,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@joseph184/rollup-plugin-node-builtins": "^2.1.4",
|
||||
"@sucrase/gulp-plugin": "^2.0.0",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-better-rollup": "^4.0.1",
|
||||
@ -21,10 +19,8 @@
|
||||
"gulp-rename": "^1.4.0",
|
||||
"rollup": "^1.6.0",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-json": "^2.3.0",
|
||||
"rollup-plugin-node-globals": "^1.4.0",
|
||||
"rollup-plugin-node-resolve": "^3.4.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-root-import": "^0.2.3",
|
||||
"sucrase": "^3.8.0"
|
||||
},
|
||||
@ -32,9 +28,7 @@
|
||||
"classnames": "^2.2.6",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "^2.20.1",
|
||||
"mousetrap": "^1.6.1",
|
||||
"react": "^16.5.2",
|
||||
"react-custom-scrollbars": "^4.2.1",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"urbit-ob": "^3.1.1"
|
||||
|
||||
@ -2,18 +2,13 @@ var gulp = require('gulp');
|
||||
var cssimport = require('gulp-cssimport');
|
||||
var rollup = require('gulp-better-rollup');
|
||||
var cssnano = require('cssnano');
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var postcss = require('gulp-postcss')
|
||||
var sucrase = require('@sucrase/gulp-plugin');
|
||||
var minify = require('gulp-minify');
|
||||
var exec = require('child_process').exec;
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
var resolve = require('rollup-plugin-node-resolve');
|
||||
var commonjs = require('rollup-plugin-commonjs');
|
||||
var replace = require('rollup-plugin-replace');
|
||||
var json = require('rollup-plugin-json');
|
||||
var builtins = require('@joseph184/rollup-plugin-node-builtins');
|
||||
var rootImport = require('rollup-plugin-root-import');
|
||||
var globals = require('rollup-plugin-node-globals');
|
||||
|
||||
@ -29,7 +24,6 @@ var urbitrc = require('../urbitrc');
|
||||
|
||||
gulp.task('css-bundle', function() {
|
||||
let plugins = [
|
||||
autoprefixer({ browsers: ['last 1 version'] }),
|
||||
cssnano()
|
||||
];
|
||||
return gulp
|
||||
@ -65,17 +59,12 @@ gulp.task('js-imports', function(cb) {
|
||||
'node_modules/react-is/index.js': [ 'isValidElementType' ],
|
||||
}
|
||||
}),
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
}),
|
||||
rootImport({
|
||||
root: `${__dirname}/dist/js`,
|
||||
useEntry: 'prepend',
|
||||
extensions: '.js'
|
||||
}),
|
||||
json(),
|
||||
globals(),
|
||||
builtins(),
|
||||
resolve()
|
||||
]
|
||||
}, 'umd'))
|
||||
@ -101,9 +90,7 @@ gulp.task('tile-js-imports', function(cb) {
|
||||
useEntry: 'prepend',
|
||||
extensions: '.js'
|
||||
}),
|
||||
json(),
|
||||
globals(),
|
||||
builtins(),
|
||||
resolve()
|
||||
]
|
||||
}, 'umd'))
|
||||
@ -140,18 +127,6 @@ gulp.task('rename-tile-min', function() {
|
||||
.pipe(gulp.dest('../../arvo/app/publish/js/'));
|
||||
});
|
||||
|
||||
gulp.task('js-cachebust', function(cb) {
|
||||
return Promise.resolve(
|
||||
exec('git log', function (err, stdout, stderr) {
|
||||
let firstLine = stdout.split("\n")[0];
|
||||
let commitHash = firstLine.split(' ')[1].substr(0, 10);
|
||||
let newFilename = "index-" + commitHash + "-min.js";
|
||||
|
||||
exec('mv ../../arvo/app/publish/js/index-min.js ../../arvo/app/publish/js/' + newFilename);
|
||||
})
|
||||
);
|
||||
})
|
||||
|
||||
gulp.task('urbit-copy', function () {
|
||||
let ret = gulp.src('../../arvo/**/*');
|
||||
|
||||
|
||||
857
pkg/interface/publish/package-lock.json
generated
857
pkg/interface/publish/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,9 +9,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@joseph184/rollup-plugin-node-builtins": "^2.1.4",
|
||||
"@sucrase/gulp-plugin": "^2.0.0",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-better-rollup": "^4.0.1",
|
||||
@ -21,10 +19,8 @@
|
||||
"gulp-rename": "^1.4.0",
|
||||
"rollup": "^1.6.0",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-json": "^2.3.0",
|
||||
"rollup-plugin-node-globals": "^1.4.0",
|
||||
"rollup-plugin-node-resolve": "^3.4.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-root-import": "^0.2.3",
|
||||
"sucrase": "^3.8.0"
|
||||
},
|
||||
@ -32,9 +28,7 @@
|
||||
"classnames": "^2.2.6",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "^2.20.1",
|
||||
"mousetrap": "^1.6.1",
|
||||
"react": "^16.5.2",
|
||||
"react-custom-scrollbars": "^4.2.1",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"urbit-ob": "^3.1.1",
|
||||
|
||||
@ -8,8 +8,6 @@ export default class PublishTile extends Component {
|
||||
}
|
||||
|
||||
render(){
|
||||
console.log("tile", this.props);
|
||||
|
||||
let info = [];
|
||||
if (this.props.data.invites > 0) {
|
||||
let text = (this.props.data.invites == 1)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user