From c2b6f6cf872b02c199800b62ac9cbf18162008a3 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 18 Aug 2015 15:40:23 -0400 Subject: [PATCH 01/13] Start work on file tree --- app/components/file-menu.js | 2 +- app/gist/controller.js | 48 ++++++++++++++++++++++++++++++++++++- app/gist/template.hbs | 36 ++++++++++++++++------------ bower.json | 3 ++- package.json | 30 +++++++++++------------ 5 files changed, 86 insertions(+), 33 deletions(-) diff --git a/app/components/file-menu.js b/app/components/file-menu.js index ad5c6644..f2d4c93e 100644 --- a/app/components/file-menu.js +++ b/app/components/file-menu.js @@ -31,7 +31,7 @@ export default Ember.Component.extend({ }, embed() { let src = window.location.href.split("?")[0]; - src += "?numColumns=0"; + src += "?numColumns=0&fullScreen=true"; let iframe = document.createElement("iframe"); iframe.src = src; iframe.width = 800; diff --git a/app/gist/controller.js b/app/gist/controller.js index b4f2cd0b..530c6817 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -3,6 +3,7 @@ import config from '../config/environment'; import Settings from '../models/settings'; import ErrorMessages from 'ember-twiddle/helpers/error-messages'; import Column from '../utils/column'; +import _ from 'lodash/lodash'; const { computed, @@ -15,8 +16,9 @@ export default Ember.Controller.extend({ emberCli: Ember.inject.service('ember-cli'), version: config.APP.version, - queryParams: ['numColumns'], + queryParams: ['numColumns', 'fullScreen'], numColumns: 2, + fullScreen: false, init() { this._super(...arguments); @@ -99,6 +101,50 @@ export default Ember.Controller.extend({ }), noColumns: computed.equal('numColumns', 0), + /** + * Calculate data for file tree + */ + fileTreeData: computed('model.files.[]', function() { + let seq = 0; + let treeData = this.get('model.files').map(function(file) { + let path = file.get('filePath'); + let parentPath = path.split("/").slice(0, -1).join("/"); + if (parentPath === "") { + parentPath = "#"; + } + return { + id: "node" + seq++, + text: path, + parent: parentPath + }; + }); + + let paths = _.uniq(_.pluck(treeData, 'text')); + let parents = _.uniq(_.pluck(treeData, 'parent')); + parents.forEach(function(parent) { + if (!paths.contains(parent) && parent !== "#") { + treeData.push({ + id: "node" + seq++, + text: parent, + parent: "#" + }); + } + }); + + let idMap = {}; + treeData.forEach(function(node) { + idMap[node.text] = node.id; + }); + + treeData.forEach(function(node) { + if (node.parent !== "#") { + node.parent = idMap[node.parent]; + } + }); + + return treeData; + }), + /** * Creates the column objects */ diff --git a/app/gist/template.hbs b/app/gist/template.hbs index dc1d46ce..8689888b 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -31,21 +31,27 @@
- {{#each columns as |column|}} - {{#if column.show}} -
- {{file-editor-column col=column.col - file=column.file - allFiles=model.files - keyMap=settings.keyMap - numColumns=realNumColumns - contentsChanged="contentsChanged" - removeColumn=(action "removeColumn") - addColumn=(action "addColumn") - }} -
- {{/if}} - {{/each}} + {{#unless fullScreen}} +
+ {{ember-jstree data=fileTreeData}} +
+ + {{#each columns as |column|}} + {{#if column.show}} +
+ {{file-editor-column col=column.col + file=column.file + allFiles=model.files + keyMap=settings.keyMap + numColumns=realNumColumns + contentsChanged="contentsChanged" + removeColumn=(action "removeColumn") + addColumn=(action "addColumn") + }} +
+ {{/if}} + {{/each}} + {{/unless}}
diff --git a/bower.json b/bower.json index 01b814ee..a5967b21 100644 --- a/bower.json +++ b/bower.json @@ -19,7 +19,8 @@ "pretender": "~0.7.0", "ember-inflector": "~1.3.1", "lodash": "~3.10.0", - "Faker": "~3.0.0" + "Faker": "~3.0.0", + "jstree": "~3.2.0" }, "resolutions": { "codemirror": "~5.5.0", diff --git a/package.json b/package.json index 0ec53fdf..77d13dbb 100644 --- a/package.json +++ b/package.json @@ -20,21 +20,6 @@ "license": "MIT", "devDependencies": { "broccoli-asset-rev": "^2.1.2", - "ember-cli": "1.13.8", - "ember-cli-app-version": "0.5.0", - "ember-cli-babel": "^5.1.3", - "ember-cli-dependency-checker": "^1.0.1", - "ember-cli-htmlbars": "0.7.9", - "ember-cli-htmlbars-inline-precompile": "^0.2.0", - "ember-cli-ic-ajax": "0.2.1", - "ember-cli-inject-live-reload": "^1.3.1", - "ember-cli-qunit": "^1.0.0", - "ember-cli-release": "^0.2.5", - "ember-cli-sri": "^1.0.3", - "ember-cli-uglify": "^1.2.0", - "ember-data": "1.13.9", - "ember-disable-proxy-controllers": "^1.0.0", - "ember-export-application-global": "^1.0.3", "broccoli-concat": "0.0.13", "broccoli-funnel": "0.2.3", "broccoli-merge-trees": "0.2.2", @@ -44,15 +29,30 @@ "ember-api-actions": "0.0.7", "ember-autoresize": "0.5.3", "ember-browserify": "^1.0.1", + "ember-cli": "1.13.8", + "ember-cli-app-version": "0.5.0", + "ember-cli-babel": "^5.1.3", "ember-cli-bootstrap-sassy": "0.0.18", "ember-cli-build-notifications": "0.0.3", + "ember-cli-dependency-checker": "^1.0.1", "ember-cli-deploy": "^0.4.2", "ember-cli-file-creator": "^0.1.0", + "ember-cli-htmlbars": "0.7.9", + "ember-cli-htmlbars-inline-precompile": "^0.2.0", + "ember-cli-ic-ajax": "0.2.1", + "ember-cli-inject-live-reload": "^1.3.1", + "ember-cli-jstree": "0.1.1", "ember-cli-mirage": "0.1.6", + "ember-cli-qunit": "^1.0.0", + "ember-cli-release": "^0.2.5", "ember-cli-sass": "4.0.1", "ember-cli-sri": "^1.0.1", + "ember-cli-uglify": "^1.2.0", + "ember-data": "1.13.9", "ember-deploy-s3": "0.0.5", "ember-deploy-s3-index": "^0.4.0", + "ember-disable-proxy-controllers": "^1.0.0", + "ember-export-application-global": "^1.0.3", "ember-git-version": "0.0.1", "ember-lodash": "0.0.5", "ember-notify": "3.4.0", From 961cb7039aaf44c5677f2f2aa4e429be734bc466 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 18 Aug 2015 15:50:15 -0400 Subject: [PATCH 02/13] Fix tests --- tests/acceptance/columns-test.js | 2 +- tests/acceptance/gist-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/acceptance/columns-test.js b/tests/acceptance/columns-test.js index d5532e55..279d126d 100644 --- a/tests/acceptance/columns-test.js +++ b/tests/acceptance/columns-test.js @@ -15,7 +15,7 @@ module('Acceptance | columns', { }); const columns = ".code"; -const firstColumn = ".code:first-of-type"; +const firstColumn = ".code:nth-of-type(2)"; const plusGlyph = ".code .glyphicon-plus"; const removeGlyph = firstColumn + " .glyphicon-remove"; const outputPlusGlyph = ".output .glyphicon-plus"; diff --git a/tests/acceptance/gist-test.js b/tests/acceptance/gist-test.js index 6ffd8859..6e5d9103 100644 --- a/tests/acceptance/gist-test.js +++ b/tests/acceptance/gist-test.js @@ -5,7 +5,7 @@ import { findMapText } from 'ember-twiddle/tests/helpers/util'; import ErrorMessages from 'ember-twiddle/helpers/error-messages'; -const firstColumn = '.code:first-of-type'; +const firstColumn = '.code:nth-of-type(2)'; const firstFilePicker = firstColumn + ' .dropdown-toggle'; const secondFile = firstColumn + ' .dropdown-menu li:nth-child(2) a'; const anyFile = firstColumn + ' .dropdown-menu li:nth-child(1) a'; From 22ee51a9afa972ac9ad6993f9cd10f50c94cdbf8 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Wed, 19 Aug 2015 14:44:45 -0400 Subject: [PATCH 03/13] Allow exit from full screen --- app/components/file-menu.js | 2 +- app/gist/controller.js | 8 ++++++++ app/gist/template.hbs | 5 ++++- app/styles/app.scss | 22 ++++++++++++++++++++++ 4 files changed, 35 insertions(+), 2 deletions(-) diff --git a/app/components/file-menu.js b/app/components/file-menu.js index f2d4c93e..60f9f35f 100644 --- a/app/components/file-menu.js +++ b/app/components/file-menu.js @@ -31,7 +31,7 @@ export default Ember.Component.extend({ }, embed() { let src = window.location.href.split("?")[0]; - src += "?numColumns=0&fullScreen=true"; + src += "?fullScreen=true"; let iframe = document.createElement("iframe"); iframe.src = src; iframe.width = 800; diff --git a/app/gist/controller.js b/app/gist/controller.js index 530c6817..686da542 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -377,6 +377,14 @@ export default Ember.Controller.extend({ }).then(this.initializeColumns.bind(this)); }, + exitFullScreen() { + this.transitionToRoute({ + queryParams: { + fullScreen: false + } + }).then(this.initializeColumns.bind(this)); + }, + setEditorKeyMap (keyMap) { const settings = this.get('settings'); settings.set('keyMap', keyMap); diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 8689888b..8887f32d 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -53,7 +53,7 @@ {{/each}} {{/unless}} -
+
{{#if noColumns}} @@ -68,6 +68,9 @@
{{applicationUrl}}
{{dummy-demo-app html=buildOutput}} + {{#if fullScreen}} + Edit Twiddle + {{/if}}
diff --git a/app/styles/app.scss b/app/styles/app.scss index edc91d9e..a7e83bd3 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -257,6 +257,28 @@ body { } } } + + .full-screen { + .header { + display: none; + } + + .run-or-live-reload { + display: none; + } + } + + .exit-full-screen-link { + display: block; + position: absolute; + bottom: 20px; + left: 50%; + width: 100px; + margin-left: -50px; + text-align: center; + color: $dropdown-link-color; + cursor: pointer; + } } .dropdown { From 954b08511c463c62403ee58812061570c08a7823 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Wed, 19 Aug 2015 15:09:54 -0400 Subject: [PATCH 04/13] Hide file tree by default --- app/components/file-editor-column.js | 10 ++++++++++ app/gist/controller.js | 13 +++++++++++++ app/gist/template.hbs | 10 +++++++--- app/styles/app.scss | 18 ++++++++++++++---- .../components/file-editor-column.hbs | 5 +++++ 5 files changed, 49 insertions(+), 7 deletions(-) diff --git a/app/components/file-editor-column.js b/app/components/file-editor-column.js index 62ed54ae..3376b355 100644 --- a/app/components/file-editor-column.js +++ b/app/components/file-editor-column.js @@ -26,6 +26,12 @@ export default Ember.Component.extend({ return (this.get('col') | 0) === numColumns && numColumns < MAX_COLUMNS; }), + isFirstColumn: computed.equal('col', '1'), + + showFileTreeOpenIcon: computed('isFirstColumn', 'fileTreeShown', function() { + return this.get('isFirstColumn') && !this.get('fileTreeShown'); + }), + focusIn () { this.sendAction('focusEditor', this); }, @@ -46,6 +52,10 @@ export default Ember.Component.extend({ addColumn() { this.attrs.addColumn(); + }, + + showFileTree() { + this.attrs.showFileTree(); } } }); diff --git a/app/gist/controller.js b/app/gist/controller.js index 686da542..0a2987be 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -72,6 +72,11 @@ export default Ember.Controller.extend({ */ isLiveReload: true, + /** + * Whether the file tree is currently shown + */ + fileTreeShown: false, + /** * Build the application and set the iframe code */ @@ -277,6 +282,14 @@ export default Ember.Controller.extend({ this.buildApp(); }, + showFileTree() { + this.set('fileTreeShown', true); + }, + + hideFileTree() { + this.set('fileTreeShown', false); + }, + deleteGist (gist) { if(confirm(`Are you sure you want to remove this gist from Github?\n\n${gist.get('description')}`)) { gist.destroyRecord(); diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 8887f32d..8e4ce5d8 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -32,9 +32,11 @@
{{#unless fullScreen}} -
- {{ember-jstree data=fileTreeData}} -
+ {{#if fileTreeShown}} +
+ {{ember-jstree data=fileTreeData}} +
+ {{/if}} {{#each columns as |column|}} {{#if column.show}} @@ -44,9 +46,11 @@ allFiles=model.files keyMap=settings.keyMap numColumns=realNumColumns + fileTreeShown=fileTreeShown contentsChanged="contentsChanged" removeColumn=(action "removeColumn") addColumn=(action "addColumn") + showFileTree=(action "showFileTree") }}
{{/if}} diff --git a/app/styles/app.scss b/app/styles/app.scss index a7e83bd3..ea595305 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -239,6 +239,12 @@ body { background-color: #faf4f1; position: relative; + .nav-left { + position: absolute; + top: 18px; + left: 15px; + } + .file-picker { margin-left: 15px; margin-top: 8px; @@ -246,15 +252,19 @@ body { position: absolute; } + .nav-left+.file-picker { + margin-left: 30px; + } + .nav-right { position: absolute; top: 20px; right: 15px; + } - .glyphicon { - color: $navbar-default-link-color; - cursor: pointer; - } + .glyphicon { + color: $navbar-default-link-color; + cursor: pointer; } } diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs index f42ba349..09a646a6 100644 --- a/app/templates/components/file-editor-column.hbs +++ b/app/templates/components/file-editor-column.hbs @@ -1,4 +1,9 @@
+ {{#if showFileTreeOpenIcon}} + + + + {{/if}}
  • {{#if allFiles.length}} From aed9a12808243a88e8cf68eba9ccf88e1e00e8d1 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Wed, 19 Aug 2015 15:13:53 -0400 Subject: [PATCH 05/13] Add ability to hide file tree again --- app/gist/template.hbs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 8e4ce5d8..49e76c2d 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -34,6 +34,11 @@ {{#unless fullScreen}} {{#if fileTreeShown}}
    +
    +
    + +
    +
    {{ember-jstree data=fileTreeData}}
    {{/if}} From 113fecc500a944b43a68c65fab39a57091c92c41 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Wed, 19 Aug 2015 15:28:28 -0400 Subject: [PATCH 06/13] Fix tests --- tests/acceptance/columns-test.js | 2 +- tests/acceptance/gist-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/acceptance/columns-test.js b/tests/acceptance/columns-test.js index 279d126d..d5532e55 100644 --- a/tests/acceptance/columns-test.js +++ b/tests/acceptance/columns-test.js @@ -15,7 +15,7 @@ module('Acceptance | columns', { }); const columns = ".code"; -const firstColumn = ".code:nth-of-type(2)"; +const firstColumn = ".code:first-of-type"; const plusGlyph = ".code .glyphicon-plus"; const removeGlyph = firstColumn + " .glyphicon-remove"; const outputPlusGlyph = ".output .glyphicon-plus"; diff --git a/tests/acceptance/gist-test.js b/tests/acceptance/gist-test.js index 6e5d9103..6ffd8859 100644 --- a/tests/acceptance/gist-test.js +++ b/tests/acceptance/gist-test.js @@ -5,7 +5,7 @@ import { findMapText } from 'ember-twiddle/tests/helpers/util'; import ErrorMessages from 'ember-twiddle/helpers/error-messages'; -const firstColumn = '.code:nth-of-type(2)'; +const firstColumn = '.code:first-of-type'; const firstFilePicker = firstColumn + ' .dropdown-toggle'; const secondFile = firstColumn + ' .dropdown-menu li:nth-child(2) a'; const anyFile = firstColumn + ' .dropdown-menu li:nth-child(1) a'; From 9c59d41e5b9d5b4254e1080054c42a816b8604e8 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Wed, 19 Aug 2015 16:30:18 -0400 Subject: [PATCH 07/13] Fix bug in full screen --- app/gist/edit/route.js | 1 - app/routes/gist-base-route.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/gist/edit/route.js b/app/gist/edit/route.js index 2a43cfa2..afce9c32 100644 --- a/app/gist/edit/route.js +++ b/app/gist/edit/route.js @@ -12,7 +12,6 @@ export default GistRoute.extend({ this._super.apply(this, arguments); let gistController = this.controllerFor('gist'); - gistController.rebuildApp(); Ember.run.schedule('afterRender', function() { gistController.set('unsaved', false); }); diff --git a/app/routes/gist-base-route.js b/app/routes/gist-base-route.js index 6ff65c65..884fe6e0 100644 --- a/app/routes/gist-base-route.js +++ b/app/routes/gist-base-route.js @@ -5,5 +5,6 @@ export default Ember.Route.extend({ let gistController = this.controllerFor('gist'); gistController.set('model', context); gistController.initializeColumns(); + gistController.rebuildApp(); } }); From 55aba2fb721d16303ef6e15b93b7ccb463b0bcc2 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 10:03:40 -0400 Subject: [PATCH 08/13] Make file tree open files in first column --- app/components/file-tree.js | 67 ++++++++++++++++++++++++++ app/gist/controller.js | 51 +++----------------- app/gist/template.hbs | 9 ++-- app/styles/app.scss | 8 +++ app/templates/components/file-tree.hbs | 9 ++++ 5 files changed, 94 insertions(+), 50 deletions(-) create mode 100644 app/components/file-tree.js create mode 100644 app/templates/components/file-tree.hbs diff --git a/app/components/file-tree.js b/app/components/file-tree.js new file mode 100644 index 00000000..59f2f20b --- /dev/null +++ b/app/components/file-tree.js @@ -0,0 +1,67 @@ +import Ember from "ember"; + +const { computed } = Ember; + +export default Ember.Component.extend({ + jsTreeActionReceiver: null, + + /** + * Calculate data for file tree + */ + fileTreeData: computed('model.files.[]', function() { + let seq = 0; + let treeData = this.get('model.files').map(function(file) { + let path = file.get('filePath'); + let splitPath = path.split("/"); + let parentPath = splitPath.slice(0, -1).join("/"); + let fileName = splitPath[splitPath.length - 1]; + if (parentPath === "") { + parentPath = "#"; + } + return { + id: "node" + seq++, + text: fileName, + parent: parentPath, + icon: "glyphicon glyphicon-file light-gray", + path: path + }; + }); + + let paths = _.uniq(_.pluck(treeData, 'text')); + let parents = _.uniq(_.pluck(treeData, 'parent')); + parents.forEach(function(parent) { + if (!paths.contains(parent) && parent !== "#") { + treeData.push({ + id: "node" + seq++, + text: parent, + parent: "#", + icon: "glyphicon glyphicon-folder-open yellow" + }); + } + }); + + let idMap = {}; + treeData.forEach(function(node) { + idMap[node.text] = node.id; + }); + + treeData.forEach(function(node) { + if (node.parent !== "#") { + node.parent = idMap[node.parent]; + } + }); + + return treeData; + }), + + actions: { + handleSelectTreeNode(node) { + if (node.original.path) { + this.attrs.openFile(node.original.path); + return; + } + this.get('jsTreeActionReceiver').send('toggleNode', node.id); + } + } + +}); diff --git a/app/gist/controller.js b/app/gist/controller.js index 0a2987be..8931c070 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -106,50 +106,6 @@ export default Ember.Controller.extend({ }), noColumns: computed.equal('numColumns', 0), - /** - * Calculate data for file tree - */ - fileTreeData: computed('model.files.[]', function() { - let seq = 0; - let treeData = this.get('model.files').map(function(file) { - let path = file.get('filePath'); - let parentPath = path.split("/").slice(0, -1).join("/"); - if (parentPath === "") { - parentPath = "#"; - } - return { - id: "node" + seq++, - text: path, - parent: parentPath - }; - }); - - let paths = _.uniq(_.pluck(treeData, 'text')); - let parents = _.uniq(_.pluck(treeData, 'parent')); - parents.forEach(function(parent) { - if (!paths.contains(parent) && parent !== "#") { - treeData.push({ - id: "node" + seq++, - text: parent, - parent: "#" - }); - } - }); - - let idMap = {}; - treeData.forEach(function(node) { - idMap[node.text] = node.id; - }); - - treeData.forEach(function(node) { - if (node.parent !== "#") { - node.parent = idMap[node.parent]; - } - }); - - return treeData; - }), - /** * Creates the column objects */ @@ -278,6 +234,13 @@ export default Ember.Controller.extend({ this.set('activeFile', file); }, + openFile(filePath) { + let file = this.get('model.files').findBy('filePath', filePath); + this.setColumnFile(1, file); + this.set('activeEditorCol', '1'); + this.set('activeFile', file); + }, + runNow () { this.buildApp(); }, diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 49e76c2d..b0592d78 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -34,12 +34,9 @@ {{#unless fullScreen}} {{#if fileTreeShown}}
    -
    -
    - -
    -
    - {{ember-jstree data=fileTreeData}} + {{file-tree model=model + openFile=(action "openFile") + }}
    {{/if}} diff --git a/app/styles/app.scss b/app/styles/app.scss index ea595305..18e002a3 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -33,6 +33,14 @@ body { position: absolute; } +.light-gray { + color: #cccccc; +} + +.yellow { + color: #ffcc00; +} + .toolbar { height: $topbar-height; font-size: 13px; diff --git a/app/templates/components/file-tree.hbs b/app/templates/components/file-tree.hbs new file mode 100644 index 00000000..12ed3ce6 --- /dev/null +++ b/app/templates/components/file-tree.hbs @@ -0,0 +1,9 @@ +
    +
    + +
    +
    +{{ember-jstree data=fileTreeData + actionReceiver=jsTreeActionReceiver + eventDidSelectNode="handleSelectTreeNode" +}} \ No newline at end of file From d95f67ac143eb5a77d12cc575fad18132d23f707 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 10:06:03 -0400 Subject: [PATCH 09/13] Fix jshint --- app/components/file-tree.js | 1 + app/gist/controller.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/file-tree.js b/app/components/file-tree.js index 59f2f20b..72e14dd2 100644 --- a/app/components/file-tree.js +++ b/app/components/file-tree.js @@ -1,4 +1,5 @@ import Ember from "ember"; +import _ from 'lodash/lodash'; const { computed } = Ember; diff --git a/app/gist/controller.js b/app/gist/controller.js index 8931c070..7a7592b8 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -3,7 +3,6 @@ import config from '../config/environment'; import Settings from '../models/settings'; import ErrorMessages from 'ember-twiddle/helpers/error-messages'; import Column from '../utils/column'; -import _ from 'lodash/lodash'; const { computed, From ff00d0ae2f1262023b090dd41972928a7cb6e13b Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 11:12:05 -0400 Subject: [PATCH 10/13] Fix bug in hiding file tree --- app/components/file-tree.js | 4 ++++ app/gist/template.hbs | 1 + 2 files changed, 5 insertions(+) diff --git a/app/components/file-tree.js b/app/components/file-tree.js index 72e14dd2..03edb501 100644 --- a/app/components/file-tree.js +++ b/app/components/file-tree.js @@ -62,6 +62,10 @@ export default Ember.Component.extend({ return; } this.get('jsTreeActionReceiver').send('toggleNode', node.id); + }, + + hideFileTree() { + this.attrs.hideFileTree(); } } diff --git a/app/gist/template.hbs b/app/gist/template.hbs index b0592d78..848d9a82 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -36,6 +36,7 @@
    {{file-tree model=model openFile=(action "openFile") + hideFileTree=(action "hideFileTree") }}
    {{/if}} From 203b6b2f19eed3e8fc09222081a0708b5ae3ec60 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 11:58:31 -0400 Subject: [PATCH 11/13] Add tooltips --- app/templates/components/file-editor-column.hbs | 2 +- app/templates/components/file-tree.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs index 54576f31..85097581 100644 --- a/app/templates/components/file-editor-column.hbs +++ b/app/templates/components/file-editor-column.hbs @@ -1,7 +1,7 @@
    {{#if showFileTreeOpenIcon}} - + {{/if}}
      diff --git a/app/templates/components/file-tree.hbs b/app/templates/components/file-tree.hbs index 12ed3ce6..d2144010 100644 --- a/app/templates/components/file-tree.hbs +++ b/app/templates/components/file-tree.hbs @@ -1,6 +1,6 @@
      - +
      {{ember-jstree data=fileTreeData From 178c7bc3e876250ba7685f23816fe4c97d23a0ee Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 12:29:28 -0400 Subject: [PATCH 12/13] File tree should open files in active editor panel --- app/gist/controller.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index 7a7592b8..f5505151 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -235,8 +235,9 @@ export default Ember.Controller.extend({ openFile(filePath) { let file = this.get('model.files').findBy('filePath', filePath); - this.setColumnFile(1, file); - this.set('activeEditorCol', '1'); + let activeCol = this.get('activeEditorCol') || '1'; + this.setColumnFile(activeCol, file); + this.set('activeEditorCol', activeCol); this.set('activeFile', file); }, From 37c83d1d5478a9e07298c1659a3d182d376126d1 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Thu, 20 Aug 2015 16:09:18 -0400 Subject: [PATCH 13/13] Add tests --- tests/acceptance/columns-test.js | 14 +++++ .../components/file-editor-column-test.js | 18 +++++- .../integration/components/file-tree-test.js | 63 +++++++++++++++++++ 3 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 tests/integration/components/file-tree-test.js diff --git a/tests/acceptance/columns-test.js b/tests/acceptance/columns-test.js index d5532e55..0d6df1be 100644 --- a/tests/acceptance/columns-test.js +++ b/tests/acceptance/columns-test.js @@ -19,6 +19,8 @@ const firstColumn = ".code:first-of-type"; const plusGlyph = ".code .glyphicon-plus"; const removeGlyph = firstColumn + " .glyphicon-remove"; const outputPlusGlyph = ".output .glyphicon-plus"; +const showFileTreeGlyph = firstColumn + " .glyphicon-chevron-right"; +const hideFileTreeGlyph = ".col-md-4:first-of-type .glyphicon-chevron-left"; test('you can add and remove columns', function(assert) { visit('/'); @@ -61,5 +63,17 @@ test('you can add and remove columns', function(assert) { andThen(function() { assert.equal(currentURL(), '/?numColumns=1', 'We are on the correct route for 1 columns'); assert.equal(find(columns).length, 1, 'There are now 1 columns'); + + find(showFileTreeGlyph).click(); + }); + + andThen(function() { + assert.equal(find(".file-tree").length, 1, "The file tree is shown"); + + find(hideFileTreeGlyph).click(); + }); + + andThen(function() { + assert.equal(find(".file-tree").length, 0, "The file tree is hidden"); }); }); diff --git a/tests/integration/components/file-editor-column-test.js b/tests/integration/components/file-editor-column-test.js index 6fee347b..dfc3dc4c 100644 --- a/tests/integration/components/file-editor-column-test.js +++ b/tests/integration/components/file-editor-column-test.js @@ -6,18 +6,24 @@ moduleForComponent('file-editor-column', 'Integration | Component | file editor beforeEach() { this.addColumnCalled = false; this.removeColumnCalled = false; + this.showFileTreeCalled = false; + + this.set('col', '2'); this.on('addColumn', () => { this.addColumnCalled = true; }); this.on('removeColumn', () => { this.removeColumnCalled = true; }); + this.on('showFileTree', () => { this.showFileTreeCalled = true; }); - this.render(hbs`{{file-editor-column col="2" + this.render(hbs`{{file-editor-column col=col file=null allFiles=null keyMap=null numColumns=2 + fileTreeShown=false contentsChanged="contentsChanged" addColumn=(action "addColumn") removeColumn=(action "removeColumn") + showFileTree=(action "showFileTree") }}`); } }); @@ -37,3 +43,13 @@ test('it calls removeColumn when the remove column glyph is clicked', function(a assert.ok(this.removeColumnCalled, 'removeColumn was called'); }); + +test('it calls showFileTree when the show file tree glyph is clicked', function(assert) { + assert.expect(1); + + this.set('col', '1'); + + this.$('.glyphicon-chevron-right').click(); + + assert.ok(this.showFileTreeCalled, 'showFileTree was called'); +}); diff --git a/tests/integration/components/file-tree-test.js b/tests/integration/components/file-tree-test.js new file mode 100644 index 00000000..0d039acb --- /dev/null +++ b/tests/integration/components/file-tree-test.js @@ -0,0 +1,63 @@ +import Ember from "ember"; +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('file-tree', 'Integration | Component | file tree', { + integration: true, + beforeEach() { + this.openFileCalled = false; + this.hideFileTreeCalled = false; + + this.file1 = Ember.Object.create({ + filePath: "some-path.js" + }); + + this.file2 = Ember.Object.create({ + filePath: "some/path.js" + }); + + this.gist = Ember.Object.create({ + id: '74bae9a34142370ff5a3', + files: [this.file1, this.file2], + history: [], + ownerLogin: 'Gaurav0', + isNew: false + }); + + this.set('model', this.gist); + + this.on('openFile', () => { this.openFileCalled = true; }); + this.on('hideFileTree', () => { this.hideFileTreeCalled = true; }); + + this.render(hbs`{{file-tree model=model + openFile=(action "openFile") + hideFileTree=(action "hideFileTree")}}`); + } +}); + +test('it calls hideFileTree when you hide the panel', function(assert) { + assert.expect(1); + + this.$('.glyphicon-chevron-left').click(); + + assert.ok(this.hideFileTreeCalled, "hideFileTree was called"); +}); + +test('it has 2 initial nodes', function(assert) { + assert.expect(2); + + assert.equal(this.$('.jstree-anchor').length, 2, "There are 2 initial nodes"); + + this.$('.jstree-anchor').eq(0).click(); + this.$('.jstree-anchor').eq(1).click(); + + assert.equal(this.$('.jstree-anchor').length, 3, "There are 3 nodes once each is expanded"); +}); + +test('it calls openFile when you click on a leaf node', function(assert) { + assert.expect(1); + + this.$('.jstree-anchor').eq(0).click(); + + assert.ok(this.openFileCalled, "openFile was called"); +});