diff --git a/app/app/components/folder/documents-list.js b/app/app/components/folder/documents-list.js index af0c5518..1da7ead7 100644 --- a/app/app/components/folder/documents-list.js +++ b/app/app/components/folder/documents-list.js @@ -12,20 +12,40 @@ import Ember from 'ember'; export default Ember.Component.extend({ + folderService: Ember.inject.service('folder'), selectedDocuments: [], moveTarget: null, - emptyState: Ember.computed('documents', function() { return this.get('documents.length') === 0; }), didReceiveAttrs() { - this.set('selectedDocuments', []); this.audit.record('viewed-space'); - + this.set('selectedDocuments', []); + this.set('canCreate', this.get('folderService').get('canEditCurrentFolder')); this.set('deleteTargets', this.get('folders').rejectBy('id', this.get('folder.id'))); }, + didInsertElement() { + this._super(...arguments); + + this.setupAddWizard(); + }, + + setupAddWizard() { + Ember.run.schedule('afterRender', () => { + $('.start-document:not(.start-document-empty-state)').off('.hoverIntent'); + + $('.start-document:not(.start-document-empty-state)').hoverIntent({interval: 100, over: function() { + // in + $(this).find('.start-button').velocity("transition.slideDownIn", {duration: 300}); + }, out: function() { + // out + $(this).find('.start-button').velocity("transition.slideUpOut", {duration: 300}); + } }); + }); + }, + actions: { selectDocument(documentId) { let doc = this.get('documents').findBy('id', documentId); @@ -48,6 +68,30 @@ export default Ember.Component.extend({ onDelete() { this.get("onDeleteSpace")(); - } + }, + + onImport() { + this.get('onImport')(); + }, + + onShowDocumentWizard(docId) { + if ($("#new-document-wizard").is(':visible') && this.get('docId') === docId) { + this.send('onHideDocumentWizard'); + return; + } + + this.set('docId', docId); + + $("#new-document-wizard").insertAfter(`#document-${docId}`); + $("#new-document-wizard").velocity("transition.slideDownIn", { duration: 300, complete: + function() { + $("#new-document-name").focus(); + }}); + }, + + onHideDocumentWizard() { + $("#new-document-wizard").insertAfter('#wizard-placeholder'); + $("#new-document-wizard").velocity("transition.slideUpOut", { duration: 300 }); + } } }); diff --git a/app/app/components/folder/folder-settings.js b/app/app/components/folder/folder-settings.js deleted file mode 100644 index 7f4e9ef1..00000000 --- a/app/app/components/folder/folder-settings.js +++ /dev/null @@ -1,43 +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 Ember from 'ember'; -import AuthMixin from '../../mixins/auth'; - -const { - inject: { service } -} = Ember; - -export default Ember.Component.extend(AuthMixin, { - folderService: service('folder'), - appMeta: service(), - users: [], - folders: [], - folder: {}, - moveTarget: null, - inviteEmail: "", - inviteMessage: "", - roleMessage: "", - permissions: {}, - - getDefaultInvitationMessage() { - return "Hey there, I am sharing the " + this.folder.get('name') + " (in " + this.get("appMeta.title") + ") with you so we can both access the same documents."; - }, - - willRender() { - if (this.roleMessage.length === 0) { - this.set('roleMessage', this.getDefaultInvitationMessage()); - } - }, - - actions: { - } -}); diff --git a/app/app/components/folder/sidebar-folders-list.js b/app/app/components/folder/sidebar-folders-list.js index b21c16f2..c358b74f 100644 --- a/app/app/components/folder/sidebar-folders-list.js +++ b/app/app/components/folder/sidebar-folders-list.js @@ -24,33 +24,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, { hasPrivateFolders: false, newFolder: '', - // init() { - // this._super(...arguments); - - // if (this.get('noFolder')) { - // return; - // } - - // let _this = this; - // this.get('templateService').getSavedTemplates().then(function(saved) { - // let emptyTemplate = { - // id: "0", - // title: "Empty", - // description: "An empty canvas for your words", - // img: "insert_drive_file", - // layout: "doc", - // locked: true - // }; - - // saved.forEach(function(t) { - // Ember.set(t, 'img', 'content_copy'); - // }); - - // saved.unshiftObject(emptyTemplate); - // _this.set('savedTemplates', saved); - // }); - // }, - didReceiveAttrs() { let folders = this.get('folders'); @@ -83,10 +56,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, { }, actions: { - // onImport() { - // this.attrs.onImport(); - // }, - addFolder() { var folderName = this.get('newFolder'); @@ -99,30 +68,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, { this.set('newFolder', ''); return true; - }, - - // showDocument() { - // this.set('showingDocument', true); - // this.set('showingList', false); - // }, - - // showList() { - // this.set('showingDocument', false); - // this.set('showingList', true); - // }, - - // onEditTemplate(template) { - // this.navigateToDocument(template); - // }, - - // onDocumentTemplate(id /*, title, type*/ ) { - // let self = this; - - // this.send("showNotification", "Creating"); - - // this.get('templateService').importSavedTemplate(this.folder.get('id'), id).then(function(document) { - // self.navigateToDocument(document); - // }); - // }, + } } }); diff --git a/app/app/components/folder/sidebar-zone.js b/app/app/components/folder/sidebar-zone.js index 768afe41..8e0dcb08 100644 --- a/app/app/components/folder/sidebar-zone.js +++ b/app/app/components/folder/sidebar-zone.js @@ -46,33 +46,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, { } }, - - // this._super(...arguments); - - // if (this.get('noFolder')) { - // return; - // } - - // let _this = this; - // this.get('templateService').getSavedTemplates().then(function(saved) { - // let emptyTemplate = { - // id: "0", - // title: "Empty", - // description: "An empty canvas for your words", - // img: "insert_drive_file", - // layout: "doc", - // locked: true - // }; - - // saved.forEach(function(t) { - // Ember.set(t, 'img', 'content_copy'); - // }); - - // saved.unshiftObject(emptyTemplate); - // _this.set('savedTemplates', saved); - // }); - // }, - didReceiveAttrs() { if (!this.get('noFolder')) { let folder = this.get('folder'); @@ -82,34 +55,12 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, AuthMixin, { } }, - // navigateToDocument(document) { - // this.attrs.showDocument(this.get('folder'), document); - // }, - actions: { - // onImport() { - // this.attrs.onImport(); - // }, - onFolderAdd(folderName) { this.attrs.onFolderAdd(folderName); return true; }, - // onEditTemplate(template) { - // this.navigateToDocument(template); - // }, - - // onDocumentTemplate(id /*, title, type*/ ) { - // let self = this; - - // this.send("showNotification", "Creating"); - - // this.get('templateService').importSavedTemplate(this.folder.get('id'), id).then(function(document) { - // self.navigateToDocument(document); - // }); - // }, - onChangeTab(tab) { this.set('tab', tab); }, diff --git a/app/app/components/folder/start-document.js b/app/app/components/folder/start-document.js index 65743767..d4097f89 100644 --- a/app/app/components/folder/start-document.js +++ b/app/app/components/folder/start-document.js @@ -12,13 +12,37 @@ import Ember from 'ember'; import NotifierMixin from '../../mixins/notifier'; + +const { + computed, +} = Ember; export default Ember.Component.extend(NotifierMixin, { localStorage: Ember.inject.service(), appMeta: Ember.inject.service(), - + templateService: Ember.inject.service('template'), canEditTemplate: "", importedDocuments: [], + savedTemplates: [], drop: null, + newDocumentName: 'New Document', + newDocumentNameMissing: computed.empty('newDocumentName'), + + init() { + this._super(...arguments); + + this.get('templateService').getSavedTemplates().then((saved) => { + let emptyTemplate = { + id: "0", + title: "Empty", + description: "An empty canvas for your words", + layout: "doc", + locked: true + }; + + saved.unshiftObject(emptyTemplate); + this.set('savedTemplates', saved); + }); + }, didInsertElement() { this.setupImport(); @@ -84,8 +108,31 @@ export default Ember.Component.extend(NotifierMixin, { }, actions: { + onHideDocumentWizard() { + this.get('onHideDocumentWizard')(); + }, + + editTemplate(template) { + this.audit.record('edited-saved-template'); + this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), template.get('id'), template.get('slug')); + + return true; + }, + + startDocument(template) { + this.audit.record('used-saved-template'); + this.send("showNotification", "Creating"); + + this.get('templateService').importSavedTemplate(this.folder.get('id'), template.id).then((document) => { + this.get('router').transitionTo('document', this.get('folder.id'), this.get('folder.slug'), document.get('id'), document.get('slug')); + }); + + return true; + }, + onDocumentImporting(filename) { this.send("showNotification", `Importing ${filename}`); + this.get('onHideDocumentWizard')(); let documents = this.get('importedDocuments'); documents.push(filename); @@ -99,25 +146,12 @@ export default Ember.Component.extend(NotifierMixin, { documents.pop(filename); this.set('importedDocuments', documents); - this.attrs.onImport(); + this.get('onImport')(); if (documents.length === 0) { // this.get('showDocument')(this.get('folder'), document); } }, - - editTemplate(template) { - this.audit.record('edited-saved-template'); - this.attrs.onEditTemplate(template); - - return true; - }, - - startDocument(template) { - this.audit.record('used-saved-template'); - this.attrs.onDocumentTemplate(template.id, template.title, "private"); - - return true; - } } }); + diff --git a/app/app/pods/folder/controller.js b/app/app/pods/folder/controller.js index 0c12ba70..3369ecc3 100644 --- a/app/app/pods/folder/controller.js +++ b/app/app/pods/folder/controller.js @@ -22,10 +22,6 @@ export default Ember.Controller.extend(NotifierMixin, { tab: 'index', actions: { - onImport() { - this.get('target.router').refresh(); - }, - onDocumentsChecked(documents) { this.set('selectedDocuments', documents); this.set('hasSelectedDocuments', documents.length > 0); @@ -64,10 +60,6 @@ export default Ember.Controller.extend(NotifierMixin, { this.send("showNotification", "Deleted"); }, - showDocument(folder, document) { - this.transitionToRoute('document', folder.get('id'), folder.get('slug'), document.get('id'), document.get('slug')); - }, - onFolderAdd(folder) { let self = this; this.showNotification("Added"); @@ -84,6 +76,10 @@ export default Ember.Controller.extend(NotifierMixin, { this.get('localStorage').clearSessionItem('folder'); this.transitionToRoute('application'); }); + }, + + onImport() { + this.get('target.router').refresh(); } } }); diff --git a/app/app/pods/folder/route.js b/app/app/pods/folder/route.js index c22b2c17..d7dd7d35 100644 --- a/app/app/pods/folder/route.js +++ b/app/app/pods/folder/route.js @@ -18,20 +18,36 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, { session: Ember.inject.service(''), folder: {}, - model: function (params) { + beforeModel() { + this.set('folderId', this.paramsFor('folder').folder_id) + + return new Ember.RSVP.Promise((resolve) => { + this.get('folderService').getFolder(this.get('folderId')).then((folder) => { + this.set('folder', folder); + + this.get('folderService').setCurrentFolder(folder).then(() => { + this.set('isEditor', this.get('folderService').get('canEditCurrentFolder')); + this.set('isFolderOwner', this.get('session.user.id') === folder.get('userId')); + + resolve(); + }); + }); + }); + }, + + model(params) { return Ember.RSVP.hash({ - folder: this.get('folderService').getFolder(params.folder_id), + folder: this.get('folder'), + isEditor: this.get('isEditor'), + isFolderOwner: this.get('isFolderOwner'), folders: this.get('folderService').getAll(), documents: this.get('documentService').getAllByFolder(params.folder_id) }); }, - setupController: function (controller, model) { + setupController(controller, model) { controller.set('model', model); this.browser.setTitle(model.folder.get('name')); - this.get('folderService').setCurrentFolder(model.folder); - controller.set('isEditor', this.get('folderService').get('canEditCurrentFolder')); - controller.set('isFolderOwner', this.get('session.user.id') === model.folder.get('userId')); }, actions: { diff --git a/app/app/pods/folder/template.hbs b/app/app/pods/folder/template.hbs index 323bcbc7..0aa88c09 100644 --- a/app/app/pods/folder/template.hbs +++ b/app/app/pods/folder/template.hbs @@ -1,14 +1,14 @@ {{layout/zone-navigation}} {{#layout/zone-container}} {{#layout/zone-sidebar}} - {{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=isFolderOwner isEditor=isEditor tab=tab + {{folder/sidebar-zone folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor tab=tab onFolderAdd=(action 'onFolderAdd')}} {{/layout/zone-sidebar}} {{#layout/zone-content}} - {{folder/folder-heading folder=model.folder isFolderOwner=isFolderOwner isEditor=isEditor}} + {{folder/folder-heading folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor}} {{folder/folder-toolbar folders=model.folders folder=model.folder hasSelectedDocuments=hasSelectedDocuments onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}} - {{folder/documents-list documents=model.documents folders=model.folders folder=model.folder isFolderOwner=isFolderOwner - onDocumentsChecked=(action 'onDocumentsChecked') onDeleteSpace=(action 'onDeleteSpace')}} + {{folder/documents-list documents=model.documents folders=model.folders folder=model.folder isFolderOwner=model.isFolderOwner isEditor=model.isEditor + onDocumentsChecked=(action 'onDocumentsChecked') onDeleteSpace=(action 'onDeleteSpace') onImport=(action 'onImport')}} {{/layout/zone-content}} {{/layout/zone-container}} \ No newline at end of file diff --git a/app/app/services/folder.js b/app/app/services/folder.js index 08c99238..0f537267 100644 --- a/app/app/services/folder.js +++ b/app/app/services/folder.js @@ -208,6 +208,7 @@ export default BaseService.extend({ canEdit = permission.canEdit; } }); + Ember.run(() => { this.set('canEditCurrentFolder', canEdit && this.get('sessionService.authenticated')); }); diff --git a/app/app/styles/view/folder/document.scss b/app/app/styles/view/folder/document.scss index f0894e5e..9d64ecaf 100644 --- a/app/app/styles/view/folder/document.scss +++ b/app/app/styles/view/folder/document.scss @@ -24,12 +24,9 @@ .documents-list { > .document { @include content-container(); - margin-bottom: 30px; - // padding: 20px 20px 25px; - // width: 100%; + margin: 0; position: relative; transition: 0.3s; - // border-bottom: 1px solid $color-border; &:hover { > .link { @@ -85,6 +82,16 @@ } } + > .wizard-item { + margin: 0; + padding: 0; + } + + > .no-wizard-item { + margin: 50px 0; + padding: 0; + } + > .selected-card { background-color: $color-card-active !important; diff --git a/app/app/styles/view/folder/wizard.scss b/app/app/styles/view/folder/wizard.scss index 8a91a6f6..a2ecbf1c 100644 --- a/app/app/styles/view/folder/wizard.scss +++ b/app/app/styles/view/folder/wizard.scss @@ -1,15 +1,77 @@ .start-document { - > .import-document-button { + @extend .no-select; + height: 60px; + background-color: transparent; + position: relative; + cursor: pointer; + + > .start-button { + display: none; + text-align: center; + padding-top: 20px; + color: $color-green; + font-size: 1rem; + position: relative; + + > .round-button { + opacity: 0.6 !important; + } + + > .label { + display: inline-block; + margin-left: 10px; + } + + > .line { + display: inline-block; + height: 1px; + border: 1px solid $color-green; + width: 100px; + margin: 0 20px 0 20px; + opacity: 0.2; + } + } + + &:first-of-type { + height: 30px; + + > .start-button { + padding-top: 0; + } + } +} + +.start-document-empty-state { + > .start-button { + display: block; + } +} + +.new-document-wizard { + @include border-radius(2px); + margin: 30px 0 30px 0; + padding: 30px; + border: 1px solid $color-stroke; + background-color: $color-off-white; + display: none; + + .document-name { + font-weight: bold; + font-size: 1.5rem; + margin: 0 0 30px 0; + color: $color-black; + } + + .import-document-button { width: 100%; padding: 20px; - margin: 30px 0; + margin: 0 0 30px 0; text-align: center; color: $color-gray; - border: 2px dotted $color-gray; + border: 1px solid $color-stroke; cursor: pointer; font-size: 1rem; line-height: 1.7rem; - @include border-radius(10px); @include ease-in(); &:hover { @@ -23,83 +85,78 @@ } } - > .templates-list { - margin: 0; + > .list-wrapper { + // height: 440px; + // overflow-y: auto; - > .list { + > .template-list { margin: 0; padding: 0; > .item { - cursor: pointer; - list-style: none; - padding: 10px 5px; - margin: 10px 0; - min-height: 90px; @include ease-in(); + @include border-radius(4px); + list-style: none; + cursor: pointer; + display: inline-block; + border: 1px solid $color-stroke; + background-color: $color-white; + margin: 0 20px 20px 0; + padding: 12px 0 0 20px; + width: 423px; + height: 60px; + position: relative; &:hover { - > .icon { - > .edit-control { - display: block; - } + @include ease-in(); + border-color: $color-link; + + > .template-actions { + display: block; } } - .icon { - text-align: center; - display: inline-block; - width: 50px; + > .template-actions { + @include ease-in(); + display: none; + position: absolute; + top: 10px; + right: 8px; - > .img { - text-align: center; - display: inline-block; - height: 40px; - width: 40px; - } - - > .edit-control { - display: none; - vertical-align: top; - text-align: center; - margin-top: 5px; - opacity: 0.5; - cursor: pointer; - color: $color-gray; - - &:hover { - color: $color-link; - } + .material-icons { + color: $color-stroke; + font-size: 1rem; } } > .details { - vertical-align: top; - display: inline-block; - width: 80%; - cursor: pointer; + width: 350px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; > .title { font-size: 1rem; - font-weight: bold; + font-weight: normal; color: $color-off-black; letter-spacing: 0.5px; + margin-top: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } > .desc { color: $color-gray; - font-size: 0.9rem; + font-size: 0.8rem; margin-top: 5px; - } - - &:hover { - > .title, - > .desc { - color: $color-link !important; - } + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } } } } + diff --git a/app/app/templates/components/folder/documents-list.hbs b/app/app/templates/components/folder/documents-list.hbs index d912702f..816aeac2 100644 --- a/app/app/templates/components/folder/documents-list.hbs +++ b/app/app/templates/components/folder/documents-list.hbs @@ -1,6 +1,6 @@ +
+{{folder/start-document folder=folder isEditor=isEditor onImport=(action 'onImport') onHideDocumentWizard=(action 'onHideDocumentWizard')}} + {{#if emptyState}}
delete
{{/if}} diff --git a/app/app/templates/components/folder/folder-settings.hbs b/app/app/templates/components/folder/folder-settings.hbs deleted file mode 100644 index cc3eebf6..00000000 --- a/app/app/templates/components/folder/folder-settings.hbs +++ /dev/null @@ -1,17 +0,0 @@ -
- - {{#if tabPermissions}} -
-
-
Permissions
-
Decide who can see and edit within this space
-
-
- -
The message that gets sent to new invites for {{folder.name}}
- {{textarea id="explainRole" value=roleMessage rows=3}} -
- -
- {{/if}} -
diff --git a/app/app/templates/components/folder/sidebar-zone.hbs b/app/app/templates/components/folder/sidebar-zone.hbs index af88f2d9..da7680d7 100644 --- a/app/app/templates/components/folder/sidebar-zone.hbs +++ b/app/app/templates/components/folder/sidebar-zone.hbs @@ -49,7 +49,7 @@
- {{layout/sidebar-intro title=appMeta.title message=appMeta.message}} + {{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
diff --git a/app/app/templates/components/folder/start-document.hbs b/app/app/templates/components/folder/start-document.hbs index cf0f600b..fd9532f4 100644 --- a/app/app/templates/components/folder/start-document.hbs +++ b/app/app/templates/components/folder/start-document.hbs @@ -1,31 +1,35 @@ -
+
+ +
+ {{input type="text" id="new-document-name" value=newDocumentName class=(if newDocumentNameMissing 'document-name error-inline' 'document-name') placeholder="Name" autocomplete="off"}} +
+
+ close +
+
+
- Drag-drop .doc, .docx, .txt, .md, .markdown
- or click to select files + Drag-drop or click to select .doc, .docx, .txt, .md, .markdown files
-
-
    +
    +
      {{#each savedTemplates key="id" as |template|}}
    • -
      -
      - {{template.img}} -
      - {{#if editor}} - {{#unless template.locked}} - mode_edit - {{/unless}} - {{/if}} -
      + {{#if isEditor}} + {{#unless template.locked}} +
      + mode_edit +
      + {{/unless}} + {{/if}}
      -
      - {{template.title}} -
      +
      {{template.title}}
      {{template.description}}
      • {{/each}}
    +