Add git addon as a core addon

addons/git/client.js

@@ -0,0 +1,14 @@
+define(["views/dialog"], function(GitDialog) {
+    var commands = codebox.require("core/commands");
+    var app = codebox.require("core/app");
+    var dialogs = codebox.require("utils/dialogs");
+
+    // Add opening command
+    commands.register("addons.git", {
+        title: "GIT",
+        icon: "code-fork"
+    }, function() {
+        dialogs.open(GitDialog);
+    });
+});
+

addons/git/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "git",
+    "version": "0.0.3",
+    "title": "GIT",
+    "description": "Integration of Git into your workspace.",
+    "homepage": "https://github.com/FriendCode/codebox-addon-git",
+    "license": "Apache",
+    "author": {
+        "name": "Samy Pessé",
+        "email": "[email protected]",
+        "url": "http://samypesse.fr"
+    },
+    "client": {
+        "main": "client"
+    }
+}

addons/git/stylesheets/git.less

@@ -0,0 +1,40 @@
+.addon-git-dialog {
+    .modal-body {
+        padding: 0px;
+    }
+    .modal-footer {
+        margin: 0px;
+    }
+
+    .navbar {
+        margin: 0px;
+    }
+
+    .git-commit {
+        padding: 10px;
+        background: #f8f8f8;
+    }
+
+    .git-changes {
+        list-style: none;
+        margin: 0px;
+        padding: 0px;
+
+        .file {
+            margin: 5px 3px;
+            background: #f5f5f5;
+            border-left: 5px solid transparent;
+            padding: 5px;
+
+            &.type-M {
+                border-left-color: #3498db;
+            }
+            &.type-A {
+                border-left-color: #2ecc71;
+            }
+            &.type-R {
+                border-left-color: #e74c3c;
+            }
+        }
+    } 
+}

addons/git/templates/dialog.html

@@ -0,0 +1,46 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-body">
+            <nav class="navbar navbar-default navbar-static-top" role="navigation">
+                <!-- Brand and toggle get grouped for better mobile display -->
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="#">Git</a>
+                </div>
+
+                <!-- Collect the nav links, forms, and other content for toggling -->
+                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
+                    <ul class="nav navbar-nav">
+                        <li class="active"><a href="#git-tab-changes" tabindex="-1" data-toggle="tab">Changes</a></li>
+                    </ul>
+                </div><!-- /.navbar-collapse -->
+            </nav>
+
+            <!-- Tab panes -->
+            <div class="tab-content">
+                <div class="tab-pane fade in active" id="git-tab-changes">
+                    <form class="git-commit">
+                        <div class="form-group">
+                            <textarea class="form-control" rows="2" placeholder="Commit summary"></textarea>
+                        </div>
+                        <button type="submit" class="btn btn-default">Commit</button>
+                        <button type="button" class="btn btn-git-sync btn-default" data-toggle="button"><i class="fa fa-refresh"></i></button>
+                    </form>
+                    <ul class="git-changes">
+                    <% _.each(git.files || {}, function(file, path) { %>
+                        <li class="file type-<%- file.type || 'A' %>"><%- path %></li>
+                    <% }); %>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-default action-close">Close</button>
+        </div>
+    </div>
+</div>

addons/git/views/dialog.js

@@ -0,0 +1,70 @@
+define([
+    "less!stylesheets/git.less"
+], function() {
+    var DialogView = codebox.require("views/dialogs/base");
+    var box = codebox.require("core/box");
+
+    var GitDialog = DialogView.extend({
+        className: "addon-git-dialog modal fade",
+        templateLoader: "addon.git.templates",
+        template: "dialog.html",
+        events: _.extend({}, DialogView.prototype.events,{
+            "submit .git-commit": "submit"
+        }),
+
+        // Constructor
+        initialize: function(options) {
+            var that = this;
+            GitDialog.__super__.initialize.apply(this, arguments);
+
+            that.git = null;
+
+            box.gitStatus().then(function(status) {
+                that.git = status;
+                that.render();
+            });
+            return this;
+        },
+
+        // Template Context
+        templateContext: function() {
+            return {
+                git: this.git
+            };
+        },
+
+        // Render
+        render: function() {
+            if (!this.git) return this;
+            return GitDialog.__super__.render.apply(this, arguments);
+        },
+
+        // Finish rendering
+        finish: function() {
+            return GitDialog.__super__.finish.apply(this, arguments);
+        },
+
+        // Commit (and sync)
+        submit: function(e) {
+            if (e) e.preventDefault();
+
+            var that = this;
+            var sync = this.$(".git-commit .btn-git-sync").hasClass("active");
+            var message = this.$(".git-commit textarea").val();
+
+            if (message.length == 0) {
+                return;
+            }
+
+            box.commit({
+                'message': message
+            }).then(function() {
+                if (sync) return box.sync();
+            }).then(function() {
+                that.close();
+            })
+        }
+    });
+
+    return GitDialog;
+});