add panel stype

binux · binux · commit 30b27846fe00 · 2015-06-13T20:11:16.000+08:00
diff --git a/pyspider/webui/static/debug.css b/pyspider/webui/static/debug.css
@@ -431,3 +431,21 @@ span.element > ul > li:hover {
 #slime-editor .panel-group .panel-body.active {
   display: block;
 }
+#slime-editor .panel-group .crawl,
+#slime-editor .panel-group .return {
+  padding: 10px 10px;
+  cursor: pointer;
+  border: 0 solid #fae3c4;
+  border-left-width: 10px;
+}
+#slime-editor .panel-group .crawl.active,
+#slime-editor .panel-group .return.active {
+  border: 0 solid #f0ad4e;
+  border-left-width: 10px;
+}
+#slime-editor .panel-group .crawl:hover,
+#slime-editor .panel-group .return:hover {
+  background-color: #fceedb;
+  border: 0 solid #f0ad4e;
+  border-left-width: 10px;
+}
diff --git a/pyspider/webui/static/debug.js b/pyspider/webui/static/debug.js
@@ -328,6 +328,10 @@ window.SlimeEditor = (function() {
         $(this).find("~.panel-body").addClass("active");
         _this.resize_panel_body();
       });
+      this.slime_elem.on("click", ".crawl, .return", function() {
+        $(this).parent().find(".active").removeClass("active");
+        $(this).addClass("active");
+      });
     },
 
     resize_panel_body: function() {
diff --git a/pyspider/webui/static/debug.less b/pyspider/webui/static/debug.less
@@ -469,4 +469,22 @@ span.element {
       display: block;
     }
   }
+
+  .crawl, .return {
+    padding: 10px 10px;
+    cursor: pointer;
+    border: 0 solid lighten(@orange, 25%);
+    border-left-width: 10px;
+
+    &.active {
+      border: 0 solid @orange;
+      border-left-width: 10px;
+    }
+
+    &:hover {
+      background-color: lighten(@orange, 30%);
+      border: 0 solid @orange;
+      border-left-width: 10px;
+    }
+  }
 }
diff --git a/pyspider/webui/templates/debug.html b/pyspider/webui/templates/debug.html
@@ -92,10 +92,23 @@
           <div class="panel-group">
             <div class="panel">
               <div class="panel-heading panel-setup">
-                setup
+                def on_start(self):
               </div>
               <div class="panel-body active">
-                body
+                <div class="crawl active">
+                  self.crawl(<input />, <button>...</button>, callback=self.<a href="#">callback</a>)
+                </div>
+                <div class="return">
+                  return {
+                  <div class="return-item">
+                    <input />: <input /> . <select>
+                    <option>items()</option>
+                    <option>text()</option>
+                    <option>html()</option>
+                  </select>
+                  </div>
+                  }
+                </div>
               </div>
             </div>
             <div class="panel">
