Skip to content

Commit

Permalink
Merge pull request #181 from 720kb/tab-views
Browse files Browse the repository at this point in the history
Tab views
  • Loading branch information
wouldgo committed May 15, 2017
2 parents c65fbc8 + db41f23 commit 56526bb
Show file tree
Hide file tree
Showing 37 changed files with 1,225 additions and 894 deletions.
25 changes: 25 additions & 0 deletions conf/tasks/es6-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,34 @@ gulp.task('es6-build', done => {
'front-end',
'ndm',
'ndm-updater',
'npm-runner',
done);
});

gulp.task('npm-runner', () => {

return rollup({
'entry': `${paths.lib}js/npm/npm-runner.js`,
'plugins': [
rollupJSON(),
rollupBabel({
'presets': [
'es2015-rollup'
]
})
]
}).then(bundle => {

return bundle.write({
'format': 'iife',
'moduleId': 'npm-ui-ng',
'moduleName': 'npm-ui-ng',
'sourceMap': true,
'dest': `${paths.tmp}/npm-runner.js`
});
});
});

gulp.task('ndm', () => {

return rollup({
Expand Down
120 changes: 64 additions & 56 deletions lib/content.pug
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
include ./top.pug
.content(ng-controller='ContentController as content')
.row.home.bg-ultralight(ng-hide="content.loading || content.packageInformations", ng-show="content.goBackHome")
.content(ng-controller="ContentController as content")
span(npm-loading)
include ./npm-doctor-log.pug
.row.home.bg-ultralight(ng-show="content.tabs.length <= 0")
div
.separator10
small.color-black
Expand All @@ -9,59 +10,66 @@ include ./top.pug
.separator10
button.home-button(ng-click="shell.openChooser()")
| Add projects
.row.table-loader.bg-lighter(ng-show="content.loading", ng-hide='!content.loading || content.loaded')
img(src='img/loading.svg', width='22')
| Loading ...
.separator10
.color-black
small May take some time
div(ng-show='content.loaded && !content.goBackHome')
.row.table-header
.col-xs-4.clickable(ng-click="content.sortTableBy('name')")
| Package
i(class="fa", ng-class="{'fa-sort': !content.tableOrderBy.includes('-name') || !content.tableOrderBy.includes('name'), 'fa-sort-down': content.tableOrderBy.includes('-name'), 'fa-sort-up': content.tableOrderBy.includes('name')}")
.col-xs-2
| Current
.col-xs-2
| Wanted
.col-xs-2
| Latest
.col-xs-2.clickable(ng-click="content.sortTableBy('kind')")
| Env
i(class="fa", ng-class="{'fa-sort': !content.tableOrderBy.includes('-kind') || !content.tableOrderBy.includes('kind'), 'fa-sort-down': content.tableOrderBy.includes('-kind'), 'fa-sort-up': content.tableOrderBy.includes('kind')}")
.table-body(ng-table-keyboard)
<!-- show disabled npm global row if in globals-->
.row.table-row.disabled(ng-repeat='aPackage in content.packageInformations', ng-if="content.isGlobalProject && aPackage.name === 'npm'", title="Do not perform npm global actions from here")
.col-xs-4 {{ aPackage.name }}
.tab(npm-tabs, ng-repeat="tab in content.tabs", npm-tab-id="{{tab}}", ng-show="content.activeTab === tab && tab")
.tab-menu
span.tab-button(ng-repeat="tab in content.tabs", ng-class="{'active': content.activeTab === tab}", ng-click="content.activeTab = tab")
spanner(ng-if="tab === '<global>'")
img(src="img/npm-logo-cube.svg", width="16")
| Globals
spanner(ng-if="tab !== '<global>'")
| {{ tab | lastNameInPath}}
a(ng-click="content.closeProjectTab(tab)")
i(class="fa fa-remove")
include ./top.pug
div(ng-show="tab")
.row.table-header
.col-xs-4.clickable(ng-click="sortTableBy('name')")
| Package
i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-name') || !tableOrderBy.includes('name'), 'fa-sort-down': tableOrderBy.includes('-name'), 'fa-sort-up': tableOrderBy.includes('name')}")
.col-xs-2
span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
| {{ aPackage.current }}
| Current
.col-xs-2
i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
| {{ aPackage.wanted }}
| Wanted
.col-xs-2
b(ng-if="aPackage.latest")
| {{ aPackage.latest }}
i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
.col-xs-2
| {{ aPackage.kind }}
<!-- show all packages except for npm global-->
.row.table-row(ng-repeat='aPackage in content.packageInformations | orderBy: content.tableOrderBy', id="table-item-{{$index}}", ng-table-keyboard-selected-items="content.selectedPackages", ng-if="!content.isGlobalProject || content.isGlobalProject && aPackage.name !== 'npm'", selection-model, selection-model-mode="'multiple'", selection-model-selected-items="content.selectedPackages", ng-click="shell.selectPackages(content.selectedPackages)", ng-class="{'active': content.selectedPackages.includes(aPackage), 'table-row-loading': shell.currentSelectedPackages.includes(aPackage) && content.showLoadingSelectedRow}")
.col-xs-4 {{ aPackage.name }}
.col-xs-2
span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
| {{ aPackage.current }}
.col-xs-2
i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
| {{ aPackage.wanted }}
.col-xs-2
b(ng-if="aPackage.latest")
| {{ aPackage.latest }}
i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
.col-xs-2
| {{ aPackage.kind }}
div(ng-show="content.packageInformations && content.packageInformations.length > 0")
h6
| Packages informations
div.table-infos
include ./package-informations.pug
| Latest
.col-xs-2.clickable(ng-click="sortTableBy('kind')")
| Env
i(class="fa", ng-class="{'fa-sort': !tableOrderBy.includes('-kind') || !tableOrderBy.includes('kind'), 'fa-sort-down': tableOrderBy.includes('-kind'), 'fa-sort-up': tableOrderBy.includes('kind')}")
.table-body(ng-table-keyboard, ng-class="{'freezed': showLoadingSelectedRow}")
.table-loader(ng-show="loading && !loaded")
.table-loader-content
img(src='img/loading.svg')
| Loading packages...
<!-- show disabled npm global row if in globals-->
.row.table-row.disabled(ng-repeat='aPackage in packageInformations', ng-if="isGlobalProject && aPackage.name === 'npm'", title="Do not perform npm global actions from here")
.col-xs-4 {{ aPackage.name }}
.col-xs-2
span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
| {{ aPackage.current }}
.col-xs-2
i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
| {{ aPackage.wanted }}
.col-xs-2
b(ng-if="aPackage.latest")
| {{ aPackage.latest }}
i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
.col-xs-2
| {{ aPackage.kind }}
<!-- show all packages except for npm global-->
.row.table-row(ng-repeat='aPackage in packageInformations | orderBy: tableOrderBy', ng-hide="!packageInformations", id="table-item-{{$index}}", ng-table-keyboard-selected-items="selectedPackages", ng-if="!isGlobalProject || isGlobalProject && aPackage.name !== 'npm'", selection-model, selection-model-mode="'multiple'", selection-model-selected-items="selectedPackages", ng-click="selectPackages(selectedPackages)", ng-class="{'active': selectedPackages.includes(aPackage), 'table-row-loading': currentSelectedPackages.includes(aPackage) && showLoadingSelectedRow}")
.col-xs-4 {{ aPackage.name }}
.col-xs-2
span(ng-class="{'color-positive font-light': !aPackage.wanted && !aPackage.latest}")
| {{ aPackage.current }}
.col-xs-2
i(class="fa fa-check", ng-if="!aPackage.wanted && !aPackage.latest")
| {{ aPackage.wanted }}
.col-xs-2
b(ng-if="aPackage.latest")
| {{ aPackage.latest }}
i(class="fa fa-check color-positive", ng-if="!aPackage.wanted && !aPackage.latest")
.col-xs-2
| {{ aPackage.kind }}
div
div.table-infos
include ./package-informations.pug
13 changes: 7 additions & 6 deletions lib/footer.pug
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@
| v{{shell.npmCurrentVersionBadge}}
button.button-global(type="button", title="Enable ndm in global folder", ng-show="shell.globalDisabled", ng-click="shell.enableGlobal()")
i.fa.fa-globe.color-primary
| Enable
| Enable globals
button.button-update(type="button", ng-show="!shell.globalDisabled && shell.npmCurrentVersionBadge", title="Update npm", ng-click="shell.activeClickedLink('update'); shell.updateNpm()")
i.fa.fa-history
| Update
button.button-update(type="button", title="Run doctor", ng-click="shell.activeClickedLink('doctor'); shell.runDoctor()")
i.fa.fa-doctor
| Doctor
span(class="npm-status", ng-mouseenter="shell.checkRegistryStatus()")
| Update npm
span(class="npm-status pull-right", ng-mouseenter="shell.checkRegistryStatus()")
i.fa.fa-disk(title="npm registry is available", ng-show="!shell.loadingRegistryStatus && shell.registryStatus")
i.fa.fa-disk(title="npm registry checking ...", ng-show="shell.loadingRegistryStatus")
i.fa.fa-disk(title="npm registry is unavailable", ng-show="!shell.loadingRegistryStatus && !shell.registryStatus")
div.loader(ng-class="{'loading': shell.loadingRegistryStatus}")
i.fa.fa-circle(ng-class="{'available': !shell.loadingRegistryStatus && shell.registryStatus}")
i.fa.fa-circle(ng-class="{'unavailable': !shell.loadingRegistryStatus && !shell.registryStatus}")
span(class="pull-right")
button.button-doctor(type="button", title="Run doctor", ng-click="shell.activeClickedLink('doctor'); shell.runDoctor()")
i.fa.fa-doctor
| Doctor
4 changes: 2 additions & 2 deletions lib/index.pug
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ html
link(rel='stylesheet', href='css/index.css', media='screen', charset='utf-8')

script(type='text/javascript', src='../node_modules/angular/angular.min.js')
script(type='text/javascript', src='../node_modules/angular-ui-router/release/angular-ui-router.min.js')
script(type='text/javascript', src='../node_modules/selection-model/dist/selection-model.min.js')
script(type='text/javascript', src='../node_modules/ace-builds/src-min-noconflict/ace.js')

Expand All @@ -20,6 +19,7 @@ html
| Loading
.page
include ./left.pug
.right-column(ui-view)
.right-column
include ./content.pug
<!-- do not touch indentation-->
include ./footer.pug
23 changes: 12 additions & 11 deletions lib/install-new-package-version.pug
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
div.dialog.prompt(ng-if="shell.activeLink === '4'", ng-init="topMenu.versionPackageVersion = undefined")
form(ng-submit='topMenu.installVersionPackage(shell.currentSelectedPackages[0], topMenu.versionPackageVersion)')
div.dialog.prompt(ng-show="showSpecificVersionPrompt && currentSelectedPackages.length === 1", ng-init="versionPackageVersion = undefined")
form(ng-submit='installVersionPackage(currentSelectedPackages[0], versionPackageVersion)')
input(placeholder='Package name',
type='text',
readonly,
disabled,
ng-value="shell.currentSelectedPackages[0].name")
ng-value="currentSelectedPackages[0].name")
= " "
input(class="hide",
placeholder='@version',
ng-autofocus,
type='text',
ng-model='topMenu.versionPackageVersion',
ng-value="topMenu.versionPackageVersion")
ng-model='versionPackageVersion',
ng-value="versionPackageVersion")
= " "
span(class="prompt-kind")
select(name="packageVersionSelect", ng-model="topMenu.pkgVersionModel", ng-change="topMenu.versionPackageVersion = topMenu.pkgVersionModel")
select(name="packageVersionSelect", ng-model="pkgVersionModel", ng-change="versionPackageVersion = pkgVersionModel")
option(value="", selected)
| -
option(ng-repeat="pkgVersion in shell.selectedPackageViewInfos.versions | orderBy : pkgVersion : 'reverse' track by $index", ng-value="pkgVersion")
option(ng-repeat="pkgVersion in selectedPackageViewInfos.versions | orderBy : pkgVersion : 'reverse' track by $index", ng-value="pkgVersion")
| {{pkgVersion}}
button
span(ng-show="!topMenu.installingPackageVersion")
button(ng-disabled="installingPackageVersion")
span(ng-show="!installingPackageVersion")
| Install
span(ng-show="topMenu.installingPackageVersion")
span(ng-show="installingPackageVersion")
img(src="img/loading.svg", width="13")
= " "
= " "
i(class="fa fa-times-circle-o button-close-prompt", ng-click="shell.activeLink = undefined;")
button(class="button-close-prompt pull-right", type="button", ng-click="hideInstallVersionPrompt();")
i(class="fa fa-remove")
25 changes: 13 additions & 12 deletions lib/install-new-package.pug
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
div.dialog.prompt(ng-if="shell.activeLink === '1'")
form(ng-submit='topMenu.installPackage(topMenu.packageName, topMenu.newPackageKind)')
div.dialog.prompt(ng-show="showInstallPrompt")
form(ng-submit='installPackage(packageName, newPackageKind)')
<!--do not remove placeholder even if it's not an input-->
div(class="tags-input", ng-tag-input, ng-autofocus, ng-model="topMenu.packageName", ng-keyup="topMenu.search(topMenu.packageName[topMenu.packageName.length - 1].name)", contenteditable="true", ng-attr-disabled="{{topMenu.installingPackage ? 'disabled' : ''}}" placeholder="package<@version> ...")
div(class="tags-input", ng-tag-input, tab-path-id="{{tab}}" ng-autofocus, ng-model="packageName", ng-keyup="search(packageName[packageName.length - 1].name)", contenteditable="true", ng-attr-disabled="{{installingPackage ? 'disabled' : ''}}" placeholder="package<@version> ...")
<!-- this input holds search keywords, do not remove it -->
input(ng-hide="true", ng-model="topMenu.searchKeywords", ng-bind="topMenu.packageName")
input(ng-hide="true", ng-model="searchKeywords", ng-bind="packageName")
= " "
span(class="prompt-kind")
input(type="checkbox", ng-model='topMenu.newPackageKind', ng-disabled='shell.globalSelected')
input(type="checkbox", ng-model='newPackageKind', ng-disabled='shell.globalSelected')
= " "
= " "
| dev
= " "
<!--do not remove id="" from the button-->
button(id="install-new-packages-button", ng-class="{'disabled': topMenu.installingPackage || !topMenu.packageName}")
span(ng-show="!topMenu.installingPackage")
button(id="install-new-packages-button", ng-disabled="installingPackage || !packageName")
span(ng-show="!installingPackage")
| Install
span(ng-show="topMenu.installingPackage")
span(ng-show="installingPackage")
img(src="img/loading.svg", width="13")
= " "
= " "
i(class="fa fa-times-circle-o button-close-prompt", ng-click="shell.activeLink = undefined")
.prompt-search
button(class="button-close-prompt pull-right", type="button", ng-click="hideInstallPrompt();")
i(class="fa fa-remove")
.prompt-search(ng-hide="installingPackage")
.prompt-search-content
.prompt-search-item(ng-repeat="item in topMenu.searchResults.objects", ng-click="topMenu.searchChoosePackage(item.package.name)")
.prompt-search-item(ng-repeat="item in searchResults.objects", ng-click="searchChoosePackage(item.package.name)")
h5
| {{item.package.name}}
div
| {{item.package.description}}
.prompt-search-loader(ng-show="topMenu.searchingNpm")
.prompt-search-loader(ng-show="searchingNpm")
img(src="img/loading.svg")
| Loading results ...
2 changes: 1 addition & 1 deletion lib/js/directives/ng-table-keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ angular.module(moduleName, [])
return (scope, element) => {

const onArrowDown = () => {
let tableRows = element[0].querySelectorAll('.table-row:not(.disabled)')
let tableRows = element[0].querySelectorAll('.tab:not(.ng-hide) .table-row:not(.disabled)')
, clickedElement;

if (tableRows && tableRows.length > 0) {
Expand Down
33 changes: 20 additions & 13 deletions lib/js/directives/ng-tag-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ angular.module(moduleName, [])
return {
'require': '?ngModel',
'link': (scope, element, attrs, ngModel) => {
let documentRange
let ngTagInputIdentifier = attrs.tabPathId
, documentRange
, windowSelection
, focusTheEnd = () => {
try {
Expand Down Expand Up @@ -117,20 +118,26 @@ angular.module(moduleName, [])
return event.preventDefault();
}
, updateOnSearchChoosenPackage = $rootScope.$on('top-menu:search-choosen-package', (eventInformation, data) => {
let newInputValue = '';
if (data &&
data.data &&
data.tabPath &&
data.tabPath === ngTagInputIdentifier) { //if search input is showing on this specific tab

data.forEach(pkg => {
newInputValue += pkg.name;
if (pkg.version &&
pkg.version.length > 0) {
newInputValue += `@${pkg.version}`;
}
newInputValue += ' '; //leave a blank space at the end of the string to split into tags again
});
let newInputValue = '';

element[0].innerText = newInputValue;
createTags();
updateModel();
data.data.forEach(pkg => {
newInputValue += pkg.name;
if (pkg.version &&
pkg.version.length > 0) {
newInputValue += `@${pkg.version}`;
}
newInputValue += ' '; //leave a blank space at the end of the string to split into tags again
});

element[0].innerText = newInputValue;
createTags();
updateModel();
}
});

element.on('mousedown', onTrigger);
Expand Down
19 changes: 19 additions & 0 deletions lib/js/filters.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,25 @@ angular.module(moduleName, [])
return string => {
return string.replace(/<\/?[^>]+(>|$)/g, '');
};
})
.filter('lastNameInPath', () => {
return string => {
let toReturn
, split;

if (string.includes('\\')) {
//on windows
split = string.split('\\');
toReturn = split[split.length - 1];
}

if (string.includes('/')) {
//on linux and mac
split = string.split('/');
toReturn = split[split.length - 1];
}
return toReturn ? toReturn : string;
};
});

export default moduleName;
Loading

0 comments on commit 56526bb

Please sign in to comment.