Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-20 21:59:42 +02:00
Code Releases Activity

add document section UX

Browse source
This commit is contained in:
Harvey Kandola 2017-12-15 16:14:44 +00:00
parent a728f14d41
commit af7e089764
3 changed files with 152 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

15
gui/app/components/document/view-content.js
View file

@ -13,31 +13,23 @@ import { notEmpty, empty } from '@ember/object/computed';
import { schedule } from '@ember/runloop'; import { schedule } from '@ember/runloop';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import Component from '@ember/component'; import Component from '@ember/component';
import NotifierMixin from '../../mixins/notifier';
import TooltipMixin from '../../mixins/tooltip'; import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(NotifierMixin, TooltipMixin, { export default Component.extend(TooltipMixin, {
documentService: service('document'), documentService: service('document'),
sectionService: service('section'), sectionService: service('section'),
appMeta: service(), appMeta: service(),
link: service(), link: service(),
hasPages: notEmpty('pages'), hasPages: notEmpty('pages'),
newSectionName: 'Section', newSectionName: '',
newSectionNameMissing: empty('newSectionName'), newSectionNameMissing: empty('newSectionName'),
newSectionLocation: '', newSectionLocation: '',
beforePage: '', beforePage: null,
toEdit: '', toEdit: '',
didReceiveAttrs() { didReceiveAttrs() {
this._super(...arguments); this._super(...arguments);
this.loadBlocks(); this.loadBlocks();
// schedule('afterRender', () => {
// let jumpTo = "#page-" + this.get('pageId');
// if (!$(jumpTo).inView()) {
// $(jumpTo).velocity("scroll", { duration: 250, offset: -100 });
// }
// });
}, },
didRender() { didRender() {
@ -84,7 +76,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
if (link.orphan) { if (link.orphan) {
$(this).addClass('broken-link'); $(this).addClass('broken-link');
self.showNotification('Broken link!');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return false; return false;

95
gui/app/styles/view/document/add-section.scss
View file

@ -9,27 +9,7 @@
display: none; display: none;
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
color: $color-green;
font-size: 1rem;
position: relative; 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 { &:first-of-type {
@ -48,45 +28,35 @@
} }
.new-section-wizard { .new-section-wizard {
display: none;
@include border-radius(2px); @include border-radius(2px);
margin: 0 0 30px 0; margin: 0 0 60px 0;
padding: 30px; padding: 30px;
border: 1px solid $color-stroke; border: 1px solid $color-stroke;
background-color: $color-off-white; background-color: $color-primary-light;
display: none;
.section-name { .new-section-caption {
margin: 20px 0 10px 0;
color: $color-primary;
font-size: 1.4rem;
font-weight: bold; font-weight: bold;
font-size: 1.5rem;
margin: 0 0 30px 0;
color: $color-black;
} }
.template-caption { .preset-list {
color: $color-gray; margin: 20px 0 0 0;
margin: 10px 0 10px 0;
font-size: 1.2rem;
}
> .list-wrapper {
height: 440px;
overflow-y: auto;
> .preset-list {
margin: 0;
padding: 0; padding: 0;
> .item { > .item {
@include ease-in(); @include ease-in();
@include border-radius(4px); @include border-radius(3px);
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
border: 1px solid $color-stroke; border: 1px solid $color-border;
background-color: $color-white; background-color: $color-white;
margin: 0 20px 20px 0; margin: 0 20px 20px 0;
padding: 15px 0 0 20px; padding: 12px 0 0 20px;
width: 200px; width: 250px;
height: 60px; height: 60px;
&:hover { &:hover {
@ -99,18 +69,17 @@
display: inline-block; display: inline-block;
width: 40px; width: 40px;
margin-right: 10px; margin-right: 10px;
float: left;
> .img { > .img {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
height: 30px; height: 30px;
width: 30px; width: 30px;
float: left;
} }
} }
> .title { > .title {
display: inline-block;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
color: $color-off-black; color: $color-off-black;
@ -120,22 +89,22 @@
} }
} }
> .block-list { .block-list {
margin: 0; margin: 20px 0 0 0;
padding: 0; padding: 0;
> .item { > .item {
@include ease-in(); @include ease-in();
@include border-radius(4px); @include border-radius(3px);
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
display: inline-block; display: block;
border: 1px solid $color-stroke; border: 1px solid $color-border;
background-color: $color-white; background-color: $color-white;
margin: 0 20px 20px 0; margin: 0 20px 20px 0;
padding: 12px 0 0 20px; padding: 20px;
width: 423px; height: 90px;
height: 60px; width: 100%;
position: relative; position: relative;
&:hover { &:hover {
@ -161,30 +130,18 @@
} }
> .details { > .details {
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
> .title { > .title {
font-size: 1rem; font-size: 1.1rem;
font-weight: normal; font-weight: bold;
color: $color-off-black; color: $color-off-black;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-top: 0; margin-top: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
> .desc { > .desc {
color: $color-gray; color: $color-off-black;
font-size: 0.8rem; font-size: 1rem;
margin-top: 5px; margin-top: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }

55
gui/app/templates/components/document/view-content.hbs
View file

@ -3,10 +3,7 @@
{{#if permissions.documentEdit}} {{#if permissions.documentEdit}}
<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}> <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"> <div class="start-button">
<div class="round-button round-button-small button-green"> <div class="btn btn-success font-bold">+ SECTION</div>
<i class="material-icons">add</i>
</div>
<div class="label">section</div>
</div> </div>
</div> </div>
{{else}} {{else}}
@ -22,10 +19,7 @@
{{#if permissions.documentEdit}} {{#if permissions.documentEdit}}
<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}> <div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
<div class="start-button"> <div class="start-button">
<div class="round-button round-button-small button-green"> <div class="btn btn-success font-bold">+ SECTION</div>
<i class="material-icons">add</i>
</div>
<div class="label">section</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
@ -35,26 +29,34 @@
{{#if permissions.documentEdit}} {{#if permissions.documentEdit}}
<div class="start-section start-section-empty-state" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}> <div class="start-section start-section-empty-state" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
<div class="start-button"> <div class="start-button">
<div class="round-button round-button-small button-green"> <div class="btn btn-success font-bold">+ SECTION</div>
<i class="material-icons">add</i>
</div>
<div class="label">section</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{/unless}} {{/unless}}
<div id="wizard-placeholder" class="hide margin-top-50" /> <div id="wizard-placeholder" class="hide margin-top-50" />
<div id="new-section-wizard" class="new-section-wizard"> <div id="new-section-wizard" class="new-section-wizard">
<div class=""> <div class="container box">
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'section-name error-inline' 'section-name') placeholder="Name" autocomplete="off"}} <div class="row clearfix">
<div class="col-12 clearfix">
<div class="float-right mb-5">
<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Cancel</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'form-control form-control-lg is-invalid' 'form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
</div>
</div> </div>
<div class="button-icon-gray" {{action 'onHideSectionWizard'}}>
<i class="material-icons color-gray">close</i>
</div> </div>
<div class="clearfix" />
<div class="list-wrapper"> <div class="row">
<div class="col-12">
<div class="form-group">
<div class="new-section-caption">Insert section type</div>
<ul class="preset-list"> <ul class="preset-list">
{{#each sections as |section|}} {{#each sections as |section|}}
<li class="item" {{action 'onInsertSection' section}}> <li class="item" {{action 'onInsertSection' section}}>
@ -65,9 +67,14 @@
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
{{#if hasBlocks}} {{#if hasBlocks}}
<div class="template-caption">Reusable content</div> <div class="new-section-caption">Insert re-usable content</div>
<ul class="block-list"> <ul class="block-list">
{{#each blocks as |block|}} {{#each blocks as |block|}}
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top"> <li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
@ -78,8 +85,8 @@
<i class="material-icons" id={{block.deleteId}}>delete</i> <i class="material-icons" id={{block.deleteId}}>delete</i>
</div> </div>
<div class="details" {{action 'onInsertBlock' block}}> <div class="details" {{action 'onInsertBlock' block}}>
<div class='title'>{{block.title}}</div> <div class="title text-truncate">{{block.title}}</div>
<div class='desc'>{{block.excerpt}}</div> <div class="desc text-truncate">{{block.excerpt}}</div>
</div> </div>
</li> </li>
{{/each}} {{/each}}
@ -89,3 +96,5 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
</div>
</div>