opt white

frame.js

@@ -35,13 +35,17 @@ Volcanos("onengine", { _init: function(can, meta, list, cb, target) {
                 can.user.title(can.user.Search(can, "title"))
                 var pane = can[meta.main.name], msg = can.request({})
                 pane.onaction && pane.onaction._init(pane, msg, msg.option||[], cb, target)
+                can.page.Modify(can, document.body, {className: can.user.Search(can, "topic")||"white"})
             })
-        }, target) })
             can.onkeypop._init(can)
+        }, target) })
     },
     _merge: function(can, sub) { can.core.Item(sub, function(key, value) {
         if (sub.hasOwnProperty(key)) { can.onengine[key] = value }
     }); return true },
+    _topic: function(can) {
+    },
+
     river: {
         "product": {name: "产品群", storm: {
             "office": {name: "office", index: [
@@ -108,7 +112,9 @@ Volcanos("onengine", { _init: function(can, meta, list, cb, target) {
                         msg.Push("name", value.name)
                     })
                 }
+                if (cmds.length != 1) {
                     break
+                }
             case "Storm":
                 var river = can.onengine.river[cmds[0]]; if (!river) { break }
                 can.core.Item(river.storm, function(key, value) {
@@ -530,7 +536,20 @@ Volcanos("onlayout", { _init: function(can, meta, list, cb, target) {
             height -= field.offsetHeight
         })
 
-        can.page.Select(can, target, ["fieldset.left", "fieldset.middle", "fieldset.right"], function(field) {
+        can.page.Select(can, target, ["fieldset.middle"], function(field, index) {
+            var border = field.offsetHeight - field.clientHeight
+            can.page.Modify(can, field, { style: {
+                height: height-border*2+"px",
+            } })
+            can.page.Select(can, field, "div.output", function(output) {
+                var border = output.offsetHeight - output.clientHeight
+                can.page.Modify(can, output, { style: {
+                    height: height-border*2-14+"px",
+                } })
+            })
+        })
+
+        can.page.Select(can, target, ["fieldset.left", "fieldset.right"], function(field, index) {
             var border = field.offsetHeight - field.clientHeight
             can.page.Modify(can, field, { style: {
                 height: height-border*2+"px",

index.css

@@ -252,3 +252,157 @@ fieldset.input.key {
     z-index:101;
 }
 
+
+body.white {
+    padding:0;
+    margin:0;
+    background:gray;
+    background-color:#0dabda;
+}
+body.white fieldset.plugin {
+    margin:0;
+    border:0;
+    border-top:solid 2px #CCCCFF;
+    background-color:white;
+    color:black;
+}
+body.white fieldset.plugin.Header {
+    background-color:#2f3638;
+    border:solid 2px #1f2224;
+    color:white;
+}
+body.white fieldset.plugin.Footer {
+    margin:0;
+    border:0;
+    border:solid 2px #1f2224;
+    background-color:#1f2224;
+    color:white;
+}
+body.white fieldset.plugin.Header input {
+    color:white;
+    background:white;
+    border:2px solid #c4c7ce;
+    border-radius:10px 10px 10px 10px;
+}
+body.white fieldset.plugin.River {
+    border:solid 2px #1f2224;
+    background-color:#1f2224;
+    color:white;
+}
+body.white fieldset.plugin.River>div.output div.item.select {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+body.white fieldset.plugin.River>div.output div.item:hover {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+body.white fieldset.plugin.River>div.output div.subitem.select {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+body.white fieldset.plugin.River>div.output div.subitem:hover {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+body.white fieldset.plugin.Storm {
+    border:solid 10px #1f2224;
+    background-color:#1f2224;
+    color:white;
+}
+body.white fieldset.plugin.Storm>div.output>div.item.select {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+body.white fieldset.plugin.Storm>div.output>div.item:hover {
+    background-color:black;
+    border:solid 2px black;
+    color:white;
+}
+
+body.white fieldset.Action {
+    /* background-color:black; */
+    background-color:#0dabda;
+}
+body.white fieldset.Action fieldset.plugin {
+    border:0;
+    border-top:solid 2px #CCCCFF;
+    background-color:white;
+    color:black;
+}
+body.white fieldset.Action fieldset.plugin:hover {
+    border-top:solid 2px #6666FF;
+}
+body.white fieldset.Action fieldset.plugin legend {
+    border-top:solid black 2px;
+    border-radius:10px 10px 10px 10px;
+    border:2px solid #99CCFF;
+    background-color:#99CCFF;
+    background-color:#339999;
+    padding:0 20px;
+    color:white;
+}
+body.white fieldset.Action fieldset.plugin legend:hover {
+    background-color:#6ee4e4;
+}
+body.white fieldset.Action fieldset.plugin div.output {
+    color:black;
+}
+
+body.white fieldset.plugin div.item input[type=text] {
+    color:white;
+    background:0;
+    border:2px solid #c4c7ce;
+    border-radius:8px 8px 8px 8px;
+    color:black;
+}
+body.white fieldset.plugin div.item input[type=button] {
+    background-color:cyan;
+    color:white;
+    background-color:#FF9900;
+    border:2px solid #FF9900;
+    padding:0 20px;
+    border-radius:10px 10px 10px 10px;
+}
+body.white fieldset.plugin div.item input[type=button]:hover {
+    background-color:#FFCC33;
+    border:2px solid #FFCC33;
+}
+body.white fieldset.plugin div.item select {
+    margin-top:2px;
+    background-color:cyan;
+    color:white;
+    background-color:#99CC66;
+    border:2px solid #99CC66;
+    padding:0 20px;
+    border-radius:10px 10px 10px 10px;
+}
+body.white fieldset.plugin div.item select:hover {
+}
+body.white fieldset.plugin table {
+    background:gray;
+    border:0;
+}
+body.white fieldset.plugin table tr {
+    background-color:gray;
+}
+body.white fieldset.plugin table tr:hover {
+    background:gray;
+}
+body.white fieldset.plugin table th {
+    background-color:#99CCFF;
+    color:black;
+}
+body.white fieldset.plugin table td {
+    background-color:white;
+    color:black;
+    border:0;
+}
+body.white fieldset.plugin table td:hover {
+    background-color:lightgray;
+}

pane/Header.js

@@ -108,6 +108,8 @@ Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg,
                 ui.River.click(), ui.Footer.click(), ui.Storm.click()
             } else if (can.user.isMobile) {
                 ui.River.click(), ui.Footer.click(), ui.Storm.click()
+            } else {
+                ui.Storm.click()
             }
 
             typeof cb == "function" && cb()

pane/River.css

@@ -8,15 +8,29 @@ fieldset.River {
 fieldset.River>div.output {
     padding:0;
 }
-fieldset.River>div.output>div.item {
+fieldset.River>div.output div.item {
     padding-left:6px;
 }
-fieldset.River>div.output>div.item:hover {
+fieldset.River>div.output div.item:hover {
     cursor:pointer;
     background-color:red;
     border:ridge 2px yellow;
 }
-fieldset.River>div.output>div.item.select {
+fieldset.River>div.output div.item.select {
+    background-color:red;
+    border:ridge 2px yellow;
+}
+fieldset.River>div.output div.sublist {
+    margin-left:20px;
+}
+fieldset.River>div.output div.subitem {
+}
+fieldset.River>div.output div.subitem:hover {
+    cursor:pointer;
+    background-color:red;
+    border:ridge 2px yellow;
+}
+fieldset.River>div.output div.subitem.select {
     background-color:red;
     border:ridge 2px yellow;
 }

pane/River.js

@@ -1,4 +1,30 @@
 Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, meta, list, cb, target) {
+        can.sublist = {}
+    },
+    storm: function(event, can, river) {
+        var list = can.sublist[river]; if (list) { var hide = list.style.display == "none"
+            return can.page.Modify(can, list, {style: {display: hide? "": "none"}})
+        }
+
+        can.run(event, [river], function(msg) { var which = 0
+            list = can.page.Append(can, can._output, [{view: "sublist", list: msg.Table(function(value, index) {
+                river == can.user.Search(can, "river") && value.name == can.user.Search(can, "storm") && (which = index)
+                return {text: [value.name, "div", "subitem"], onclick: function(event) {
+                    var msg = can.request(event)
+                    msg.Option("river", can.Conf("river", river))
+                    msg.Option("storm", can.Conf("storm", value.key))
+                    can.run(event, ["search", "Action.onaction._init"])
+
+                    can.page.Select(can, can._output, "div.subitem.select", function(item) {
+                        can.page.ClassList.del(can, item, "select")
+                    })
+                    can.page.ClassList.add(can, event.target, "select")
+                }}
+            })}]).sublist
+            list.children[which].click()
+            event.target.nextSibling && can._output.insertBefore(list, event.target.nextSibling)
+            can.sublist[river] = list
+        })
     },
 })
 Volcanos("onaction", {help: "控件交互", list: ["创建", "刷新"], _init: function(can, msg, list, cb, target) {
@@ -57,6 +83,8 @@ Volcanos("ondetail", {help: "菜单交互", list: ["添加用户", "重命名",
 Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg, list, cb, target) { var key = "river"
         can.run({}, [], function(sup) { can._output.innerHTML = ""; var select; sup.Table(function(value, index, array) {
             var view = can.onappend.item(can, can._output, "item", value, function(event, item) { var msg = can.request(event, {_msg: sup})
+                can.onimport.storm(event, can, value.key)
+                return
                 // 左键点击
                 msg.Option(key, can.Conf(key, value.key)), can.run(event, ["search", "Storm.onaction._init"])
             }, function(event) {
@@ -67,6 +95,9 @@ Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg,
             if (index == 0 || [value.key, value.name].indexOf(can.user.Search(can, key)) > -1) { select = view }
         }); select && select.click(), typeof cb == "function" && cb(sup) })
     },
-    key: function(can, msg) { msg.Option("river", can.Conf("river")) },
+    key: function(can, msg) {
+        msg.Option("river", can.Conf("river"))
+        msg.Option("storm", can.Conf("storm"))
+    },
 })
 

pane/Storm.js

@@ -76,6 +76,8 @@ Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg,
             }
         }); select && select.click() })
     },
-    key: function(can, msg) { msg.Option("storm", can.Conf("storm")) },
+    key: function(can, msg) {
+        // msg.Option("storm", can.Conf("storm"))
+    },
 })
 

plugin/local/code/inner.css

@@ -18,10 +18,12 @@ fieldset.editor>form.option div.item input.args[name=line] {
 
 fieldset.editor>div.output {
     max-height:560px; overflow:auto;
+    background-color:black;
 }
 fieldset.editor>div.output>div.project {
     max-height:400px; overflow:auto;
     max-width:120px;
+    color:white;
 }
 fieldset.editor>div.output>div.project div.item {
     cursor:pointer;
@@ -41,6 +43,7 @@ fieldset.editor>div.output div.preview {
 fieldset.editor>div.output div.preview>div.item {
     text-align:right; padding:0 4px; margin:0;
     height:20px; border:solid 1px black;
+    color:white;
 }
 fieldset.editor>div.output div.preview>div.item:hover {
     background-color:green;
@@ -61,6 +64,7 @@ fieldset.editor>div.output div.content>pre.item {
     padding:0; margin:0;
     padding-left:10px;
     min-width:120px;
+    color:white;
 }
 fieldset.editor>div.output div.content>pre.item.select {
     /* background-color:red; */