Merge pull request #241 from orangemug/feature/private-public-gist

Public/private gists

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>
-      {' '}
+      <div className="maputnik-modal-sub-section">
-      <CheckboxInput
+        <CheckboxInput
-        value={this.state.preview}
+          value={this.state.public}
-        name='gist-style-preview'
+          name='gist-style-public'
-        onChange={this.onPreviewChange.bind(this)}
+          onChange={this.onPublicChange.bind(this)}
-      />
+        />
-      <span> Include preview</span>
+        <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

src/styles/_components.scss

@@ -46,6 +46,7 @@
 
 // BUTTON
 .maputnik-button {
+  display: inline-block;
   cursor: pointer;
   background-color: $color-midgray;
   color: $color-lowgray;

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;
 }