From 7b4936cb0371e207b454e570a5e27435baf7f0af Mon Sep 17 00:00:00 2001
From: himetani_cafe <fumifumi@yasunaga-lab.bio.kyutech.ac.jp>
Date: Sat, 27 Feb 2016 17:29:31 +0900
Subject: [PATCH] Modify command directive html to be more cool

---
 front-end/app/scripts/directives/Command.ts |   1 +
 front-end/app/style.scss                    |  21 ++++++
 front-end/app/templates/command.html        | 105 ++++++++++++++++------------
 front-end/app/templates/header-menu.html    |   2 +-
 front-end/dist/bundle.js                    |  14 ++++
 front-end/dist/css/style.css                |  16 +++++
 front-end/dist/templates/command.html       | 105 ++++++++++++++++------------
 front-end/dist/templates/header-menu.html   |   2 +-
 8 files changed, 174 insertions(+), 92 deletions(-)

diff --git a/front-end/app/scripts/directives/Command.ts b/front-end/app/scripts/directives/Command.ts
index 3fae985..db84a5c 100644
--- a/front-end/app/scripts/directives/Command.ts
+++ b/front-end/app/scripts/directives/Command.ts
@@ -92,6 +92,7 @@ namespace app.directives {
             });
 
             this.WebSocket.on('console', function(msg) {
+                console.log(msg);
                 var messages = msg.split('\n');
                 if(messages[0].substr(0,6) === 'Usage:') {
                     controller.messages = msg.split('\n');
diff --git a/front-end/app/style.scss b/front-end/app/style.scss
index f90085d..f4658fa 100644
--- a/front-end/app/style.scss
+++ b/front-end/app/style.scss
@@ -14,6 +14,7 @@ $panel-bg: #eee;
 
 .console-body {
     background-color: white; 
+    padding: 20px;
     height: 100%;
 }
 
@@ -24,6 +25,26 @@ $panel-bg: #eee;
 .command {
     padding:5px;
 }
+
+.panel-title {
+    font-family: 'Open Sans';
+}
+
+.open-sans {
+    font-family: 'Open Sans';
+}
+
+.btn {
+    font-family: 'Open Sans';
+}
+
+label {
+    font-family: 'Open Sans';
+}
+
+.page-header {
+    color: black;
+}
 // Import libs
 // --------------------
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
diff --git a/front-end/app/templates/command.html b/front-end/app/templates/command.html
index 6622a5c..ad0ed69 100644
--- a/front-end/app/templates/command.html
+++ b/front-end/app/templates/command.html
@@ -1,54 +1,69 @@
 <div class="command">
-<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-primary">
-    <uib-accordion-heading>
-    <h4 class="panel-title">
-        [{{ctrl.index}}: {{ctrl.name}}]
-        <button class="pull-right"
-                ng-click="ctrl.removeMySelf(ctrl.index)">
-            <span class="glyphicon glyphicon-remove"></span>
-        </button>
+<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-success">
+<uib-accordion-heading>
+<h1 class="panel-title">
+    [{{ctrl.index}}]: {{ctrl.name}}
+    <button class="pull-right"
+            ng-click="ctrl.removeMySelf(ctrl.index)">
+        <span class="glyphicon glyphicon-remove"></span>
+    </button>
     </h4>
     </uib-accordion-heading>
-    <div class="row">
-        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
-            <code>
-                <form class="form-horizontal" ng-submit="ctrl.submit()">
-                    <ul class="list-inline">
-                        <li>
-                            <label class="control-label">
-                                workspace
-                            </label>
-                            <select class="form-control"
-                                    ng-options="dir.name for dir in ctrl.dirs"
-                                    ng-model="ctrl.workspace"
-                                    ng-change="ctrl.reloadFiles()"
-                                    required>
-                            </select>
-                        </li>
-                    </ul>
-
-                    <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
-
-                    <button type="submit" class="btn btn-default">
-                        Execute
-                    </button>
-
-                    <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
-                        Debug
-                    </button>
+    <form class="form-horizontal" ng-submit="ctrl.submit()">
+        <div class="container">
+            <div class="row">
+                <h4 class='open-sans'>
+                    Action
+                </h4>
+                <button type="submit" class="btn btn-default">
+                    Execute
+                </button>
+                <button type="button" class="btn btn-default">
+                    Stop 
+                </button>
+                <button type="button" class="btn btn-default"
+                                      ng-click="ctrl.help()">
+                    Help 
+                </button>
+                <hr align="left" style="width: 90%; height: 1px; background-color:#5cb85c;" />
+            </div>
+            <div class="row">
+                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+                    <h4 class="open-sans">
+                        Parameters
+                    </h4>
+                    <code>
+                        <ul class="list-inline">
+                            <li>
+                                <label>
+                                    workspace
+                                </label>
+                                <select class="form-control"
+                                        ng-options="dir.name for dir in ctrl.dirs"
+                                        ng-model="ctrl.workspace"
+                                        ng-change="ctrl.reloadFiles()"
+                                        required>
+                                </select>
+                            </li>
+                        </ul>
 
-                </form>
-            </code>
-        </div>
-        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
-            <h4>Message from console</h4>
-            <button type="button" class="btn btn-default" ng-click="ctrl.help()">show help</button>
-            <div class="panel-info">
-                <div class="panel-body console-body">
-                    <p ng-repeat="msg in ctrl.messages track by $index">{{msg}}</p>
+                        <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
+                    </code>
+                </div>
+                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
+                    <h4 class="open-sans">Message from console</h4>
+                    <div class="panel pull-left">
+                        <div class="panel-body console-body">
+                            <p ng-repeat="msg in ctrl.messages track by $index">{{msg}}</p>
+                        </div>
+                    </div>
                 </div>
+                <hr align="left" style="width: 90%; height: 1px; background-color:#5cb85c;" />
+                <button type="submit" class="btn btn-default">
+                    Execute
+                </button>
             </div>
         </div>
-    </div>
+    </form>
     </uib-accordion-group>
 </div>
diff --git a/front-end/app/templates/header-menu.html b/front-end/app/templates/header-menu.html
index dc9fef1..9887b2a 100644
--- a/front-end/app/templates/header-menu.html
+++ b/front-end/app/templates/header-menu.html
@@ -1,4 +1,4 @@
-<nav class="nav navbar navbar-static-top navbar-inverse">
+<nav class="nav navbar navbar-default navbar-static-top">
     <div class="navbar-header">
         <a class="navbar-brand" href="">Zephyr</a>
     </div>
diff --git a/front-end/dist/bundle.js b/front-end/dist/bundle.js
index 21375b2..434d8ba 100644
--- a/front-end/dist/bundle.js
+++ b/front-end/dist/bundle.js
@@ -41209,6 +41209,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -41849,6 +41850,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -42489,6 +42491,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -43129,6 +43132,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -43769,6 +43773,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -44409,6 +44414,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -45049,6 +45055,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -45689,6 +45696,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -46329,6 +46337,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -46969,6 +46978,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -47609,6 +47619,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -48249,6 +48260,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -48889,6 +48901,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
@@ -49529,6 +49542,7 @@
 	                    controller.isOpen = false;
 	                });
 	                this.WebSocket.on('console', function (msg) {
+	                    console.log(msg);
 	                    var messages = msg.split('\n');
 	                    if (messages[0].substr(0, 6) === 'Usage:') {
 	                        controller.messages = msg.split('\n');
diff --git a/front-end/dist/css/style.css b/front-end/dist/css/style.css
index f111740..455169e 100644
--- a/front-end/dist/css/style.css
+++ b/front-end/dist/css/style.css
@@ -10,6 +10,7 @@
 
 .console-body {
   background-color: white;
+  padding: 20px;
   height: 100%; }
 
 .console-body p {
@@ -18,6 +19,21 @@
 .command {
   padding: 5px; }
 
+.panel-title {
+  font-family: 'Open Sans'; }
+
+.open-sans {
+  font-family: 'Open Sans'; }
+
+.btn {
+  font-family: 'Open Sans'; }
+
+label {
+  font-family: 'Open Sans'; }
+
+.page-header {
+  color: black; }
+
 /*!
  * Bootstrap v3.3.6 (http://getbootstrap.com)
  * Copyright 2011-2015 Twitter, Inc.
diff --git a/front-end/dist/templates/command.html b/front-end/dist/templates/command.html
index 6622a5c..ad0ed69 100644
--- a/front-end/dist/templates/command.html
+++ b/front-end/dist/templates/command.html
@@ -1,54 +1,69 @@
 <div class="command">
-<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-primary">
-    <uib-accordion-heading>
-    <h4 class="panel-title">
-        [{{ctrl.index}}: {{ctrl.name}}]
-        <button class="pull-right"
-                ng-click="ctrl.removeMySelf(ctrl.index)">
-            <span class="glyphicon glyphicon-remove"></span>
-        </button>
+<uib-accordion-group heading="{{ctrl.heading}}" is-open="ctrl.isOpen" panel-class="panel-success">
+<uib-accordion-heading>
+<h1 class="panel-title">
+    [{{ctrl.index}}]: {{ctrl.name}}
+    <button class="pull-right"
+            ng-click="ctrl.removeMySelf(ctrl.index)">
+        <span class="glyphicon glyphicon-remove"></span>
+    </button>
     </h4>
     </uib-accordion-heading>
-    <div class="row">
-        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
-            <code>
-                <form class="form-horizontal" ng-submit="ctrl.submit()">
-                    <ul class="list-inline">
-                        <li>
-                            <label class="control-label">
-                                workspace
-                            </label>
-                            <select class="form-control"
-                                    ng-options="dir.name for dir in ctrl.dirs"
-                                    ng-model="ctrl.workspace"
-                                    ng-change="ctrl.reloadFiles()"
-                                    required>
-                            </select>
-                        </li>
-                    </ul>
-
-                    <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
-
-                    <button type="submit" class="btn btn-default">
-                        Execute
-                    </button>
-
-                    <button type="button" ng-click="ctrl.debug()" class="btn btn-default">
-                        Debug
-                    </button>
+    <form class="form-horizontal" ng-submit="ctrl.submit()">
+        <div class="container">
+            <div class="row">
+                <h4 class='open-sans'>
+                    Action
+                </h4>
+                <button type="submit" class="btn btn-default">
+                    Execute
+                </button>
+                <button type="button" class="btn btn-default">
+                    Stop 
+                </button>
+                <button type="button" class="btn btn-default"
+                                      ng-click="ctrl.help()">
+                    Help 
+                </button>
+                <hr align="left" style="width: 90%; height: 1px; background-color:#5cb85c;" />
+            </div>
+            <div class="row">
+                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
+                    <h4 class="open-sans">
+                        Parameters
+                    </h4>
+                    <code>
+                        <ul class="list-inline">
+                            <li>
+                                <label>
+                                    workspace
+                                </label>
+                                <select class="form-control"
+                                        ng-options="dir.name for dir in ctrl.dirs"
+                                        ng-model="ctrl.workspace"
+                                        ng-change="ctrl.reloadFiles()"
+                                        required>
+                                </select>
+                            </li>
+                        </ul>
 
-                </form>
-            </code>
-        </div>
-        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
-            <h4>Message from console</h4>
-            <button type="button" class="btn btn-default" ng-click="ctrl.help()">show help</button>
-            <div class="panel-info">
-                <div class="panel-body console-body">
-                    <p ng-repeat="msg in ctrl.messages track by $index">{{msg}}</p>
+                        <option info="o" files="ctrl.files"  ng-repeat="o in ctrl.options"></option>
+                    </code>
+                </div>
+                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
+                    <h4 class="open-sans">Message from console</h4>
+                    <div class="panel pull-left">
+                        <div class="panel-body console-body">
+                            <p ng-repeat="msg in ctrl.messages track by $index">{{msg}}</p>
+                        </div>
+                    </div>
                 </div>
+                <hr align="left" style="width: 90%; height: 1px; background-color:#5cb85c;" />
+                <button type="submit" class="btn btn-default">
+                    Execute
+                </button>
             </div>
         </div>
-    </div>
+    </form>
     </uib-accordion-group>
 </div>
diff --git a/front-end/dist/templates/header-menu.html b/front-end/dist/templates/header-menu.html
index dc9fef1..9887b2a 100644
--- a/front-end/dist/templates/header-menu.html
+++ b/front-end/dist/templates/header-menu.html
@@ -1,4 +1,4 @@
-<nav class="nav navbar navbar-static-top navbar-inverse">
+<nav class="nav navbar navbar-default navbar-static-top">
     <div class="navbar-header">
         <a class="navbar-brand" href="">Zephyr</a>
     </div>
-- 
2.11.0