webui: key managing merged with store

one/static/script/store.js

@@ -479,6 +479,10 @@ var cloud = (function(cloud) {
     var model = new Model();
     var model = new Model();
     $(function() {
     $(function() {
         ko.applyBindings(model);
         ko.applyBindings(model);
+        $('#keys').click(function(e) {
+            $('.key').slideDown(700);
+            $('#keys').slideUp(700);
+        });
     });
     });
     document.addEventListener('dragenter', function(e) {
     document.addEventListener('dragenter', function(e) {
         e.stopPropagation();
         e.stopPropagation();

one/static/style/box.less

@@ -101,6 +101,21 @@
             float: none;
             float: none;
         }
         }
     }
     }
+    &.key {
+        .name {
+            background-image: url(/static/icons/key.png);
+        }
+        textarea {
+            margin: 10px;
+            width: 93%;
+        }
+        #new-key .name {
+            background-image: url(/static/icons/key--plus.png);
+        }
+        #reset-key .name {
+            background-image: url(/static/icons/key--exclamation.png);
+        }
+    }
     .quota{
     .quota{
         left: 0;
         left: 0;
         top: 0;
         top: 0;
@@ -599,21 +614,7 @@ table {
     }
     }
 }
 }
 
 
-#keys {
-    .name {
-        background-image: url(/static/icons/key.png);
-    }
-    textarea {
-        margin: 10px;
-        width: 93%;
-    }
-    #new-key .name {
-        background-image: url(/static/icons/key--plus.png);
-    }
-    #reset-key .name {
-        background-image: url(/static/icons/key--exclamation.png);
-    }
-}
+
 
 
 .boxhelp {
 .boxhelp {
     position: relative;
     position: relative;

one/templates/box/file/box.html

@@ -93,6 +93,25 @@
     {% for key in keys %}
     {% for key in keys %}
         {% include "box/key/entry.html" %}
         {% include "box/key/entry.html" %}
     {% endfor %}
     {% endfor %}
+    <li class="entry small-row key" style="display: none">
+        <div class="summary" id="new-key">
+            <div class="name">{% trans "Add public key" %}</div>
+            <div class="clear"></div>
+        </div>
+        <div class="details">
+            <form style="padding-bottom: 10px" action="/key/add/" method="POST">
+                {% csrf_token %}
+                <textarea style="margin-bottom: 5px" name="key" placeholder="{% trans "Public key in OpenSSH format" %}"></textarea><br />
+                <input type="submit" style="margin-left: 10px;" value="{% trans "Save" %}" />
+            </form>
+        </div>
+    </li>
+    <li class="entry small-row key" style="display: none">
+        <div class="summary" id="reset-key">
+            <div class="name">{% trans "Reset key" %}</div>
+            <div class="clear"></div>
+        </div>
+    </li>
     <li class="file-upload entry small-row">
     <li class="file-upload entry small-row">
         <div class="summary" data-bind="click: getUploadURL">
         <div class="summary" data-bind="click: getUploadURL">
             <div class="quota">
             <div class="quota">

one/templates/box/key/box.html

@@ -12,24 +12,5 @@
     {% for key in keys %}
     {% for key in keys %}
         {% include "box/key/entry.html" %}
         {% include "box/key/entry.html" %}
     {% endfor %}
     {% endfor %}
-    <li class="entry small-row" style="display: none">
-        <div class="summary" id="new-key">
-            <div class="name">{% trans "Add public key" %}</div>
-            <div class="clear"></div>
-        </div>
-        <div class="details">
-            <form style="padding-bottom: 10px" action="/key/add/" method="POST">
-                {% csrf_token %}
-                <textarea style="margin-bottom: 5px" name="key" placeholder="{% trans "Public key in OpenSSH format" %}"></textarea><br />
-                <input type="submit" style="margin-left: 10px;" value="{% trans "Save" %}" />
-            </form>
-        </div>
-    </li>
-    <li class="entry small-row" style="display: none">
-        <div class="summary" id="reset-key">
-            <div class="name">{% trans "Reset key" %}</div>
-            <div class="clear"></div>
-        </div>
-    </li>
 </ul>
 </ul>
 {% endblock content %}
 {% endblock content %}