From 9bf3046d4c1c356ddbad502d768d84a8dbf207da Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 2 Feb 2018 17:21:59 +0000
Subject: [PATCH] Public/private gists added. Fixes #238

Gists are now private by default with a option for public.
---
 src/components/modals/ExportModal.jsx | 33 ++++++++++++++++++++-------
 src/styles/_components.scss           |  1 +
 src/styles/_modal.scss                |  4 ++++
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index 56a6481..674b20f 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -26,6 +26,7 @@ class Gist extends React.Component {
     super(props);
     this.state = {
       preview: false,
+      public: false,
       saving: false,
       latestGist: null,
     }
@@ -94,7 +95,7 @@ class Gist extends React.Component {
     const gh = new GitHub();
     let gist = gh.getGist(); // not a gist yet
     gist.create({
-      public: true,
+      public: this.state.public,
       description: styleTitle,
       files: files
     }).then(function({data}) {
@@ -115,6 +116,13 @@ class Gist extends React.Component {
     })
   }
 
+  onPublicChange(value) {
+    this.setState({
+      ...this.state,
+      public: value
+    })
+  }
+
   changeMetadataProperty(property, value) {
     const changedStyle = {
       ...this.props.mapStyle,
@@ -167,13 +175,22 @@ class Gist extends React.Component {
         <MdFileDownload />
         Save to Gist (anonymous)
       </Button>
-      {' '}
-      <CheckboxInput
-        value={this.state.preview}
-        name='gist-style-preview'
-        onChange={this.onPreviewChange.bind(this)}
-      />
-      <span> Include preview</span>
+      <div className="maputnik-modal-sub-section">
+        <CheckboxInput
+          value={this.state.public}
+          name='gist-style-public'
+          onChange={this.onPublicChange.bind(this)}
+        />
+        <span> Public gist</span>
+      </div>
+      <div className="maputnik-modal-sub-section">
+        <CheckboxInput
+          value={this.state.preview}
+          name='gist-style-preview'
+          onChange={this.onPreviewChange.bind(this)}
+        />
+        <span> Include preview</span>
+      </div>
       {this.state.preview ?
           <div>
             <InputBlock
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 5e6e12d..6ac5ce5 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -46,6 +46,7 @@
 
 // BUTTON
 .maputnik-button {
+  display: inline-block;
   cursor: pointer;
   background-color: $color-midgray;
   color: $color-lowgray;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 6bd315c..897a836 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -21,6 +21,10 @@
   flex-shrink: 0;
 }
 
+.maputnik-modal-sub-section {
+  margin-top: $margin-1;
+}
+
 .maputnik-modal-section--shrink {
   flex-shrink: 1;
 }