slaprunner: minishell looks better

slapos/runner/static/css/editor.css

@@ -45,28 +45,40 @@ border-left:1px #E4E4E4 solid; cursor:pointer; color: #5C7077; text-shadow: 0px
 .item-hide{display:none;}
 
 #shell-window {
-  width: 978px;
+  width: 974px;
   height: 350px;
   z-index: 10;
   border: 2px solid #6A93A0;
   border-top: none;
-  border-left: none;
-  background: #7FAED3;
+  background: #9bbed6;
   position: absolute;
   display: none;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 #shell-result {
   width: 98%;
   height: 300px;
   margin-left: 1%;
   margin-right: 1%;
-  box-sizing: border-box;
+  margin-top: 5px;
   padding: 3px;
+  background: #E4E4E4;
+  color: #074A86;
+  box-sizing: border-box;
+  border: 2px inset #6A93A0;
+}
+#shell-result::first-line
+{ 
+  font-weight: bold;
 }
 #shell-input {
-  width: 97%;
+  width: 96%;
   margin-left: 1%;
   margin-right: 1%;
   position: absolute;
   bottom: 10px;
+  background: #E4E4E4;
+  color: #074A86;
+  border: inset 1px #678dad; 
 }

slapos/runner/static/js/scripts/shell.js

@@ -19,6 +19,11 @@ $(document).ready(function () {
   updateHistory();
 
   $("#shell").click (function() {
+    // We have to do that because once slide effect is activated, div is considered as visible
+    $("#shell").css("background-color", "#E4E4E4");
+    if ( ! $("#shell-window").is(':visible') ) {
+      $("#shell").css("background-color", "#C7C7C7");
+    }
     $("#shell-window").slideToggle("fast");
     if ( $("#shell-window").is(':visible') ) {
       $("#shell-input").focus();

slapos/runner/templates/softwareFolder.html

@@ -60,7 +60,7 @@
   <div id="shell-window">
     <textarea id="shell-result" cols="80" readonly>
     </textarea>
-    <input type="text" name="command" id="shell-input" autocomplete="off" />
+    <input type="text" name="command" id="shell-input" autocomplete="off" placeholder="Type command ..." />
   </div>
   <div class="clear"></div>
   <div class="software_details">