diff --git a/app/soapbox/features/developers/apps/create.js b/app/soapbox/features/developers/apps/create.js new file mode 100644 index 000000000..e9aa77d8f --- /dev/null +++ b/app/soapbox/features/developers/apps/create.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; +import Column from 'soapbox/features/ui/components/column'; +import { SimpleForm, TextInput } from 'soapbox/features/forms'; + +const messages = defineMessages({ + heading: { id: 'column.app_create', defaultMessage: 'Create app' }, + namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' }, +}); + +export default @injectIntl +class CreateApp extends React.Component { + + static propTypes = { + intl: PropTypes.object.isRequired, + } + + render() { + const { intl } = this.props; + + return ( + + + TODO: This page is incomplete + + } + placeholder={intl.formatMessage(messages.namePlaceholder)} + required + /> + } + placeholder='https://soapbox.pub' + /> + + + ); + } + +} diff --git a/app/soapbox/features/developers/index.js b/app/soapbox/features/developers/index.js index cc74e5c14..19b7c7b61 100644 --- a/app/soapbox/features/developers/index.js +++ b/app/soapbox/features/developers/index.js @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, defineMessages } from 'react-intl'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; +import { Link } from 'react-router-dom'; import Column from '../ui/components/column'; +import Icon from 'soapbox/components/icon'; const messages = defineMessages({ heading: { id: 'column.developers', defaultMessage: 'Developers' }, @@ -19,8 +21,27 @@ class Developers extends React.Component { return ( -
- WIP: Developers page +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
); diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 924c5a757..4256988b6 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -116,6 +116,7 @@ import { NewStatus, IntentionalError, Developers, + CreateApp, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -320,8 +321,9 @@ class SwitchingColumnsArea extends React.PureComponent { - + + diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 9bd0418b6..b01582ac1 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -429,3 +429,7 @@ export function IntentionalError() { export function Developers() { return import(/* webpackChunkName: "features/developers" */'../../developers'); } + +export function CreateApp() { + return import(/* webpackChunkName: "features/developers" */'../../developers/apps/create'); +} diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss index baa326e23..96dc141b5 100644 --- a/app/styles/components/admin.scss +++ b/app/styles/components/admin.scss @@ -30,6 +30,7 @@ } &__num, + &__icon, &__text { text-align: center; font-weight: 500; @@ -39,6 +40,20 @@ margin-bottom: 10px; } + &__icon { + display: flex; + justify-content: center; + + .svg-icon { + width: 48px; + height: 48px; + + svg { + stroke-width: 1px; + } + } + } + &__label { font-size: 14px; color: hsla(var(--primary-text-color_hsl), 0.6);