mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
all-new add section
This commit is contained in:
Harvey Kandola
parent
5cdc2a0b3c
commit
738aaf82c9
13 changed files with 3750 additions and 180 deletions
|
|
@ -19,12 +19,34 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
appMeta: Ember.inject.service(),
|
||||
link: Ember.inject.service(),
|
||||
|
||||
noSections: Ember.computed('pages', function () {
|
||||
return this.get('pages.length') === 0;
|
||||
}),
|
||||
didReceiveAttrs() {
|
||||
this.get('sectionService').getSpaceBlocks(this.get('folder.id')).then((blocks) => {
|
||||
this.set('blocks', blocks);
|
||||
this.set('hasBlocks', blocks.get('length') > 0);
|
||||
|
||||
blocks.forEach((b) => {
|
||||
b.set('deleteId', `delete-block-button-${b.id}`);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
didRender() {
|
||||
this.contentLinkHandler();
|
||||
|
||||
let self = this;
|
||||
$(".tooltipped").each(function(i, el) {
|
||||
self.addTooltip(el);
|
||||
});
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
$(".start-section").hoverIntent({interval: 100, over: function() {
|
||||
// in
|
||||
$(this).find('.start-button').css("display", "block").removeClass('fadeOut').addClass('fadeIn');
|
||||
}, out: function() {
|
||||
//out
|
||||
$(this).find('.start-button').css("display", "none").removeClass('fadeIn').addClass('fadeOut');
|
||||
} });
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
|
|
@ -96,6 +118,41 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
|
||||
onSavePage(page, meta) {
|
||||
this.attrs.onSavePage(page, meta);
|
||||
},
|
||||
|
||||
///////////////// move to page-wizard ??????????!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
onShowSectionWizard(page) {
|
||||
if ($("#new-section-wizard").is(':visible') && $("#new-section-wizard").attr('data-page-id') === page.id) {
|
||||
this.send('onHideSectionWizard');
|
||||
return;
|
||||
}
|
||||
|
||||
$("#new-section-wizard").attr('data-page-id', page.id);
|
||||
$("#new-section-wizard").insertAfter(`#add-section-button-${page.id}`);
|
||||
$("#new-section-wizard").fadeIn(100, 'linear', function() {
|
||||
});
|
||||
},
|
||||
|
||||
onHideSectionWizard() {
|
||||
$("#new-section-wizard").fadeOut(100, 'linear', function() {
|
||||
});
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.attrs.onCancel();
|
||||
},
|
||||
|
||||
addSection(section) {
|
||||
this.attrs.onAddSection(section);
|
||||
},
|
||||
|
||||
onDeleteBlock(id) {
|
||||
this.attrs.onDeleteBlock(id);
|
||||
},
|
||||
|
||||
onInsertBlock(block) {
|
||||
this.attrs.onInsertBlock(block);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
export default Ember.Controller.extend({
|
||||
documentService: Ember.inject.service('document'),
|
||||
|
||||
actions: {
|
||||
onCancel( /*page*/ ) {
|
||||
this.transitionToRoute('document', {
|
||||
queryParams: {
|
||||
page: this.get('model.page.id')
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onAction(page, meta) {
|
||||
let self = this;
|
||||
let model = {
|
||||
page: page.toJSON({ includeId: true }),
|
||||
meta: meta.toJSON({ includeId: true })
|
||||
};
|
||||
|
||||
this.get('documentService').updatePage(page.get('documentId'), page.get('id'), model).then(function () {
|
||||
self.audit.record("edited-page");
|
||||
self.transitionToRoute('document', {
|
||||
queryParams: {
|
||||
page: page.get('id')
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,31 +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 AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
||||
|
||||
export default Ember.Route.extend(AuthenticatedRouteMixin, {
|
||||
documentService: Ember.inject.service('document'),
|
||||
folderService: Ember.inject.service('folder'),
|
||||
|
||||
model(params) {
|
||||
let self = this;
|
||||
|
||||
this.audit.record("edited-page");
|
||||
|
||||
return Ember.RSVP.hash({
|
||||
folder: self.modelFor('document').folder,
|
||||
document: self.modelFor('document').document,
|
||||
page: self.get('documentService').getPage(self.paramsFor('document').document_id, params.page_id),
|
||||
meta: self.get('documentService').getPageMeta(self.paramsFor('document').document_id, params.page_id)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
{{document/document-editor document=model.document folder=model.folder page=model.page meta=model.meta onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
|
|
@ -59,7 +59,9 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
|
|||
pages: this.get('pages'),
|
||||
tabs: this.get('tabs'),
|
||||
sections: this.get('sectionService').getAll().then((sections) => {
|
||||
return sections.filterBy('pageType', 'section');
|
||||
return sections;
|
||||
// return sections.filterBy('pageType', 'section');
|
||||
// return sections.filterBy('pageType', 'tab');
|
||||
}),
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
{{document/document-heading document=model.document isEditor=model.isEditor onSaveDocument=(action 'onSaveDocument')}}
|
||||
{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages
|
||||
folder=model.folder folders=model.folders isEditor=model.isEditor onSavePage=(action 'onSavePage')
|
||||
folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor onSavePage=(action 'onSavePage')
|
||||
gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ $i: 150;
|
|||
$i: 100;
|
||||
@while $i > 0 {
|
||||
.width-#{$i} {
|
||||
width: #{$i}#{"%"};
|
||||
width: #{$i}#{"%"} !important;
|
||||
}
|
||||
$i: $i - 1;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,4 @@
|
|||
@import "activity.scss";
|
||||
@import "content.scss";
|
||||
@import "edit-tools.scss";
|
||||
@import "editor.scss";
|
||||
@import "files.scss";
|
||||
|
|
@ -7,5 +6,6 @@
|
|||
@import "layout.scss";
|
||||
@import "sidebar.scss";
|
||||
@import "toolbar.scss";
|
||||
@import "view.scss";
|
||||
@import "wizard.scss";
|
||||
@import "wysiwyg.scss";
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
.zone-document {
|
||||
min-height: 500px; //ensure dropdowns render in viewport
|
||||
height: 100%;
|
||||
margin-left: 60px;
|
||||
padding: 30px 70px;
|
||||
z-index: 777;
|
||||
background-color: $color-off-white;
|
||||
}
|
||||
|
||||
.zone-document-content {
|
||||
> .back-to-space {
|
||||
margin: 10px 0;
|
||||
|
||||
> a {
|
||||
vertical-align: middle;
|
||||
color: $color-primary;
|
||||
font-size: 1rem;
|
||||
|
||||
> .material-icons {
|
||||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
margin: 30px 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 75px;
|
||||
}
|
||||
|
||||
.edit-document-heading {
|
||||
margin-top: 30px;
|
||||
|
||||
.edit-doc-title {
|
||||
> input {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
margin: 0 0 10px;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-doc-excerpt {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-view {
|
||||
margin: 30px 0 50px;
|
||||
|
||||
.is-a-page {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
padding: 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
margin: 30px 0;
|
||||
background-color: $color-white;
|
||||
|
||||
&:hover {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state-document {
|
||||
margin-top: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-page-toolbar {
|
||||
width: 300px;
|
||||
}
|
||||
268
app/app/styles/view/document/view.scss
Normal file
268
app/app/styles/view/document/view.scss
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
.zone-document {
|
||||
min-height: 500px; //ensure dropdowns render in viewport
|
||||
height: 100%;
|
||||
margin-left: 60px;
|
||||
padding: 30px 70px;
|
||||
z-index: 777;
|
||||
background-color: $color-off-white;
|
||||
}
|
||||
|
||||
.zone-document-content {
|
||||
> .back-to-space {
|
||||
margin: 10px 0;
|
||||
|
||||
> a {
|
||||
vertical-align: middle;
|
||||
color: $color-primary;
|
||||
font-size: 1rem;
|
||||
|
||||
> .material-icons {
|
||||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
margin: 30px 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
|
||||
.edit-document-heading {
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
.edit-doc-title {
|
||||
> input {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
margin: 0 0 10px;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-doc-excerpt {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-view {
|
||||
margin: 0 0 50px 0;
|
||||
max-width: 1200px;
|
||||
@include ease-in();
|
||||
|
||||
.is-a-page {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
padding: 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
|
||||
&:hover {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.start-section {
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@include ease-in();
|
||||
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-wizard {
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
margin: 0 0 30px 0;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-off-white;
|
||||
display: none;
|
||||
|
||||
.section-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 30px 0;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.template-caption {
|
||||
color: $color-gray;
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
> .list-wrapper {
|
||||
height: 440px;
|
||||
overflow-y: auto;
|
||||
|
||||
> .preset-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@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: 15px 0 0 20px;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
}
|
||||
|
||||
.icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
|
||||
> .img {
|
||||
float: left;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .block-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@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;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
}
|
||||
|
||||
> .details {
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
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.8rem;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state-document {
|
||||
margin-top: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-page-toolbar {
|
||||
width: 300px;
|
||||
}
|
||||
|
|
@ -138,6 +138,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.round-button-small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.square-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,72 @@
|
|||
<div class="document-view">
|
||||
{{#each pages key="id" as |page index|}}
|
||||
{{#if isEditor}}
|
||||
<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}>
|
||||
<div class="start-button animated">
|
||||
<div class="round-button round-button-small button-green">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
<div class="label">section</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="section-divider" />
|
||||
{{/if}}
|
||||
{{#document/document-page document=document folder=folder page=page isEditor=isEditor onSavePage=(action 'onSavePage')
|
||||
onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
|
||||
{{/document/document-page}}
|
||||
{{else}}
|
||||
no sections!
|
||||
<div class="empty-state-document">
|
||||
<img src="/assets/img/empty-state-document.gif" />
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{#if noSections}}
|
||||
<div class="empty-state-document">
|
||||
<img src="/assets/img/empty-state-document.gif" />
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="input-inline input-transparent pull-left width-80">
|
||||
{{focus-input type="text" value=newSectionName class="section-name {{(if hasNameError 'error-inline')}}" placeholder="Name" autocomplete="off"}}
|
||||
</div>
|
||||
<div class="round-button-mono pull-right" {{action 'onHideSectionWizard'}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
|
||||
<div class="list-wrapper">
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action 'addSection' section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
|
||||
</div>
|
||||
<div class='title'>{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{#if hasBlocks}}
|
||||
<div class="template-caption">Reusable content</div>
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item tooltipped" data-tooltip="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-tooltip-position="bottom center">
|
||||
<div class="actions hide">
|
||||
{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
|
||||
<i class="material-icons">mode_edit</i>
|
||||
{{/link-to}}
|
||||
<i class="material-icons" id={{block.deleteId}}>delete</i>
|
||||
</div>
|
||||
<div class="details" {{action 'onInsertBlock' block}}>
|
||||
<div class='title'>{{block.title}}</div>
|
||||
<div class='desc'>{{block.excerpt}}</div>
|
||||
</div>
|
||||
{{#dropdown-dialog target=block.deleteId position="bottom left" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
|
||||
<p>Are you sure you want to delete block<br/><span class="bold">{{block.title}}?</span></p>
|
||||
{{/dropdown-dialog}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="template-caption">Reusable content appears below</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue