From b36977cf807e3b0fbab13b98fc12bfa0ea05b8bd Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 30 Sep 2018 08:51:14 -0700 Subject: [PATCH 1/3] Stash --- app/components/Sidebar/Settings.js | 19 +++++++++++-------- app/routes.js | 6 ++++++ app/scenes/Settings/Zapier.js | 19 +++++++++++++++++++ 3 files changed, 36 insertions(+), 8 deletions(-) create mode 100644 app/scenes/Settings/Zapier.js diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index a5b9d6fe7..bfcd414ce 100644 --- a/app/components/Sidebar/Settings.js +++ b/app/components/Sidebar/Settings.js @@ -73,20 +73,23 @@ class SettingsSidebar extends React.Component { }> Share Links - {user.isAdmin && ( - } - > - Integrations - - )} {user.isAdmin && ( }> Export Data )} + {user.isAdmin && ( +
+
Integrations
+ + Slack + + + Zapier + +
+ )} diff --git a/app/routes.js b/app/routes.js index b9ea0584a..7580efdf4 100644 --- a/app/routes.js +++ b/app/routes.js @@ -14,6 +14,7 @@ import Details from 'scenes/Settings/Details'; import Security from 'scenes/Settings/Security'; import People from 'scenes/Settings/People'; import Slack from 'scenes/Settings/Slack'; +import Zapier from 'scenes/Settings/Zapier'; import Shares from 'scenes/Settings/Shares'; import Tokens from 'scenes/Settings/Tokens'; import Export from 'scenes/Settings/Export'; @@ -53,6 +54,11 @@ export default function Routes() { path="/settings/integrations/slack" component={Slack} /> + diff --git a/app/scenes/Settings/Zapier.js b/app/scenes/Settings/Zapier.js new file mode 100644 index 000000000..a0c7b5ed4 --- /dev/null +++ b/app/scenes/Settings/Zapier.js @@ -0,0 +1,19 @@ +// @flow +import * as React from 'react'; +import CenteredContent from 'components/CenteredContent'; +import PageTitle from 'components/PageTitle'; +import HelpText from 'components/HelpText'; + +class Zapier extends React.Component<*> { + render() { + return ( + + +

Zapier

+ Boop + + ); + } +} + +export default Zapier; From e8ef1145a1e52404c573e712b467bfec672226af Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 30 Sep 2018 17:56:20 -0700 Subject: [PATCH 2/3] Add integration icons Add link to public zapier invite --- app/components/Sidebar/Settings.js | 13 ++++++++++--- app/components/Sidebar/icons/Slack.js | 17 +++++++++++++++++ app/components/Sidebar/icons/Zapier.js | 17 +++++++++++++++++ app/menus/RevisionMenu.js | 2 +- app/scenes/Settings/Zapier.js | 24 +++++++++++++++++++++++- 5 files changed, 68 insertions(+), 5 deletions(-) create mode 100644 app/components/Sidebar/icons/Slack.js create mode 100644 app/components/Sidebar/icons/Zapier.js diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index bfcd414ce..2ed60a8db 100644 --- a/app/components/Sidebar/Settings.js +++ b/app/components/Sidebar/Settings.js @@ -4,13 +4,14 @@ import { observer, inject } from 'mobx-react'; import { DocumentIcon, ProfileIcon, - SettingsIcon, PadlockIcon, CodeIcon, UserIcon, LinkIcon, TeamIcon, } from 'outline-icons'; +import ZapierIcon from './icons/Zapier'; +import SlackIcon from './icons/Slack'; import Flex from 'shared/components/Flex'; import Sidebar, { Section } from './Sidebar'; @@ -82,10 +83,16 @@ class SettingsSidebar extends React.Component { {user.isAdmin && (
Integrations
- + } + > Slack - + } + > Zapier
diff --git a/app/components/Sidebar/icons/Slack.js b/app/components/Sidebar/icons/Slack.js new file mode 100644 index 000000000..133b14be8 --- /dev/null +++ b/app/components/Sidebar/icons/Slack.js @@ -0,0 +1,17 @@ +// @flow +import * as React from 'react'; + +export default function SlackIcon(props: *) { + return ( + + + + ); +} diff --git a/app/components/Sidebar/icons/Zapier.js b/app/components/Sidebar/icons/Zapier.js new file mode 100644 index 000000000..a772c7450 --- /dev/null +++ b/app/components/Sidebar/icons/Zapier.js @@ -0,0 +1,17 @@ +// @flow +import * as React from 'react'; + +export default function ZapierIcon(props: *) { + return ( + + + + ); +} diff --git a/app/menus/RevisionMenu.js b/app/menus/RevisionMenu.js index e1000e78e..a1a3a1043 100644 --- a/app/menus/RevisionMenu.js +++ b/app/menus/RevisionMenu.js @@ -7,7 +7,7 @@ import { MoreIcon } from 'outline-icons'; import CopyToClipboard from 'components/CopyToClipboard'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; import { documentHistoryUrl } from 'utils/routeHelpers'; -import { Revision } from 'types'; +import type { Revision } from 'types'; import Document from 'models/Document'; import UiStore from 'stores/UiStore'; diff --git a/app/scenes/Settings/Zapier.js b/app/scenes/Settings/Zapier.js index a0c7b5ed4..ff047bf8f 100644 --- a/app/scenes/Settings/Zapier.js +++ b/app/scenes/Settings/Zapier.js @@ -3,14 +3,36 @@ import * as React from 'react'; import CenteredContent from 'components/CenteredContent'; import PageTitle from 'components/PageTitle'; import HelpText from 'components/HelpText'; +import Button from 'components/Button'; class Zapier extends React.Component<*> { + goToZapier = () => { + window.open( + 'https://zapier.com/platform/public-invite/5927/a0b2747dbb017723b55fc54f4f0cdcae/' + ); + }; render() { return (

Zapier

- Boop + + There is now an Outline app on{' '} + + Zapier + {' '} + to allow easy integration with hundreds of other business services. It + is currently in early access, to use the integration and hook up to + your wiki simply accept the public invite below. All configuration is + done within Zapier itself. + +

+ +

); } From b02e5184fda0bd90f12c55a83f59f545eec52730 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 30 Sep 2018 18:09:35 -0700 Subject: [PATCH 3/3] Closes #764 - Visual feedback that avatar is uploading --- app/scenes/Settings/components/ImageUpload.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/scenes/Settings/components/ImageUpload.js b/app/scenes/Settings/components/ImageUpload.js index e0aed52af..386c4ea74 100644 --- a/app/scenes/Settings/components/ImageUpload.js +++ b/app/scenes/Settings/components/ImageUpload.js @@ -39,6 +39,7 @@ class DropToImport extends React.Component { }; handleCrop = async () => { + this.isUploading = true; const canvas = this.avatarEditorRef.getImage(); const imageBlob = dataUrlToBlob(canvas.toDataURL()); try { @@ -70,6 +71,7 @@ class DropToImport extends React.Component { return ( + {this.isUploading && } (this.avatarEditorRef = ref)} @@ -91,9 +93,8 @@ class DropToImport extends React.Component { defaultValue="1" onChange={this.handleZoom} /> - {this.isUploading && } - {submitText} + {this.isUploading ? 'Uploading…' : submitText}