Merge branch 'feature-user-friendly' into 'master'

Feature user friendly

See merge request !296

circle/dashboard/static/dashboard/activity.js

@@ -168,6 +168,7 @@ $(function() {
         } else {
         } else {
           in_progress = false;
           in_progress = false;
           if(reload_vm_detail) location.reload();
           if(reload_vm_detail) location.reload();
+          if(runs > 1) addConnectText();
         }
         }
         $('a[href="#activity"] i').removeClass('fa-spin');
         $('a[href="#activity"] i').removeClass('fa-spin');
       },
       },
@@ -179,6 +180,17 @@ $(function() {
 });
 });
 
 
 
 
+function addConnectText() {
+  var activities = $(".timeline .activity");
+  if(activities.length > 1) {
+    if(activities.eq(0).data("activity-code") == "vm.Instance.wake_up" ||
+       activities.eq(0).data("activity-code") == "vm.Instance.agent") {
+      $("#vm-detail-successfull-boot").slideDown(500);
+    }
+  }
+}
+
+
 String.prototype.hashCode = function() {
 String.prototype.hashCode = function() {
   var hash = 0, i, chr, len;
   var hash = 0, i, chr, len;
   if (this.length === 0) return hash;
   if (this.length === 0) return hash;

circle/dashboard/static/dashboard/dashboard.less

@@ -1247,3 +1247,16 @@ textarea[name="new_members"] {
 .pagination {
 .pagination {
   width: 100%;
   width: 100%;
 }
 }
+
+#empty-vm-help {
+  position: absolute;
+  bottom: 70px;
+  right: 45px;
+  z-index: 99999;
+  color: #101010;
+}
+
+#vm-detail-successfull-boot {
+  margin-bottom: 20px;
+  display: none;
+}

circle/dashboard/templates/dashboard/index-templates.html

@@ -34,7 +34,7 @@
     </div>
     </div>
     <div class="list-group-item list-group-footer">
     <div class="list-group-item list-group-footer">
       <div class="row">
       <div class="row">
-        <div class="col-xs-6">
+        <div class="col-xs-5 col-sm-6">
           <form action="{% url "dashboard.views.template-list" %}" method="GET" id="dashboard-template-search-form">
           <form action="{% url "dashboard.views.template-list" %}" method="GET" id="dashboard-template-search-form">
             <div class="input-group input-group-sm">
             <div class="input-group input-group-sm">
               <input id="dashboard-group-search-input" name="s" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
               <input id="dashboard-group-search-input" name="s" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
@@ -44,7 +44,7 @@
             </div>
             </div>
           </form>
           </form>
         </div>
         </div>
-        <div class="col-xs-6 text-right">
+        <div class="col-xs-7 col-sm-6 text-right">
           <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
           <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
             <i class="fa fa-chevron-circle-right"></i> {% trans "show all" %}
             <i class="fa fa-chevron-circle-right"></i> {% trans "show all" %}
           </a>
           </a>

circle/dashboard/templates/dashboard/index-users.html

@@ -22,7 +22,7 @@
     </div>
     </div>
     <div class="list-group-item list-group-footer text-right">
     <div class="list-group-item list-group-footer text-right">
       <div class="row">
       <div class="row">
-        <div class="col-xs-6">
+        <div class="col-xs-5 col-sm-6">
           <form action="{% url "dashboard.views.user-list" %}" method="GET" id="dashboard-user-search-form">
           <form action="{% url "dashboard.views.user-list" %}" method="GET" id="dashboard-user-search-form">
             <div class="input-group input-group-sm">
             <div class="input-group input-group-sm">
               <input id="dashboard-group-search-input" name="s" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
               <input id="dashboard-group-search-input" name="s" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
@@ -32,7 +32,7 @@
             </div>
             </div>
           </form>
           </form>
         </div>
         </div>
-        <div class="col-xs-6 text-right">
+        <div class="col-xs-7 col-sm-6 text-right">
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.user-list" %}">
           <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.user-list" %}">
             <i class="fa fa-chevron-circle-right"></i>
             <i class="fa fa-chevron-circle-right"></i>
             {% if more_users > 0 %}
             {% if more_users > 0 %}

circle/dashboard/templates/dashboard/index-vm.html

@@ -49,6 +49,10 @@
         <div class="list-group-item list-group-item-last">
         <div class="list-group-item list-group-item-last">
           {% trans "You have no virtual machines." %}
           {% trans "You have no virtual machines." %}
         </div>
         </div>
+      <div id="empty-vm-help">
+        {% trans "Use the <strong>new</strong> button to start a new VM" %}
+        <i class="fa fa-arrow-down"></i>
+      </div>
       {% endfor %}
       {% endfor %}
     </div>
     </div>
     <div class="list-group-item list-group-footer">
     <div class="list-group-item list-group-footer">

circle/dashboard/templates/dashboard/vm-detail.html

@@ -94,6 +94,7 @@
           <span>{{ instance.get_status_display|upper }}</span>
           <span>{{ instance.get_status_display|upper }}</span>
         </span>
         </span>
       </div>
       </div>
+
       <h3>{% trans "Connection details" %}</h3>
       <h3>{% trans "Connection details" %}</h3>
       <dl class="dl-horizontal vm-details-connection">
       <dl class="dl-horizontal vm-details-connection">
         <dt>{% trans "Protocol" %}</dt>
         <dt>{% trans "Protocol" %}</dt>
@@ -180,6 +181,12 @@
       {% endif %}
       {% endif %}
     </div>
     </div>
     <div class="col-md-8" id="vm-detail-pane">
     <div class="col-md-8" id="vm-detail-pane">
+      <div class="big" id="vm-detail-successfull-boot">
+        <span class="label label-info" data-status="{{ instance.status }}">
+          <i class="fa fa-check"></i>
+          {% trans "The virtual machine successfully started, you can connect now." %}
+        </span>
+      </div>
       <div class="panel panel-default" id="vm-detail-panel">
       <div class="panel panel-default" id="vm-detail-panel">
         <ul class="nav nav-pills panel-heading">
         <ul class="nav nav-pills panel-heading">
           <li class="active">
           <li class="active">