Improve post composer + replying

- Make it modular so that different entry points can show different
things and respond differently (reply, new discussion, edit post)
- Resizable
- Fullscreen
- Confirm on close

ember/app/styles/flarum/composer.less

@@ -19,23 +19,33 @@
 	margin-left: -20px;
 	margin-right: 180px;
 	.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
-	border-radius: 4px 4px 0 0;
+	border-radius: @border-radius-base @border-radius-base 0 0;
 	background: rgba(255, 255, 255, 0.9);
 	transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
 	position: relative;
-	.transition(~"margin-left 0.2s, margin-right 0.2s, background 0.2s");
+	height: 300px;
+	.transition(~"background 0.2s");
 
 	.index-index & {
 		margin-left: 205px;
 		margin-right: -20px;
 	}
-	&.active {
+	&.active, &.fullscreen {
 		background: #fff;
 	}
 	&.minimized {
 		height: 50px;
 		cursor: pointer;
 	}
+	&.fullscreen {
+		position: fixed;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		margin: 0;
+		height: auto;
+	}
 }
 .composer-content {
 	padding: 20px 20px 15px;
@@ -43,14 +53,18 @@
 	.minimized & {
 		padding: 10px 20px;
 	}
+	.fullscreen & {
+		max-width: 900px;
+		margin: 0 auto;
+		padding: 30px;
+	}
 }
 .composer-handle {
 	height: 20px;
 	margin-bottom: -20px;
-	cursor: row-resize;
 	position: relative;
 
-	.minimized & {
+	.minimized &, .fullscreen & {
 		display: none;
 	}
 }
@@ -58,6 +72,16 @@
 	position: absolute;
 	right: 10px;
 	top: 10px;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+
+	& li {
+		display: inline-block;
+	}
+}
+.btn-minimize .fa {
+	vertical-align: -5px;
 }
 .composer-avatar {
 	float: left;
@@ -82,12 +106,15 @@
 	}
 }
 .composer-editor {
+	.minimized & {
+		visibility: hidden;
+	}
+}
+.text-editor {
 	& textarea {
 		background: none;
 		border-radius: 0;
 		padding: 0;
-		margin-bottom: 10px;
-		height: 200px;
 		border: 0;
 		resize: none;
 		color: @fl-body-color;
@@ -98,8 +125,30 @@
 			background: none;
 		}
 	}
+}
+.text-editor-controls {
+	margin: 10px 0 0;
+	padding: 0;
+	list-style-type: none;
+	& li {
+		display: inline-block;
+	}
+}
 
-	.minimized & {
-		visibility: hidden;
+.composer-loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(255, 255, 255, 0.9);
+	opacity: 0;
+	pointer-events: none;
+	border-radius: @border-radius-base @border-radius-base 0 0;
+	.transition(opacity 0.2s);
+
+	&.active {
+		opacity: 1;
+		pointer-events: auto;
 	}
 }