mirror of
https://github.com/documize/community.git
synced 2025-07-21 06:09:42 +02:00
WIP document view
This commit is contained in:
Harvey Kandola
parent
2d7e3c2904
commit
60fb4e5008
11 changed files with 139 additions and 134 deletions
|
|
@ -10,14 +10,11 @@
|
|||
// https://documize.com
|
||||
|
||||
import { empty } from '@ember/object/computed';
|
||||
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Component from '@ember/component';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
||||
export default Component.extend(NotifierMixin, TooltipMixin, {
|
||||
export default Component.extend({
|
||||
documentService: service('document'),
|
||||
editMode: false,
|
||||
docName: '',
|
||||
|
|
@ -49,14 +46,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
|
|||
|
||||
this.set('document.name', this.get('docName'));
|
||||
this.set('document.excerpt', this.get('docExcerpt'));
|
||||
|
||||
this.showNotification('Saved');
|
||||
this.get('browser').setTitle(this.get('document.name'));
|
||||
this.get('browser').setMetaDescription(this.get('document.excerpt'));
|
||||
|
||||
this.get('documentService').save(this.get('document'));
|
||||
|
||||
this.set('editMode', false);
|
||||
|
||||
this.attrs.onSaveDocument(this.get('document'));
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { computed } from '@ember/object';
|
|||
|
||||
import { inject as service } from '@ember/service';
|
||||
import Component from '@ember/component';
|
||||
import { A } from "@ember/array"
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
|
||||
|
|
@ -21,7 +22,7 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
|
|||
categoryService: service('category'),
|
||||
sessionService: service('session'),
|
||||
newCategory: '',
|
||||
categories: [],
|
||||
categories: A([]),
|
||||
hasCategories: computed('categories', function() {
|
||||
return this.get('categories').length > 0;
|
||||
}),
|
||||
|
|
@ -32,10 +33,6 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
|
|||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.load();
|
||||
|
|
@ -43,12 +40,12 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
|
|||
|
||||
load() {
|
||||
this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
|
||||
this.set('categories', categories);
|
||||
let cats = A(categories);
|
||||
this.set('categories', cats);
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
selected.forEach((s) => {
|
||||
let cats = this.set('categories', categories);
|
||||
let cat = categories.findBy('id', s.id);
|
||||
let cat = cats.findBy('id', s.id);
|
||||
if (is.not.undefined(cat)) {
|
||||
cat.set('selected', true);
|
||||
this.set('categories', cats);
|
||||
|
|
|
|||
|
|
@ -10,14 +10,11 @@
|
|||
// https://documize.com
|
||||
|
||||
import { empty } from '@ember/object/computed';
|
||||
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Component from '@ember/component';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
||||
export default Component.extend(NotifierMixin, TooltipMixin, {
|
||||
export default Component.extend({
|
||||
folderService: service('folder'),
|
||||
spaceName: '',
|
||||
hasNameError: empty('spaceName'),
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
|
|||
actions: {
|
||||
onSaveDocument(doc) {
|
||||
this.get('documentService').save(doc);
|
||||
this.showNotification('Saved');
|
||||
|
||||
this.get('browser').setTitle(doc.get('name'));
|
||||
this.get('browser').setMetaDescription(doc.get('excerpt'));
|
||||
},
|
||||
|
||||
onCopyPage(pageId, targetDocumentId) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
{{#layout/zone-container}}
|
||||
{{layout/nav-bar}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{document/document-sidebar tab=tab
|
||||
document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
|
||||
onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
|
||||
onGotoPage=(action 'onGotoPage')}}
|
||||
{{/layout/zone-sidebar}}
|
||||
<div class="container">
|
||||
{{#toolbar/t-toolbar}}
|
||||
{{#toolbar/t-links}}
|
||||
{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
|
||||
{{#link-to "folder" model.folder.id model.folder.slug class="link" tagName="li"}}{{model.folder.name}}{{/link-to}}
|
||||
{{/toolbar/t-links}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
||||
{{#layout/zone-content}}
|
||||
{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
|
||||
|
||||
<div id="zone-document-content" class="zone-document-content">
|
||||
<div class="document-header-zone">
|
||||
|
|
@ -27,7 +28,12 @@
|
|||
{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
|
||||
</div>
|
||||
|
||||
{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
|
||||
|
||||
{{document/document-sidebar tab=tab
|
||||
document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
|
||||
onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
|
||||
onGotoPage=(action 'onGotoPage')}}
|
||||
|
||||
|
||||
{{#if model.document.template}}
|
||||
<div class="document-template-header">Template</div>
|
||||
|
|
@ -40,7 +46,4 @@
|
|||
onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
|
||||
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
|
||||
</div>
|
||||
|
||||
{{/layout/zone-content}}
|
||||
|
||||
{{/layout/zone-container}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,4 +7,3 @@
|
|||
@import "toc.scss";
|
||||
@import "view.scss";
|
||||
@import "wysiwyg.scss";
|
||||
@import "space-category-tag.scss";
|
||||
|
|
|
|||
|
|
@ -1,12 +1,41 @@
|
|||
.document-space {
|
||||
display: inline-block;
|
||||
.view-document {
|
||||
> .document-heading {
|
||||
margin-top: 3rem;
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
.doc-title {
|
||||
font-size: 2rem;
|
||||
margin: 50px 0 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
}
|
||||
|
||||
> .document-heading-edit {
|
||||
margin-top: 5.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
> .document-customfields {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
.heading {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
color: $color-gray;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: normal;
|
||||
color: $color-black;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,15 +61,6 @@
|
|||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
// // Medium devices (tablets, 768px and up)
|
||||
// @media (min-width: 768px) { height: 300px; }
|
||||
|
||||
// // Large devices (desktops, 992px and up)
|
||||
// @media (min-width: 992px) { height: 400px; }
|
||||
|
||||
// // Extra large devices (large desktops, 1200px and up)
|
||||
// @media (min-width: 1200px) { height: 500px; }
|
||||
}
|
||||
|
||||
.document-tags {
|
||||
1
gui/app/styles/view/document/document.scss
Normal file
1
gui/app/styles/view/document/document.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "doc-meta.scss";
|
||||
|
|
@ -6,3 +6,4 @@
|
|||
@import "customize.scss";
|
||||
@import "search.scss";
|
||||
@import "auth.scss";
|
||||
@import "document/document.scss"
|
||||
|
|
|
|||
|
|
@ -1,25 +1,21 @@
|
|||
{{#unless editMode}}
|
||||
<div class="view-document">
|
||||
<div class="document-heading {{if permissions.documentEdit 'cursor-pointer'}}" onclick={{if permissions.documentEdit (action 'toggleEdit')}}>
|
||||
<h1 class="doc-title">{{document.name}}</h1>
|
||||
<div class="doc-excerpt">{{document.excerpt}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<form {{action "onSave" on="submit"}}>
|
||||
<div class="edit-document-heading">
|
||||
<div class="input-inline input-transparent edit-doc-title">
|
||||
{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
|
||||
</div>
|
||||
<div class="input-inline input-transparent edit-doc-excerpt">
|
||||
{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt" autocomplete="off"}}
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="round-button-mono" {{action 'onSave'}}>
|
||||
<i class="material-icons color-green">check</i>
|
||||
</button>
|
||||
<div class="round-button-mono" {{action 'onCancel'}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
<form class="view-document" {{action "onSave" on="submit"}}>
|
||||
<div class="document-heading-edit">
|
||||
<div class="form-group">
|
||||
{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Title" autocomplete="off"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Excerpt" autocomplete="off"}}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-secondary" {{action "onCancel"}}>Cancel</button>
|
||||
<button type="submit" class="btn btn-success" {{action "onSave"}}>Save</button>
|
||||
</div>
|
||||
</form>
|
||||
{{/unless}}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,27 @@
|
|||
<div class="back-to-space document-space">
|
||||
<div class="caption">Space</div>
|
||||
{{#link-to 'folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-nav">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">{{folder.name}}</div>
|
||||
<div class="view-document">
|
||||
<div class="document-customfields">
|
||||
<div class="row">
|
||||
<div class="col-2 heading">
|
||||
Categories
|
||||
</div>
|
||||
<div class="col-10 value">
|
||||
{{#each selectedCategories as |cat|}}
|
||||
{{cat.category}}{{#unless cat.lastObject}}, {{/unless}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
|
||||
<div class="document-category">
|
||||
<div class="caption">Category</div>
|
||||
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="regular-button button-blue">{{cat.category}}</div>
|
||||
{{else}}
|
||||
{{#if canAddCategory}}
|
||||
{{#if canAddCategory}}
|
||||
{{#unless canSelectCategory}}
|
||||
{{#link-to 'folder.settings.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
|
||||
{{#link-to 'folder.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
{{else}}
|
||||
<p> </p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if canSelectCategory}}
|
||||
{{#if canSelectCategory}}
|
||||
<div class="regular-button button-white" id="document-category-button">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
|
|
@ -32,9 +30,8 @@
|
|||
<div class="document-category-dialog">
|
||||
{{ui/ui-list-picker items=categories nameField='category'}}
|
||||
{{#if canAddCategory}}
|
||||
{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
|
||||
{{#link-to 'folder.category' folder.id folder.slug}}Manage{{/link-to}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue