Console final layout tweaks

particl · Jan 4, 2018 · f48ecbf · f48ecbf
1 parent 8d7152f
commit f48ecbf
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/src/app/core-ui/main/status/modal/help-modal/console-modal.component.html b/src/app/core-ui/main/status/modal/help-modal/console-modal.component.html
@@ -1,4 +1,9 @@
 <div class="console-modal">
+  <!-- FIXME: make the close button work -->
+  <button class="small-close_button">
+    <mat-icon fontSet="partIcon" fontIcon="part-circle-remove"></mat-icon>
+  </button>
+
   <div mat-dialog-container>
     <mat-tab-group>
       <mat-tab label="Console">
@@ -15,21 +20,17 @@
             </p>
           </div>
 
-          <div class="content-modal" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between start" *ngFor="let list of commandList">
-            <div fxFlex="0 0 55px">
-              {{ list.time }}
-            </div>
-            <div fxFlex="0 0 25px">
+          <div class="content-modal" [ngClass]="{'input': list.type === 1}" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between start" *ngFor="let list of commandList">
+            <!--div fxFlex="0 0 25px" *ngIf="list.type === 1">
               <mat-icon fontSet="partIcon" fontIcon="part-send" *ngIf="list.type === 1"></mat-icon>
               <mat-icon fontSet="partIcon" fontIcon="part-receive" *ngIf="list.type === 2"></mat-icon>
+            </div-->
+            <div fxFlex="1 1 100%" class="command">
+              <pre class="text-format" *ngIf="isJson(list.text)">{{ list.text | json }}</pre>
+              <pre class="text-format" [ngClass]="{'warn-text': list.code === -1}" *ngIf="!isJson(list.text)">{{ list.text }}</pre>
             </div>
-            <div fxFlex="1 1 100%">
-              <pre class="text-format" *ngIf="isJson(list.text)">
-                {{ list.text | json }}
-              </pre>
-              <pre class="text-format" [ngClass]="{'warn-text': list.code === -1}" *ngIf="!isJson(list.text)">
-                {{ list.text }}
-              </pre>
+            <div fxFlex="0 0 55px" class="time" *ngIf="list.type === 1">
+              {{ list.time }}
             </div>
           </div>
         </div>

diff --git a/src/app/core-ui/main/status/modal/help-modal/console-modal.component.scss b/src/app/core-ui/main/status/modal/help-modal/console-modal.component.scss
@@ -5,7 +5,7 @@
 .console-modal {
 	width: auto;
 	margin: -24px;
-	padding: 36px 0 0;
+	padding: 24px 0 0;
 
 	// command input & button
 	.command-actions {
@@ -27,14 +27,29 @@
 
 .content-modal {
 	max-height: none !important;
-	margin: 0 24px 12px;
+	margin: 0 24px 24px;
 	padding: 10px 16px;
 	background: white;
 	border-bottom: 1px solid $bg-shadow;
+
+	// user input commands
+	&.input {
+		margin-bottom: 0;
+		border-bottom: 1px dashed $bg-shadow;
+		.time {
+			color: $text-muted;
+			font-size: 10px;
+			text-align: right;
+		}
+		.command {
+			font-weight: bold;
+		}
+	}
 }
 
 .text-format {
-	text-indent: -115px;
+	line-height: 1.3;
+	white-space: pre-wrap; // wrap long output lines
 	margin: 0;
 }
 

diff --git a/src/app/wallet/wallet/shared/qr-code-modal/qr-code-modal.component.ts b/src/app/wallet/wallet/shared/qr-code-modal/qr-code-modal.component.ts
@@ -35,7 +35,7 @@ export class QrCodeModalComponent {
   }
 
   dialogClose(): void {
-    this.diloagRef.close();
+    this.diloagRef.close(); // FIXME: typo?
   }
 
 }