some UI changes

app.js

@@ -325,6 +325,8 @@ define(function(require) {
 			});
 
 			template.on('change', '#sendfax_uploaded_file', function() {
+				$('.outbound-hidden').show();
+				$('.outbound-expand').hide();
 				if ($(this).val()) { // Check if a file is selected
 					$('.send-fax-button').prop('disabled', false);
 				} else {
@@ -332,6 +334,17 @@ define(function(require) {
 				}
 			});
 
+			template.on('click', '.outbound-expand', function() {
+				$('.outbound-hidden').slideDown();
+				$('.outbound-expand').hide();
+			});
+			template.on('click', '.outbound-contract', function() {
+				$('.outbound-hidden').slideUp();
+				$('.outbound-contract').hide();
+				$('.outbound-expand').show();
+			});
+
+
 			template.on('click', '.send-fax-button', function(e) {
 				e.preventDefault();
 				self.sendFaxUpload(template);

i18n/de-DE.json

@@ -85,6 +85,7 @@
 			"selectFile": "Upload your file (PDF or TIFF format)",
 			"selectNumber": "Select From Number",
 			"sendFax": "Send Fax",
+			"sendAFax": "Send a Fax",
 			"success": "fax has been queued for sending"
 		},
 		"title": "Faxportal",

i18n/en-US.json

@@ -9,13 +9,16 @@
 		},
 		"outbound": {
 			"enterToNumber": "Enter Fax To Number",
+			"fromNumber": "From Number",
 			"missingFile": "You must choose a PDF or TIFF file to send",
 			"missingFrom": "You must select the source number.",
 			"missingTo": "You must enter the destination fax number.",
 			"selectFile": "Upload your file (PDF or TIFF format)",
 			"selectNumber": "Select From Number",
 			"sendFax": "Send Fax",
-			"success": "fax has been queued for sending"
+			"sendAFax": "Send a Fax",
+			"success": "fax has been queued for sending",
+			"toNumber": "To Number"
 		},
 		"table": {
 			"columns": {

style/app.css

@@ -181,3 +181,25 @@
   line-height: 15px;
   padding: 2px;
   white-space: normal; }
+
+#send_outbound_fax {
+  float: right;
+  border: 1px solid #e0e0e9;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  clear: right;
+}
+
+.outbound-hidden {
+  display: none;
+}
+
+.outbound-title {
+  font-size: +1.2em;
+  font-weight: 500;
+  color: #2297FF;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 4px;
+}

style/app.scss

@@ -225,3 +225,25 @@
 	padding: 2px;
 	white-space: normal;
 }
+
+#send_outbound_fax {
+  float: right;
+  border: 1px solid #e0e0e9;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  clear: right;
+}
+
+.outbound-hidden {
+  display: none;
+}
+
+.outbound-title {
+  font-size: +1.2em;
+  font-weight: 500;
+  color: #2297FF;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 4px;
+}

views/outbound-faxes.html

@@ -16,20 +16,32 @@
 
 		<a id="refresh_faxbox" class="monster-link pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.refresh }}"><i class="fa fa-refresh"></i></a>
 
-
+		<!-- SEND OUTBOUND FAX VIA API -->
 		<div id="send_outbound_fax">
-			<form>
-				<input id="sendfax_to_number" name="sendfax_to_number" type="text" maxlength=16 placeholder="fax to number"><br />
+			<div class="outbound-title">
+				<span class="outbound-title">{{i18n.fax.outbound.sendAFax}}</span>
+				<i class="fa fa-chevron-down outbound-expand"></i>
+				<i class="fa fa-chevron-up outbound-contract outbound-hidden"></i>
+			</div>
+			<input id="sendfax_uploaded_file" name="sendfax_uploaded_file" type="file" accept=".pdf,.tif,.tiff" class="kz-input-file">
+			<div class="outbound-hidden">
+				<div class="select-header">
+					{{ i18n.fax.outbound.toNumber }}
+				</div>
+				<input id="sendfax_to_number" name="sendfax_to_number" type="text" maxlength=16 placeholder="{{i18n.fax.outbound.enterToNumber}}"><br />
+				<div class="select-header">
+					{{ i18n.fax.outbound.fromNumber }}
+				</div>
 				<select id="sendfax_from_number">
 					<option value="none">{{i18n.fax.outbound.selectNumber}}</option>
 					{{#each faxnumbers}}
 					<option value="{{number}}">{{number}}</option>
 					{{/each}}
-				<input id="sendfax_uploaded_file" name="sendfax_uploaded_file" type="file" accept=".pdf,.tif,.tiff" class="kz-input-file"><br />
-				<button class="monster-button-primary send-fax-button" disabled>{{i18n.fax.outbound.sendFax}}</button>
-			</form>
+				</select>
+			</div>
+			<button class="monster-button-primary send-fax-button outbound-hidden" disabled>{{i18n.fax.outbound.sendFax}}</button>
 		</div>
-
+		<!-- END OF SEND OUTBOUND FAX VIA API -->
 
 	</div>
 	<div class="monster-table-wrapper-spaced">