document attachments view

gui/app/components/document/view-attachment.js

@@ -13,14 +13,11 @@ import { computed } from '@ember/object';
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import NotifierMixin from '../../mixins/notifier';
-import TooltipMixin from '../../mixins/tooltip';
 import DropdownMixin from '../../mixins/dropdown';
 
-export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
+export default Component.extend(DropdownMixin, {
 	documentService: service('document'),
 	appMeta: service(),
-	dropdown: null,
 	hasAttachments: notEmpty('files'),
 	deleteAttachment: {
 		id: "",
@@ -29,7 +26,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	canShow: computed('permissions', 'files', function() {
 		return this.get('files.length') > 0 || this.get('permissions.documentEdit');
 	}),
-
+	showDialog: false,
+	
 	init() {
 		this._super(...arguments);
 
@@ -64,7 +62,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 
 			init: function () {
 				this.on("success", function (file /*, response*/ ) {
-					self.showNotification(`Attached ${file.name}`);
 				});
 
 				this.on("queuecomplete", function () {
@@ -85,7 +82,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 
 	willDestroyElement() {
 		this._super(...arguments);
-		this.destroyDropdown();
 	},
 
 	getAttachments() {
@@ -95,43 +91,17 @@ export default Component.extend(NotifierMixin, TooltipMixin, DropdownMixin, {
 	},
 
 	actions: {
-		onConfirmDelete(id, name) {
-			this.set('deleteAttachment', {
-				id: id,
-				name: name
-			});
+		onShowDialog(id, name) {
+			this.set('deleteAttachment', { id: id, name: name });
 
-			$(".delete-attachment-dialog").css("display", "block");
-
-			this.closeDropdown();
-
-			let dropOptions = Object.assign(this.get('dropDefaults'), {
-				target: $(".delete-attachment-" + id)[0],
-				content: $(".delete-attachment-dialog")[0],
-				classes: 'drop-theme-basic',
-				position: "bottom right",
-				remove: false});
-
-			let drop = new Drop(dropOptions);
-			this.set('dropdown', drop);
-		},
-
-		onCancel() {
-			this.closeDropdown();
-
-			this.set('deleteAttachment', {
-				id: "",
-				name: ""
-			});
+			this.set('showDialog', true);
 		},
 
 		onDelete() {
-			this.closeDropdown();
+			this.set('showDialog', false);
 
 			let attachment = this.get('deleteAttachment');
-
-			this.showNotification(`Deleted ${name}`);
-
+			
 			this.get('documentService').deleteAttachment(this.get('document.id'), attachment.id).then(() => {
 				this.getAttachments();
 				this.set('deleteAttachment', {

gui/app/pods/document/index/controller.js

@@ -26,9 +26,13 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 	toggled: false,
 	queryParams: ['pageId', 'tab'],
 	pageId: '',
-	tab: 'index',
+	tab: 'content',
 
 	actions: {
+		onTabChange(tab) {
+			this.set('tab', tab);
+		},
+
 		onSaveDocument(doc) {
 			this.get('documentService').save(doc);
 

gui/app/pods/document/index/template.hbs

@@ -8,18 +8,24 @@
 	{{document/document-meta document=model.document folder=model.folder folders=model.folders permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
 
 	<ul class="tabnav-control">
-		<li class="tab selected">Content</li>
-		<li class="tab {{if contentSelected 'selected'}}">Attachments</li>
-		<li class="tab {{if contentSelected 'selected'}}">Activity</li>
-		<li class="tab {{if contentSelected 'selected'}}">Revisions</li>
+		<li class="tab {{if (eq tab 'content') 'selected'}}" {{action 'onTabChange' 'content'}}>Content</li>
+		<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>Attachments</li>
+		<li class="tab {{if (eq tab 'activity') 'selected'}}" {{action 'onTabChange' 'activity'}}>Activity</li>
+		<li class="tab {{if (eq tab 'revision') 'selected'}}" {{action 'onTabChange' 'revision'}}>Revisions</li>
 	</ul>
 
-	{{document/document-view
-		document=model.document links=model.links pages=model.pages
-		folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
-		onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
-		onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
-		onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+	{{#if (eq tab 'content')}}
+		{{document/view-content
+			document=model.document links=model.links pages=model.pages
+			folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
+			onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
+			onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
+			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+	{{/if}}
+
+	{{#if (eq tab 'attachment')}}
+		{{document/view-attachment document=model.document permissions=model.permissions}}
+	{{/if}}
 
 	<div id="zone-document-content" class="zone-document-content">
 		{{document/document-sidebar tab=tab
@@ -28,4 +34,4 @@
 			onGotoPage=(action 'onGotoPage')}}
 	</div>
 
-</div>
+</div>

gui/app/styles/view/document/all.scss

@@ -1,5 +1,4 @@
 @import "history.scss";
 @import "activity.scss";
-@import "attachments.scss";
 @import "toc.scss";
 @import "new-section.scss";

gui/app/styles/view/document/document.scss

@@ -2,3 +2,4 @@
 @import "doc-structure.scss";
 @import "section-editor.scss";
 @import "wysiwyg.scss";
+@import "view-attachment.scss";

gui/app/styles/view/document/view-attachment.scss

@@ -1,10 +1,5 @@
-.document-attachments {
+.view-attachment {
 	margin: 0 0 50px 0;
-	// @include content-container();
-
-	> h2 {
-		color: $color-gray;
-	}
 
 	> .upload-document-files {
 		margin: 10px 0 0 0;
@@ -23,13 +18,9 @@
 			color: $color-off-black;
 			margin: 0;
 			padding: 10px 0;
-			font-size: 0.9rem;
+			font-size: 1rem;
 			list-style-type: none;
 
-			&:last-of-type {
-				border-bottom: none !important;
-			}
-
 			> .icon {
 				margin-right: 10px;
 			}
@@ -51,27 +42,6 @@
 					vertical-align: text-top;
 				}
 			}
-
-			> .action {
-				float: right;
-				margin-top: -2px;
-				margin-right: 5px;
-				@extend .cursor-pointer;
-				@extend .transition-all;
-				display: none;
-				color: $color-gray;
-			}
-
-			&:hover {
-				.action {
-					display: inline-block;
-				}
-			}
 		}
 	}
 }
-
-.delete-attachment-dialog,
-.delete-page-dialog {
-	display: none;
-}

gui/app/templates/components/document/document-attachments.hbs

@@ -1,44 +0,0 @@
-{{#if canShow}}
-	<div class="document-attachments non-printable">
-		<h2>Attachments</h2>
-		{{#if hasAttachments}}
-			<ul class="list">
-				{{#each files key="id" as |a index|}}
-					<li class="item">
-						<img class="icon" src="/assets/img/attachments/{{document/file-icon a.extension}}" />
-						<a href="{{ appMeta.endpoint }}/public/attachments/{{ appMeta.orgId }}/{{ a.id }}">
-							<span class="file">{{ a.filename }}</span>
-						</a>
-						{{#if permissions.documentEdit}}
-							<div class="action round-button-mono">
-								<i class="material-icons color-gray delete-attachment-{{a.id}}" title="Delete" {{action 'onConfirmDelete' a.id a.filename}}>delete</i>
-							</div>
-						{{/if}}
-					</li>
-				{{/each}}
-			</ul>
-		{{/if}}
-		{{#if permissions.documentEdit}}
-			<div class="upload-document-files">
-				<div class="chip chip-action">
-					<span id="upload-document-files" class="chip-text">+ attachment</span>
-				</div>
-			</div>
-		{{/if}}
-	</div>
-
-	<div class="dropdown-dialog delete-attachment-dialog">
-		<div class="content">
-			<p>Are you sure you want to delete <span class="font-weight-bold">{{deleteAttachment.name}}?</span></p>
-		</div>
-		<div class="actions">
-			<div class="flat-button" {{action 'onCancel'}}>
-				cancel
-			</div>
-			<div class="flat-button flat-red" {{action 'onDelete'}}>
-				delete
-			</div>
-		</div>
-		<div class="clearfix"></div>
-	</div>
-{{/if}}

gui/app/templates/components/document/document-meta.hbs

@@ -14,7 +14,7 @@
 						{{#if canSelectCategory}}
 							<a href="#" {{action 'onShowCategoryModal'}}>&lt;select&gt;</a>
 						{{else}}
-							{{#link-to 'folder.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
+							{{#link-to 'folder.category' folder.id folder.slug class='non-printable'}}&lt;manage&gt;{{/link-to}}
 						{{/if}}
 					{{/if}}
 				{{/each}}

gui/app/templates/components/document/view-attachment.hbs

@@ -0,0 +1,31 @@
+{{#if canShow}}
+	<div class="view-attachment non-printable">
+		{{#if hasAttachments}}
+			<ul class="list">
+				{{#each files key="id" as |a index|}}
+					<li class="item">
+						<img class="icon" src="/assets/img/attachments/{{document/file-icon a.extension}}" />
+						<a href="{{ appMeta.endpoint }}/public/attachments/{{ appMeta.orgId }}/{{ a.id }}">
+							<span class="file">{{ a.filename }}</span>
+						</a>
+						{{#if permissions.documentEdit}}
+							<div class="button-icon-danger align-middle action" {{action 'onShowDialog' a.id a.filename}}>
+								<i class="material-icons">delete</i>
+							</div>
+						{{/if}}
+					</li>
+				{{/each}}
+			</ul>
+		{{/if}}
+		{{#if permissions.documentEdit}}
+			<div class="upload-document-files">
+				<div id="upload-document-files" class="btn btn-secondary">Upload</div>
+			</div>
+		{{/if}}
+	</div>
+
+	{{#ui/ui-dialog title="Delete Attachment" confirmCaption="Delete" buttonType="btn-danger" show=showDialog onAction=(action 'onDelete')}}
+		<p>Are you sure you want to delete {{deleteAttachment.name}}?</p>
+	{{/ui/ui-dialog}}
+
+{{/if}}

gui/app/templates/components/document/view-content.hbs

@@ -92,5 +92,3 @@
 			{{/if}}
 		</div>
 	</div>
-
-{{document/document-attachments document=document permissions=permissions}}