Workspace UI revamp

git-webui/release/share/git-webui/webui/css/git-webui.css

@@ -857,6 +857,68 @@ body {
 #workspace-view .diff-line-offset {
   cursor: pointer;
 }
+#changedFilesContainer {
+  max-width: 100% !important;
+  margin: 0 10px;
+  overflow-y: auto;
+}
+#changedFilesContainer .file-area {
+  padding-top: 15px;
+}
+#changedFilesContainer .file-area .select-all {
+  border-bottom: 1px solid lightgray;
+}
+#changedFilesContainer .file-area .select-all .form-check-label {
+  font-size: 1rem;
+  padding-top: 1px;
+  padding-left: 8px;
+}
+#changedFilesContainer .file-area .select-all .form-check-input {
+  margin-bottom: 2px;
+}
+#changedFilesContainer .file-area .diffed-file {
+  background-color: #7fceff;
+}
+#changedFilesContainer .file-area .form-check {
+  padding: 3px 5px 3px 15px;
+}
+#changedFilesContainer .file-area .changes-check:hover {
+  background-color: rgba(61, 174, 253, 0.2);
+}
+#changedFilesContainer .file-area .file-item-label {
+  padding-top: 1px;
+  padding-left: 8px;
+  font-size: 1rem;
+}
+#changedFilesContainer .file-area .form-check-input {
+  margin-left: -12px !important;
+}
+#changedFilesContainer .file-area .A::after {
+  content: "Added";
+  position: absolute;
+  right: 5px;
+}
+#changedFilesContainer .file-area .D::after {
+  content: "Deleted";
+  position: absolute;
+  right: 5px;
+}
+#changedFilesContainer .file-area .M::after {
+  content: "Modified";
+  position: absolute;
+  right: 5px;
+}
+#changedFilesContainer .file-area .R::after {
+  content: "Renamed";
+  position: absolute;
+  right: 5px;
+}
+#changedFilesContainer .commit-area {
+  padding-top: 15px;
+}
+#changedFilesContainer .commit-area .button-group .btn {
+  margin-right: 5px;
+}
 #commit-explorer-view #commit-explorer-navigator-view .panel .panel-body {
   flex: 1 1 0px;
   -webkit-flex: 1 1 0px;

git-webui/release/share/git-webui/webui/js/git-webui.js

@@ -797,7 +797,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
         workspaceElement.click(function (event) {
             $("*", self.element).removeClass("active");
             workspaceElement.addClass("active");
-            self.mainView.workspaceView.update("stage");
+            self.mainView.workspaceView.show();
         });
 
         var stashElement = $("#sidebar-stash h4", self.element);
@@ -2106,7 +2106,7 @@ webui.HistoryView = function(mainView) {
     self.element.appendChild(self.commitView.element);
     self.mainView = mainView;
 };
-
+ 
 /*
  * == WorkspaceView ===========================================================
  */
