Skip to content

Commit 867ed14

Browse files
jossmacjossmac
committed
initial import from touchstonejs repo + cleanup
1 parent 3d773a6 commit 867ed14

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+6359
-1
lines changed

‎HISTORY.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# TouchstoneJS UI
2+
3+
Please be aware that TouchstoneJS UI is still under heavy development; the components are liable to change and possibly break things.
4+
5+
## v0.1.0 / 2015-10-07
6+
7+
* First release

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
# touchstonejs-ui
1+
# TouchstoneJS UI
2+
23
React.js UI components for the TouchstoneJS platform http://touchstonejs.io

‎bower.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "touchstonejs",
3+
"version": "0.4.2",
4+
"homepage": "https://github.com/touchstonejs/touchstonejs",
5+
"authors": [
6+
"Jed Watson"
7+
],
8+
"description": "React.js UI components for the TouchstoneJS platform http://touchstonejs.io",
9+
"moduleType": [
10+
"node"
11+
],
12+
"keywords": [
13+
"touchstone",
14+
"touchstonejs",
15+
"ui",
16+
"react",
17+
"react-component",
18+
"mobile",
19+
"hybrid"
20+
],
21+
"license": "MIT",
22+
"ignore": [
23+
".editorconfig",
24+
".gitignore",
25+
"package.json",
26+
"site"
27+
]
28+
}

‎gulpfile.js

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
var babel = require('gulp-babel');
2+
var babelify = require('babelify');
3+
var browserify = require('browserify');
4+
var gutil = require('gutil');
5+
var bump = require('gulp-bump');
6+
var connect = require('gulp-connect');
7+
var del = require('del');
8+
var deploy = require('gulp-gh-pages');
9+
var git = require('gulp-git');
10+
var gulp = require('gulp');
11+
var less = require('gulp-less');
12+
var source = require('vinyl-source-stream');
13+
14+
const SITE_BUILD_PATH = 'site/__build';
15+
const SITE_FILES = [
16+
'.gitignore',
17+
'404.html',
18+
'CNAME',
19+
'favicon.ico',
20+
'images/*',
21+
'index.html',
22+
'logo.svg',
23+
'logo-mark.svg'
24+
];
25+
26+
// Build/Clean/Watch lib
27+
gulp.task('build:lib', function () {
28+
return gulp.src('src/**/*')
29+
.pipe(babel({ plugins: [require('babel-plugin-object-assign')] }))
30+
.pipe(gulp.dest('lib'));
31+
});
32+
33+
gulp.task('clean:lib', function (done) { del(['lib'], done); });
34+
gulp.task('watch:lib', ['build:lib'], function () {
35+
gulp.watch('src/**/*', ['build:lib']);
36+
});
37+
38+
// Site
39+
gulp.task('clean:site', function (done) { del(['site/__dist'], done); });
40+
41+
gulp.task('build:site:files', function () {
42+
return gulp.src([
43+
SITE_FILES
44+
], {
45+
cwd: 'site',
46+
base: 'site'
47+
})
48+
.pipe(gulp.dest(SITE_BUILD_PATH));
49+
});
50+
51+
gulp.task('build:site:js', function () {
52+
browserify('site/site.js')
53+
.transform(babelify.configure({
54+
plugins: [require('babel-plugin-object-assign')]
55+
}))
56+
.bundle()
57+
.on('error', function (e) {
58+
gutil.log('Browserify Error', e);
59+
})
60+
.pipe(source('site.js'))
61+
.pipe(gulp.dest(SITE_BUILD_PATH));
62+
});
63+
64+
gulp.task('build:site:less', function () {
65+
return gulp.src('site/site.less')
66+
.pipe(less())
67+
.pipe(gulp.dest(SITE_BUILD_PATH));
68+
});
69+
70+
gulp.task('build:site', ['build:site:files', 'build:site:less', 'build:site:js']);
71+
72+
// Local HTTP server
73+
gulp.task('site', ['build:site'], function () {
74+
connect.server({
75+
root: SITE_BUILD_PATH,
76+
port: 8000
77+
});
78+
});
79+
80+
// Publish
81+
gulp.task('publish:npm', function (done) {
82+
require('child_process')
83+
.spawn('npm', ['publish'], { stdio: 'inherit' })
84+
.on('close', done);
85+
});
86+
87+
gulp.task('publish:tag', function (done) {
88+
var pkg = require('./package.json');
89+
var v = 'v' + pkg.version;
90+
var message = 'Release ' + v;
91+
92+
git.tag(v, message, function (err) {
93+
if (err) throw err;
94+
95+
git.push('origin', v, done);
96+
});
97+
});
98+
99+
gulp.task('publish:site', ['build:site'], function () {
100+
return gulp.src(SITE_BUILD_PATH + '/**/*').pipe(deploy());
101+
});
102+
103+
gulp.task('release', ['publish:tag', 'publish:npm', 'publish:site']);
104+
105+
// Version
106+
function _bump (type) {
107+
return gulp.src(['./package.json', './bower.json'])
108+
.pipe(bump({ type: type }))
109+
.pipe(gulp.dest('./'));
110+
}
111+
112+
gulp.task('bump', _bump.bind(null, 'patch'));
113+
gulp.task('bump:minor', _bump.bind(null, 'minor'));
114+
gulp.task('bump:major', _bump.bind(null, 'major'));

