60 |
61 |
62 |
66 |
70 |
71 |
);
72 | }
73 | });
74 |
75 | module.exports = GetMedia;
76 |
--------------------------------------------------------------------------------
/src/components/link/link.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var assign = require('react/lib/Object.assign');
3 |
4 | var Link = React.createClass({
5 | getDefaultProps: function () {
6 | return {
7 | tagName: 'a'
8 | };
9 | },
10 | render: function () {
11 | var className = this.props.className ? (this.props.className + ' link') : 'link';
12 | var props = assign({}, this.props, {
13 | className,
14 | onClick: (e) => {
15 | if (window.Platform) {
16 | e.preventDefault();
17 |
18 | // if there is a pre-navigation handling hook, call that before continuing
19 | if (this.props.preNavigation && typeof this.props.preNavigation === 'function') {
20 | this.props.preNavigation();
21 | }
22 |
23 | if (this.props.external) {
24 | window.Platform.openExternalUrl(this.props.external);
25 | } else if (this.props.url) {
26 | window.Platform.setView(this.props.url);
27 | }
28 | }
29 | }
30 | });
31 | if (this.props.external) {
32 | props.target = '_blank';
33 | props.href = this.props.href || this.props.external;
34 | }
35 | return React.createElement(this.props.tagName, props);
36 | }
37 | });
38 |
39 | module.exports = Link;
40 |
--------------------------------------------------------------------------------
/src/components/link/link.less:
--------------------------------------------------------------------------------
1 | .link {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/loading/loading.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var classNames = require('classnames');
3 |
4 | var Loading = React.createClass({
5 | mixins: [require('react-intl').IntlMixin],
6 | getDefaultProps: function () {
7 | return {
8 | on: false
9 | };
10 | },
11 | render: function () {
12 | return (
13 |
14 |
15 |
16 |
17 |
{this.getIntlMessage('loading')}
18 |
19 |
);
20 | }
21 | });
22 |
23 | module.exports = Loading;
24 |
--------------------------------------------------------------------------------
/src/components/loading/loading.less:
--------------------------------------------------------------------------------
1 | .loading {
2 | position: fixed;
3 | z-index: @ZINDEX_LOADING;
4 | top: 0;
5 | left: 0;
6 | width: 100%;
7 | height: 100%;
8 | background: transparent;
9 | opacity: 0;
10 | visibility: hidden;
11 | transition: opacity 0.2s ease;
12 | &.on {
13 | opacity: 1;
14 | visibility: visible;
15 | }
16 | }
17 |
18 | .loading-bar {
19 | position: relative;
20 | width: 100%;
21 | height: 6px;
22 | background-color: lighten(@blue, 20%);
23 | border-bottom: 1px solid fade(@white, 10%);
24 | }
25 | .bar {
26 | content: "";
27 | display: inline;
28 | position: absolute;
29 | width: 0;
30 | height: 100%;
31 | left: 50%;
32 | text-align: center;
33 | }
34 | .bar:nth-child(1) {
35 | background-color: lighten(@blue, 10%);
36 | animation: loading 3s linear infinite;
37 | }
38 | .bar:nth-child(2) {
39 | background-color: lighten(@blue, 5%);
40 | animation: loading 3s linear 1s infinite;
41 | }
42 | .bar:nth-child(3) {
43 | background-color: @blue;
44 | animation: loading 3s linear 2s infinite;
45 | }
46 |
47 | @keyframes loading {
48 | from {
49 | left: 50%;
50 | width: 0;
51 | z-index: 100;
52 | }
53 | 33.3333% {
54 | left: 0;
55 | width: 100%;
56 | z-index: 10;
57 | }
58 | to {
59 | left: 0;
60 | width: 100%;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/modal-confirm/modal-confirm.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var Shim = require('../shim/shim.jsx');
3 | var dispatcher = require('../../lib/dispatcher');
4 |
5 | var ModalConfirm = React.createClass({
6 | getInitialState: function () {
7 | return {
8 | header: '',
9 | body: '',
10 | attribution: undefined,
11 | icon: '',
12 | buttons: [],
13 | callback: null
14 | };
15 | },
16 | show: function () {
17 | this.refs.shim.show();
18 | },
19 | hide: function () {
20 | this.refs.shim.hide();
21 | },
22 | onConfirmClick: function (button) {
23 | this.hide();
24 |
25 | if (button.callback) {
26 | button.callback.call();
27 | }
28 | },
29 | componentDidMount: function () {
30 | dispatcher.on('modal-confirm:show', (event) => {
31 | if (event.config.icon) {
32 | event.config.icon = '../../img/' + event.config.icon;
33 | }
34 |
35 | this.setState(React.__spread(this.getInitialState(), event.config));
36 | this.show();
37 | });
38 |
39 | dispatcher.on('modal-confirm:hide', (event) => {
40 | this.hide();
41 | });
42 | },
43 | render: function () {
44 | var buttons = this.state.buttons.map((button, i) => {
45 | return (
46 |
);
52 | });
53 |
54 | return (
55 |
56 |
57 |
58 | {this.state.header}
59 |
60 |
61 |
63 |
64 |
{this.state.body}
65 | {buttons}
66 |
67 |
68 |
{this.state.attribution}
69 |
70 |
71 |
73 | );
74 | }
75 | });
76 |
77 | module.exports = ModalConfirm;
78 |
--------------------------------------------------------------------------------
/src/components/modal-confirm/modal-confirm.less:
--------------------------------------------------------------------------------
1 | .modal-confirm {
2 | .window {
3 | box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
4 | border-radius: 5px;
5 |
6 | header {
7 | padding: 5px 20px 0 20px;
8 | background: @shadowPlum;
9 | border-top-left-radius: 5px;
10 | border-top-right-radius: 5px;
11 | display: flex;
12 | align-items: center;
13 |
14 | div {
15 | font-size: 18px;
16 | font-weight: 400;
17 | color: @white;
18 | padding: 5px 0;
19 | }
20 |
21 | .text {
22 | flex: 1;
23 | }
24 |
25 | .icon {
26 | img {
27 | width: 40px;
28 | }
29 | }
30 | }
31 |
32 | .content {
33 | background: @white;
34 | padding: 20px;
35 | border-bottom-right-radius: 5px;
36 | border-bottom-left-radius: 5px;
37 |
38 | p {
39 | font-size: 16px;
40 | margin-top: 0;
41 | color: #333;
42 | }
43 |
44 | button {
45 | background: @lightGrey;
46 | }
47 |
48 | .attribution {
49 | img {
50 | width: 18px;
51 | margin-right: 5px;
52 | opacity: 0.3;
53 | position: relative;
54 | top: 3px;
55 | }
56 | color: @heatherGrey;
57 | text-align: center;
58 | }
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/components/modal-switch/modal-switch.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var Shim = require('../shim/shim.jsx');
3 | var dispatcher = require('../../lib/dispatcher');
4 |
5 | var ModalConfirm = React.createClass({
6 | getInitialState: function () {
7 | return {
8 | actions: [],
9 | callback: null
10 | };
11 | },
12 | show: function () {
13 | this.refs.shim.show();
14 | },
15 | hide: function () {
16 | this.refs.shim.hide();
17 | },
18 | onButtonClick: function (event) {
19 | if (this.state.callback) {
20 | this.state.callback.call(this, {
21 | label: event
22 | });
23 | }
24 |
25 | this.hide();
26 | },
27 | componentDidMount: function () {
28 | dispatcher.on('modal-switch:show', (event) => {
29 | this.setState(React.__spread(this.getInitialState(), event.config));
30 | this.show();
31 | });
32 |
33 | dispatcher.on('modal-switch:hide', (event) => {
34 | this.hide();
35 | });
36 | },
37 | render: function () {
38 | var buttons = this.state.actions.map((action, index) => {
39 | return (
40 |
41 | );
42 | });
43 |
44 | return (
45 |
46 |
47 | {buttons}
48 |
49 |
50 | );
51 | }
52 | });
53 |
54 | module.exports = ModalConfirm;
55 |
--------------------------------------------------------------------------------
/src/components/modal-switch/modal-switch.less:
--------------------------------------------------------------------------------
1 | .modal-switch {
2 | .window {
3 | box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
4 | border-radius: 5px;
5 | background: @white;
6 | border-radius: 5px;
7 | width: 100%;
8 |
9 | button {
10 | display: block;
11 | background: none;
12 | width: 100%;
13 | border: 0;
14 | border-bottom: 1px solid @heatherGrey;
15 | text-align: left;
16 | line-height: 22px;
17 | padding: 20px;
18 | color: darken(@slate, 20%);
19 |
20 | &:last-child {
21 | border-bottom: 0;
22 | }
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/option-panel/option-panel.less:
--------------------------------------------------------------------------------
1 | .option-panel {
2 | display: flex;
3 | .label {
4 | margin: 0;
5 | position: relative;
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | flex: 1;
10 | background: #FFF;
11 | height: 44px;
12 | box-shadow: 0 2px 0 0 #CDCFD3;
13 | border-left: 1px solid fade(#CDCFD3, 50%);
14 | &.selected {
15 | background: #69A0FC;
16 | box-shadow: 0 2px 0 0 #4881DF;
17 | border-left: 1px solid fade(#4881DF, 50%);
18 | }
19 | &:first-child {
20 | border-radius: 3px 0 0 3px;
21 | }
22 | &:last-child {
23 | border-radius: 0 3px 3px 0;
24 | }
25 | .icon {
26 | height: 15px;
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/project-list/project-list.less:
--------------------------------------------------------------------------------
1 | .projectList {
2 | display: block;
3 | position: relative;
4 | width: 100%;
5 | height: 100%;
6 | margin: 20px auto 0;
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/range/range.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var LinkedStateMixin = require('react-addons-linked-state-mixin');
3 |
4 | module.exports = React.createClass({
5 | mixins: [LinkedStateMixin],
6 | getDefaultProps: function () {
7 | return {
8 | id: 'value',
9 | max: 100,
10 | min: 0,
11 | step: 1,
12 | unit: '',
13 | percentage: false
14 | };
15 | },
16 | getInitialState: function () {
17 | return {
18 | value: typeof this.props.value !== 'undefined' ? this.props.value : 100
19 | };
20 | },
21 | onChange: function (e) {
22 | var value = parseFloat(e.target.value);
23 | this.valueLink.requestChange(value);
24 | if (this.props.onChange) {
25 | this.props.onChange(value);
26 | }
27 | },
28 | getDisplayValue: function(){
29 | if (this.props.percentage) {
30 | return `${Math.round(this.props.value/this.props.max * 100)}%`;
31 | } else {
32 | return `${this.props.value}${this.props.unit}`;
33 | }
34 | },
35 | render: function () {
36 | var linkState = this.props.linkState || this.linkState;
37 | var valueLink = this.valueLink = linkState(this.props.id);
38 |
39 | var currentValue = parseFloat(valueLink.value);
40 |
41 | return (
42 |
43 |
44 |
{this.getDisplayValue()}
45 |
46 | );
47 | }
48 | });
49 |
--------------------------------------------------------------------------------
/src/components/range/range.less:
--------------------------------------------------------------------------------
1 | /*********************************************************
2 | * Range
3 | */
4 | @range_height: 2px;
5 | @range_vertical-margin: 20px;
6 | @range_total-height: @range_height + @range_vertical-margin*2;
7 | .range {
8 | display: flex;
9 | align-items: center;
10 | input[type=range] {
11 | -webkit-appearance: none;
12 | padding: 0;
13 | height: @range_height;
14 | background: @heatherGrey;
15 | margin: @range_vertical-margin 0;
16 | &::before {
17 | content: '';
18 | }
19 | }
20 |
21 | input[type=range]::-webkit-slider-thumb {
22 | -webkit-appearance: none;
23 | border: none;
24 | height: 30px;
25 | width: 30px;
26 | border-radius: 36px;
27 | background: #FFF;
28 | cursor: pointer;
29 | // Generally, it's a good idea to avoid transparency
30 | // in moving parts where possible to improve animation performance
31 | box-shadow: 0px 1px 0 1px darken(@lightGrey, 4%);
32 | }
33 |
34 | .range-summary {
35 | width: 3.5em;
36 | text-align: right;
37 | &.min {
38 | opacity: 0.3;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/select/select.less:
--------------------------------------------------------------------------------
1 | .select {
2 | -webkit-appearance: none;
3 | -moz-appearance: none;
4 | appearance: none;
5 | &:extend(.btn);
6 | &:active {
7 | &:extend(.btn:active);
8 | }
9 | width: 100%;
10 | background: center right 12px #FFF url(./img/caret-down.svg) no-repeat;
11 | background-size: 11px 7px;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/shim/shim.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var Shim = React.createClass({
4 | getInitialState: function () {
5 | return {
6 | isActive: false
7 | };
8 | },
9 | show: function () {
10 | this.setState({
11 | isActive: true
12 | });
13 | },
14 | hide: function () {
15 | this.setState({
16 | isActive: false
17 | });
18 | },
19 | onShimClick: function () {
20 | if (this.props.onClick) {
21 | this.props.onClick.call();
22 | }
23 | },
24 | render: function () {
25 | return (
26 |
27 | {this.props.children}
28 |
29 | );
30 | }
31 | });
32 |
33 | module.exports = Shim;
34 |
--------------------------------------------------------------------------------
/src/components/shim/shim.less:
--------------------------------------------------------------------------------
1 | .shim {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | width: 100%;
6 | height: 100%;
7 | background: @overlay;
8 | z-index: @ZINDEX_MAX;
9 | display: flex;
10 | padding: 30px;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/snackbar/snackbar.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var dispatcher = require('../../lib/dispatcher');
3 |
4 | var Snackbar = React.createClass({
5 | getInitialState: function() {
6 | return {
7 | message: this.props.message || "",
8 | hidden: true
9 | };
10 | },
11 |
12 | componentDidMount: function () {
13 | dispatcher.on('reportError', (event) => {
14 | this.setState({
15 | message: event.message,
16 | additionals: event.additionals,
17 | hidden: false
18 | },function() {
19 | // TODO: it may be possible to rewrite this so that it
20 | // hooks into a CSS transition end, although the
21 | // transition would be a little wonky
22 | setTimeout(_ => this.hide(), 3000);
23 | });
24 | });
25 | },
26 |
27 | render: function () {
28 | var className = "snackbar";
29 | if (this.state.hidden) {
30 | className = "hidden " + className;
31 | }
32 | return (
{ this.state.message }
);
33 | },
34 |
35 | /**
36 | * Hide the snackbar from view
37 | */
38 | hide: function() {
39 | this.setState({
40 | hidden: true
41 | });
42 | }
43 | });
44 |
45 | module.exports = Snackbar;
46 |
--------------------------------------------------------------------------------
/src/components/snackbar/snackbar.less:
--------------------------------------------------------------------------------
1 | .container div.snackbar {
2 | @barheight: 5em;
3 | width: 100%;
4 | position: fixed;
5 | z-index: 2147483647;
6 | bottom: 0;
7 | left: 0;
8 | right: 0;
9 | background: #444;
10 | line-height: @barheight;
11 | text-align: center;
12 | color: #EEE;
13 | height: @barheight;
14 | min-height: 0;
15 | transition: height 0.25s linear;
16 |
17 | &.hidden {
18 | height: 0;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/spindicator/spindicator.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var dispatcher = require('../../lib/dispatcher');
3 |
4 | var Spindicator = React.createClass({
5 | getInitialState: function () {
6 | return {
7 | isVisible: false
8 | };
9 | },
10 | show: function () {
11 | this.setState({
12 | isVisible: true
13 | });
14 | },
15 | hide: function () {
16 | this.setState({
17 | isVisible: false
18 | });
19 | },
20 | componentDidMount: function () {
21 | dispatcher.on('apiLagging', (event) => {
22 | this.show();
23 | });
24 |
25 | dispatcher.on('apiCallFinished', (event) => {
26 | this.hide();
27 | });
28 | },
29 | render: function () {
30 | return (
31 |
34 | );
35 | }
36 | });
37 |
38 | module.exports = Spindicator;
39 |
--------------------------------------------------------------------------------
/src/components/spindicator/spindicator.less:
--------------------------------------------------------------------------------
1 | #spindicator {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 100%;
6 | height: 100%;
7 | background: rgba(24, 22, 30, 0.75);
8 | transition: all 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86) 0s;
9 | z-index: @ZINDEX_MAX;
10 |
11 | .loader {
12 | position: relative;
13 | top: 43%;
14 | left: 41%;
15 | display: inline-block;
16 | width: 80px;
17 | height: 80px;
18 | border: 5px solid white;
19 | border-radius: 50%;
20 | animation: spin 0.5s infinite linear;
21 | }
22 |
23 | .loader::before,
24 | .loader::after {
25 | left: -5px;
26 | top: -5px;
27 | display: none;
28 | position: absolute;
29 | content: '';
30 | width: inherit;
31 | height: inherit;
32 | border: inherit;
33 | border-radius: inherit;
34 | }
35 |
36 |
37 | .spinner {
38 | border-color: transparent;
39 | border-top-color: rgba(0,0,0,0.3);
40 | animation-duration: 3s;
41 | }
42 |
43 | .spinner::after {
44 | display: block;
45 | border-color: transparent;
46 | border-top-color: #E9EBF0;
47 | animation: spin 1.5s infinite ease-in-out;
48 | }
49 |
50 | @keyframes spin {
51 | 0% {
52 | transform: rotate(0deg);
53 | }
54 | 100% {
55 | transform: rotate(360deg);
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/tabs/tabs.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var classNames = require('classnames');
3 |
4 | var Tabs = React.createClass({
5 | getInitialState: function () {
6 | return {
7 | selectedIndex: 0
8 | };
9 | },
10 | setTab: function (i) {
11 | return () => {
12 | this.setState({selectedIndex: i});
13 | };
14 | },
15 | render: function () {
16 | var className = classNames('tabs', this.props.className);
17 | var tabs = this.props.tabs;
18 | return (
19 |
20 | {tabs.map((tab, i) => {
21 | var className = classNames({
22 | 'tab-btn': true,
23 | 'selected': this.state.selectedIndex === i
24 | });
25 | return ();
26 | })}
27 |
28 |
29 | {tabs.map((tab, i) => {
30 | var className = classNames({
31 | 'tab-body': true,
32 | 'selected': this.state.selectedIndex === i
33 | });
34 | return (
{tab.body}
);
35 | })}
36 |
37 |
);
38 | }
39 | });
40 |
41 | module.exports = Tabs;
42 |
--------------------------------------------------------------------------------
/src/components/tabs/tabs.less:
--------------------------------------------------------------------------------
1 | /*********************************************************
2 | * Tabs
3 | */
4 | @tabs_iconHeight: 24px;
5 | @tabs_tab-btn-padding: 10px;
6 | @tabs_tab-menu-bottom-margin: 20px;
7 | @tabs_total-height: @tabs_iconHeight + @tabs_tab-btn-padding * 2 + @tabs_tab-menu-bottom-margin;
8 | .tabs {
9 | .tab-menu {
10 | margin: 0 0 @tabs_tab-menu-bottom-margin -20px;
11 | padding: 0;
12 | list-style: none;
13 | display: flex;
14 | background: #31344f;
15 | position: fixed;
16 | width: 100%;
17 | li {
18 | margin: 0;
19 | padding: 0;
20 | flex: 1;
21 | text-align: center;
22 | box-shadow: inset -2px 0 0 @plum;
23 | &:last-child {
24 | box-shadow: none;
25 | }
26 | }
27 | .tab-btn {
28 | background: none;
29 | border: none;
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | padding: @tabs_tab-btn-padding;
34 | width: 100%;
35 | box-shadow: 0 2px 0 #404467;
36 | &.selected {
37 | box-shadow: 0 2px 0 @white;
38 | .icon {
39 | opacity: 1;
40 | }
41 | }
42 | .icon {
43 | opacity: 0.3;
44 | display: block;
45 | height: @tabs_iconHeight;
46 | }
47 | }
48 | }
49 | .tab-body {
50 | display: none;
51 | &.selected {
52 | display: block;
53 | }
54 | .editor-scroll{
55 | padding-top: 0;
56 | padding-bottom: 50px;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/text-input/text-input.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var LinkedStateMixin = require('react-addons-linked-state-mixin');
3 |
4 | var TextInput = React.createClass({
5 | mixins: [LinkedStateMixin],
6 | propTypes: {
7 | maxlength: React.PropTypes.number.isRequired,
8 | minlength: React.PropTypes.number,
9 | onEnterPressed: React.PropTypes.func,
10 | placeholder: React.PropTypes.string,
11 | type: React.PropTypes.string
12 | },
13 | getInitialState: function () {
14 | return {
15 | text: '',
16 | isTooLong: false
17 | };
18 | },
19 | onChange: function (e) {
20 | this.valueLink.requestChange(e.target.innerHTML);
21 |
22 | this.setState({
23 | inputLength: e.target.innerText.length,
24 | isTooLong: e.target.innerText.length > this.props.maxlength ? true : false
25 | });
26 | },
27 | validate: function () {
28 | if ((!this.props.minlength || this.valueLink.value.length > this.props.minlength) &&
29 | this.valueLink.value.length <= this.props.maxlength) {
30 | return true;
31 | } else {
32 | return false;
33 | }
34 | },
35 | onKeyDown: function (event) {
36 | // Fire callback (if defined) if enter is pressed
37 | if (event.keyCode === 13) {
38 | // Prevent newlines
39 | event.preventDefault();
40 |
41 | if (this.props.onEnterPressed) {
42 | this.props.onEnterPressed.call(this, {
43 | value: event.target.value
44 | });
45 | }
46 | }
47 | },
48 | blur: function () {
49 | this.refs.input.blur();
50 | },
51 | render: function () {
52 | var linkState = this.props.linkState || this.linkState;
53 | this.valueLink = linkState(this.props.id);
54 |
55 | return (
56 |
57 |
58 |
59 |
66 |
67 |
{this.valueLink.value.length} / {this.props.maxlength}
68 |
69 | );
70 | }
71 | });
72 |
73 | module.exports = TextInput;
74 |
--------------------------------------------------------------------------------
/src/components/text-input/text-input.less:
--------------------------------------------------------------------------------
1 | .text-input {
2 | label {
3 | font-size: 16px;
4 | color: @slate;
5 | margin-bottom: 1/3em;
6 | display: block;
7 | }
8 |
9 | .input {
10 | display: block;
11 | border: 0;
12 | border-bottom: 2px solid @heatherGrey;
13 | font-size: 22px;
14 | width: 100%;
15 | background: none;
16 | padding: 0.2em 0;
17 | -webkit-text-fill-color: @black;
18 | color: @blue; // Caret color
19 | margin-bottom: 1/3em;
20 |
21 | &:focus {
22 | outline: 0;
23 | border-bottom: 2px solid @blue;
24 | }
25 |
26 | &::-webkit-input-placeholder {
27 | -webkit-text-fill-color: darken(@heatherGrey, 10%);
28 | }
29 | }
30 |
31 | .indicator {
32 | text-align: right;
33 | font-size: 14px;
34 | color: @slate;
35 | }
36 |
37 | &.maxed {
38 | .indicator {
39 | color: @brick;
40 | }
41 |
42 | input {
43 | border-bottom: 2px solid @brick;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/fonts.less:
--------------------------------------------------------------------------------
1 | @fonts-path: './fonts';
2 |
3 | @font-face {
4 | font-family: 'Fira Sans';
5 | src: local('Fira Sans Regular'),
6 | url('@{fonts-path}/FiraSans-Regular.woff') format('woff');
7 | font-weight: 400;
8 | font-style: normal;
9 | }
10 |
11 | @font-face {
12 | font-family: 'Fira Sans';
13 | src: local('Fira Sans Medium'),
14 | url('@{fonts-path}/FiraSans-Medium.woff') format('woff');
15 | font-weight: 500;
16 | font-style: normal;
17 | }
18 |
19 | @font-face {
20 | font-family: 'Sharpie';
21 | src: local('Sharpie'),
22 | url('@{fonts-path}/lamson-sharpie-webfont.woff') format('woff');
23 | font-weight: 400;
24 | font-style: normal;
25 | }
26 |
--------------------------------------------------------------------------------
/src/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Webmaker
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/lib/color.js:
--------------------------------------------------------------------------------
1 | var Color = require('color');
2 | var minimumContrast = 2;
3 |
4 | module.exports = {
5 | getContrastingColor: (function() {
6 | var white = Color().rgb(255, 255, 255),
7 | whiteCSS = white.rgbString(),
8 | black = Color().rgb(0, 0, 0),
9 | blackCSS = black.rgbString();
10 |
11 | return function(input) {
12 | var c = Color(input),
13 | wc = white.contrast(c),
14 | bc = black.contrast(c);
15 |
16 | return (wc < bc && wc >= minimumContrast) ? whiteCSS : blackCSS;
17 | };
18 | }()),
19 | darken: function(baseColor, shade){
20 | var color = Color(baseColor);
21 | color.darken(shade);
22 |
23 | return color.rgbString();
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/src/lib/dispatcher.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | fire: function (eventName, eventData) {
3 | var customEvent = new CustomEvent(eventName, {
4 | detail: eventData
5 | });
6 |
7 | window.dispatchEvent(customEvent);
8 | },
9 | on: function (eventName, callback) {
10 | window.addEventListener(eventName, function(e) {
11 | callback.call(this, e.detail);
12 | });
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/lib/errors.js:
--------------------------------------------------------------------------------
1 | var dispatcher = require('./dispatcher');
2 | var debug = false;
3 |
4 | var ErrorReporter = function() {
5 | var array = Array.prototype.slice.call(arguments);
6 | if (debug) {
7 | console.log.apply(console, arguments);
8 | }
9 | dispatcher.fire('reportError', {
10 | message: array[0],
11 | additionals: array.slice(1)
12 | });
13 | };
14 |
15 | module.exports = ErrorReporter;
16 |
--------------------------------------------------------------------------------
/src/lib/i18n.js:
--------------------------------------------------------------------------------
1 | var assign = require('react/lib/Object.assign');
2 | var messages = require('./messages');
3 | var locale = navigator.language.split('-');
4 | locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : navigator.language;
5 |
6 | var strings = messages[locale] ? messages[locale] : messages['en-US'];
7 |
8 | module.exports = {
9 | intlData: {
10 | locales : ['en-US'],
11 | // Sometimes we will include a language with partial translation
12 | // and we need to make sure the object that we pass to `intlData`
13 | // contains all keys based on the `en-US` messages.
14 | messages: assign(messages['en-US'], strings)
15 | },
16 | defaultLang: 'en-US',
17 | currentLanguage: locale,
18 | isSupportedLanguage: function(lang) {
19 | return !!messages[lang];
20 | },
21 | intlDataFor: function(lang) {
22 | // we need to make sure we transform the given locale to the right format first
23 | // so we can access the right locale in our dictionary for example: pt-br should be transformed to pt-BR
24 | var locale = lang.split('-');
25 | locale = locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : lang;
26 | var strings = messages[locale] ? messages[locale] : messages['en-US'];
27 |
28 | return {locales: [locale], messages: assign(messages['en-US'], strings)};
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/src/lib/jsonUtils.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | jsonToFormEncoded: function (json) {
3 | if (!json) {
4 | return;
5 | }
6 | return Object.keys(json).map(key => {
7 | return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
8 | }).join('&');
9 | },
10 | parseJSON: function (string) {
11 | var result = {};
12 | if (string && typeof string === 'object') {
13 | return string;
14 | }
15 | if (string && typeof string === 'string') {
16 | try { result = JSON.parse(string); } catch (e) { console.error(e); }
17 | }
18 | return result;
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/src/lib/keyboard.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | focusNextInputByTabIndex: function () {
3 | var current = document.activeElement;
4 | var elements = document.getElementsByTagName('input');
5 | var idx = parseInt(current.getAttribute('tabIndex'), 10) + 1;
6 |
7 | for (var i = 0; i < elements.length; i++) {
8 | var t = parseInt(elements[i].getAttribute('tabIndex'), 10);
9 | if (t === idx) {
10 | elements[i].focus();
11 | }
12 | }
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/lib/messages.js:
--------------------------------------------------------------------------------
1 | // This is essentially bulk require
2 | var req = require.context('../locales', true, /\.json.*$/);
3 | var exports = {};
4 |
5 | req.keys().forEach(function (file) {
6 | var locale = file.replace('./', '').replace('.json', '');
7 | exports[locale] = req(file);
8 | });
9 |
10 | module.exports = exports;
11 |
--------------------------------------------------------------------------------
/src/lib/render.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 |
4 | var Spindicator = require('../components/spindicator/spindicator.jsx');
5 | var ModalConfirm = require('../components/modal-confirm/modal-confirm.jsx');
6 | var ModalSwitch = require('../components/modal-switch/modal-switch.jsx');
7 | var Snackbar = require('../components/snackbar/snackbar.jsx');
8 | var FTU = require('../components/ftu/ftu.jsx');
9 |
10 | var platform = require('./platform');
11 | var intlData = require('./i18n').intlData;
12 | var dispatcher = require('./dispatcher');
13 |
14 | var Base = React.createClass({
15 | mixins: [
16 | require('./router')
17 | ],
18 | componentDidMount: function () {
19 | var showFTU = (message) => {
20 | this.setState({
21 | ftuSingleMessage: message,
22 | ftuRightMessage: null,
23 | ftuLeftMessage: null
24 | });
25 |
26 | this.refs.ftu.show();
27 | };
28 |
29 | dispatcher.on('secondPageCreated', () => {
30 | showFTU(intlData.messages['ftu-share-project']);
31 | });
32 |
33 | if (this.props.route.displayName === 'Project' && this.state.params.mode === 'play') {
34 | var projectsViewed = parseInt(platform.getSharedPreferences('ftu::projects-viewed', true) || 0, 10);
35 |
36 | projectsViewed++;
37 |
38 | // Trigger FTU
39 | if (projectsViewed === 2) {
40 | showFTU(intlData.messages['ftu-remix']);
41 | }
42 |
43 | platform.setSharedPreferences('ftu::projects-viewed', projectsViewed, true);
44 | }
45 |
46 | if( this.props.route.displayName === 'Discover' && !platform.getSharedPreferences('ftu::seen-primary-ftu', true) ) {
47 | this.refs.ftu.show();
48 | }
49 | },
50 | onResume: function () {
51 | this.setState({isVisible: true});
52 | },
53 | onPause: function () {
54 | this.setState({isVisible: false});
55 | },
56 | onBackPressed: function() {
57 | if (this.state.onBackPressed) {
58 | return this.state.onBackPressed();
59 | } else {
60 | platform.goBack();
61 | }
62 | },
63 | jsComm: function (event) {
64 | if (this[event]) {
65 | this[event]();
66 | }
67 | },
68 | getInitialState: function () {
69 | // Expose to android
70 | window.jsComm = this.jsComm;
71 | return {
72 | isVisible: true,
73 | onBackPressed: false,
74 | ftuSingleMessage: null,
75 | ftuRightMessage: intlData.messages['ftu-make-your-own'],
76 | ftuLeftMessage: intlData.messages['ftu-explore']
77 | };
78 | },
79 | onFTUViewed: function () {
80 | platform.setSharedPreferences('ftu::seen-primary-ftu', 'true', true);
81 | },
82 | update: function (state) {
83 | this.setState(state);
84 | },
85 | render: function () {
86 | var Route = this.props.route;
87 | return (
88 |
94 |
95 |
96 |
97 |
98 |
99 |
);
100 | }
101 | });
102 |
103 | module.exports = function (Route) {
104 | ReactDOM.render(
, document.getElementById('app'));
105 | };
106 |
--------------------------------------------------------------------------------
/src/lib/router.js:
--------------------------------------------------------------------------------
1 | var {parseJSON} = require('./jsonUtils');
2 |
3 | module.exports = {
4 |
5 | android: window.Platform,
6 |
7 | getRouteParams: function () {
8 | var params = {};
9 |
10 | if (this.android) {
11 | // Check to see if route params exist & create cache key
12 | var routeParams = this.android.getRouteParams();
13 | var key = 'route::params';
14 |
15 | // If they do, save them. If not, fetch from storage
16 | if (routeParams !== '{}') {
17 | params = parseJSON(routeParams);
18 | this.android.setMemStorage(key, routeParams);
19 | } else {
20 | var hit = this.android.getMemStorage(key);
21 | params = parseJSON(hit);
22 | }
23 | } else {
24 | params = {
25 | mode: 'play', // 'edit', 'play', 'link'
26 | user: 1,
27 | project: 1,
28 | page: 1,
29 | element: 1,
30 | tag: 'test',
31 | propertyName: 'borderColor'
32 | };
33 | }
34 |
35 | return params;
36 | },
37 |
38 | getRouteData: function () {
39 | var data = {};
40 |
41 | if (this.android) {
42 | data = parseJSON(this.android.getRouteData());
43 | this.android.clearRouteData();
44 | }
45 |
46 | return data;
47 | },
48 |
49 | // #getUserSession ()
50 | //
51 | // Returns user session from android if it exists,
52 | // or else an empty object.
53 | // if window.Platform doesn't exist, returns test data
54 | // e.g.
55 | // {
56 | // user: {id: 1, username: 'foo', ...},
57 | // token: 'validToken'
58 | // }
59 | getUserSession: function () {
60 | var session = {};
61 |
62 | if (this.android) {
63 | session = parseJSON(this.android.getUserSession());
64 | } else {
65 | // For testing
66 | session = {
67 | user: {
68 | id: 1,
69 | username: 'jonatmozilla',
70 | avatar: 'https://secure.gravatar.com/avatar/c1b6f037ee7e440940d3c0c6ebeb8ba2?d=https%3A%2F%2Fstuff.webmaker.org%2Favatars%2Fwebmaker-avatar-200x200.png',
71 | prefLocale: 'en-US'
72 | },
73 | token: 'validToken'
74 | };
75 | }
76 |
77 | return session;
78 | },
79 |
80 | getInitialState: function () {
81 | var session = this.getUserSession();
82 | return {
83 | params: this.getRouteParams(),
84 | routeData: this.getRouteData(),
85 | user: session.user || {},
86 | token: session.token || ''
87 | };
88 | }
89 | };
90 |
--------------------------------------------------------------------------------
/src/lib/swipe.js:
--------------------------------------------------------------------------------
1 | module.exports = function calculateSwipe(startX, startY, endX, endY) {
2 | var THRESHOLD = 100;
3 | var MINIMUM_DISTANCE = 50;
4 |
5 | var distance = Math.sqrt(Math.pow(startX - endX, 2) + Math.pow(startY - endY, 2));
6 |
7 | if (distance >= MINIMUM_DISTANCE) {
8 | if (startX > endX && Math.abs(startY - endY) < THRESHOLD) {
9 | return('LEFT');
10 | } else if (startX < endX && Math.abs(startY - endY) < THRESHOLD) {
11 | return('RIGHT');
12 | } else if (startY < endY && Math.abs(startX - endX) < THRESHOLD) {
13 | return('DOWN');
14 | } else if (startY > endY && Math.abs(startX - endX) < THRESHOLD) {
15 | return('UP');
16 | }
17 | } else {
18 | return false;
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/src/lib/uuid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Mad science micro-sized UUID (v4) module.
3 | *
4 | * Adapted from: https://gist.github.com/jed/982883
5 | *
6 | * @package webmaker
7 | * @author Andrew Sliwinski
8 | */
9 |
10 | /* jshint ignore:start */
11 | // jscs:disable
12 | function b(
13 | a // placeholder
14 | ) {
15 | return a // if the placeholder was passed, return
16 | ? ( // a random number from 0 to 15
17 | a ^ // unless b is 8,
18 | Math.random() // in which case
19 | * 16 // a random number from
20 | >> a / 4 // 8 to 11
21 | ).toString(16) // in hexadecimal
22 | : ( // or otherwise a concatenated string:
23 | [1e7] + // 10000000 +
24 | -1e3 + // -1000 +
25 | -4e3 + // -4000 +
26 | -8e3 + // -80000000 +
27 | -1e11 // -100000000000,
28 | ).replace( // replacing
29 | /[018]/g, // zeroes, ones, and eights with
30 | b // random hex digits
31 | );
32 | }
33 |
34 | module.exports = b;
35 | /* jshint ignore:end */
36 | // jscs:enable
37 |
--------------------------------------------------------------------------------
/src/lib/validators.js:
--------------------------------------------------------------------------------
1 | var owasp = require('owasp-password-strength-test');
2 |
3 | // this removes the repeating character required test
4 | // https://github.com/cadecairos/PassTest/blob/master/index.js
5 | owasp.tests.required.splice(2, 1);
6 |
7 | //https://github.com/mozilla/id.webmaker.org/blob/develop/web/server.js#L13
8 | owasp.config({
9 | minLength: 8,
10 | maxLength: 256,
11 | minPhraseLength: 20,
12 | minOptionalTestsToPass: 2,
13 | allowPassphrases: true
14 | });
15 |
16 | module.exports = {
17 |
18 | validators: {
19 | email: {
20 | regex: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/i,
21 | message: 'Please use a valid email address.'
22 | },
23 | password: {
24 | test: function (input) {
25 | input = input || '';
26 | return owasp.test(input).strong;
27 | },
28 | message: 'Your password must be at least 8 characters and contain at least 1 number and 1 letter'
29 | },
30 | username: {
31 | regex: /^[a-zA-Z0-9\-]{1,20}$/,
32 | message: 'Must be 1-20 characters long and use only "-" and alphanumeric symbols.'
33 | }
34 | },
35 |
36 | // Looks at this.fields, and returns an object of errors
37 | // keyed on field.name
38 | //
39 | // e.g. this.fields should look like:
40 | // [{
41 | // name: 'username',
42 | // label: 'Username',
43 | // required: true,
44 | // validations: 'username'
45 | // },
46 | // {
47 | // name: 'email',
48 | // label: 'Email',
49 | // type: 'email',
50 | // required: true,
51 | // validations: 'email'
52 | // },
53 | // {
54 | // name: 'password',
55 | // label: 'Password',
56 | // type: 'password',
57 | // required: true,
58 | // validations: ['passwordLength', 'lowerCase', 'upperCase', 'numbers']
59 | // }]
60 |
61 | getValidationErrors: function () {
62 | var errors = {};
63 | var fields = this.fields;
64 |
65 | if (!fields) {
66 | return errors;
67 | }
68 |
69 | fields.forEach(fieldData => {
70 |
71 | var field = fieldData.name;
72 | var value = this.state[field];
73 | var isRequired = fieldData.required;
74 | var isEmpty = !value && value !== 0;
75 | var validations = fieldData.validations;
76 |
77 | // Required
78 | if (isRequired && isEmpty) {
79 | errors.requiredFieldsMissing = true;
80 | }
81 |
82 | // Custom Validation
83 | if (validations) {
84 | if (typeof validations === 'string') {
85 | validations = [validations];
86 | }
87 | validations.forEach(type => {
88 | var validation = this.validators[type];
89 | var errorMessage = validation.message;
90 | var test = validation.test || ((input) => validation.regex.test(input));
91 |
92 | // Test the value if it is non-emptynpm tun
93 | if (!isEmpty && !test(value)) {
94 | errors[field] = errors[field] || [];
95 | errors[field].push(errorMessage);
96 | }
97 |
98 | });
99 | }
100 |
101 | });
102 |
103 | return errors;
104 | }
105 | };
106 |
--------------------------------------------------------------------------------
/src/locales/bn-BD.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | bn-BD:
3 | username: ইউজারনেম
4 | password: পাসওয়ার্ড
5 | email: ইমেইল
6 | email_me_updates: ওয়েবমেকার সম্পর্কে খবরাখবর আমাকে ইমেইল করো
7 | join_webmaker: ওয়েবমেকারে যোগ দিন
8 | privacy_policy: প্রাইভেসি পলিসি
9 | signin: সাইন ইন
10 | errorUsernameOrPassword: মনে হচ্ছে আপনার ইউজারনেম বা পাসওয়ার্ডে কোন সমস্যা হয়েছে।
11 | Red: লাল
12 | Green: সবুজ
13 | Blue: নীল
14 | Opacity: সচ্ছতা
15 | log_out: লগ আউট
16 | title: শিরোনাম
17 | done: সম্পন্ন
18 | edit_label: লেবেল সম্পাদনা
19 | change_link_dest: লিঙ্ক গন্তব্যের পরিবর্তন
20 | set_link_dest: লিঙ্ক গন্তব্য নির্ধারণ করুন
21 | corner_radius: কোণের মাপ
22 | Font: ফন্ট
23 | background_color: ব্যাকগ্রাউন্ডের রঙ
24 | error_update_element: উপকরণ হালনাগাদে সমস্যা হয়েছে
25 | error_element: উপকরণ লোডিং এ সমস্যা হয়েছে
26 | error_element_404: কোন উপকরণ পাওয়া যায়নি
27 | error_delete_element: উপকরণ মুছে ফেলতে সমস্যা হয়েছে
28 |
--------------------------------------------------------------------------------
/src/locales/bn-IN.yaml:
--------------------------------------------------------------------------------
1 | bn-IN:
2 | username: ব্যবহারকারীর নাম
3 | password: 'পাসওয়ার্ড '
4 | email: ইমেল
5 | helpText: পাসওয়ার্ড রিসেট
6 | email_me_updates: ওয়েবমেকার সম্পর্কে আপডেট আমায় ইমেইল করুন।
7 | join_webmaker: Webmaker-এ যোগ দিন
8 | by_joining: যুক্ত হয়ে, আমি মোজিলা ওয়েবমেকারের {linkTerms} এবং {linkPrivacyPolicy} এ সম্মতি প্রদান করছি।
9 | privacy_policy: গোপনীয়তা নীতি
10 | terms: শর্তাবলী
11 | already_join_signin: ইতিমধ্যে যোগ দিয়েছেন? {signinLink}
12 | signin: 'সাইন ইন '
13 | dont_have_account: কোন অ্যাকাউন্ট নেই? {joinWebmakerLink}
14 | errorUsernameOrPassword: আপনার ব্যবহারকারী নাম বা পাসওয়ার্ড দিয়ে একটি সমস্যা হতে পারে বলে মনে হচ্ছে।
15 | color_editor: 'রঙ: {rgbaValue};'
16 | Red: লাল
17 | Green: সবুজ
18 | Blue: নীল
19 | Opacity: অস্বচ্ছতা
20 | my_project: আমার প্রকল্প
21 | log_out: প্রস্থান
22 | create_a_project: + প্রকল্প তৈরি করুন
23 | open_style_guide: উন্মুক্ত স্টাইল গাইড
24 | reset_share_preferences: শেয়ার করার পছন্দ রিসেট করুন
25 | loading: লোডিং!
26 | title: শিরোনাম
27 | done: সম্পূর্ণ
28 | edit_label: ট্যাগ সম্পাদনা করুন।
29 | change_link_dest: লিঙ্ক গন্তব্য পরিবর্তন করুন।
30 | set_link_dest: লিঙ্ক গন্তব্য সেট করুন।
31 | corner_radius: দৃষ্টিকোন ব্যাসার্ধ
32 | Font: ফন্ট
33 | background_color: পটভূমির রঙ
34 | no_project_found: দুঃখিত, কোন প্রকল্প পাওয়া যায়নি।
35 | error_featured: প্রকল্প উদ্ঘাটনে সমস্যা হয়েছে
36 | error_featured_404: কোন উদ্ঘাটিত প্রকল্প পাওয়া যায়নি
37 | error_update_element: উপাদান আপডেট করার সময় একটি ত্রুটি ছিল।
38 | error_element: উপাদান লোড করার সময় ত্রুটি।
39 | error_element_404: উপাদান খুঁজে পাওয়া যায়নি।
40 | error_create_make: প্রকল্প তৈরিতে চেষ্টা করা হয়েছে যখন কোন সেশন পাওয়া যায়নি
41 | error_create_element: উপকরণ তৈরিতে সমস্যা হয়েছে
42 | error_delete_element: উপাদান মুছে ফেলার সময় সমস্যা হয়েছে।
43 | error_page: পাতা লোড হতে কোন সমস্যা হয়েছে
44 | error_page_404: পাতা লোড করার জন্য পাওয়া যায়নি
45 | error_404_element_save: উপকরণ সংরক্ষণের জন্য পাওয়া যায়নি
46 | cc: ক্রিয়েটিভ কমন্স
47 | ccLicenseSection: কন্টেন্ট {creativecommonsLink} নামের একটি ক্রিয়েটিভ কমন্স লাইসেন্সের আওতায় প্রকাশিত হয়েছে।
48 | ccLicenseSectionSub: এর অর্থ হচ্ছে অন্য কেউ আপনার কৃতিত্ব স্বীকার করে আপনার কন্টেন্ট শেয়ার, অভিযোজন, এবং রিমিক্স করতে পারবে এবং একইভাবে তাদের সৃষ্টিকর্মও শেয়ার করতে পারবে, যেভাবে এই লাইসেন্সে বর্ণনা করা হয়েছে।
49 | ccAttribution: Attribution-ShareAlike 3.0 Unported
50 |
--------------------------------------------------------------------------------
/src/locales/en-GB.yaml:
--------------------------------------------------------------------------------
1 | en-GB:
2 | username: Username
3 | password: Password
4 | email: Email
5 | helpText: Reset Password
6 | email_me_updates: Email me updates about Webmaker
7 | join_webmaker: Join Webmaker
8 | by_joining: By joining, I agree to Mozilla Webmaker’s {linkTerms} and {linkPrivacyPolicy}
9 | privacy_policy: Privacy Policy
10 | terms: Terms
11 | already_join_signin: Already joined? {signinLink}
12 | signin: Sign in
13 | dont_have_account: Don’t have an account? {joinWebmakerLink}
14 | errorUsernameOrPassword: Looks like there might be a problem with your username or password.
15 | color_editor: 'colour: {rgbaValue};'
16 | Red: Red
17 | Green: Green
18 | Blue: Blue
19 | Opacity: Opacity
20 | my_project: My project
21 | log_out: Log Out
22 | create_a_project: + Create a Project
23 | open_style_guide: Open Style Guide
24 | reset_share_preferences: Reset Shared Preferences
25 | loading: Loading!
26 | title: Title
27 | done: Done
28 | edit_label: Edit Label
29 | change_link_dest: Change Link Destination
30 | set_link_dest: Set Link Destination
31 | corner_radius: Corner Radius
32 | Font: Text
33 | background_color: Background Colour
34 | no_project_found: Sorry, no projects found.
35 | error_featured: Error getting discovery projects
36 | error_featured_404: No discovery projects found
37 | error_update_element: There was an error updating the element
38 | error_element: Error loading element
39 | error_element_404: No element found
40 | error_create_make: Tried to create project when no session was found
41 | error_create_element: There was an error creating an element
42 | error_delete_element: There was a problem deleting the element
43 | error_page: There was an error getting the page to load
44 | error_page_404: Could not find the page to load
45 | error_404_element_save: Could not find the element to save
46 | cc: Creative Commons
47 | ccLicenseSection: Content published under a Creative Commons license called {creativecommonsLink}.
48 | ccLicenseSectionSub: This means that other people can share, adapt, and remix your content if they give you credit and share their work in the same way, as all of this is described in the license.
49 | ccAttribution: Attribution-ShareAlike 3.0 Unported
50 |
--------------------------------------------------------------------------------
/src/locales/en-US.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | en-US:
3 | create_account: Create a Webmaker Account
4 | pick_username: Pick a username
5 | username: Username
6 | username_email: Username or Email
7 | set_password: Set password
8 | password: Password
9 | email: Email
10 | helpText: Reset Password
11 | email_me_updates: Email me updates about Webmaker
12 | join_webmaker: Join Webmaker
13 | by_joining: By joining, I agree to Mozilla Webmaker’s {linkTerms} and {linkPrivacyPolicy}
14 | privacy_policy: Privacy Policy
15 | terms: Terms
16 | already_join_signin: Already joined? {signinLink}
17 | signin: Sign in
18 | signin_webmaker: Sign in to Webmaker
19 | dont_have_account: Don’t have an account? {joinWebmakerLink}
20 | errorUsernameOrPassword: Looks like there might be a problem with your username or password.
21 | color_editor: 'color: {rgbaValue};'
22 | text_color: Text Color
23 | Red: Red
24 | Green: Green
25 | Blue: Blue
26 | Opacity: Opacity
27 | my_project: My project
28 | log_out: Log out
29 | create_a_project: + Create a Project
30 | open_style_guide: Open Style Guide
31 | reset_share_preferences: Reset Shared Preferences
32 | loading: Loading!
33 | title: Title
34 | done: Done
35 | edit_label: Edit Label
36 | change_link_dest: Change Link Destination
37 | set_link_dest: Set Link Destination
38 | corner_radius: Corner Radius
39 | Font: Font
40 | background_color: Background Color
41 | no_project_found: Sorry, no projects found.
42 | error_featured: Error getting discovery projects
43 | error_featured_404: No discovery projects found
44 | error_update_element: There was an error updating the element
45 | error_element: Error loading element
46 | error_element_404: No element found
47 | error_create_make: Tried to create project when no session was found
48 | error_create_element: There was an error creating an element
49 | error_delete_element: There was a problem deleting the element
50 | error_page: There was an error getting the page to load
51 | error_page_404: Could not find the page to load
52 | error_404_element_save: Could not find the element to save
53 | error_featured_tags: Could not fetch featured tags
54 | cc: Creative Commons
55 | ccLicenseSection: Your Webmaker content is published under the Creative Commons {creativecommonsLink} as described in the {termsofuse}.
56 | ccLicenseSectionSub: This means that others may remix, tweak, and build upon your work even for commercial purposes, as long as they credit you and license their new creations under the identical terms.
57 | ccAttribution: Attribution-ShareAlike 3.0 Unported license
58 | ccTermsOfUse: terms of use
59 | error_discovery_get: Error getting discovery projects
60 | badTitle: Title must be between {minLength} and {maxLength} characters
61 | badDescription: Description must be less than {maxLength} characters
62 | ftu-explore: Explore stories around the world
63 | ftu-make-your-own: ...or make your own!
64 | ftu-share-project: Share this project with anyone!
65 | ftu-remix: Make your own version of this – hit 'Remix!'
66 | need_help: Need Help?
67 | link_editor_help: You can link your button to another page or to a destination on the web
68 | link_header: Link Destination
69 | dest_btn_page: A page in this project
70 | dest_btn_web: Web URL
71 | got_it: OK, got it!
72 | web_link_intro: A link can take us to any page or image on the web with an "address" or URL.
73 | web_link_label: URL
74 | invalid_url: Please enter a valid URL.
75 | follow_link: Follow Link
76 | hashtag: Hashtag
77 | featured: Featured
78 |
--------------------------------------------------------------------------------
/src/locales/es-MX.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | es-MX:
3 | username: Usuario
4 | password: Contraseña
5 | email: Correo electrónico
6 | helpText: Reiniciar contraseña
7 | email_me_updates: Enviarme actualizaciones acerca de Webmaker
8 | join_webmaker: Únete a Webmaker
9 | by_joining: Al unirte, aceptas los {linkTerms} y {linkPrivacyPolicy}
10 | privacy_policy: Política de privacidad
11 | terms: Términos
12 | already_join_signin: ¿Ya te uniste? {signinLink}
13 | signin: Entrar
14 | dont_have_account: ¿No tienes una cuenta? {joinWebmakerLink}
15 | errorUsernameOrPassword: Parece que podría haber un probelam con tu usuario o contraseña.
16 | color_editor: 'color: {rgbaValue};'
17 | Red: Rojo
18 | Green: Verde
19 | Blue: Azul
20 | Opacity: Opacidad
21 | my_project: Mi proyecto
22 | log_out: Salir
23 | create_a_project: + Crear un proyecto
24 | open_style_guide: Abrir la guía de estilo
25 | reset_share_preferences: Reiniciar preferencias compartidas
26 | loading: ¡Cargando!
27 | title: Título
28 | done: Hecho
29 | edit_label: Editar etiqueta
30 | change_link_dest: Cambiar destino del link
31 | set_link_dest: Definir destino del link
32 | corner_radius: Radio de las esquinas
33 | Font: Fuente
34 | background_color: Color de fondo
35 | no_project_found: Lo sentimos, no encontramos ningún proyecto.
36 | error_featured: Error descubriendo proyectos
37 | error_featured_404: No se encontraron proyectos en descubre
38 | error_update_element: Hubo un error actualizando el elementp
39 | error_element: Error cargando el elemento
40 | error_element_404: Elemento no encontrado
41 | error_create_make: Intentamos crear un proyecto cuando no encotramos una sesión
42 | error_create_element: Hubo un error creando un elemento
43 | error_delete_element: Hubo un problema eliminando el elemento
44 | error_page: Hubo un error al obtener la página para cargar
45 | error_page_404: No se pudo encontrar la página para leer
46 | error_404_element_save: No se pudo encontrar el elemento para guardar
47 | cc: Creative Commons
48 | ccLicenseSection: Contenido publicado bajo una licencia llamada Creative Commons {creativecommonsLink}.
49 | ccLicenseSectionSub: Esto significa que otra gente puede compartir, adaptar, y mezclar tu
50 | contenido si ellos te dan crédito y comparten su trabajo del mismo modo, todo esto
51 | se describe en la licencia.
52 | ccAttribution: Reconocimiento-CompartirIgual 3.0 Unported
53 | error_discovery_get: Error obteniendo proyectos en descubre
54 |
--------------------------------------------------------------------------------
/src/locales/id-ID.yaml:
--------------------------------------------------------------------------------
1 | id-ID:
2 | username: Nama pengguna
3 | password: Kata kunci
4 | email: Surel
5 | helpText: Tetapkan ulang Kata kunci
6 | email_me_updates: Kirim saya surel info terbaru tentang Webmaker
7 | join_webmaker: Bergabung dengan Webmaker
8 | by_joining: Dengan bergabung, saya menyetujui {linkTerms} dan {linkPrivacyPolicy} dari Mozilla Webmaker
9 | privacy_policy: Kebijakan Privasi
10 | terms: Syarat
11 | already_join_signin: Sudah bergabung? {signinLink}
12 | signin: Masuk
13 | dont_have_account: Tidak punya akun? {joinWebmakerLink}
14 | errorUsernameOrPassword: Sepertinya ada kesalahan pada nama pengguna atau kata sandi Anda.
15 | color_editor: 'warna: {rgbaValue};'
16 | Red: Merah
17 | Green: Hijau
18 | Blue: Biru
19 | Opacity: Tingkat pengaburan
20 | my_project: Proyek saya
21 | log_out: Keluar
22 | create_a_project: + Buat Proyek
23 | open_style_guide: Buka Panduan Gaya
24 | reset_share_preferences: Tetapkan ulang Preferensi Bersama
25 | loading: Memuat!
26 | title: Judul
27 | done: Selesai
28 | edit_label: Atur Label
29 | change_link_dest: Ubah Tujuan Tautan
30 | set_link_dest: Atur Tujuan Tautan
31 | corner_radius: Radius Sudut
32 | Font: Jenis Huruf
33 | background_color: Warna Latar
34 | no_project_found: Maaf, proyek tidak ditemukan.
35 | error_featured: Ada kesalahan dalam mendapatkan proyek temuan
36 | error_featured_404: Tidak ada proyek temuan ditemukan
37 | error_update_element: Ada kesalahan dalam memperbarui elemen
38 | error_element: Kesalahan dalam memuat elemen
39 | error_element_404: Elemen tidak ditemukan
40 | error_create_make: Telah coba membuat proyek ketika tiada sesi ditemukan
41 | error_create_element: Ada kesalahan dalam membuat elemen
42 | error_delete_element: Ada masalah dalam menghapus elemen
43 | error_page: Ada kesalahan dalam memuat halaman
44 | error_page_404: Tidak dapat menemukan halaman untuk dimuat
45 | error_404_element_save: Tidak dapat menemukan elemen untuk disimpan
46 | cc: Creative Commons
47 | ccLicenseSection: Konten diterbitkan dibawah lisensi Creative Commons bernama {creativecommonsLink}.
48 | ccLicenseSectionSub: Ini berarti orang lain dapat membagi, mengadaptasi dan mengubah-suai konten Anda jika mereka memberi kredit kepada Anda dan membagikan pekerjaan mereka dengan cara yang sama, sebagaimana hal tersebut dijelaskan di dalam lisensi.
49 | ccAttribution: Atribusi-BerbagiSerupa 3.0 Tanpa Adaptasi
50 |
--------------------------------------------------------------------------------
/src/locales/pt-BR.yaml:
--------------------------------------------------------------------------------
1 | pt-BR:
2 | username: Nome de usuário
3 | password: Senha
4 | email: E-mail
5 | helpText: Resetar senha
6 | email_me_updates: Me envie atualizações por e-mail sobre o Webmaker
7 | join_webmaker: Faça parte do Webmaker
8 | by_joining: Ao entrar, Eu concordo com os {linkTerms} e {linkPrivacyPolicy} do Mozilla Webmaker
9 | privacy_policy: Política de privacidade
10 | terms: Condições
11 | already_join_signin: Já faz parte? {signinLink}
12 | signin: Entrar
13 | dont_have_account: Não tem uma conta? {joinWebmakerLink}
14 | errorUsernameOrPassword: Parece que existe um problema com o seu nome de usuário ou senha.
15 | color_editor: 'Cor: {rgbaValue};'
16 | Red: Vermelho
17 | Green: Verde
18 | Blue: Azul
19 | Opacity: Opacidade
20 | my_project: Meu projeto
21 | log_out: Sair
22 | create_a_project: +Criar um Projeto
23 | open_style_guide: Guia Aberta de Estilo
24 | reset_share_preferences: Reinicializar preferências compartilhadas
25 | loading: Carregando!
26 | title: Título
27 | done: Concluído
28 | edit_label: Editar rótulo
29 | change_link_dest: Trocar destino do link
30 | set_link_dest: Definir destino do link
31 | corner_radius: Raio do canto
32 | Font: Fonte
33 | background_color: Cor de fundo
34 | no_project_found: Desculpa, não foram encontrados projetos.
35 | error_featured: Erro ao procurar projetos em destaques
36 | error_featured_404: Não há projetos em destaques encontrados
37 | error_update_element: Houve um erro ao atualizar o elemento
38 | error_element: Erro ao carregar o elemento
39 | error_element_404: Nenhum elemento encontrado
40 | error_create_make: Tentou criar um projeto quando estava em um sessão não encontrada
41 | error_create_element: Houve algum erro ao criar um elemento
42 | error_delete_element: Houve um problema ao remover o elemento
43 | error_page: Houve um erro ao carregar a página
44 | error_page_404: Não conseguimos encontrar a página carregada
45 | error_404_element_save: Não conseguimos encontrar o elemento salvo
46 | cc: Creative Commons
47 | ccLicenseSection: Conteúdo publicado sob uma licença chamada Creative Commons {creativecommonsLink}.
48 | ccLicenseSectionSub: Isso significa que outras pessoas podem compartilhar, adaptar e remixar o seu conteúdo, com isso devem dar os créditos e compartilhar o seu trabalho,do mesmo modo, como tudo isto está descrito na licença.
49 | ccAttribution: Compartilhada pela mesma licença atrubuída 3.0 não adaptada
50 |
--------------------------------------------------------------------------------
/src/main.less:
--------------------------------------------------------------------------------
1 | @import "normalize";
2 | @import "variables";
3 | @import "colors";
4 | @import "fonts";
5 |
6 | // Components -----------------------------------------------------------------
7 |
8 | @import "components/action-menu/action-menu";
9 | @import "components/alert/alert";
10 | @import "components/basic-element/basic-element";
11 | @import "components/button/button";
12 | @import "components/card/card";
13 | @import "components/color-group/color-group";
14 | @import "components/color-spectrum/color-spectrum";
15 | @import "components/element-group/element-group";
16 | @import "components/link/link";
17 | @import "components/loading/loading";
18 | @import "components/modal-confirm/modal-confirm";
19 | @import "components/modal-switch/modal-switch";
20 | @import "components/option-panel/option-panel";
21 | @import "components/range/range";
22 | @import "components/select/select";
23 | @import "components/shim/shim";
24 | @import "components/snackbar/snackbar";
25 | @import "components/spindicator/spindicator";
26 | @import "components/tabs/tabs";
27 | @import "components/text-input/text-input";
28 | @import "components/d-pad/d-pad";
29 | @import "components/ftu/ftu";
30 | @import "components/project-list/project-list";
31 | @import "components/featured-tag-card/featured-tag-card";
32 |
33 | // Pages ----------------------------------------------------------------------
34 |
35 | @import "pages/user-projects/user-projects";
36 | @import "pages/element/element";
37 | @import "pages/login/login";
38 | @import "pages/make/make";
39 | @import "pages/page/page";
40 | @import "pages/project/project";
41 | @import "pages/project-settings/project-settings";
42 | @import "pages/style-guide/style-guide";
43 | @import "pages/tinker/tinker";
44 | @import "pages/web-link/web-link";
45 | @import "pages/tag-list/tag-list";
46 |
47 | *,
48 | *:after,
49 | *:before {
50 | box-sizing: border-box;
51 | -webkit-backface-visibility: hidden;
52 | -webkit-tap-highlight-color: rgba(0,0,0,0);
53 | -webkit-tap-highlight-color: transparent;
54 | }
55 |
56 | html {
57 | height: 100%;
58 | }
59 |
60 | body {
61 | height: 100%;
62 | margin: 0;
63 | padding: 0;
64 | font-family: "FiraSans", "Fira Sans", "Fira Sans OT", sans-serif;
65 | }
66 |
67 | code, pre {
68 | font-family: menlo, monospace;
69 | font-size: inherit;
70 | }
71 |
72 | #app {
73 | height: 100%;
74 | }
75 |
76 | .container {
77 | height: 100%;
78 | user-select: none;
79 |
80 | > div {
81 | background: @lightGrey;
82 | min-height: 100%;
83 | }
84 | }
85 |
86 | // Screen readers only
87 | .sr-only {
88 | position: absolute;
89 | width: 1px;
90 | height: 1px;
91 | padding: 0;
92 | margin: -1px;
93 | overflow: hidden;
94 | clip: rect(0 0 0 0);
95 | border: 0;
96 | }
97 |
98 | .text-center {
99 | text-align: center;
100 | }
101 | .text-right {
102 | text-align: right;
103 | }
104 |
--------------------------------------------------------------------------------
/src/pages/discover/discover.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var api = require('../../lib/api');
3 | var reportError = require('../../lib/errors');
4 | var i18n = require('../../lib/i18n');
5 |
6 | var render = require('../../lib/render.jsx');
7 | var Card = require('../../components/card/card.jsx');
8 | var Loading = require('../../components/loading/loading.jsx');
9 | var ProjectList = require ('../../components/project-list/project-list.jsx');
10 |
11 | var lang = i18n.isSupportedLanguage(i18n.currentLanguage) ? i18n.currentLanguage : i18n.defaultLang;
12 |
13 | var Discover = React.createClass({
14 | mixins: [require('react-intl').IntlMixin],
15 | render: function () {
16 | return (
17 |
18 | );
19 | }
20 | });
21 |
22 | render(Discover);
23 |
--------------------------------------------------------------------------------
/src/pages/element/element.less:
--------------------------------------------------------------------------------
1 | @element-label_margin-bottom: 10px;
2 | @editor-form-group_margin-bottom: 20px;
3 |
4 | #editor {
5 | color: @slate;
6 | height: 100%;
7 | position: relative;
8 | }
9 | .editor{
10 | height: 100%;
11 | }
12 |
13 | .get-media {
14 | .get-media-overlay {
15 | position: fixed;
16 | top: 0;
17 | left: 0;
18 | height: 100%;
19 | width: 100%;
20 | z-index: 998;
21 | background: #1A2237;
22 | opacity: 0;
23 | visibility: hidden;
24 | transition: all 0.2s ease-in-out;
25 | &.active {
26 | visibility: visible;
27 | opacity: 0.7;
28 | }
29 | }
30 |
31 | .get-media-controls {
32 | position: fixed;
33 | top: 0;
34 | left: 0;
35 | bottom: 0;
36 | right: 0;
37 | width: 170px;
38 | height: 300px;
39 | z-index: 999;
40 | margin: auto;
41 |
42 | opacity: 0;
43 | visibility: hidden;
44 | transition: all 0.2s ease-in-out;
45 |
46 | &.active {
47 | visibility: visible;
48 | opacity: 1.0;
49 | }
50 |
51 | p {
52 | color: @slate;
53 | }
54 |
55 | button, a {
56 | display: block;
57 | position: relative;
58 | width: 170px;
59 | height: 140px;
60 | margin-bottom: 20px;
61 |
62 | border: none;
63 | outline: none;
64 | background-color: @white;
65 | border-radius: 5px;
66 | box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.3);
67 |
68 | .icon {
69 | width: 50px;
70 | height: 50px;
71 | display: block;
72 | margin: 20px auto 0 auto;
73 | }
74 | }
75 | }
76 | }
77 |
78 |
79 | /*********************************************************
80 | * Editor preview and options
81 | */
82 |
83 | // These are outside the id
84 | // because adding them inside #editor would make
85 | // them too specific and therefore really difficult to override
86 | @editor-preview-height: 150px;
87 | .editor-preview {
88 | box-shadow: 0px 4px 10px 0px rgba(84,94,102,0.30);
89 | text-align: center;
90 | background: @softGrey;
91 | height: 150px;
92 | display: flex;
93 | align-items: center;
94 | justify-content: center;
95 | overflow-y: scroll;
96 | position: fixed;
97 | top: 0;
98 | height: 150px;
99 | z-index: 2;
100 | width: 100%;
101 | img {
102 | box-sizing: content-box;
103 | height: 70%;
104 | }
105 | p {
106 | max-width: 320px;
107 | font-size: 1.6rem;
108 | }
109 | }
110 |
111 | .editor-scroll{
112 | background-image: url("./img/scrubber.svg");
113 | background-position-x: 100%;
114 | background-repeat: no-repeat repeat;
115 | padding: 20px 40px 20px 0;
116 | }
117 | .editor-options {
118 | font-size: 15px;
119 | margin-top: @editor-preview-height;
120 | padding: 0 0 0 20px;
121 | height: calc(~"100% - " @editor-preview-height);
122 | overflow-y: scroll;
123 | label, input {
124 | width: 100%;
125 | display: block;
126 | }
127 | label {
128 | margin-bottom: @element-label_margin-bottom;
129 | }
130 | .form-group {
131 | margin-bottom: @editor-form-group_margin-bottom;
132 | &:last-child {
133 | margin-bottom: 0;
134 | }
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/src/pages/element/font-selector.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | /**
4 | * This is a mixin due to the fact that we rely on this.linkState,
5 | * which handles the automatic state binding to whatever component
6 | * is using this font selection component for changing font-family
7 | */
8 | module.exports = {
9 | /**
10 | * Generate the dropdown selector for fonts, with each font option
11 | * styled in the appropriate font.
12 | * @return {[type]}
13 | */
14 | generateFontSelector: function() {
15 | var fonts = ["Roboto", "Bitter", "Pacifico"];
16 | var options = fonts.map(name => {
17 | // setting style on an ;
19 | });
20 | return ;
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/src/pages/element/page-editor.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var LinkedStateMixin = require('react-addons-linked-state-mixin');
3 | var ColorGroup = require('../../components/color-group/color-group.jsx');
4 |
5 | var colorChoices = ["#f2f6fc","#484B50","#6D7886","#98CC3B","#E26A1F","#8173E4"];
6 |
7 | var PageEditor = React.createClass({
8 | mixins: [
9 | LinkedStateMixin,
10 | require('react-intl').IntlMixin
11 | ],
12 | getInitialState: function () {
13 | return {
14 | type: "page",
15 | backgroundColor: this.props.element.styles.backgroundColor || '#f2f6fc'
16 | };
17 | },
18 | componentDidUpdate: function (prevProps, prevState) {
19 | var state = this.state;
20 |
21 | // Update state if parent properties change
22 | if (this.props.element !== prevProps.element) {
23 | state = this.getInitialState();
24 | this.setState(state);
25 | }
26 |
27 | // Cache edits if internal state changes
28 | if (this.state !== prevState) {
29 | this.props.cacheEdits(state);
30 | }
31 | },
32 | componentWillMount: function () {
33 | },
34 | render: function () {
35 | return (
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
26 |
27 |
28 |
29 |
30 |
31 | {this.props.errors && this.props.errors.join(' ')}
32 |
33 |
{helpText}
34 |
27 |
32 |
35 |
36 |
41 |
42 |
43 |
37 |
38 |
116 |
117 | 
65 | 
93 |
94 | 
34 | 
41 | 