Update and Use Latest Octicons

CHANGELOG.md

@@ -3,13 +3,15 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 Use the following format for additions: ` - VERSION: [feature/patch (if applicable)] Short description of change. Links to relevant issues/PRs.`
 
+- Unreleased:
+  - Updated Octicons
 - 1.4.48: fix the width value of the header logo [#1221](https://github.com/FredrikNoren/ungit/pull/1221)
-- 1.4.47: make diff2html line numbers and +/- prefixes unnselectable [#1214](https://github.com/FredrikNoren/ungit/issues/1214), [#1215](https://github.com/FredrikNoren/ungit/pull/1215)
+- 1.4.47: make diff2html line numbers and +/- prefixes unselectable [#1214](https://github.com/FredrikNoren/ungit/issues/1214), [#1215](https://github.com/FredrikNoren/ungit/pull/1215)
 - 1.4.46: force git out put to be in English within ungit [#1208](https://github.com/FredrikNoren/ungit/pull/1208)
-- 1.4.45: Improve styling of .gitignore edit dialog
+- 1.4.45: Improve styling of .gitignore edit dialog [#1205](https://github.com/FredrikNoren/ungit/pull/1205)
 - 1.4.44: add config to disable numstat in staged diff to better performance [#1193](https://github.com/FredrikNoren/ungit/issues/1193)
 - 1.4.43:
-  - fix gitignore manual edit not being saved [644](https://github.com/FredrikNoren/ungit/issues/644)
+  - fix gitignore manual edit not being saved [#644](https://github.com/FredrikNoren/ungit/issues/644)
   - fix issue with detached git processes on some OS and timeout not being enforced.
   - simplify `maxSearchIteration` enforcement for git.log()
   - change `alwaysLoadActiveBranch` boolean config to `maxActiveBranchSearchIteration` numeric config
@@ -38,13 +40,13 @@ Use the following format for additions: ` - VERSION: [feature/patch (if applicab
 - 1.4.29:
   - Add `--no-optional-locks` if git version is appropriate [#1105](https://github.com/FredrikNoren/ungit/issues/1105)
   - Ensure ungit server to bind to `127.0.0.1` [#988](https://github.com/FredrikNoren/ungit/issues/988)
-  - Add node highlight on mouse hover on relationsip path [#1093](https://github.com/FredrikNoren/ungit/issues/1093)
+  - Add node highlight on mouse hover on relationship path [#1093](https://github.com/FredrikNoren/ungit/issues/1093)
 - 1.4.28: adding raven locally for offline access. [#1107](https://github.com/FredrikNoren/ungit/pull/1107)
 - 1.4.27: logic change for the merge conflict resolution
 - 1.4.26: add a way to preconfigure repo lists [#1106](https://github.com/FredrikNoren/ungit/issues/1106)
 - 1.4.25: add git pgp signing docs and code [#740](https://github.com/FredrikNoren/ungit/issues/740)
 - 1.4.24:
-  - change `/api/log` -> `/api/gitlog` as soem ad blockers really hates This
+  - change `/api/log` -> `/api/gitlog` as some ad blockers really hates This
   - Fix excessive error messaging when disconnected from internet
   - Fix Raven initialization error when disconnected from internet
 - 1.4.23:

Gruntfile.js

@@ -12,9 +12,9 @@ const maxConcurrency = 5;
 module.exports = (grunt) => {
   const packageJson = grunt.file.readJSON('package.json');
   const lessFiles = {
-    "public/css/styles.css": ["public/less/styles.less", "public/vendor/css/animate.css", "public/less/d2h.less"]
-  }
-  fs.readdirSync("./components").map((component) => `components/${component}/${component}`)
+    'public/css/styles.css': ['public/less/styles.less', 'public/vendor/css/animate.css', 'public/less/d2h.less']
+  };
+  fs.readdirSync('./components').map((component) => `components/${component}/${component}`)
     .forEach((str) => lessFiles[`${str}.css`] = `${str}.less`);
 
   grunt.initConfig({
@@ -104,10 +104,10 @@ module.exports = (grunt) => {
     imageEmbed: {
       default: {
         files: {
-          "public/css/styles.css": [ "public/css/styles.css" ],
-          "components/graph/graph.css": ["components/graph/graph.css"],
-          "components/header/header.css": ["components/header/header.css"],
-          "components/staging/staging.css": ["components/staging/staging.css"],
+          'public/css/styles.css': [ 'public/css/styles.css' ],
+          'components/graph/graph.css': ['components/graph/graph.css'],
+          'components/header/header.css': ['components/header/header.css'],
+          'components/staging/staging.css': ['components/staging/staging.css'],
         },
         options: {
           deleteAfterEncoding: false
@@ -184,8 +184,6 @@ module.exports = (grunt) => {
       main: {
         files: [
           // includes files within path
-          { expand: true, flatten: true, src: ['node_modules/octicons/octicons/octicons.ttf'], dest: 'public/css/' },
-          { expand: true, flatten: true, src: ['node_modules/octicons/octicons/octicons.woff'], dest: 'public/css/' },
           { expand: true, flatten: true, src: ['node_modules/nprogress/nprogress.css'], dest: 'public/css/' },
           { expand: true, flatten: true, src: ['node_modules/jquery-ui-bundle/jquery-ui.min.css'], dest: 'public/css/'},
           { expand: true, flatten: true, src: ['node_modules/raven-js/dist/raven.min.js'], dest: 'public/js/' }
@@ -300,6 +298,7 @@ module.exports = (grunt) => {
     b.require('nprogress', { expose: 'nprogress' });
     b.require('jquery', { expose: 'jquery' });
     b.require('dnd-page-scroll', { expose: 'dnd-page-scroll' });
+    b.require('@primer/octicons', { expose: 'octicons' });
     const outFile = fs.createWriteStream('./public/js/ungit.js');
     outFile.on('close', () => done());
     b.bundle().pipe(outFile);
@@ -341,7 +340,7 @@ module.exports = (grunt) => {
 
   const bumpDependency = (packageJson, packageName) => {
     return new Bluebird((resolve, reject) => {
-      const dependencyType = packageJson['dependencies'][packageName] ? 'dependencies' : 'devDependencies'
+      const dependencyType = packageJson['dependencies'][packageName] ? 'dependencies' : 'devDependencies';
       let currentVersion = packageJson[dependencyType][packageName];
       if (currentVersion[0] == '~' || currentVersion[0] == '^') currentVersion = currentVersion.slice(1);
       npm.commands.show([packageName, 'versions'], true, (err, data) => {
@@ -356,24 +355,24 @@ module.exports = (grunt) => {
         resolve();
       });
     });
-  }
+  };
 
   const updatePackageJsonBuildVersion = (commitHash) => {
     const packageJson = JSON.parse(fs.readFileSync('package.json'));
     packageJson.version += `+${commitHash}`;
     fs.writeFileSync('package.json', `${JSON.stringify(packageJson, null, 2)}\n`);
-  }
+  };
   grunt.registerTask('travisnpmpublish', 'Automatically publish to NPM via travis.', function() {
     const done = this.async();
     if (process.env.TRAVIS_BRANCH != 'master' || (process.env.TRAVIS_PULL_REQUEST && process.env.TRAVIS_PULL_REQUEST != 'false')) {
       console.log('Skipping travis npm publish');
       return done();
     }
-    childProcess.exec("git rev-parse --short HEAD", (err, stdout, stderr) => {
+    childProcess.exec('git rev-parse --short HEAD', (err, stdout, stderr) => {
       const hash = stdout.trim();
       updatePackageJsonBuildVersion(hash);
       fs.writeFileSync('.npmrc', '//registry.npmjs.org/:_authToken=' + process.env.NPM_TOKEN);
-      childProcess.exec("npm publish", (err) => { done(err); });
+      childProcess.exec('npm publish', (err) => { done(err); });
     });
   });
 
@@ -388,18 +387,18 @@ module.exports = (grunt) => {
     const done = this.async();
 
     fs.readdirAsync('./nmclicktests')
-      .then((files) => files.filter((file) => file.startsWith("spec.")))
+      .then((files) => files.filter((file) => file.startsWith('spec.')))
       .then((tests) => {
-        const genericIndx = tests.indexOf("spec.generic.js")
+        const genericIndx = tests.indexOf('spec.generic.js');
         if (genericIndx > -1) {
           tests.splice(0, 0, tests.splice(genericIndx, 1)[0]);
         }
         return tests;
       }).then((tests) => {
         grunt.log.writeln('Running click tests in parallel... (this will take a while...)');
         return Bluebird.map(tests, (file) => {
-          let output = "";
-          const outStream = (data) => output += data
+          let output = '';
+          const outStream = (data) => output += data;
 
           grunt.log.writeln(cliColor.set(`Clicktest started! \t${file}`, 'blue'));
           return new Bluebird((resolve, reject) => {
@@ -422,9 +421,9 @@ module.exports = (grunt) => {
         let isSuccess = true;
         results.forEach((result) => {
           if (!result.isSuccess) {
-            grunt.log.writeln(`---- start of ${result.name} log ----`)
+            grunt.log.writeln(`---- start of ${result.name} log ----`);
             grunt.log.writeln(result.output);
-            grunt.log.writeln(`----- end of ${result.name} log -----`)
+            grunt.log.writeln(`----- end of ${result.name} log -----`);
             isSuccess = false;
           }
         });
@@ -437,15 +436,13 @@ module.exports = (grunt) => {
     grunt.log.writeln('Bumping dependencies...');
     npm.load(() => {
       const tempPackageJson = JSON.parse(JSON.stringify(packageJson));
-      const keys = Object.keys(tempPackageJson.dependencies).concat(Object.keys(tempPackageJson.devDependencies))
+      const keys = Object.keys(tempPackageJson.dependencies).concat(Object.keys(tempPackageJson.devDependencies));
 
       const bumps = Bluebird.map(keys, (dep) => {
         // winston 3.x has different API
         if (dep == 'winston') return;
         // babel 7.x.x has alot of changes.... :(
         if (dep.indexOf('babel') > -1) return;
-        // Octicon moved to SCSS instead of less
-        if (dep == 'octicons') return;
 
         return bumpDependency(tempPackageJson, dep);
       });

components/branches/branches.html

@@ -1,6 +1,6 @@
 <div class="btn-group branch">
   <button type="button" class="btn btn-default btn-main" data-bind="click: updateRefs">
-    <span class="octicon octicon-git-branch"></span>
+    <span data-bind="html: branchIcon"></span>
     <span data-bind="text: fetchLabel"></span>
   </button>
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -9,23 +9,23 @@
   <ul class="dropdown-menu pull-right" role="menu">
     <div class="option" onclick="event.stopPropagation()">
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowRemote, css: { 'glyphicon-check': isShowRemote, 'glyphicon-unchecked': !isShowRemote() }" />
         Remote
-        <input type="checkbox" data-bind="checked: isShowRemote"/>
       </label>
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowBranch, css: { 'glyphicon-check': isShowBranch, 'glyphicon-unchecked': !isShowBranch() }" />
         Branch
-        <input type="checkbox" data-bind="checked: isShowBranch"/>
       </label>
       <label>
+        <input class="glyphicon" type="checkbox" data-bind="checked: isShowTag, css: { 'glyphicon-check': isShowTag, 'glyphicon-unchecked': !isShowTag() }" />
         Tag
-        <input type="checkbox" data-bind="checked: isShowTag"/>
       </label>
     </div>
     <div class="dropdown-divider"></div>
     <!-- ko foreach: branchesAndLocalTags -->
     <li>
-      <a href="#" data-bind="html: displayName, click: $parent.checkoutBranch.bind($parent), attr: { 'data-ta-clickable': 'checkout' + name }"></a>
-      <a href="#" class="list-link list-remove" data-bind="click: $parent.branchRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }">X</a>
+      <a href="#" data-bind="html: displayHtml(), click: $parent.checkoutBranch.bind($parent), attr: { 'data-ta-clickable': 'checkout' + name }"></a>
+      <a href="#" class="list-link list-remove" data-bind="html: $parent.closeIcon, click: $parent.branchRemove.bind($parent), attr: { 'data-ta-clickable': name + '-remove' }"></a>
     </li>
     <!-- /ko -->
   </ul>

components/branches/branches.js

@@ -1,12 +1,12 @@
 const ko = require('knockout');
 const _ = require('lodash');
+const octicons = require('octicons');
 const components = require('ungit-components');
 const programEvents = require('ungit-program-events');
 const storage = require('ungit-storage');
 const showRemote = 'showRemote';
 const showBranch = 'showBranch';
 const showTag = 'showTag';
-const Bluebird = require('bluebird');
 
 components.register('branches', (args) => {
   return new BranchesViewModel(args.server, args.graph, args.repoPath);
@@ -26,7 +26,7 @@ class BranchesViewModel {
       storage.setItem(localStorageKey, value);
       this.updateRefs();
       return value;
-    }
+    };
     this.isShowRemote.subscribe(setLocalStorageAndUpdate.bind(null, showRemote));
     this.isShowBranch.subscribe(setLocalStorageAndUpdate.bind(null, showBranch));
     this.isShowTag.subscribe(setLocalStorageAndUpdate.bind(null, showTag));
@@ -35,6 +35,8 @@ class BranchesViewModel {
         return this.current();
       }
     });
+    this.branchIcon = octicons['git-branch'].toSVG({ 'height': 18 });
+    this.closeIcon = octicons.x.toSVG({ 'height': 18 });
     this.updateRefsDebounced = _.debounce(this.updateRefs, 500);
   }
 
@@ -50,7 +52,7 @@ class BranchesViewModel {
   updateRefs() {
     const currentBranchProm = this.server.getPromise('/branches', { path: this.repoPath() })
       .then((branches) => branches.forEach((b) => { if (b.current) { this.current(b.name); } }))
-      .catch((err) => { this.current("~error"); })
+      .catch((err) => { this.current('~error'); });
 
     // refreshes tags branches and remote branches
     const refsProm = this.server.getPromise('/refs', { path: this.repoPath() })
@@ -91,7 +93,7 @@ class BranchesViewModel {
         });
       }).catch((e) => this.server.unhandledRejection(e));
 
-    return Promise.all([currentBranchProm, refsProm])
+    return Promise.all([currentBranchProm, refsProm]);
   }
 
   branchRemove(branch) {
@@ -105,7 +107,7 @@ class BranchesViewModel {
         if (!diag.result()) return;
         const url = `${branch.isRemote ? '/remote' : ''}/branches`;
         return this.server.delPromise(url, { path: this.graph.repoPath(), remote: branch.isRemote ? branch.remote : null, name: branch.refName })
-          .then(() => { programEvents.dispatch({ event: 'working-tree-changed' }) })
+          .then(() => programEvents.dispatch({ event: 'working-tree-changed' }))
           .catch((e) => this.server.unhandledRejection(e));
       });
   }

components/branches/branches.less

@@ -1,3 +1,16 @@
 .branch .dropdown-menu .option {
+  font-size: 100%;
   min-width: 250px;
+
+  label {
+    cursor: pointer;
+    font-weight: normal;
+    margin-right: 15px;
+  }
+
+  input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
 }

components/commit/commit.html

@@ -14,7 +14,7 @@
             <span class="title" data-bind="text: (title().length > 72 ? title().substring(0, 72) + '...' : title)"></span>
             <span class="text-muted">by <a data-bind="text: authorName, attr: { href: 'mailto:' + authorEmail() }"></a></span>
             <!-- ko if: pgpVerifiedString() -->
-              <span class="octicon octicon-key" data-bind="attr: { title: pgpVerifiedString() }" class="bootstrap-tooltip" data-toggle="tooltip" data-placement="top" ></span>
+              <span class="text-muted" data-bind="html: pgpIcon, attr: { title: pgpVerifiedString() }" class="bootstrap-tooltip" data-toggle="tooltip" data-placement="top"></span>
             <!-- /ko -->
           </div>
           <div class="text-muted nodeSummaryContainer">

components/commit/commit.js

@@ -1,10 +1,8 @@
-
 const ko = require('knockout');
-const components = require('ungit-components');
-const navigation = require('ungit-navigation');
-const programEvents = require('ungit-program-events');
 const md5 = require('blueimp-md5');
 const moment = require('moment');
+const octicons = require('octicons');
+const components = require('ungit-components');
 
 components.register('commit', args => new CommitViewModel(args));
 
@@ -17,6 +15,7 @@ class CommitViewModel {
     this.nodeIsMousehover = gitNode.nodeIsMousehover;
     this.selected = gitNode.selected;
     this.pgpVerifiedString = gitNode.pgpVerifiedString;
+    this.pgpIcon = octicons.verified.toSVG({ 'height': 18 });
     this.element = ko.observable();
     this.commitTime = ko.observable();
     this.authorTime = ko.observable();
@@ -30,13 +29,13 @@ class CommitViewModel {
     this.fileLineDiffs = ko.observable();
     this.numberOfAddedLines = ko.observable();
     this.numberOfRemovedLines = ko.observable();
-    this.authorGravatar = ko.computed(() => md5((this.authorEmail() || "").trim().toLowerCase()));
+    this.authorGravatar = ko.computed(() => md5((this.authorEmail() || '').trim().toLowerCase()));
 
     this.showCommitDiff = ko.computed(() => this.fileLineDiffs() && this.fileLineDiffs().length > 0);
 
     this.diffStyle = ko.computed(() => {
       const marginLeft = Math.min((gitNode.branchOrder() * 70), 450) * -1;
-      if (this.selected() && this.element()) return { "margin-left": `${marginLeft}px`, width: `${window.innerWidth - 220}px` };
+      if (this.selected() && this.element()) return { 'margin-left': `${marginLeft}px`, width: `${window.innerWidth - 220}px` };
       else return {};
     });
   }

components/commit/commit.less

@@ -1,12 +1,7 @@
-
 @import "public/less/variables.less";
 
 .commit {
   position: relative;
-  .octicon-key {
-    color: #428bca;
-    margin-left: 5px;
-  }
 
   &.highlighted {
     z-index: 2;

components/graph/git-node.js

@@ -1,9 +1,8 @@
 const $ = require('jquery');
 const ko = require('knockout');
 const components = require('ungit-components');
-const Selectable = require('./selectable');
-const Animateable = require('./animateable');
 const programEvents = require('ungit-program-events');
+const Animateable = require('./animateable');
 const GraphActions = require('./git-graph-actions');
 
 const maxBranchesToDisplay = parseInt(ungit.config.numRefsToShow / 5 * 3);  // 3/5 of refs to show to branches
@@ -27,7 +26,7 @@ class GitNodeViewModel extends Animateable {
     this.signatureMade = ko.observable();
     this.pgpVerifiedString = ko.computed(() => {
       if (this.signatureMade()) {
-        return `PGP by: ${this.signatureMade()} at ${this.signatureDate()}`
+        return `PGP by: ${this.signatureMade()} at ${this.signatureDate()}`;
       }
     });
 
@@ -169,7 +168,7 @@ class GitNodeViewModel extends Animateable {
   showRefSearchForm(obj, event) {
     this.refSearchFormVisible(true);
 
-    const textBox = event.target.nextElementSibling.firstElementChild; // this may not be the best idea...
+    const textBox = event.currentTarget.nextElementSibling.firstElementChild; // this may not be the best idea...
     $(textBox).autocomplete({
       source: this.refs().filter(ref => !ref.isHEAD),
       minLength: 0,
@@ -188,19 +187,19 @@ class GitNodeViewModel extends Animateable {
       }
     }).focus(() => {
       $(this).autocomplete('search', $(this).val());
-    }).data("ui-autocomplete")._renderItem = (ul, item) => $("<li></li>")
+    }).data('ui-autocomplete')._renderItem = (ul, item) => $('<li></li>')
       .append(`<a>${item.dom}</a>`)
-      .appendTo(ul)
+      .appendTo(ul);
     $(textBox).autocomplete('search', '');
   }
 
   createBranch() {
     if (!this.canCreateRef()) return;
-    this.graph.server.postPromise("/branches", { path: this.graph.repoPath(), name: this.newBranchName(), sha1: this.sha1 })
+    this.graph.server.postPromise('/branches', { path: this.graph.repoPath(), name: this.newBranchName(), sha1: this.sha1 })
       .then(() => {
-        this.graph.getRef(`refs/heads/${this.newBranchName()}`).node(this)
+        this.graph.getRef(`refs/heads/${this.newBranchName()}`).node(this);
         if (ungit.config.autoCheckoutOnBranchCreate) {
-          return this.graph.server.postPromise("/checkout", { path: this.graph.repoPath(), name: this.newBranchName() })
+          return this.graph.server.postPromise('/checkout', { path: this.graph.repoPath(), name: this.newBranchName() });
         }
       }).catch((e) => this.graph.server.unhandledRejection(e))
       .finally(() => {