Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-09 07:25:23 +02:00
Code Releases Activity

doc view UX

Browse source
This commit is contained in:
Harvey Kandola 2016-07-02 14:34:00 -07:00
parent d0c80cf6a2
commit 04dca7befc
20 changed files with 532 additions and 567 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/app/components/document/document-sidebar-toc.js
View file

@ -19,18 +19,13 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
folder: {},
pages: [],
page: "",
showToc: false,
tocTools: {
UpTarget: "",
DownTarget: "",
AllowIndent: false,
AllowOutdent: false
},
state: {
actionablePage: false,
upDisabled: true,
downDisabled: true,
indentDisabled: true,
outdentDisabled: true,
outdentDisabled: true
},
didReceiveAttrs: function() {
this.set('showToc', is.not.undefined(this.get('pages')) && this.get('pages').get('length') > 2);

15
app/app/components/document/document-sidebar.js
View file

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

10
app/app/components/document/document-toolbar.js
View file

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

42
app/app/pods/document/index/template.hbs
View file

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

2
app/app/pods/folders/settings/template.hbs
View file

@ -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>
{{/layout/zone-header}}
{{#layout/zone-sidebar}}

10
app/app/styles/print.scss
View file

@ -10,15 +10,12 @@
// 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;
.page-toolbar, .document-summary, .attachment-zone {
.document-view {
.page-toolbar, .document-summary, .attachment-zone, .document-tags {
display: none !important;
}
@ -26,5 +23,4 @@
display: block !important;
}
}
}
}

11
app/app/styles/view/document/content.scss
View file

@ -1,7 +1,4 @@
.document-container {
> .content {
padding: 40px 40px 40px 20px;
.document-view {
.print-title {
display: none;
font-size: 2.3em;
@ -30,7 +27,7 @@
margin-top: 10px;
padding: 0;
list-style-type: none;
border-bottom: 1px solid $color-border;
border-bottom: 1px dotted $color-border;
padding-bottom: 10px;
> .icon {
@ -80,7 +77,7 @@
color: $color-gray;
font-weight: bold;
font-size: 1.5em;
margin-bottom: 50px;
margin-bottom: 30px;
padding-bottom: 5px;
@include border-bottom(1px);
}
@ -109,7 +106,6 @@
}
}
}
}
}
.no-sections {
@ -130,6 +126,5 @@
> .regular-button {
cursor: default !important;
}
}
}

160
app/app/styles/view/document/sidebar.scss
View file

@ -1,25 +1,69 @@
.document-container {
> .sidebar {
padding: 40px;
font-size: 0.875rem;
.document-sidebar {
@extend .no-select;
> .summary-line {
color: $color-gray;
margin-top: 20px;
>.items {
padding: 0;
margin: 0;
text-align: center;
> .divider {
margin-right: 20px;
display: inline-block;
}
> .item {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle;
> .metric {
@extend .cursor-pointer;
text-align: center;
color: $color-gray;
.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: 50px;
top: 10px;
}
.document-structure {
> .toc-controls {
text-align: center;
margin-bottom: 20px;
margin: 0;
padding: 30px 0 10px 0;
color: $color-gray;
> .round-button-mono {
color: $color-off-black;
border-color: $color-off-black;
color: $color-green;
border-color: $color-green;
> .material-icons {
color: $color-off-black;
color: $color-green;
}
}
@ -49,7 +93,7 @@
overflow: hidden;
> .link {
color: $color-stroke;
color: $color-gray;
&:hover {
color: $color-link;
@ -62,12 +106,98 @@
}
}
}
}
}
.toc-bullet {
vertical-align: middle;
color: $color-stroke;
font-size: 10px;
margin-right: 5px;
.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;
}
}
}
}

153
app/app/styles/view/document/toolbar.scss
View file

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

2
app/app/styles/view/layout.scss
View file

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

4
app/app/styles/view/page-search.scss
View file

@ -1,8 +1,8 @@
.page-search {
margin: 30px 40px;
margin: 50px 100px;
.search-results {
margin: 50px;
margin: 50px 0;
.heading {
font-size: 1.2rem;

4
app/app/styles/widget/widget-avatar.scss
View file

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

6
app/app/styles/widget/widget-button.scss
View file

@ -99,6 +99,12 @@
}
}
.button-red-text {
> .material-icons {
color: $color-red !important;
}
}
.round-button {
display: inline-block;
position: relative;

2
app/app/templates/components/document/document-sidebar-toc.hbs
View file

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

37
app/app/templates/components/document/document-sidebar.hbs
View file

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

69
app/app/templates/components/document/document-toolbar.hbs
View file

@ -1,45 +1,6 @@
<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">
<div>
{{#link-to 'folders.folder' folder.id folder.slug}}
<div class="regular-button button-blue" id="add-section-button">
<div class="regular-button button-white">
<i class="material-icons">arrow_back</i>
<div class="name">space</div>
</div>
@ -47,29 +8,36 @@
{{#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">
<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 button-gray" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
<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 button-gray" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
<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="button-gap"></div>
<div class="square-button button-gray" id="print-document-button" data-tooltip="Print document" data-tooltip-position="top center" {{action 'printDocument'}}>
<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 button-red" id="delete-document-button" data-tooltip="Delete document" data-tooltip-position="top center">
<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}}
@ -116,11 +84,4 @@
</div>
{{/dropdown-dialog}}
{{/if}}
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>

6
app/app/templates/components/document/document-view.hbs
View file

@ -1,12 +1,9 @@
<div class="document-container">
<div class="content">
<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')}}
</div>
<div class="print-title">
{{document.name}}
@ -76,7 +73,6 @@
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
{{#if noSections}}

2
app/app/templates/components/folder/folder-toolbar.hbs
View file

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

2
app/app/templates/components/layout/zone-header.hbs
View file

@ -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
sdk/document.go
View file

@ -44,6 +44,7 @@ func (c *Client) DeleteDocument(documentID string) error {
if string(b) == emptyBraces {
return nil
}
return errors.New(string(b))
}