ui design & position tweaks

app/app/components/dropdown-dialog.js

@@ -57,7 +57,7 @@ export default Ember.Component.extend({
 			classes: 'drop-theme-basic',
 			position: self.get('position'),
 			openOn: self.get('open'),
-			constrainToWindow: false,
+			constrainToWindow: true,
 			constrainToScrollParent: false,
 			tetherOptions: {
 				offset: self.offset,

app/app/styles/view/document/content.scss

@@ -39,23 +39,21 @@
 
 		> .wysiwyg {
 			> .is-a-page {
-				.page-title {
+				@extend .transition-all;
-					> .page-toolbar {
-						// opacity: 0.5;
-						opacity: 0;
-						@extend .transition-all;
 
-						// &:hover {
+				&:hover {
-						// 	opacity: 1;
+					.page-title {
-						// }
+						> .page-toolbar {
-					}
-
-					&:hover {
-						.page-toolbar {
 							opacity: 1;
 						}
 					}
 				}
+
+				.page-title {
+					> .page-toolbar {
+						opacity: 0;
+					}
+				}
 			}
 		}
 	}
@@ -65,3 +63,7 @@
 	margin-top: 150px;
 	text-align: center;
 }
+
+.dropdown-page-toolbar {
+	width: 300px;
+}

app/app/styles/view/document/wizard.scss

@@ -19,6 +19,10 @@
 			margin: 0;
 			padding: 0;
 
+			> .min-height {
+				min-height: 87px;
+			}
+
 			> .item {
 				list-style: none;
 				cursor: pointer;
@@ -29,17 +33,19 @@
 				&:hover {
 					@include ease-in();
 
-					> .actions {
+					>.icon {
-						display: inline-block;
+						.actions {
+							display: inline-block;
+						}	
 					}
 
 					> .details {
 						> .title {
-							color: $color-primary;
+							color: $color-link;
 						}
 
 						> .desc {
-							color: $color-primary;
+							color: $color-link;
 						}
 					}
 				}
@@ -50,18 +56,32 @@
 					width: 50px;
 
 					> .img {
-						float: left;
 						text-align: center;
 						display: inline-block;
 						height: 40px;
 						width: 40px;
 					}
+
+					> .actions {
+						display: none;
+						vertical-align: top;
+						text-align: center;
+						margin-top: 5px;
+						opacity: 0.5;
+
+						> .material-icons, a {
+							color: $color-gray;
+
+							&:hover {
+								color: $color-link;								
+							}
+						}
+					}
 				}
 
 				> .details {
 					vertical-align: top;
 					display: inline-block;
-					width: 80%;
 
 					> .title {
 						font-size: 1rem;
@@ -76,19 +96,6 @@
 						margin-top: 5px;
 					}
 				}
-
-				> .actions {
-					display: none;
-					vertical-align: top;
-					text-align: center;
-					width: 20px;
-					margin-top: 5px;
-					opacity: 0.4;
-
-					> .material-icons, a {
-						color: $color-gray;
-					}
-				}
 			}
 		}
 	}

app/app/styles/view/page-documents.scss

@@ -212,18 +212,27 @@
 			padding: 0;
 
 			> .item {
+				cursor: pointer;
 				list-style: none;
 				padding: 10px 5px;
-				margin: 20px 0;
+				margin: 10px 0;
+				min-height: 90px;
 				@include ease-in();
 
+				&:hover {
+					> .icon {
+						> .edit-control {
+							display: block;
+						}
+					}
+				}
+
 				.icon {
 					text-align: center;
 					display: inline-block;
 					width: 50px;
 
 					> .img {
-						float: left;
 						text-align: center;
 						display: inline-block;
 						height: 40px;
@@ -231,15 +240,16 @@
 					}
 
 					> .edit-control {
-						color: $color-gray;
+						display: none;
-						font-size: 0.9rem;
+						vertical-align: top;
 						text-align: center;
-						float: left;
+						margin-top: 5px;
-						margin: 5px 0 0 9px;
+						opacity: 0.5;
 						cursor: pointer;
+						color: $color-gray;
 
 						&:hover {
-							color: $color-link;
+							color: $color-link;								
 						}
 					}
 				}
@@ -247,7 +257,7 @@
 				> .details {
 					vertical-align: top;
 					display: inline-block;
-					width: 80%;
+					width: 85%;
 					cursor: pointer;
 
 					> .title {
@@ -258,7 +268,7 @@
 					}
 
 					> .desc {
-						color: $color-off-black;
+						color: $color-gray;
 						font-size: 0.9rem;
 						margin-top: 5px;
 					}

app/app/templates/components/document/page-heading.hbs

@@ -56,7 +56,7 @@
 					<div class="input-control">
 						<label>Target</label>
 						<div class="tip">Select where the content should be copied to</div>
-						{{ui-select content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
+						{{ui-select cssClass="dropdown-page-toolbar" content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
 					</div>
 	            {{/dropdown-dialog}}
 				{{#dropdown-dialog id=moveDialogId target=moveButtonId position="bottom right" button="Move" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onMovePage' page)}}
@@ -68,7 +68,7 @@
 					<div class="input-control">
 						<label>Target</label>
 						<div class="tip">Select where the content should be moved to</div>
-						{{ui-select content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
+						{{ui-select cssClass="dropdown-page-toolbar" content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
 					</div>
 	            {{/dropdown-dialog}}
 			{{/if}}

app/app/templates/components/document/page-wizard.hbs

@@ -24,9 +24,15 @@
 			<div class="template-caption">Reusable content</div>
 			<ul class="list">
 				{{#each blocks as |block|}}
-					<li class="item">
+					<li class="item min-height">
-						<div class="icon" {{action 'onInsertBlock' block}}>
+						<div class="icon">
-							<img class="img" src="/assets/img/section-saved.png" srcset="/assets/img/section-saved@2x.png" />
+							<img class="img" src="/assets/img/section-saved.png" srcset="/assets/img/section-saved@2x.png"  {{action 'onInsertBlock' block}}/>
+							<div class="actions">
+								{{#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>
 						<div class="details" {{action 'onInsertBlock' block}}>
 							<div class='title'>
@@ -35,15 +41,8 @@
 							<div class='desc'>{{block.excerpt}}</div>
 							<div class='desc'>By {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} (used: {{ block.used }})</div>
 						</div>
-						<div class="actions">
-							{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
-								<i class="material-icons">mode_edit</i>
-							{{/link-to}}
-							<div class="divider"></div>
-							<i class="material-icons" id={{block.deleteId}}>delete</i>
-						</div>
 						<div class="clearfix" />
-						{{#dropdown-dialog target=block.deleteId position="top right" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
+						{{#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>

app/app/templates/components/folder/start-document.hbs

@@ -9,10 +9,10 @@
 			{{#each savedTemplates key="id" as |template|}}
 				<li class="item">
 					<div class="icon">
-						<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
+						<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" {{action 'startDocument' template}} />
 						{{#if editor}}
 							{{#unless template.locked}}
-								<div class="edit-control" {{action 'editTemplate' template}}>edit</div>
+								<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>
 							{{/unless}}
 						{{/if}}
 					</div>

app/app/templates/components/ui-select.hbs

@@ -1,4 +1,4 @@
-<select {{action 'change' on='change'}} class={{csslass}} readonly={{readonly}}>
+<select {{action 'change' on='change'}} class={{cssClass}} readonly={{readonly}}>
     {{#if prompt}}
         <option disabled selected={{is-not selection}}>
             {{prompt}}