‎less/components.less

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
//
2+
// Components
3+
// ==============================
4+
5+
@import "components/keypad";
6+
@import "components/passcode";
7+
8+
@import "components/Alertbar";
9+
@import "components/Button";
10+
@import "components/Group";
11+
@import "components/List";
12+
@import "components/NavigationBar";
13+
@import "components/Popup";
14+
@import "components/SearchField";
15+
@import "components/SegmentedControl";
16+
@import "components/Switch";
17+
@import "components/TabsNavigator";

‎less/components/Alertbar.less

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
//
2+
// Alertbar
3+
// ==============================
4+
5+
6+
// base
7+
8+
.Alertbar {
9+
.translateZ(0); // stop re-paint when introduced into the DOM
10+
.transition( background-color 160ms ); // animate variant if state changed while visible
11+
color: white;
12+
font-size: @font-size-sm;
13+
left: 0;
14+
line-height: 1.1;
15+
padding: @gutter-sm;
16+
position: absolute;
17+
text-align: center;
18+
top: 0;
19+
width: 100%;
20+
z-index: @zindex-alertbar;
21+
}
22+
23+
24+
// overlay translucent for pulse
25+
26+
.Alertbar--pulse::after {
27+
.animation( pulse 2s linear infinite );
28+
background-color: black;
29+
bottom: 0;
30+
content: "";
31+
left: 0;
32+
opacity: 0;
33+
position: absolute;
34+
right: 0;
35+
top: 0;
36+
z-index: 1;
37+
}
38+
39+
40+
// variants
41+
42+
.Alertbar--danger { background-color: @app-danger; }
43+
.Alertbar--default { background-color: @gray-light; }
44+
.Alertbar--info { background-color: @app-info; }
45+
.Alertbar--primary { background-color: @app-primary; }
46+
.Alertbar--success { background-color: @app-success; }
47+
.Alertbar--warning { background-color: @app-warning; }
48+
49+
50+
// sit the text above the pulsing background
51+
52+
.Alertbar__inner {
53+
position: relative;
54+
z-index: 2;
55+
}
56+
57+
58+
59+
60+
// Animation
61+
// ------------------------------
62+
63+
// apply animation
64+
65+
.Alertbar-enter {
66+
.animation( alertbarEnter 240ms @view-transition-timing-function );
67+
}
68+
.Alertbar-leave {
69+
.animation( alertbarLeave 240ms @view-transition-timing-function );
70+
}
71+
72+
// slide up
73+
74+
@-webkit-keyframes alertbarEnter {
75+
from {-webkit-transform: translate3d(0, -100%, 0); opacity: .5; }
76+
to { -webkit-transform: none; opacity: 1; }
77+
}
78+
@keyframes alertbarEnter {
79+
from {transform: translate3d(0, -100%, 0); opacity: .5; }
80+
to { transform: none; opacity: 1; }
81+
}
82+
83+
// slide down
84+
85+
@-webkit-keyframes alertbarLeave {
86+
from { -webkit-transform: none; opacity: 1; }
87+
to { -webkit-transform: translate3d(0, -100%, 0); opacity: .5; }
88+
}
89+
@keyframes alertbarLeave {
90+
from { transform: none; opacity: 1; }
91+
to {transform: translate3d(0, -100%, 0); opacity: .5; }
92+
}

‎less/components/Button.less

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
//
2+
// Button
3+
// ==============================
4+
5+
6+
7+
8+
// Base
9+
// ------------------------------
10+
11+
.Button {
12+
.retina-1px-border-top-and-bottom( rgba(0,0,0,0.17) );
13+
.transition( color 160ms ); // animate variation if disabled state changed while visible
14+
background-color: white;
15+
border: none;
16+
color: @text-color;
17+
display: block;
18+
font-weight: normal;
19+
height: @item-height;
20+
line-height: @item-height;
21+
margin-bottom: @gutter-lg;
22+
outline: none;
23+
padding: 0 @padding-base-horizontal;
24+
position: relative;
25+
text-align: center;
26+
text-decoration: none;
27+
width: 100%;
28+
-webkit-appearance: none;
29+
30+
// stack panel buttons closer to one another when in a row
31+
& + & {
32+
margin-top: -(@gutter-lg / 2);
33+
}
34+
35+
// add active state
36+
&.Tappable-active {
37+
background-color: @item-bg-tap;
38+
}
39+
40+
// add disabled state
41+
&[disabled] {
42+
color: @button-disabled-color;
43+
pointer-events: none;
44+
}
45+
46+
// icons in buttons
47+
& > .icon-sm,
48+
& > .icon-md,
49+
& > .icon-lg {
50+
display: inline-block;
51+
vertical-align: middle;
52+
}
53+
54+
}
55+
56+
57+
// variants
58+
59+
.Button--danger { color: @app-danger; }
60+
.Button--default { color: @text-color; }
61+
.Button--info { color: @app-info; }
62+
.Button--primary { color: @app-primary; font-weight: @font-weight-bold; }
63+
.Button--success { color: @app-success; }
64+
.Button--warning { color: @app-warning; }
65+
66+
67+
68+
69+
// Panel Button Groups
70+
// ------------------------------
71+
72+
// stack buttons horizontally
73+
74+
.ButtonGroup {
75+
.display-flex();
76+
.retina-1px-border-top-and-bottom( rgba(0,0,0,0.17) ); // move the button borders to the group
77+
margin-bottom: @gutter-lg;
78+
79+
> .Button {
80+
border-left: 1px solid rgba(0,0,0,0.17);
81+
margin: 0;
82+
83+
&:first-child {
84+
border-left: none;
85+
}
86+
87+
// remove the borders - they're handled by the group
88+
&::before,
89+
&::after {
90+
display: none;
91+
}
92+
}
93+
}

0 commit comments

Comments
 (0)