mirror of
https://github.com/documize/community.git
synced 2025-08-08 06:55:28 +02:00
doc view UX
This commit is contained in:
Harvey Kandola
parent
d0c80cf6a2
commit
04dca7befc
20 changed files with 532 additions and 567 deletions
|
|
@ -19,18 +19,13 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
folder: {},
|
||||
pages: [],
|
||||
page: "",
|
||||
showToc: false,
|
||||
tocTools: {
|
||||
UpTarget: "",
|
||||
DownTarget: "",
|
||||
AllowIndent: false,
|
||||
AllowOutdent: false
|
||||
},
|
||||
actionablePage: false,
|
||||
upDisabled: true,
|
||||
downDisabled: true,
|
||||
indentDisabled: true,
|
||||
outdentDisabled: true,
|
||||
state: {
|
||||
actionablePage: false,
|
||||
upDisabled: true,
|
||||
downDisabled: true,
|
||||
indentDisabled: true,
|
||||
outdentDisabled: true
|
||||
},
|
||||
|
||||
didReceiveAttrs: function() {
|
||||
this.set('showToc', is.not.undefined(this.get('pages')) && this.get('pages').get('length') > 2);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,16 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
document: {},
|
||||
folder: {},
|
||||
|
||||
didRender() {
|
||||
if (this.session.authenticated) {
|
||||
this.addTooltip(document.getElementById("owner-avatar"));
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElements() {
|
||||
this.destroyElements();
|
||||
},
|
||||
|
||||
actions: {
|
||||
// Page up - above pages shunt down.
|
||||
onPageSequenceChange(pendingChanges) {
|
||||
|
|
@ -31,6 +41,11 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
|
||||
gotoPage(id) {
|
||||
return this.attrs.gotoPage(id);
|
||||
},
|
||||
|
||||
// close dialog
|
||||
close() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,13 +33,10 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
this.addTooltip(document.getElementById("save-template-button"));
|
||||
this.addTooltip(document.getElementById("set-meta-button"));
|
||||
this.addTooltip(document.getElementById("delete-document-button"));
|
||||
this.addTooltip(document.getElementById("add-section-button"));
|
||||
}
|
||||
|
||||
this.addTooltip(document.getElementById("print-document-button"));
|
||||
|
||||
if (this.session.authenticated) {
|
||||
this.addTooltip(document.getElementById("owner-avatar"));
|
||||
}
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
|
|
@ -138,10 +135,5 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
|
|||
this.attrs.onDocumentChange(doc);
|
||||
return true;
|
||||
},
|
||||
|
||||
// close dialog
|
||||
close() {
|
||||
return true;
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,17 +1,29 @@
|
|||
{{#header/page-navigation folder=folder document=model documentMode=true}}
|
||||
{{header/message-box message=model.excerpt}}
|
||||
{{/header/page-navigation}}
|
||||
{{#layout/zone-container}}
|
||||
|
||||
{{document/document-toolbar document=model pages=pages meta=meta folder=folder isEditor=isEditor users=users owner=owner onSaveTemplate=(action 'onSaveTemplate') onDocumentChange=(action 'onDocumentChange') onAttachmentUpload=(action
|
||||
'onAttachmentUpload') onDocumentDelete=(action 'onDocumentDelete')}}
|
||||
{{layout/zone-navigation}}
|
||||
|
||||
<div class="container-fluid background-color-white">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-3 col-sm-3">
|
||||
{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page isEditor=isEditor onAddPage=(action 'onAddPage') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-9 col-sm-9">
|
||||
{{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders isEditor=isEditor onAttachmentDeleted=(action 'onAttachmentDeleted') onDeletePage=(action 'onPageDeleted')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#layout/zone-header title=model.name message=model.excerpt}}
|
||||
{{document/document-toolbar document=model pages=pages folder=folder
|
||||
isEditor=isEditor users=users
|
||||
onSaveTemplate=(action 'onSaveTemplate')
|
||||
onDocumentChange=(action 'onDocumentChange')
|
||||
onAttachmentUpload=(action 'onAttachmentUpload')
|
||||
onDocumentDelete=(action 'onDocumentDelete')}}
|
||||
{{/layout/zone-header}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor
|
||||
onAddPage=(action 'onAddPage')
|
||||
changePageSequence=(action 'onPageSequenceChange')
|
||||
changePageLevel=(action 'onPageLevelChange')
|
||||
gotoPage=(action 'gotoPage')}}
|
||||
{{/layout/zone-sidebar}}
|
||||
|
||||
{{#layout/zone-content}}
|
||||
{{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders
|
||||
isEditor=isEditor
|
||||
onAttachmentDeleted=(action 'onAttachmentDeleted')
|
||||
onDeletePage=(action 'onPageDeleted')}}
|
||||
{{/layout/zone-content}}
|
||||
|
||||
{{/layout/zone-container}}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,12 @@
|
|||
{{layout/zone-navigation}}
|
||||
|
||||
{{#layout/zone-header title=model.name message="Settings, sharing, permissions and deletion"}}
|
||||
<div class="pull-right">
|
||||
{{#link-to 'folders.folder' model.id model.slug}}
|
||||
<div class="regular-button button-white">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">space</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{#link-to 'folders.folder' model.id model.slug}}
|
||||
<div class="regular-button button-white">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">space</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
{{/layout/zone-header}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
|
|
|
|||
|
|
@ -10,21 +10,17 @@
|
|||
// https://documize.com
|
||||
|
||||
@media print {
|
||||
.header, .sidebar, .non-printable {
|
||||
.zone-navigation, .zone-header, .zone-sidebar, .non-printable {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.document-container {
|
||||
> .content {
|
||||
padding: 20px 0 !important;
|
||||
.document-view {
|
||||
.page-toolbar, .document-summary, .attachment-zone, .document-tags {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.page-toolbar, .document-summary, .attachment-zone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.print-title, .non-printable-message{
|
||||
display: block !important;
|
||||
}
|
||||
.print-title, .non-printable-message{
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,109 +1,105 @@
|
|||
.document-container {
|
||||
> .content {
|
||||
padding: 40px 40px 40px 20px;
|
||||
.document-view {
|
||||
.print-title {
|
||||
display: none;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
color:$color-black;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.print-title {
|
||||
display: none;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
color:$color-black;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.non-printable-message {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.non-printable-message {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
color: $color-gray;
|
||||
}
|
||||
.attachment-zone {
|
||||
margin: 20px 0 30px 0;
|
||||
|
||||
.attachment-zone {
|
||||
margin: 20px 0 30px 0;
|
||||
> .list {
|
||||
margin: 0;
|
||||
padding: 7px;
|
||||
|
||||
> .list {
|
||||
margin: 0;
|
||||
padding: 7px;
|
||||
> .item {
|
||||
color: $color-off-black;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px dotted $color-border;
|
||||
padding-bottom: 10px;
|
||||
|
||||
> .item {
|
||||
color: $color-off-black;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
border-bottom: 1px solid $color-border;
|
||||
padding-bottom: 10px;
|
||||
> .icon {
|
||||
vertical-align: text-top;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
vertical-align: text-top;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .file {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .action {
|
||||
float: right;
|
||||
margin-top: -8px;
|
||||
@extend .cursor-pointer;
|
||||
display: none;
|
||||
color: $color-stroke;
|
||||
}
|
||||
> a {
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
.file {
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
}
|
||||
> .file {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .action {
|
||||
float: right;
|
||||
margin-top: -8px;
|
||||
@extend .cursor-pointer;
|
||||
display: none;
|
||||
color: $color-stroke;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.file {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-attachment-dialog,
|
||||
.delete-page-dialog {
|
||||
display: none;
|
||||
}
|
||||
.delete-attachment-dialog,
|
||||
.delete-page-dialog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-template {
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 5px;
|
||||
@include border-bottom(1px);
|
||||
}
|
||||
.is-template {
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 5px;
|
||||
@include border-bottom(1px);
|
||||
}
|
||||
|
||||
> .pages {
|
||||
margin: 30px 0 50px 0;
|
||||
> .pages {
|
||||
margin: 30px 0 50px 0;
|
||||
|
||||
> .wysiwyg {
|
||||
> .is-a-page {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0.3;
|
||||
@extend .transition-all;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> .wysiwyg {
|
||||
> .is-a-page {
|
||||
.page-title {
|
||||
> .page-toolbar {
|
||||
opacity: 0.3;
|
||||
@extend .transition-all;
|
||||
|
||||
&:hover {
|
||||
.page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.page-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,6 +126,5 @@
|
|||
> .regular-button {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,203 @@
|
|||
.document-container {
|
||||
> .sidebar {
|
||||
padding: 40px;
|
||||
font-size: 0.875rem;
|
||||
@extend .no-select;
|
||||
.document-sidebar {
|
||||
@extend .no-select;
|
||||
|
||||
.stick {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
}
|
||||
> .summary-line {
|
||||
color: $color-gray;
|
||||
margin-top: 20px;
|
||||
|
||||
.document-structure {
|
||||
> .toc-controls {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
>.items {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
||||
> .round-button-mono {
|
||||
color: $color-off-black;
|
||||
border-color: $color-off-black;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
@extend .cursor-not-allowed;
|
||||
color: $color-stroke;
|
||||
border-color: $color-stroke;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-stroke;
|
||||
}
|
||||
}
|
||||
> .divider {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.entries {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
overflow-x: hidden;
|
||||
> .item {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
.item {
|
||||
padding: 4px 0;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
> .metric {
|
||||
@extend .cursor-pointer;
|
||||
text-align: center;
|
||||
color: $color-gray;
|
||||
|
||||
> .link {
|
||||
color: $color-stroke;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
.number {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stick {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.document-structure {
|
||||
> .toc-controls {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 30px 0 10px 0;
|
||||
color: $color-gray;
|
||||
|
||||
> .round-button-mono {
|
||||
color: $color-green;
|
||||
border-color: $color-green;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-green;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-bullet {
|
||||
vertical-align: middle;
|
||||
> .disabled {
|
||||
@extend .cursor-not-allowed;
|
||||
color: $color-stroke;
|
||||
font-size: 10px;
|
||||
margin-right: 5px;
|
||||
border-color: $color-stroke;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-stroke;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entries {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
overflow-x: hidden;
|
||||
list-style-type: none;
|
||||
|
||||
.item {
|
||||
padding: 4px 0;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
> .link {
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-viewers {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
> .items {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 300px;
|
||||
min-width: 300px;
|
||||
white-space: nowrap;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
|
||||
> .avatar-box {
|
||||
display: inline-block;
|
||||
margin: 3px 10px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> .detail {
|
||||
display: inline-block;
|
||||
|
||||
> .name {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
> .date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-editors {
|
||||
position: relative;
|
||||
|
||||
> .items {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 300px;
|
||||
min-width: 300px;
|
||||
white-space: nowrap;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
|
||||
.avatar-box {
|
||||
display: inline-block;
|
||||
margin: 3px 10px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: inline-block;
|
||||
|
||||
.name {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
.changed {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
font-size: 0.9rem;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,153 +1,2 @@
|
|||
.document-container {
|
||||
> .toolbar {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 40px 40px 20px 40px;
|
||||
background-color: $color-off-white;
|
||||
color: $color-gray;
|
||||
|
||||
> .meta-data {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
>.items {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> .divider {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .item {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
> .avatar {
|
||||
}
|
||||
|
||||
> .date {
|
||||
}
|
||||
|
||||
> .metric {
|
||||
@extend .cursor-pointer;
|
||||
text-align: center;
|
||||
color: $color-primary;
|
||||
|
||||
.number {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-viewers {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
> .items {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 300px;
|
||||
min-width: 300px;
|
||||
white-space: nowrap;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
|
||||
> .avatar-box {
|
||||
display: inline-block;
|
||||
margin: 3px 10px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> .detail {
|
||||
display: inline-block;
|
||||
|
||||
> .name {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
> .date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.meta-editors {
|
||||
position: relative;
|
||||
|
||||
> .items {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 300px;
|
||||
min-width: 300px;
|
||||
white-space: nowrap;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 90%;
|
||||
|
||||
.avatar-box {
|
||||
display: inline-block;
|
||||
margin: 3px 10px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: inline-block;
|
||||
|
||||
.name {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
}
|
||||
|
||||
.changed {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.deleted {
|
||||
font-size: 0.9rem;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.document-toolbar {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
.zone-sidebar {
|
||||
height: 100%;
|
||||
min-height:100%;
|
||||
padding: 0 0 0 40px;
|
||||
padding: 0 40px 0 40px;
|
||||
border-right: 1px solid $color-border;
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.page-search {
|
||||
margin: 30px 40px;
|
||||
margin: 50px 100px;
|
||||
|
||||
.search-results {
|
||||
margin: 50px;
|
||||
margin: 50px 0;
|
||||
|
||||
.heading {
|
||||
font-size: 1.2rem;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
color: $color-white;
|
||||
background-color: $color-gray;
|
||||
@include border-radius(20px);
|
||||
padding: 8px 0 0 0;
|
||||
padding: 7px 0 0 0;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
|
|
@ -20,4 +21,5 @@
|
|||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-red-text {
|
||||
> .material-icons {
|
||||
color: $color-red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.round-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="document-structure hidden-xs hidden-sm">
|
||||
<div class="document-structure">
|
||||
{{#if this.session.authenticated}}
|
||||
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page' ''}}">
|
||||
<div id="toc-up-button" class="round-button-mono {{if state.upDisabled 'disabled'}}" data-tooltip="Move up" data-tooltip-position="top center" {{action 'pageUp'}}>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,34 @@
|
|||
<div class="document-container">
|
||||
<div class="sidebar hidden-xs hidden-sm">
|
||||
{{#if isEditor}}
|
||||
<div class="margin-bottom-20 text-center">
|
||||
{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
|
||||
<div class="regular-button button-green" id="add-section-button">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">section</div>
|
||||
<div class="document-sidebar">
|
||||
{{#if session.authenticated}}
|
||||
<div class="summary-line">
|
||||
<ul class="items">
|
||||
<li class="item">
|
||||
<div id="owner-avatar" class="avatar" data-tooltip="{{owner.fullname}}" data-tooltip-position="right middle">{{owner.initials}}</div>
|
||||
</li>
|
||||
<li class="divider" />
|
||||
<li class="item" id="meta-button-viewers">
|
||||
<div class="metric">
|
||||
<div class="number">{{meta.viewers.length}}</div>
|
||||
<div class="label">views</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
|
||||
changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
|
||||
gotoPage=(action 'gotoPage')}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider" />
|
||||
<li class="item" id="meta-button-history">
|
||||
<div class="metric">
|
||||
<div class="number">{{meta.editors.length}}</div>
|
||||
<div class="label">activity</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{#dropdown-dialog target="meta-button-viewers" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
|
||||
{{document/document-sidebar-viewers meta=meta}}
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="meta-button-history" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
|
||||
{{document/document-sidebar-edits pages=pages meta=meta}}
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
|
||||
changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
|
||||
gotoPage=(action 'gotoPage')}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,126 +1,87 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="document-container">
|
||||
<div class="toolbar">
|
||||
|
||||
{{#if session.authenticated}}
|
||||
<div class="meta-data pull-left hidden-xs hidden-sm">
|
||||
<ul class="items">
|
||||
<li class="item">
|
||||
<div id="owner-avatar" class="avatar" data-tooltip="{{owner.fullname}}" data-tooltip-position="right middle">{{owner.initials}}</div>
|
||||
</li>
|
||||
<li class="divider" />
|
||||
<li class="item">
|
||||
<div class="date">{{formatted-date document.revised 'Do MMMM YYYY'}}</div>
|
||||
</li>
|
||||
<li class="divider" />
|
||||
<li class="item" id="meta-button-viewers">
|
||||
<div class="metric">
|
||||
<div class="number">{{meta.viewers.length}}</div>
|
||||
<div class="label">views</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider" />
|
||||
<li class="item" id="meta-button-history">
|
||||
<div class="metric">
|
||||
<div class="number">{{meta.editors.length}}</div>
|
||||
<div class="label">activity</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{{#dropdown-dialog target="meta-button-viewers" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
|
||||
{{document/document-sidebar-viewers meta=meta}}
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="meta-button-history" position="bottom left" showCancel=false button="Close" onAction=(action 'close') color="flat-gray"}}
|
||||
{{document/document-sidebar-edits pages=pages meta=meta}}
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="actions pull-right hidden-xs hidden-sm">
|
||||
{{#link-to 'folders.folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-blue" id="add-section-button">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">space</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
|
||||
{{#if isEditor}}
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button button-gray" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
|
||||
<i class="material-icons">settings</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button button-gray" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
|
||||
<i class="material-icons">attach_file</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button button-gray" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
|
||||
<i class="material-icons">content_copy</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button button-gray" id="print-document-button" data-tooltip="Print document" data-tooltip-position="top center" {{action 'printDocument'}}>
|
||||
<i class="material-icons">print</i>
|
||||
</div>
|
||||
|
||||
{{#if isEditor}}
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button button-red" id="delete-document-button" data-tooltip="Delete document" data-tooltip-position="top center">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if isEditor}}
|
||||
{{#dropdown-dialog target="delete-document-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocument')}}
|
||||
<p>Are you sure you want to delete this document?</p>
|
||||
<p>There is no undo!</p>
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="save-template-button" position="bottom right" button="Save as Template" color="flat-green" onAction=(action 'saveTemplate') focusOn="new-template-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Short name for this type of document</div>
|
||||
{{input type='text' id="new-template-name" value=saveTemplate.name}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Excerpt</label>
|
||||
<div class="tip">Explain use case for this template</div>
|
||||
{{textarea value=saveTemplate.description rows="3" id="new-template-desc"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="set-meta-button" position="bottom right" button="Save" color="flat-blue" onAction=(action 'saveMeta') selectOn="document-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>Owner</label>
|
||||
<div class="tip">Set the document owner</div>
|
||||
{{ui-select id="document-owner"
|
||||
content=users
|
||||
action=(action (mut owner))
|
||||
optionValuePath="id"
|
||||
optionLabelPath="fullname"
|
||||
selection=owner}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Short title for this document</div>
|
||||
{{input type='text' id="document-name" value=document.name}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Excerpt</label>
|
||||
<div class="tip">Provide short summary of the document (max. 250)</div>
|
||||
{{textarea value=document.excerpt rows="5" id="meta-excerpt"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
{{#link-to 'folders.folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-white">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<div class="name">space</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
|
||||
{{#if isEditor}}
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button-white" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
|
||||
<i class="material-icons">settings</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button-white" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
|
||||
<i class="material-icons">attach_file</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button-white" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
|
||||
<i class="material-icons">content_copy</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
{{/if}}
|
||||
|
||||
<div class="square-button-white" id="print-document-button" data-tooltip="Print document" data-tooltip-position="top center" {{action 'printDocument'}}>
|
||||
<i class="material-icons">print</i>
|
||||
</div>
|
||||
|
||||
{{#if isEditor}}
|
||||
<div class="button-gap"></div>
|
||||
<div class="square-button-white button-red-text" id="delete-document-button" data-tooltip="Delete content" data-tooltip-position="top center">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
<div class="button-gap"></div>
|
||||
{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
|
||||
<div class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">section</div>
|
||||
</div>
|
||||
{{/link-to}}
|
||||
{{/if}}
|
||||
|
||||
{{#if isEditor}}
|
||||
{{#dropdown-dialog target="delete-document-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocument')}}
|
||||
<p>Are you sure you want to delete this document?</p>
|
||||
<p>There is no undo!</p>
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="save-template-button" position="bottom right" button="Save as Template" color="flat-green" onAction=(action 'saveTemplate') focusOn="new-template-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Short name for this type of document</div>
|
||||
{{input type='text' id="new-template-name" value=saveTemplate.name}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Excerpt</label>
|
||||
<div class="tip">Explain use case for this template</div>
|
||||
{{textarea value=saveTemplate.description rows="3" id="new-template-desc"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{#dropdown-dialog target="set-meta-button" position="bottom right" button="Save" color="flat-blue" onAction=(action 'saveMeta') selectOn="document-name"}}
|
||||
<div>
|
||||
<div class="input-control">
|
||||
<label>Owner</label>
|
||||
<div class="tip">Set the document owner</div>
|
||||
{{ui-select id="document-owner"
|
||||
content=users
|
||||
action=(action (mut owner))
|
||||
optionValuePath="id"
|
||||
optionLabelPath="fullname"
|
||||
selection=owner}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
<div class="tip">Short title for this document</div>
|
||||
{{input type='text' id="document-name" value=document.name}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Excerpt</label>
|
||||
<div class="tip">Provide short summary of the document (max. 250)</div>
|
||||
{{textarea value=document.excerpt rows="5" id="meta-excerpt"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,77 @@
|
|||
<div class="document-container">
|
||||
<div class="content">
|
||||
{{#if document.template}}
|
||||
<div class="is-template">TEMPLATE</div>
|
||||
{{/if}}
|
||||
<div class="document-view">
|
||||
{{#if document.template}}
|
||||
<div class="is-template">TEMPLATE</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="document-summary">
|
||||
{{document/tag-editor documentTags=document.tags isEditor=isEditor onChange=(action 'onTagChange')}}
|
||||
{{document/tag-editor documentTags=document.tags isEditor=isEditor onChange=(action 'onTagChange')}}
|
||||
|
||||
<div class="print-title">
|
||||
{{document.name}}
|
||||
</div>
|
||||
|
||||
{{#if attachments}}
|
||||
<div class="attachment-zone">
|
||||
<ul class="list">
|
||||
{{#each attachments key="id" as |a index|}}
|
||||
<li class="item">
|
||||
<img class="icon" src="assets/img/attachments/{{document/file-icon a.extension}}" />
|
||||
<a href="{{ session.appMeta.apiUrl }}api/public/attachments/{{ session.appMeta.orgId }}/{{ a.job }}/{{ a.fileId }}">
|
||||
<span class="file">{{ a.filename }}</span>
|
||||
</a>
|
||||
{{#if isEditor}}
|
||||
<div class="action round-button-mono">
|
||||
<i class="material-icons delete-attachment-{{a.id}}" title="Delete" {{action 'confirmDeleteAttachment' a.id a.filename}}>delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="print-title">
|
||||
{{document.name}}
|
||||
</div>
|
||||
|
||||
{{#if attachments}}
|
||||
<div class="attachment-zone">
|
||||
<ul class="list">
|
||||
{{#each attachments key="id" as |a index|}}
|
||||
<li class="item">
|
||||
<img class="icon" src="assets/img/attachments/{{document/file-icon a.extension}}" />
|
||||
<a href="{{ session.appMeta.apiUrl }}api/public/attachments/{{ session.appMeta.orgId }}/{{ a.job }}/{{ a.fileId }}">
|
||||
<span class="file">{{ a.filename }}</span>
|
||||
</a>
|
||||
{{#if isEditor}}
|
||||
<div class="action round-button-mono">
|
||||
<i class="material-icons delete-attachment-{{a.id}}" title="Delete" {{action 'confirmDeleteAttachment' a.id a.filename}}>delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="pages">
|
||||
{{#each pages key="id" as |page index|}}
|
||||
<div class="wysiwyg">
|
||||
<div id="page-{{ page.id }}" class="is-a-page" data-id="{{ page.id }}" data-type="{{ page.contentType }}">
|
||||
{{document/page-heading tagName=page.tagName document=document folder=folder page=page isEditor=isEditor onDeletePage=(action 'onDeletePage')}}
|
||||
{{section/base-renderer page=page}}
|
||||
</div>
|
||||
<div class="pages">
|
||||
{{#each pages key="id" as |page index|}}
|
||||
<div class="wysiwyg">
|
||||
<div id="page-{{ page.id }}" class="is-a-page" data-id="{{ page.id }}" data-type="{{ page.contentType }}">
|
||||
{{document/page-heading tagName=page.tagName document=document folder=folder page=page isEditor=isEditor onDeletePage=(action 'onDeletePage')}}
|
||||
{{section/base-renderer page=page}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="dropdown-dialog delete-attachment-dialog">
|
||||
<div class="content">
|
||||
<p>Are you sure you want to delete <span class="bold">{{deleteAttachment.name}}?</span></p>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-dialog delete-attachment-dialog">
|
||||
<div class="content">
|
||||
<p>Are you sure you want to delete <span class="bold">{{deleteAttachment.name}}?</span></p>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'cancel'}}>
|
||||
cancel
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'cancel'}}>
|
||||
cancel
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'deleteAttachment'}}>
|
||||
delete
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'deleteAttachment'}}>
|
||||
delete
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-dialog delete-page-dialog">
|
||||
<div class="content">
|
||||
<p>Are you sure you want to delete <span class="bold">{{deletePage.title}}?</span></p>
|
||||
<p>
|
||||
{{input type="checkbox" id="delete-child-pages" class="margin-left-20" checked=deletePage.children}}
|
||||
<label for="delete-child-pages"> Delete child pages</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'cancel'}}>
|
||||
cancel
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'deletePage'}}>
|
||||
delete
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="dropdown-dialog delete-page-dialog">
|
||||
<div class="content">
|
||||
<p>Are you sure you want to delete <span class="bold">{{deletePage.title}}?</span></p>
|
||||
<p>
|
||||
{{input type="checkbox" id="delete-child-pages" class="margin-left-20" checked=deletePage.children}}
|
||||
<label for="delete-child-pages"> Delete child pages</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'cancel'}}>
|
||||
cancel
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'deletePage'}}>
|
||||
delete
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,7 +80,7 @@
|
|||
<div class="box">
|
||||
<div class="regular-button button-green">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">section</div>
|
||||
<div class="name">section</div>
|
||||
</div>
|
||||
<div class="message">Add a new section to this document</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="">
|
||||
<div>
|
||||
{{#if hasSelectedDocuments}}
|
||||
<div class="square-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
|
||||
<i class="material-icons">folder</i>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="zone-header" class="zone-header">
|
||||
<div class="info pull-left">
|
||||
<div class="info pull-left width-60">
|
||||
<div class="title">
|
||||
{{title}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// 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>.
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
|
|
@ -44,6 +44,7 @@ func (c *Client) DeleteDocument(documentID string) error {
|
|||
if string(b) == emptyBraces {
|
||||
return nil
|
||||
}
|
||||
|
||||
return errors.New(string(b))
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue