markuapad 0.2.5 → 0.2.6

data/src/jsx/main.jsx

@@ -8,6 +8,7 @@ import LivePreview from "./live_preview";
 import FileAccessor from "../file_accessor";
 import ImageModal from "./image_modal";
 import _ from "underscore";
+import MergeConflictModal from './merge_conflict_modal'
 
 import { getCached } from "../util"
 
@@ -21,27 +22,18 @@ class Main extends React.Component {
       imageFile: null,
       previewState: 'closed',
       inLiveMode: this.props.options.enablePreview,
-      previewHtml: ""
+      previewHtml: "",
+      isResolvingMergeConflicts: false,
+      mergeConflicts: null
     }
 
-    // Autobind
-    this.onChangeFile = this.onChangeFile.bind(this);
-    this.onGeneratePreview = this.onGeneratePreview.bind(this);
-    this.onPreviewReady = this.onPreviewReady.bind(this);
-    this.onClosePreview = this.onClosePreview.bind(this);
-    this.toggleLiveMode = this.toggleLiveMode.bind(this);
-    this.onBookContentChanged = this.onBookContentChanged.bind(this);
-    this.getWorkspaceClass = this.getWorkspaceClass.bind(this);
-    this.onManuscriptChange = this.onManuscriptChange.bind(this);
-    this.onFileAdded = this.onFileAdded.bind(this);
-    this.onPreviewImage = this.onPreviewImage.bind(this);
-
     // File access hooks
     FileAccessor.onDelete(this.onManuscriptChange);
     FileAccessor.onManuscriptChange(this.onManuscriptChange);
     FileAccessor.onAdd(this.onFileAdded);
     FileAccessor.onProgress(this.onProgress);
     FileAccessor.onProgressStarted(this.onProgressStarted);
+    FileAccessor.onMergeConflicts(this.onMergeConflicts);
   }
 
   // Lifecycle methods
@@ -51,12 +43,25 @@ class Main extends React.Component {
       this.onGeneratePreview();
   }
 
+  // parameter conflicts is an array of tuples.
+  // { filename: String, serverVersion: String, clientVersion: String }
+  onMergeConflicts = (conflicts) => {
+    this.setState({
+      mergeConflicts: conflicts,
+      isResolvingMergeConflicts: true
+    })
+  }
+
+  doneResolvingConflicts = () => {
+    this.setState({ mergeConflicts: null, isResolvingMergeConflicts: false })
+  }
+
   // File event operations
-  onFileAdded(file) {
+  onFileAdded = (file) => {
     this.setState({ currentFile: file });
   }
 
-  onManuscriptChange() {
+  onManuscriptChange = () => {
     // Re-preview
     if (this.state.inLiveMode)
       this.onGeneratePreview();
@@ -76,16 +81,16 @@ class Main extends React.Component {
     this.setState({ inProgress: true })
   }
 
-  onPreviewImage(file) {
+  onPreviewImage = (file) => {
     this.setState({ imageFile: file });
   }
 
-  onChangeFile(file) {
+  onChangeFile = (file) => {
     this.setState({ currentFile: file });
   }
 
   // Preview based methods
-  onPreviewReady(errors, html) {
+  onPreviewReady = (errors, html) => {
     // If someone has already stopped the preview then just bail
     if (this.state.previewState === "closed")
       return
@@ -93,17 +98,17 @@ class Main extends React.Component {
     this.setState({ previewHtml: html, previewState: "done", previewErrors: errors })
   }
 
-  onGeneratePreview(e) {
+  onGeneratePreview = (e) => {
     // Call out to the markua processor
     this.setState({ previewState: "previewing" });
     this.props.markua.run(this.onPreviewReady, { cursor: getCached("markuapad_cursor") })
   }
 
-  onClosePreview(e) {
+  onClosePreview = (e) => {
     this.setState({ previewState: "closed" })
   }
 
-  toggleLiveMode() {
+  toggleLiveMode = () => {
     // Clear the preview state here as well, so we don't accidentally open a preview
     this.setState({ inLiveMode: !this.state.inLiveMode, previewState: "closed" }, () => {
       window.dispatchEvent(new Event('resize'));
@@ -114,12 +119,12 @@ class Main extends React.Component {
     });
   }
 
-  onBookContentChanged() {
+  onBookContentChanged = () => {
     if (this.state.inLiveMode)
       this.onGeneratePreview();
   }
 
-  getWorkspaceClass() {
+  getWorkspaceClass = () => {
     let workspaceClass = `workspace`;
     workspaceClass += this.state.inLiveMode ? ' live' : '';
     return workspaceClass;
@@ -151,6 +156,7 @@ class Main extends React.Component {
         </section>
         { this.state.inLiveMode ? <span /> : <Preview key='preview' inLiveMode={this.state.inLiveMode} onClosePreview={this.onClosePreview} html={this.state.previewHtml} previewState={this.state.previewState} previewErrors={this.state.previewErrors} /> }
         { this.state.imageFile ? <ImageModal file={this.state.imageFile} onClose={ _.partial(this.onPreviewImage, null) } /> : null }
+        { this.state.isResolvingMergeConflicts ? <MergeConflictModal conflicts={this.state.mergeConflicts} onClose={this.doneResolvingConflicts} /> : null }
       </section>
     );
   }

data/src/jsx/merge_conflict_modal.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import FileAccessor from "../file_accessor"
+import _ from 'underscore'
+
+const delimeter = (type, filename) => {
+  return `\n\n================================= ${type} version of ${filename} =================================\n\n`
+}
+
+class MergeConflictModal extends React.Component {
+  static propTypes = {
+    conflicts: React.PropTypes.array.isRequired,
+    onClose: React.PropTypes.func.isRequired
+  }
+
+  state = {
+    currentConflictIndex: 0
+  }
+
+  resolveConflict = (method) => {
+    let conflict = this.props.conflicts[this.state.currentConflictIndex];
+
+    switch (method) {
+      case 'client':
+        break;
+      case 'server':
+        // Save the file on the server.
+        FileAccessor.save(conflict.filename, 'manuscript', conflict.serverVersion)
+        break;
+      case 'both':
+        // Concat both versions separated by a delimeter
+        FileAccessor.save(conflict.filename, 'manuscript', delimeter('Local', conflict.filename) +
+          conflict.clientVersion +
+          delimeter('Server', conflict.filename) +
+          conflict.serverVersion)
+        break;
+    }
+
+    if (this.state.currentConflictIndex + 1 >= this.props.conflicts.length) {
+      // We are done.
+      this.props.onClose()
+    } else {
+      // Increase the index
+      this.setState({ currentConflictIndex: this.state.currentConflictIndex + 1 })
+    }
+  }
+
+  renderCurrentConflict() {
+    return (
+      <div className="conflict-wrapper">
+        <section className="conflict-content client-version">
+          <h6>Your local copy</h6>
+          <pre>
+            { this.props.conflicts[this.state.currentConflictIndex].clientVersion }
+          </pre>
+        </section>
+        <section className="conflict-content server-version">
+          <h6>Server copy</h6>
+          <pre>
+            { this.props.conflicts[this.state.currentConflictIndex].serverVersion }
+          </pre>
+        </section>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="modal merge-conflicts-modal">
+        <div className="modal-fade-screen">
+          <div className="modal-inner">
+            <div className="modal-close" onClick={ this.props.onClose }></div>
+            <h4>Conflicting changes for { this.props.conflicts[this.state.currentConflictIndex].filename }</h4>
+            <p className="conflict-explanation">
+              Uh oh!  You have conflicting changes for { this.props.conflicts[this.state.currentConflictIndex].filename }. This
+              probably happened because you were using the writing tools without
+              an active internet connection. To resolve this, review the differences here, and select the option
+              you want at the bottom. If you choose to 'keep both', then we will combine the two versions into one file so you
+              can manually merge them.
+            </p>
+            { this.renderCurrentConflict() }
+            <ul className="conflict-actions">
+              <li>
+                <a onClick={_.partial(this.resolveConflict, 'client')}>Keep local version</a>
+              </li>
+              <li>
+                <a onClick={_.partial(this.resolveConflict, 'server')}>Keep remote version</a>
+              </li>
+              <li>
+                <a onClick={_.partial(this.resolveConflict, 'both')}>Keep both versions</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MergeConflictModal;

data/src/styles/_merge_conflicts.scss

@@ -0,0 +1,51 @@
+.markuapad .merge-conflicts-modal {
+  .modal-fade-screen {
+    padding-top: 4em;
+  }
+
+  .modal-inner {
+    max-height: 95%;
+    width: 80%;
+  }
+
+  .conflict-explanation {
+    padding: 1em;
+    background: #fcc;
+    border: thin solid #faa;
+    text-shadow: 0 1px 0 #fff;
+    border-radius: 4px;
+  }
+
+  .conflict-wrapper {
+    @include display(flex);
+    @include flex(1 1 100%);
+    @include flex-flow(row nowrap);
+    padding: 20px 0;
+  }
+
+  .conflict-content {
+    @include flex(1);
+    padding: 1em;
+
+    &.client-version {
+      border-right: thin dashed #ddd;
+    }
+
+    h6 {
+      border-bottom: thin dashed #ddd;
+      font-weight: 700;
+      padding-bottom: 1em;
+    }
+  }
+
+  .conflict-actions {
+    text-align: center;
+    li {
+      display: inline-block;
+      @extend %nav-button;
+      > a {
+        border-color: #eee;
+      }
+    }
+  }
+}

data/src/styles/_workspace.scss

@@ -2,7 +2,7 @@
   @include display(flex);
   @include flex(1 1 100%);
   @include flex-flow(row nowrap);
-
+  
   &.live {
     bottom: 0;
     left: 10px;

data/src/styles/app.scss

@@ -28,6 +28,7 @@
 @import "preview";
 @import "workspace";
 @import "modal";
+@import "merge_conflicts";
 
 .markuapad {
   @include display(flex);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: markuapad
 version: !ruby/object:Gem::Version
-  version: 0.2.5
+  version: 0.2.6
 platform: ruby
 authors:
 - Braden Simpson
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-10 00:00:00.000000000 Z
+date: 2015-08-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -85,6 +85,7 @@ files:
 - src/jsx/image_modal.jsx
 - src/jsx/live_preview.jsx
 - src/jsx/main.jsx
+- src/jsx/merge_conflict_modal.jsx
 - src/jsx/preview.jsx
 - src/jsx/toolbar.jsx
 - src/markuapad.js
@@ -93,6 +94,7 @@ files:
 - src/styles/_file_browser.scss
 - src/styles/_grid-settings.scss
 - src/styles/_layout.scss
+- src/styles/_merge_conflicts.scss
 - src/styles/_modal.scss
 - src/styles/_preview.scss
 - src/styles/_toolbar.scss