Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00
Code Releases Activity

new start document UX

Browse source
This commit is contained in:
Harvey Kandola 2017-03-24 17:43:41 +00:00
parent 5bfd3bb247
commit 2ea782aaed
15 changed files with 289 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/app/components/folder/documents-list.js
View file

@ -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 });
}
}
});

43
app/app/components/folder/folder-settings.js
View file

@ -1,43 +0,0 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. 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 <sales@documize.com>.
//
// 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: {
}
});

57
app/app/components/folder/sidebar-folders-list.js
View file

@ -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);
// });
// },
}
}
});

49
app/app/components/folder/sidebar-zone.js
View file

@ -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);
},

66
app/app/components/folder/start-document.js
View file

@ -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;
}
}
});

12
app/app/pods/folder/controller.js
View file

@ -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();
}
}
});

28
app/app/pods/folder/route.js
View file

@ -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: {

8
app/app/pods/folder/template.hbs
View file

@ -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}}

1
app/app/services/folder.js
View file

@ -208,6 +208,7 @@ export default BaseService.extend({
canEdit = permission.canEdit;
}
});
Ember.run(() => {
this.set('canEditCurrentFolder', canEdit && this.get('sessionService.authenticated'));
});

15
app/app/styles/view/folder/document.scss
View file

@ -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;

161
app/app/styles/view/folder/wizard.scss
View file

@ -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;
}
}
}
}
}
}

17
app/app/templates/components/folder/documents-list.hbs
View file

@ -1,6 +1,6 @@
<ul class="documents-list">
{{#each documents key="id" as |document|}}
<li class="document {{if document.selected "selected-card"}}">
<li id="document-{{document.id}}" class="document {{if document.selected "selected-card"}}">
{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
<div class="title">{{ document.name }}</div>
<div class="snippet">{{ document.excerpt }}</div>
@ -16,9 +16,24 @@
{{/if}}
</div>
</li>
{{#if canCreate}}
<li class="wizard-item start-document" {{action 'onShowDocumentWizard' document.id}}>
<div class="start-button">
<div class="round-button round-button-small button-green">
<i class="material-icons">add</i>
</div>
<div class="label">document</div>
</div>
</li>
{{else}}
<li class="no-wizard-item" />
{{/if}}
{{/each}}
</ul>
<div id="wizard-placeholder" class="hide margin-top-50" />
{{folder/start-document folder=folder isEditor=isEditor onImport=(action 'onImport') onHideDocumentWizard=(action 'onHideDocumentWizard')}}
{{#if emptyState}}
<div class="regular-button button-red" {{action 'onDelete'}}>delete</div>
{{/if}}

17
app/app/templates/components/folder/folder-settings.hbs
View file

@ -1,17 +0,0 @@
<div class="folder-settings">
{{#if tabPermissions}}
<div class="form-bordered">
<div class="form-header">
<div class="title">Permissions</div>
<div class="tip">Decide who can see and edit within this space</div>
</div>
<div class="input-control">
<label>Permissions</label>
<div class="tip">The message that gets sent to new invites for <strong>{{folder.name}}</strong></div>
{{textarea id="explainRole" value=roleMessage rows=3}}
</div>
</div>
{{/if}}
</div>

2
app/app/templates/components/folder/sidebar-zone.hbs
View file

@ -49,7 +49,7 @@
</div>
<div class="sidebar-common">
{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
{{layout/sidebar-intro title=appMeta.title message=appMeta.message}}
</div>
<div class="sidebar-wrapper">

40
app/app/templates/components/folder/start-document.hbs
View file

@ -1,31 +1,35 @@
<div class="start-document">
<div id="new-document-wizard" class="new-document-wizard">
<div class="input-inline input-transparent pull-left width-80">
{{input type="text" id="new-document-name" value=newDocumentName class=(if newDocumentNameMissing 'document-name error-inline' 'document-name') placeholder="Name" autocomplete="off"}}
</div>
<div class="round-button-mono pull-right" {{action 'onHideDocumentWizard'}}>
<i class="material-icons color-gray">close</i>
</div>
<div class="clearfix" />
<div id="import-document-button" class="import-document-button">
Drag-drop .doc, .docx, .txt, .md, .markdown<br/>
or click to select files
Drag-drop or click to select .doc, .docx, .txt, .md, .markdown files
</div>
<div class="templates-list">
<ul class="list">
<div class="list-wrapper">
<ul class="template-list">
{{#each savedTemplates key="id" as |template|}}
<li class="item">
<div class="icon">
<div class="symbol" {{action 'startDocument' template}}>
<i class="material-icons">{{template.img}}</i>
</div>
{{#if editor}}
{{#unless template.locked}}
<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>
{{/unless}}
{{/if}}
</div>
{{#if isEditor}}
{{#unless template.locked}}
<div class="template-actions">
<i class="material-icons" {{action 'editTemplate' template}}>mode_edit</i>
</div>
{{/unless}}
{{/if}}
<div class="details" {{action 'startDocument' template}}>
<div class='title'>
{{template.title}}
</div>
<div class='title'>{{template.title}}</div>
<div class='desc'>{{template.description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>