@@ -2116,13 +2116,14 @@ webui.WorkspaceView = function(mainView) {
 
     self.show = function() {
         mainView.switchTo(self.element);
+        self.update("stage");
     };
 
     self.update = function(mode) {
-        self.show();
         self.workingCopyView.update();
         self.stagingAreaView.update();
         self.commitMessageView.update();
+        self.newChangedFilesView.update();
         if (self.workingCopyView.getSelectedItemsCount() + self.stagingAreaView.getSelectedItemsCount() == 0) {
             self.diffView.update(undefined, undefined, undefined, mode);
         }
@@ -2137,13 +2138,17 @@ webui.WorkspaceView = function(mainView) {
     workspaceDiffView.appendChild(self.diffView.element);
     var workspaceEditor = $("#workspace-editor", self.element)[0];
     self.workingCopyView = new webui.ChangedFilesView(self, "working-copy", "Working Copy");
-    workspaceEditor.appendChild(self.workingCopyView.element);
+    // workspaceEditor.appendChild(self.workingCopyView.element);
     self.commitMessageView = new webui.CommitMessageView(self);
-    workspaceEditor.appendChild(self.commitMessageView.element);
+    // workspaceEditor.appendChild(self.commitMessageView.element);
     self.stagingAreaView = new webui.ChangedFilesView(self, "staging-area", "Staging Area");
-    workspaceEditor.appendChild(self.stagingAreaView.element);
+    // workspaceEditor.appendChild(self.stagingAreaView.element);
+
+    self.newChangedFilesView = new webui.NewChangedFilesView(self);
+    workspaceEditor.appendChild(self.newChangedFilesView.element);
 };
 
+
 /*
  * == ChangedFilesView ========================================================
  */
@@ -2496,6 +2501,249 @@ webui.ChangedFilesView = function(workspaceView, type, label) {
     self.filesCount = 0;
 };
 
+/*
+ * ==new ChangedFilesView ====================================================
+ */
+
+webui.NewChangedFilesView = function(workspaceView) {
+
+    var self = this;
+
+    self.update = function() {
+        $(fileList).empty();
+        selectedItems = [];
+        $('#stashBtn').prop("disabled", true);
+        $('#discardBtn').prop("disabled", true);
+        $('#commitBtn').prop("disabled", true);
+        $("#commitMsg").val("");
+        $("#commitMsgDetail").val("");
+        $('#selectAllFiles').prop('checked', false);
+
+        webui.git("status -u --porcelain", function(data) {
+            $.get("api/uncommitted", function (uncommitted) {
+                var uncommittedItems = JSON.parse(uncommitted)["current user's changes"];
+                self.filesCount = 0;
+                function addItemToFileList(fileList, workingTreeStatus, model) {
+                    var formCheck = $('<div class="form-check changes-check"></div>');
+                    formCheck.attr("data-filename", model);
+
+                    var checkboxInput = $('<input class="form-check-input changes-checkbox" type="checkbox" value="">');
+                    checkboxInput.attr('id', model);
+                    formCheck.append(checkboxInput);
+
+                    var checkboxLabel = $('<label class="form-check-label file-item-label"></label>').text(model);
+                    checkboxLabel.addClass(workingTreeStatus);
+                    checkboxLabel.attr('for', model);
+                    formCheck.append(checkboxLabel);
+
+                    formCheck.prependTo(fileList)[0];
+                    // item.model = model;
+                    // item.appendChild(document.createTextNode(model));
+                    // $(item).click(self.select);
+
+                }
+                webui.splitLines(data).forEach(function(line) {
+                    var indexStatus = line[0];
+                    var workingTreeStatus = line[1];
+                    line = line.substring(3);
+                    var splitted = line.split(" -> ");
+                    var model;
+                    if (splitted.length > 1) {
+                        model = splitted[1];
+                    } else {
+                        model = line;
+                    }
+
+
+                    ++self.filesCount;
+                    var isForCurrentUser;
+                    if(model.indexOf(" ") > -1){
+                        isForCurrentUser = (uncommittedItems.indexOf(model.substring(1, model.length-1)) > -1);
+                    } else {
+                        isForCurrentUser = (uncommittedItems.indexOf(model) > -1);
+                    }
+
+                    if (isForCurrentUser) {
+                        addItemToFileList(fileList, workingTreeStatus, model);
+                    }
+
+                });
+                $(".changes-checkbox").change(function() {
+                    self.afterFileChecked(this);
+                });
+
+                $("#commitMsg").on("input", function() {
+                    self.updateButtons();
+                });
+
+                $('.changes-check').on("click", function() {
+                    self.unhighlightPrevious();
+                    $(this).addClass("diffed-file");
+                    fileToDiff = $(this).attr("data-filename");
+                    self.refreshDiff();
+
+                });
+
+                $('#selectAllFiles').on("change", function() {
+                    if (this.checked) {
+                        self.selectAll();
+                    } else {
+                        self.deselectAll();
+                    }
+                });
+                $("#commitBtn").off("click");
+                $("#commitBtn").on("click", function() {
+                    var commitMessage = $('#commitMsg').val() + "\n" + $("#commitMsgDetail").val()
+                    self.commit(commitMessage);
+                });
+
+                $("#discardBtn").off("click");
+                $("#discardBtn").on("click", function() {
+                    self.discard();
+                });
+
+                $("#stashBtn").off("click");
+                $("#stashBtn").on("click", function() {
+                    self.stash();
+                });
+            });
+        });
+    }
+
+    self.afterFileChecked = function(element) {
+        var fileName = element.id;
+        var fileIndex = selectedItems.indexOf(fileName);
+        if (element.checked) {
+            if (fileIndex == -1) {
+                selectedItems.push(fileName);
+            }
+            if (selectedItems.length == Array.from(fileList.children).length) {
+                $('#selectAllFiles').prop('checked', true);
+            } 
+        } else {
+            $('#selectAllFiles').prop('checked', false);
+            if (fileIndex > -1) {
+                selectedItems.splice(fileIndex, 1);
+            }
+        }
+        self.updateButtons();
+    }
+
+    self.handleCheckEvent = function(file) {
+        var fileIndex = selectedItems.indexOf(file);
+        if (fileIndex > -1) {
+            selectedItems.splice(fileIndex, 1);
+        } else {
+            selectedItems.push(file);
+        }
+        self.updateButtons();
+    }
+
+    self.updateButtons = function() {
+        if (self.getSelectedItemsCount() > 0) {
+            $('#stashBtn').prop("disabled", false);
+            $('#discardBtn').prop("disabled", false);
+            if (!self.commitMsgEmpty()) {
+                $('#commitBtn').prop("disabled", false);
+            } else {
+                $('#commitBtn').prop("disabled", true);
+            }
+        } else {
+            $('#stashBtn').prop("disabled", true);
+            $('#discardBtn').prop("disabled", true);
+            $('#commitBtn').prop("disabled", true);
+        }
+
+    }
+
+    self.commitMsgEmpty = function() {
+        return $('#commitMsg').val().length == 0;
+    }
+
+    self.getSelectedItemsCount = function() {
+        return selectedItems.length;
+    }
+
+    self.selectAll = function() {
+        Array.from(fileList.children).forEach(function(fileDiv, index) {
+            fileDiv.children[0].checked = true;
+            self.afterFileChecked(fileDiv.children[0]);
+        });
+    }
+
+    self.deselectAll = function() {
+        Array.from(fileList.children).forEach(function(fileDiv, index) {
+            fileDiv.children[0].checked = false;
+            self.afterFileChecked(fileDiv.children[0])
+        });
+    }
+
+    self.unhighlightPrevious = function(){
+        $('[data-filename="' + fileToDiff + '"]').removeClass("diffed-file");
+    }
+
+    self.refreshDiff = function() {
+        fileToDiff;
+        workspaceView.diffView.update("diff", [], fileToDiff, "stage");
+    }
+
+    self.stash = function() {
+        var selectedFilesAsString = selectedItems.join(" ");
+        webui.git("stash push -- " + selectedFilesAsString, function(output){
+            webui.showSuccess(output);
+            workspaceView.update();
+        });
+    }
+
+    self.discard = function() {
+        var selectedFilesAsString = selectedItems.join(" ");
+        webui.git("restore -- " + selectedFilesAsString, function(output) {
+            workspaceView.update();
+        });
+    }
+
+    self.commit = function(message) {
+        var selectedFilesAsString = selectedItems.join(" ");
+        webui.git("add " + selectedFilesAsString);
+        webui.git('commit -m "' + message + '" -- ' + selectedFilesAsString, function(output) {
+            webui.showSuccess(output);
+            workspaceView.update()
+        });
+    }
+
+    self.element = $(
+        '<div id="changedFilesContainer" class="container">' +
+            '<div class="row">' +
+                '<div class="col-sm-6 file-area">' +
+                    '<div class="form-check select-all">' + 
+                        '<input class="form-check-input" id="selectAllFiles" type="checkbox" value="">' +
+                        '<label class="form-check-label" for="selectAllFiles"> Select All Files </label>' +
+                    '</div>' +
+                    '<div class="changed-files-list"></div>' + 
+                '</div>' +
+                '<div class="commit-area col-sm-6">' +
+                    '<div class="form-group">' +
+                        '<input type="area" class="form-control" id="commitMsg" placeholder="Enter commit message (required, 72 character limit)">' +
+                    '</div>' +
+                    '<div class="form-group">' +
+                        '<textarea class="form-control" id="commitMsgDetail" rows="4" placeholder="Enter commit details (optional)"></textarea>' +
+                    '</div>' +
+                    '<div class="button-group">' +
+                        '<button type="button" class="btn btn-primary file-action-button" id="commitBtn" disabled> Commit </button>' +
+                        '<button type="button" class="btn btn-secondary file-action-button" id="stashBtn" disabled> Stash </button>' +
+                        '<button type="button" class="btn btn-danger file-action-button" id="discardBtn" disabled> Discard </button>' +
+                    '</div>' +
+                '</div>' +
+            '</div>' +
+        '</div>'
+    )[0];
+    var fileListContainer = $(".file-area", self.element)[0];
+    var fileList = $(".changed-files-list", fileListContainer)[0];
+    var selectedItems = [];
+    var fileToDiff;
+
+}
+
 /*
  * == CommitMessageView =======================================================
  */