From aee9345886ce971ef72e01511e9a5da235c7c81f Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Wed, 22 Nov 2017 16:28:17 +0000 Subject: [PATCH] move documents new UX --- gui/app/components/folder/documents-list.js | 51 ++++++++-- gui/app/components/folder/space-toolbar.js | 95 ------------------- gui/app/components/folder/space-view.js | 61 ++++++------ gui/app/components/ui/ui-confirm-dialog.js | 4 +- gui/app/components/ui/ui-list-picker.js | 9 ++ gui/app/pods/folder/index/route.js | 14 ++- gui/app/pods/folder/index/template.hbs | 4 +- gui/app/styles/widget/widget-button.scss | 18 ++++ gui/app/styles/widget/widget-list-picker.scss | 12 +-- .../components/folder/documents-list.hbs | 17 +++- .../components/folder/space-toolbar.hbs | 41 -------- .../components/folder/space-view.hbs | 18 ++-- .../components/ui/ui-confirm-dialog.hbs | 2 +- .../components/ui/ui-list-picker.hbs | 2 +- 14 files changed, 141 insertions(+), 207 deletions(-) delete mode 100644 gui/app/components/folder/space-toolbar.js delete mode 100644 gui/app/templates/components/folder/space-toolbar.hbs diff --git a/gui/app/components/folder/documents-list.js b/gui/app/components/folder/documents-list.js index 9c4a02f7..686b25a9 100644 --- a/gui/app/components/folder/documents-list.js +++ b/gui/app/components/folder/documents-list.js @@ -10,11 +10,14 @@ // https://documize.com import { computed } from '@ember/object'; +import { A } from "@ember/array" import Component from '@ember/component'; export default Component.extend({ showDeleteDialog: false, - selectedDocuments: [], + showMoveDialog: false, + selectedDocuments: A([]), + selectedCaption: 'document', showAdd: computed('permissions', 'documents', function() { return this.get('documents.length') === 0 && this.get('permissions.documentAdd'); @@ -26,23 +29,50 @@ export default Component.extend({ return this.get('permissions.documentDelete') || this.get('permissions.documentMove'); }), + didReceiveAttrs() { + this._super(...arguments); + + let space = this.get('space'); + let targets = _.reject(this.get('spaces'), {id: space.get('id')}); + this.set('moveOptions', A(targets)); + this.set('selectedDocuments', A([])); + }, + actions: { - onConfirmDeleteDocuments() { + onShowDeleteDocuments() { this.set('showDeleteDialog', true); }, onDeleteDocuments() { - this.set('showDeleteDialog', false); let list = this.get('selectedDocuments'); - - // list.forEach(d => { - // let doc = this.get('documents').findBy('id', d); - // doc.set('selected', false); - // }); + this.set('selectedDocuments', A([])); + this.set('showDeleteDialog', false); this.attrs.onDeleteDocument(list); - this.set('selectedDocuments', []); + return true; + }, + + onShowMoveDocuments() { + this.set('showMoveDialog', true); + }, + + onMoveDocuments() { + let list = this.get('selectedDocuments'); + let spaces = this.get('spaces'); + let moveSpaceId = ''; + + spaces.forEach(space => { + if (space.get('selected')) { + moveSpaceId = space.get('id'); + } + }); + + if (moveSpaceId === '') return false; + + this.set('showMoveDialog', false); + this.set('selectedDocuments', A([])); + this.attrs.onMoveDocument(list, moveSpaceId); return true; }, @@ -59,7 +89,8 @@ export default Component.extend({ list = _.without(list, documentId); } - this.set('selectedDocuments', list); + this.set('selectedCaption', list.length > 1 ? 'documents' : 'document'); + this.set('selectedDocuments', A(list)); } } }); diff --git a/gui/app/components/folder/space-toolbar.js b/gui/app/components/folder/space-toolbar.js deleted file mode 100644 index 6f4c5c7c..00000000 --- a/gui/app/components/folder/space-toolbar.js +++ /dev/null @@ -1,95 +0,0 @@ -// Copyright 2016 Documize Inc. . All rights reserved. -// -// This software (Documize Community Edition) is licensed under -// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html -// -// You can operate outside the AGPL restrictions by purchasing -// Documize Enterprise Edition and obtaining a commercial license -// by contacting . -// -// https://documize.com - -import { computed } from '@ember/object'; -import Component from '@ember/component'; -import { inject as service } from '@ember/service'; -import NotifierMixin from '../../mixins/notifier'; -import TooltipMixin from '../../mixins/tooltip'; -import AuthMixin from '../../mixins/auth'; - -export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { - folderService: service('folder'), - session: service(), - appMeta: service(), - pinned: service(), - showToolbar: false, - folder: {}, - busy: false, - moveFolderId: "", - drop: null, - pinState : { - isPinned: false, - pinId: '', - newName: '' - }, - deleteSpaceName: '', - spaceSettings: computed('permissions', function() { - return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage'); - }), - - didReceiveAttrs() { - this._super(...arguments); - - let folder = this.get('folder'); - let targets = _.reject(this.get('folders'), {id: folder.get('id')}); - - this.set('movedFolderOptions', targets); - }, - - didRender() { - this._super(...arguments); - this.renderTooltips(); - }, - - renderTooltips() { - this.destroyTooltips(); - }, - - willDestroyElement() { - this._super(...arguments); - - if (this.get('isDestroyed') || this.get('isDestroying')) return; - - if (is.not.null(this.get('drop'))) { - this.get('drop').destroy(); - this.set('drop', null); - } - - this.destroyTooltips(); - }, - - actions: { - setMoveFolder(folderId) { - this.set('moveFolderId', folderId); - - let folders = this.get('folders'); - - folders.forEach(folder => { - folder.set('selected', folder.id === folderId); - }); - }, - - moveDocuments() { - if (this.get("moveFolderId") === "") { - return false; - } - - this.attrs.onMoveDocument(this.get('moveFolderId')); - - return true; - }, - - onStartDocument() { - this.attrs.onStartDocument(); - } - } -}); diff --git a/gui/app/components/folder/space-view.js b/gui/app/components/folder/space-view.js index 89f63e91..b5cd8e64 100644 --- a/gui/app/components/folder/space-view.js +++ b/gui/app/components/folder/space-view.js @@ -9,25 +9,19 @@ // // https://documize.com -import { all } from 'rsvp'; - -import { schedule } from '@ember/runloop'; -import { gt } from '@ember/object/computed'; import Component from '@ember/component'; import { inject as service } from '@ember/service'; -import NotifierMixin from '../../mixins/notifier'; -import TooltipMixin from '../../mixins/tooltip'; +import { all } from 'rsvp'; +import { schedule } from '@ember/runloop'; +import { gt } from '@ember/object/computed'; import AuthMixin from '../../mixins/auth'; -export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { +export default Component.extend(AuthMixin, { router: service(), documentService: service('document'), folderService: service('folder'), localStorage: service('localStorage'), - selectedDocuments: [], - hasSelectedDocuments: gt('selectedDocuments.length', 0), hasCategories: gt('categories.length', 0), - showStartDocument: false, filteredDocs: [], didReceiveAttrs() { @@ -41,20 +35,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { this.set('filteredDocs', []); }, - didRender() { - this._super(...arguments); - - if (this.get('rootDocCount') > 0) { - this.addTooltip(document.getElementById("uncategorized-button")); - } - }, - - willDestroyElement() { - this._super(...arguments); - - this.destroyTooltips(); - }, - setup() { let categories = this.get('categories'); let categorySummary = this.get('categorySummary'); @@ -81,22 +61,42 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { }, actions: { - onMoveDocument(folder) { + zonMoveDocumentz(documents, targetSpaceId) { let self = this; - let documents = this.get('selectedDocuments'); documents.forEach(function (documentId) { self.get('documentService').getDocument(documentId).then(function (doc) { - doc.set('folderId', folder); - doc.set('selected', !doc.get('selected')); + doc.set('folderId', targetSpaceId); + doc.set('selected', false); self.get('documentService').save(doc).then(function () { self.attrs.onRefresh(); }); }); }); + }, - this.set('selectedDocuments', []); - this.send("showNotification", "Moved"); + onMoveDocument(documents, targetSpaceId) { + let self = this; + let promises1 = []; + let promises2 = []; + + documents.forEach(function(documentId, index) { + promises1[index] = self.get('documentService').getDocument(documentId); + }); + + all(promises1).then(() => { + promises1.forEach(function(doc, index) { + doc.then((d) => { + d.set('folderId', targetSpaceId); + d.set('selected', false); + promises2[index] = self.get('documentService').save(d); + }); + }); + + all(promises2).then(() => { + self.attrs.onRefresh(); + }); + }); }, onDeleteDocument(documents) { @@ -114,7 +114,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { }); this.set('documents', documents); - this.set('selectedDocuments', []); this.attrs.onRefresh(); }); }, diff --git a/gui/app/components/ui/ui-confirm-dialog.js b/gui/app/components/ui/ui-confirm-dialog.js index cc030951..24519fcc 100644 --- a/gui/app/components/ui/ui-confirm-dialog.js +++ b/gui/app/components/ui/ui-confirm-dialog.js @@ -18,6 +18,7 @@ export default Component.extend({ confirmCaption: 'OK', title: 'Confirm', show: false, + buttonType: 'btn-secondary', didInsertElement() { this._super(...arguments); @@ -54,7 +55,8 @@ export default Component.extend({ return; } - if (this.attrs.onAction()) { + let result = this.attrs.onAction(); + if (result) { this.set('show', false); } } diff --git a/gui/app/components/ui/ui-list-picker.js b/gui/app/components/ui/ui-list-picker.js index 18f7e9c8..f153b125 100644 --- a/gui/app/components/ui/ui-list-picker.js +++ b/gui/app/components/ui/ui-list-picker.js @@ -15,10 +15,19 @@ import Component from '@ember/component'; export default Component.extend({ nameField: 'category', + singleSelect: false, items: [], actions: { onToggle(item) { + if (this.get('singleSelect')) { + let items = this.get('items'); + items.forEach(item => { + set(item, 'selected', false); + }); + this.set('items', items); + } + set(item, 'selected', !item.get('selected')); } } diff --git a/gui/app/pods/folder/index/route.js b/gui/app/pods/folder/index/route.js index f79ff23b..c7eef35f 100644 --- a/gui/app/pods/folder/index/route.js +++ b/gui/app/pods/folder/index/route.js @@ -33,11 +33,21 @@ export default Route.extend(AuthenticatedRouteMixin, { model() { this.get('browser').setTitle(this.modelFor('folder').folder.get('name')); + let folders = this.modelFor('folder').folders; + folders.forEach(f => { + f.set('selected', false); + }) + + let documents = this.modelFor('folder').documents; + documents.forEach(d => { + d.set('selected', false); + }) + return hash({ folder: this.modelFor('folder').folder, permissions: this.modelFor('folder').permissions, - folders: this.modelFor('folder').folders, - documents: this.modelFor('folder').documents, + folders: folders, + documents: documents, templates: this.modelFor('folder').templates, showStartDocument: false, rootDocCount: 0, diff --git a/gui/app/pods/folder/index/template.hbs b/gui/app/pods/folder/index/template.hbs index 3acf66d3..e9259b62 100644 --- a/gui/app/pods/folder/index/template.hbs +++ b/gui/app/pods/folder/index/template.hbs @@ -4,8 +4,8 @@ {{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions onDeleteSpace=(action 'onDeleteSpace')}} {{folder/space-view - folders=model.folders - folder=model.folder + spaces=model.folders + space=model.folder templates=model.templates permissions=model.permissions documents=model.documents diff --git a/gui/app/styles/widget/widget-button.scss b/gui/app/styles/widget/widget-button.scss index a82ed4d6..cd75098f 100644 --- a/gui/app/styles/widget/widget-button.scss +++ b/gui/app/styles/widget/widget-button.scss @@ -434,6 +434,24 @@ } } +.button-icon-green { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-green; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: darken($color-green, 5%); + } + } +} + .button-icon-small { > i { font-size: 1.3rem; diff --git a/gui/app/styles/widget/widget-list-picker.scss b/gui/app/styles/widget/widget-list-picker.scss index 03b87d3e..5e709a42 100644 --- a/gui/app/styles/widget/widget-list-picker.scss +++ b/gui/app/styles/widget/widget-list-picker.scss @@ -2,12 +2,11 @@ margin: 10px 0; > .options { - width: 300px; - max-height: 400px; + width: 100%; margin: 0 auto; - overflow: auto; > .option { + @include ease-in(); margin: 0 0 5px 0; padding: 10px 15px; color: $color-gray; @@ -16,13 +15,12 @@ position: relative; &:hover { - color: $color-white; - background-color: $color-gray; + color: $color-black; + // background-color: $color-primary-light; } > .text { - width: 220px; - overflow: hidden; + width: 80%; font-weight: bold; } diff --git a/gui/app/templates/components/folder/documents-list.hbs b/gui/app/templates/components/folder/documents-list.hbs index 3b132311..52014b75 100644 --- a/gui/app/templates/components/folder/documents-list.hbs +++ b/gui/app/templates/components/folder/documents-list.hbs @@ -2,11 +2,13 @@
    {{#each documents key="id" as |document|}}
  • + {{#link-to 'document.index' space.id space.slug document.id document.slug}}
    {{ document.name }}
    {{ document.excerpt }}
    {{folder/document-tags documentTags=document.tags}} {{/link-to}} + {{#if hasDocumentActions}}
    {{#if document.selected}} @@ -15,30 +17,35 @@ check_box_outline_blank {{/if}}
    - {{#if document.selected}}
    {{#if permissions.documentMove}} -
    +
    compare_arrows
    {{/if}} {{#if permissions.documentDelete}} -
    +
    delete
    {{/if}}
    {{/if}} {{/if}} +
    • {{/each}}
-{{#ui/ui-confirm-dialog title="Delete Documents" confirmCaption="Delete" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}} -

Are you sure you want to delete the {{selectedDocuments.length}} selected documents?

+{{#ui/ui-confirm-dialog title="Delete Documents" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}} +

Are you sure you want to delete {{selectedDocuments.length}} {{selectedCaption}}?

+{{/ui/ui-confirm-dialog}} + +{{#ui/ui-confirm-dialog title="Move Documents" confirmCaption="Move" buttonType="btn-success" show=showMoveDialog onAction=(action 'onMoveDocuments')}} +

Select space for {{selectedDocuments.length}} {{selectedCaption}}

+ {{ui/ui-list-picker items=moveOptions nameField='name' singleSelect=true}} {{/ui/ui-confirm-dialog}} {{#if showAdd}} diff --git a/gui/app/templates/components/folder/space-toolbar.hbs b/gui/app/templates/components/folder/space-toolbar.hbs deleted file mode 100644 index 8f55a3f8..00000000 --- a/gui/app/templates/components/folder/space-toolbar.hbs +++ /dev/null @@ -1,41 +0,0 @@ - - diff --git a/gui/app/templates/components/folder/space-view.hbs b/gui/app/templates/components/folder/space-view.hbs index 801f443f..9f9799df 100644 --- a/gui/app/templates/components/folder/space-view.hbs +++ b/gui/app/templates/components/folder/space-view.hbs @@ -24,19 +24,15 @@ +{{else}} +
+
{{documents.length}} documents
+
{{/if}} {{folder/documents-list documents=filteredDocs spaces=spaces space=space templates=templates permissions=permissions - onDeleteDocument=(action 'onDeleteDocument')}} - -{{#if showStartDocument}} - {{folder/start-document folder=folder templates=templates permissions=permissions - onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}} -{{/if}} - -{{folder/space-toolbar folders=folders folder=folder - permissions=permissions - onMoveDocument=(action 'onMoveDocument') - onStartDocument=(action 'onStartDocument')}} + onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}} +{{folder/start-document folder=space templates=templates permissions=permissions + onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}} diff --git a/gui/app/templates/components/ui/ui-confirm-dialog.hbs b/gui/app/templates/components/ui/ui-confirm-dialog.hbs index 2cff1c1e..49d3a502 100644 --- a/gui/app/templates/components/ui/ui-confirm-dialog.hbs +++ b/gui/app/templates/components/ui/ui-confirm-dialog.hbs @@ -9,7 +9,7 @@
- +
diff --git a/gui/app/templates/components/ui/ui-list-picker.hbs b/gui/app/templates/components/ui/ui-list-picker.hbs index 0249f676..72b054cb 100644 --- a/gui/app/templates/components/ui/ui-list-picker.hbs +++ b/gui/app/templates/components/ui/ui-list-picker.hbs @@ -2,7 +2,7 @@
    {{#each items as |item|}}
  • -
    {{get item nameField}}
    +
    {{get item nameField}}
    {{#if item.selected}} check {{/if}}