From 9cbee80f51ed50cb1741ac725af0a47a723fc20a Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Wed, 22 Nov 2017 11:02:35 +0000 Subject: [PATCH] delete space, pin space migrated to new UX --- gui/app/components/folder/space-toolbar.js | 46 --------- gui/app/components/folder/space-view.js | 8 -- gui/app/components/toolbar/for-space.js | 92 +++++++++++++++++- gui/app/pods/folder/index/controller.js | 10 +- gui/app/pods/folder/index/template.hbs | 2 +- gui/app/styles/color.scss | 3 +- gui/app/styles/view/toolbar.scss | 1 + gui/app/styles/widget/widget-button.scss | 54 +++++++++++ .../components/folder/space-toolbar.hbs | 39 -------- .../components/folder/space-view.hbs | 2 +- .../components/toolbar/for-space.hbs | 93 ++++++++++++------- 11 files changed, 212 insertions(+), 138 deletions(-) diff --git a/gui/app/components/folder/space-toolbar.js b/gui/app/components/folder/space-toolbar.js index cf66461e..49be3d60 100644 --- a/gui/app/components/folder/space-toolbar.js +++ b/gui/app/components/folder/space-toolbar.js @@ -10,7 +10,6 @@ // 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'; @@ -59,34 +58,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { renderTooltips() { this.destroyTooltips(); - - if (this.get('hasSelectedDocuments')) { - if (this.get('permissions.documentMove')) { - this.addTooltip(document.getElementById("move-documents-button")); - } - - if (this.get('permissions.documentDelete')) { - this.addTooltip(document.getElementById("delete-documents-button")); - } - } else { - if (this.get('permissions.spaceOwner')) { - this.addTooltip(document.getElementById("space-delete-button")); - } - - if (this.get('permissions.spaceManage')) { - this.addTooltip(document.getElementById("space-settings-button")); - } - - if (this.get('pinState.isPinned')) { - this.addTooltip(document.getElementById("space-unpin-button")); - } else { - this.addTooltip(document.getElementById("space-pin-button")); - } - - if (this.get('permissions.documentAdd')) { - this.addTooltip(document.getElementById("document-add-button")); - } - } }, willDestroyElement() { @@ -138,23 +109,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { this.attrs.onDeleteDocument(); }, - deleteSpace() { - let spaceName = this.get('folder').get('name'); - let spaceNameTyped = this.get('deleteSpaceName'); - - if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') { - $("#delete-space-name").addClass("error").focus(); - return false; - } - - this.set('deleteSpaceName', ''); - $("#delete-space-name").removeClass("error"); - - this.attrs.onDeleteSpace(); - - return true; - }, - setMoveFolder(folderId) { this.set('moveFolderId', folderId); diff --git a/gui/app/components/folder/space-view.js b/gui/app/components/folder/space-view.js index 80028b5f..23b61cae 100644 --- a/gui/app/components/folder/space-view.js +++ b/gui/app/components/folder/space-view.js @@ -121,14 +121,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { }); }, - onDeleteSpace() { - this.get('folderService').delete(this.get('folder.id')).then(() => { /* jshint ignore:line */ - this.showNotification("Deleted"); - this.get('localStorage').clearSessionItem('folder'); - this.get('router').transitionTo('application'); - }); - }, - onImport() { this.attrs.onRefresh(); }, diff --git a/gui/app/components/toolbar/for-space.js b/gui/app/components/toolbar/for-space.js index 33403da0..6ae8f68c 100644 --- a/gui/app/components/toolbar/for-space.js +++ b/gui/app/components/toolbar/for-space.js @@ -11,17 +11,45 @@ import Component from '@ember/component'; import { schedule } from '@ember/runloop'; -import { notEmpty } from '@ember/object/computed'; +import { computed } from '@ember/object'; +import { inject as service } from '@ember/service'; import NotifierMixin from '../../mixins/notifier'; import AuthMixin from '../../mixins/auth'; export default Component.extend(NotifierMixin, AuthMixin, { + session: service(), + appMeta: service(), + pinned: service(), spaceName: '', copyTemplate: true, copyPermission: true, copyDocument: false, clonedSpace: { id: '' }, - hasClone: notEmpty('clonedSpace.id'), + pinState : { + isPinned: false, + pinId: '', + newName: '' + }, + spaceSettings: computed('permissions', function() { + return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage'); + }), + deleteSpaceName: '', + + didReceiveAttrs() { + this._super(...arguments); + + let folder = this.get('space'); + let targets = _.reject(this.get('spaces'), {id: folder.get('id')}); + + this.get('pinned').isSpacePinned(folder.get('id')).then((pinId) => { + this.set('pinState.pinId', pinId); + this.set('pinState.isPinned', pinId !== ''); + this.set('pinState.newName', folder.get('name')); + this.renderTooltips(); + }); + + this.set('movedFolderOptions', targets); + }, didInsertElement() { this._super(...arguments); @@ -33,9 +61,65 @@ export default Component.extend(NotifierMixin, AuthMixin, { }); }, + renderTooltips() { + schedule('afterRender', () => { + $('#pin-space-button').tooltip('dispose'); + $('body').tooltip({selector: '#pin-space-button'}); + }); + }, + actions: { - onCloneSpaceSelect(sp) { - this.set('clonedSpace', sp) + onUnpin() { + this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => { + $('#pin-space-button').tooltip('dispose'); + this.set('pinState.isPinned', false); + this.set('pinState.pinId', ''); + this.eventBus.publish('pinChange'); + this.renderTooltips(); + }); + }, + + onPin() { + let pin = { + pin: this.get('pinState.newName'), + documentId: '', + folderId: this.get('space.id') + }; + + if (is.empty(pin.pin)) { + $('#pin-space-name').addClass('error').focus(); + return false; + } + + this.get('pinned').pinItem(pin).then((pin) => { + $('#pin-space-button').tooltip('dispose'); + this.set('pinState.isPinned', true); + this.set('pinState.pinId', pin.get('id')); + this.eventBus.publish('pinChange'); + this.renderTooltips(); + }); + + return true; + }, + + onDeleteSpace(e) { + e.preventDefault(); + + let spaceName = this.get('space').get('name'); + let spaceNameTyped = this.get('deleteSpaceName'); + + if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') { + $("#delete-space-name").addClass("is-invalid").focus(); + return; + } + + this.set('deleteSpaceName', ''); + $("#delete-space-name").removeClass("is-invalid"); + + this.attrs.onDeleteSpace(this.get('space.id')); + + $('#delete-space-modal').modal('hide'); + $('#delete-space-modal').modal('dispose'); }, onAddSpace(e) { diff --git a/gui/app/pods/folder/index/controller.js b/gui/app/pods/folder/index/controller.js index 2be7f220..595723be 100644 --- a/gui/app/pods/folder/index/controller.js +++ b/gui/app/pods/folder/index/controller.js @@ -18,8 +18,6 @@ export default Controller.extend(NotifierMixin, { documentService: service('document'), folderService: service('folder'), localStorage: service('localStorage'), - queryParams: ['tab'], - tab: 'index', actions: { onAddSpace(payload) { @@ -32,6 +30,14 @@ export default Controller.extend(NotifierMixin, { }); }, + onDeleteSpace(id) { + this.get('folderService').delete(id).then(() => { /* jshint ignore:line */ + this.showNotification("Deleted"); + this.get('localStorage').clearSessionItem('folder'); + this.transitionToRoute('folders'); + }); + }, + onRefresh() { this.get('target._routerMicrolib').refresh(); } diff --git a/gui/app/pods/folder/index/template.hbs b/gui/app/pods/folder/index/template.hbs index 86c4efd0..3acf66d3 100644 --- a/gui/app/pods/folder/index/template.hbs +++ b/gui/app/pods/folder/index/template.hbs @@ -1,7 +1,7 @@ {{layout/nav-bar}}
- {{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions}} + {{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions onDeleteSpace=(action 'onDeleteSpace')}} {{folder/space-view folders=model.folders diff --git a/gui/app/styles/color.scss b/gui/app/styles/color.scss index 04931e6f..b559c821 100644 --- a/gui/app/styles/color.scss +++ b/gui/app/styles/color.scss @@ -23,13 +23,14 @@ $color-off-white: #f5f5f5; $color-dark: #434343; $color-gray: #8b9096; +$color-gray-light: #d8d8d8; $color-border: #d3d3d3; // colors $color-red: #b1251b; $color-green: #1b701e; $color-blue: #2667af; -$color-goldy: #cc9933; +$color-goldy: #FFD700; // widgets $color-checkbox: #2667af; diff --git a/gui/app/styles/view/toolbar.scss b/gui/app/styles/view/toolbar.scss index 240dacd6..c4dcf041 100644 --- a/gui/app/styles/view/toolbar.scss +++ b/gui/app/styles/view/toolbar.scss @@ -12,6 +12,7 @@ margin-right: 30px; cursor: pointer; @include ease-in(); + border-bottom: 2px solid $color-gray-light; &:hover { color: $color-link; diff --git a/gui/app/styles/widget/widget-button.scss b/gui/app/styles/widget/widget-button.scss index 0d7bb633..3e5670c6 100644 --- a/gui/app/styles/widget/widget-button.scss +++ b/gui/app/styles/widget/widget-button.scss @@ -344,6 +344,60 @@ } } +.button-icon-gray { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-gray-light; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: darken($color-gray-light, 15%); + } + } +} + +.button-icon-gold { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-goldy; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: darken($color-goldy, 5%); + } + } +} + +.button-icon-danger { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-gray-light; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: $color-red; + } + } +} + .button-icon-gap { display: inline-block; margin-left: 5px; diff --git a/gui/app/templates/components/folder/space-toolbar.hbs b/gui/app/templates/components/folder/space-toolbar.hbs index 7ce3b1f8..b1562b04 100644 --- a/gui/app/templates/components/folder/space-toolbar.hbs +++ b/gui/app/templates/components/folder/space-toolbar.hbs @@ -48,16 +48,6 @@
{{/if}} - {{#if pinState.isPinned}} -
- favorite -
- {{else if session.authenticated}} -
- favorite_border -
- {{/if}} - {{#if spaceSettings}}
{{#link-to 'folder.settings' folder.id folder.slug}}{{model.document.name}} @@ -67,35 +57,6 @@ {{/link-to}} {{/if}} - {{#if permissions.spaceOwner}} -
-
- delete -
- {{/if}} - - {{#if session.authenticated}} - {{#unless pinState.isPinned}} - {{#dropdown-dialog target="space-pin-button" position="bottom right" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-space-name"}} -
- -
Provide short name
- {{input type='text' id="pin-space-name" value=pinState.newName}} -
- {{/dropdown-dialog}} - {{/unless}} - {{/if}} - - {{#if permissions.spaceOwner}} - {{#dropdown-dialog target="space-delete-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteSpace')}} -

Are you sure you want to delete this space and all associated documents?

-
-
Please type the space name to confirm
- {{input type='text' id="delete-space-name" value=deleteSpaceName}} -
- {{/dropdown-dialog}} - {{/if}} - {{/if}}
diff --git a/gui/app/templates/components/folder/space-view.hbs b/gui/app/templates/components/folder/space-view.hbs index 90c7a2dc..8af70132 100644 --- a/gui/app/templates/components/folder/space-view.hbs +++ b/gui/app/templates/components/folder/space-view.hbs @@ -37,5 +37,5 @@ {{folder/space-toolbar folders=folders folder=folder permissions=permissions hasSelectedDocuments=hasSelectedDocuments onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument') - onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}} + onStartDocument=(action 'onStartDocument')}} diff --git a/gui/app/templates/components/toolbar/for-space.hbs b/gui/app/templates/components/toolbar/for-space.hbs index d2b0f142..c08a85d9 100644 --- a/gui/app/templates/components/toolbar/for-space.hbs +++ b/gui/app/templates/components/toolbar/for-space.hbs @@ -3,56 +3,77 @@ {{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}} {{/toolbar/t-links}} {{#toolbar/t-actions}} - {{#if session.isEditor}} - -