Re: [Kimchi-devel] [PATCH V2 1/2] UI: Adding new widget of list

Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- 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 _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel