Merge pull request onlywei#18 from JakeGinnivan/allchanges

Allchanges
terrimonster · Oct 15, 2014 · c3f70ea · c3f70ea
2 parents f4bd540 + a3707c8
commit c3f70ea
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 18 deletions.
diff --git a/css/explaingit.css b/css/explaingit.css
@@ -1,4 +1,9 @@
 /* styles */
+
+body, html {
+    height: 100%;
+}
+
 .intro p, .concept-container p {
     padding-top: 10px;
 }
@@ -45,7 +50,9 @@ span.cmd {
 }
 
 .svg-container {
-    display: inline-block;
+    margin-left:250px;
+    display: block;
+    overflow: auto;
     border: 1px dotted #AAA;
 }
 
@@ -57,13 +64,41 @@ span.cmd {
     border-bottom: 1px dotted #AAA;
 }
 
+#ExplainGitZen-Container {
+    position: absolute;
+    top: 0; bottom: 0; right: 0; left: 0;
+}
+
+#ExplainGitZen-Container .svg-container {
+    display: inline-block;
+    border: 1px dotted #AAA;
+    position: absolute;
+    top: 0; bottom: 0; right: 0; left: 250px;
+    margin-left: 0;
+}
+
+#ExplainGitZen-Container .svg-container.remote-container {
+    position: absolute;
+    top: 0px; right: 0px; left: auto; bottom: auto;
+    background-color: #EFF1FF;
+    border-left: 1px dotted #AAA;
+    border-bottom: 1px dotted #AAA;
+}
+
+#ExplainGitZen-Container .playground-container {
+    position: absolute;
+    top: 0; bottom: 20px; right: 20px; left: 20px;
+}
+
 .remote-name-display {
     font-weight: bold;
     text-align: right;
 }
 
 .control-box {
     display: inline-block;
+    position: absolute;
+    top: 0px; bottom: 0;
     width: 250px;
     vertical-align: bottom;
     background-color: #000;
@@ -79,6 +114,8 @@ span.cmd {
 
 .control-box .log {
     overflow-y: auto;
+    position: absolute;
+    top: 0px; bottom: 20px; left: 0; right: 0;
     border-bottom: 1px solid #AAA;
 }
 
@@ -88,8 +125,16 @@ span.cmd {
     font-size: 14px;
 }
 
-.control-box .log .command-entry,
+.control-box .log .command-entry {
+    padding-left: 15px;
+    color: #FFF;
+    line-height: 14px;
+    background: url(../images/prompt.gif) no-repeat left center transparent;
+}
+
 .control-box input[type="text"] {
+    position: absolute;
+    bottom: 0; 
     padding-left: 15px;
     color: #FFF;
     line-height: 14px;
@@ -147,8 +192,8 @@ circle.commit.branchless {
 }
 
 .commit-pointer {
-	stroke: #666;
-	stroke-width: 4;
+    stroke: #666;
+    stroke-width: 4;
 }
 
 .merge-pointer {
@@ -175,6 +220,11 @@ g.branch-tag > rect {
 	stroke-width: 2;
 }
 
+g.branch-tag.git-tag > rect {
+	fill: #7FC9FF;
+	stroke: #0026FF;
+}
+
 g.branch-tag.remote-branch > rect {
 	fill: #CCC;
 	stroke: #888;

diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 <link rel="stylesheet" href="css/explaingit.css">
 </head>
 <body>
-<a href="https://github.com/onlywei/explain-git-with-d3">
+<a href="https://github.com/onlywei/explain-git-with-d3" id="fork-me">
   <img style="position: absolute; top: 0; right: 0; border: 0;"
     src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
     alt="Fork me on GitHub">
@@ -62,6 +62,7 @@ <h4>Remote Server</h4>
     <div class="twocol last">
       <h4>&nbsp;</h4>
       <a id="open-push" class="openswitch" href="#">git push</a>
+      <a id="open-tag" class="openswitch" href="#">git tag</a>
     </div>
   </div>
   <div class="row concept-area">
@@ -76,6 +77,20 @@ <h4>&nbsp;</h4>
       </p>
       <div class="playground-container"></div>
     </div>
+    <div id="ExplainGitTag-Container" class="twelvecol concept-container">
+      <p>
+        <span class="cmd">git tag name</span> will create a new tag named "name".
+        Creating tags just creates a new tag pointing to the currently checked out commit.
+      </p>
+      <p>
+        Tags can be deleted using the command <span class="cmd">git tag -d name</span> (coming soon).
+      </p>
+      <p>
+        Type <span class="cmd">git commit</span> and <span class="cmd">git tag</span> commands
+        to your hearts desire until you understand this concept.
+      </p>
+      <div class="playground-container"></div>
+    </div>
     <div id="ExplainGitBranch-Container" class="twelvecol concept-container">
       <p>
         <span class="cmd">git branch name</span> will create a new branch named "name".
@@ -262,10 +277,15 @@ <h2>Specific Examples</h2>
     </div>
     <div class="twocol last">
       <a id="open-freeplay" class="openswitch" href="#">Free Playground</a>
+      <a id="open-zen" class="openswitch" href="#">Zen Mode</a>
     </div>
   </div>
 </div>
 
+<div id="ExplainGitZen-Container" style="display:none">
+    <div class="playground-container"></div>
+</div>
+
 <svg version="1.1" baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -332,6 +352,28 @@ <h2>Specific Examples</h2>
 });
 </script>
 
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-tag'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Tag',
+            baseLine: 0.6,
+            commitData: [
+                {id: 'e137e9b', tags: ['master']}
+            ]
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
 <script type="text/javascript">
 require(['explaingit'], function (explainGit) {
     var openSwitch = document.getElementById('open-checkout'),
@@ -713,5 +755,33 @@ <h2>Specific Examples</h2>
     openSwitch.addEventListener('click', open, false);
 });
 </script>
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-zen'),
+        open;
+
+    open = function () {
+        var elements = document.getElementsByClassName('row');
+        for(var i = 0; i != elements.length; ++i)
+        {
+          elements[i].style.display = 'none';
+        }
+        document.getElementById('fork-me').style.display = 'none';
+        explainGit.reset();
+
+        explainGit.open({
+            name: 'Zen',
+            height: '100%',
+            commitData: [
+                {id: 'e137e9b', tags: ['master']}
+            ],
+            initialMessage:
+                'Have fun.'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
 </body>
-</html>
+</html>
diff --git a/js/controlbox.js b/js/controlbox.js
@@ -23,11 +23,9 @@ define(['d3'], function () {
             cBoxContainer = container.append('div')
                 .classed('control-box', true);
 
-            cBoxContainer.style('height', this.historyView.height + 5 + 'px');
 
             log = cBoxContainer.append('div')
-                .classed('log', true)
-                .style('height', this.historyView.height - 20 + 'px');
+                .classed('log', true);
 
             input = cBoxContainer.append('input')
                 .attr('type', 'text')
@@ -205,6 +203,30 @@ define(['d3'], function () {
             }
         },
 
+        tag: function (args) {
+            if (args.length < 1) {
+                this.info(
+                    'You need to give a tag name. ' +
+                    'Normally if you don\'t give a name, ' +
+                    'this command will list your local tags on the screen.'
+                );
+
+                return;
+            }
+
+            while (args.length > 0) {
+                var arg = args.shift();
+
+                try {
+                    this.historyView.tag(arg);
+                } catch (err) {
+                    if (err.message.indexOf('already exists') === -1) {
+                        throw new Error(err.message);
+                    }
+                }
+            }
+        },
+
         reset: function (args) {
             while (args.length > 0) {
                 var arg = args.shift();
@@ -456,4 +478,4 @@ define(['d3'], function () {
     };
 
     return ControlBox;
-});
+});