[Kimchi-devel] [PATCH 03/11] UI: Adding new widget of list

[Wen Wang]

Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/list-flat.css | 83 ++++++++++++++++++++++++++++++++++++++
 ui/js/widgets/list-flat.js         | 76 ++++++++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 ui/css/theme-default/list-flat.css
 create mode 100644 ui/js/widgets/list-flat.js

diff --git a/ui/css/theme-default/list-flat.css b/ui/css/theme-default/list-flat.css
new file mode 100644
index 0000000..ba0439d
--- /dev/null
+++ b/ui/css/theme-default/list-flat.css
@@ -0,0 +1,83 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.list-titlef {
+    height: 30px;
+    line-height: 30px;
+    width: 25%;
+    border-bottom: 1px solid #DEDEDE;
+    color: #626262;
+    font-size: 17px;
+    padding: 10px 0;
+    background: white;
+}
+
+.list-content {
+    height: 300px;
+    width: 25%;
+}
+
+.list-item {
+    border-bottom: 1px solid #F5F5F5;
+    height: 40px;
+}
+
+.list-item-odd {
+    background: #FFFFFF;
+}
+
+.list-item-even {
+    background: #FCFCFC;
+}
+
+.list-item:hover {
+    background: #DDDDDD;
+}
+
+.list-inline {
+    display: inline-block;
+}
+
+.list-item-icon {
+    line-height: 20px;
+    vertical-align: 35%;
+}
+
+.list-item-info {
+    position: relative;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.list-item-name {
+    font-size: 14px;
+    line-height: 14px;
+    padding: 9px 0 0;
+}
+
+.list-item-button {
+    position: relative;
+    width: 150px;
+    padding: 5px;
+    float: right;
+}
+
+.list-item-detail {
+    font-size: 11px;
+    color: #CDCDCD;
+}
\ No newline at end of file
diff --git a/ui/js/widgets/list-flat.js b/ui/js/widgets/list-flat.js
new file mode 100644
index 0000000..f76eec6
--- /dev/null
+++ b/ui/js/widgets/list-flat.js
@@ -0,0 +1,76 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+    // How to use:
+    //     $(".test-bar").listFlat({
+    //         title: "Hello World"  //Set title.
+    //     });
+    //     $(".test-bar").listFlat("addItem", "Hello", "2015", "icon-user", "button1");
+    //             //Add one item of the list, parameters are: name, info, icon and button-id
+
+
+ (function($) {
+
+    $.widget("kimchi.listFlat", {
+
+        options: {
+            title: null
+        },
+
+        _create: function() {
+            var that = this;
+            var listTitle = that.options.title;
+            var titleTrim = listTitle.replace(/\s*/g, "");
+            var html = "";
+            html += "<div class='list-titlef'>" + listTitle + "</div>" +
+                    "<div class='list-content' id='list" + titleTrim + "'></div>";
+            $(html).appendTo(that.element);
+        },
+
+        _getTitle: function() {
+            return this.options.title;
+        },
+
+        addItem: function(name, detail, icon, id) {
+            var title = this._getTitle().replace(/\s/g, "");
+            var usedIcon = icon || "";
+            var html = "";
+            html += "<div class='list-item'>" +
+                        "<span class='list-inline list-item-icon " + usedIcon + "'></span>" +
+                        "<span class='list-inline list-item-info'>"+
+                            "<div class='list-item-name'>" + name + "</div>" +
+                            "<div class='list-item-detail'>" + detail + "</div>" +
+                        "</span>" +
+                        "<span class='list-inline list-item-button' id='" + id + "'></span>" +
+                    "</div>";
+            $(html).appendTo($("#list" + title));
+            $.each($(".list-item"), function(index, data) {
+                if(index%2 >0) {
+                    $(this).addClass("list-item-even");
+                } else {
+                    $(this).addClass("list-item-odd");
+                }
+            })
+            console.log("title");
+        },
+
+        _destory: function() {
+            this.element.remove();
+        }
+    });
+ })(jQuery);
\ No newline at end of file
-- 
2.1.0