[PATCH V2 0/2] Add list widget with sample
Add list widget with sample Wen Wang (2): UI: Adding new widget of list UI: Sample of list widget ui/css/theme-default/list-flat.css | 83 ++++++++++++++++++++++++++++++++++++++ ui/js/widgets/list-flat.js | 76 ++++++++++++++++++++++++++++++++++ ui/js/widgets/samples/list.html | 45 +++++++++++++++++++++ 3 files changed, 204 insertions(+) create mode 100644 ui/css/theme-default/list-flat.css create mode 100644 ui/js/widgets/list-flat.js create mode 100644 ui/js/widgets/samples/list.html -- 2.1.0
Signed-off-by: Wen Wang <wenwang@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
Few comments below... On Wed Feb 04 2015 at 3:21:50 PM Wen Wang <wenwang@linux.vnet.ibm.com> wrote:
Signed-off-by: Wen Wang <wenwang@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
Indentation of the comment is wrong - looks for me there's one more TAB. Also, would be nice to place the comment before the operation.
+ + + (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@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Few comments below...
On Wed Feb 04 2015 at 3:21:50 PM Wen Wang <wenwang@linux.vnet.ibm.com <mailto:wenwang@linux.vnet.ibm.com>> wrote:
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com <mailto:wenwang@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
Indentation of the comment is wrong - looks for me there's one more TAB. Also, would be nice to place the comment before the operation. I have checked I might not be able to find the tab. If there is any, could you please be more specific in which way I can find and have it replaced. Comments is used for the usage of the widgets and there will be a sample
On 2/4/2015 10:59 PM, Paulo Ricardo Paz Vital wrote: html file used for the demo of the widgets. I prefer to place it here in which way user could see the usage of the widgets either in the demo html file or within the widgets.
+ + + (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@ovirt.org <mailto:Kimchi-devel@ovirt.org> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
V1 -> V2: Add lincense and rename the sample file Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/js/widgets/samples/list.html | 45 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 ui/js/widgets/samples/list.html diff --git a/ui/js/widgets/samples/list.html b/ui/js/widgets/samples/list.html new file mode 100644 index 0000000..286e941 --- /dev/null +++ b/ui/js/widgets/samples/list.html @@ -0,0 +1,45 @@ +<!-- +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * 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. + */ + --> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Gauge Demo</title> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../list-flat.js"></script> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/theme-default/list-flat.css"> + <link rel="stylesheet" href="../../../css/fontello/css/animation.css"> + <link rel="stylesheet" href="../../../css/fontello/css/fontello.css"> + </head> + <body> + <div class="list-demo"></div> + <script> + $(document).ready(function() { + $(".list-demo").listFlat({ + title: "Hello World" //Set title. + }); + $(".list-demo").listFlat("addItem", "Hello", "2015", "icon-user", "button1"); + //Add one item of the list, parameters are: name, info, icon and button-id + }); + </script> + </body> +</html> \ No newline at end of file -- 2.1.0
Few comments below... On Wed Feb 04 2015 at 3:21:55 PM Wen Wang <wenwang@linux.vnet.ibm.com> wrote:
V1 -> V2: Add lincense and rename the sample file
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/js/widgets/samples/list.html | 45 ++++++++++++++++++++++++++++++ +++++++++++ 1 file changed, 45 insertions(+) create mode 100644 ui/js/widgets/samples/list.html
diff --git a/ui/js/widgets/samples/list.html b/ui/js/widgets/samples/list. html new file mode 100644 index 0000000..286e941 --- /dev/null +++ b/ui/js/widgets/samples/list.html @@ -0,0 +1,45 @@ +<!-- +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014
s/2014/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. + */ + --> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Gauge Demo</title> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../list-flat.js"></script> + <link rel="stylesheet" href="../../../libs/themes/ base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/theme- default/list-flat.css"> + <link rel="stylesheet" href="../../../css/fontello/ css/animation.css"> + <link rel="stylesheet" href="../../../css/fontello/ css/fontello.css"> + </head> + <body> + <div class="list-demo"></div> + <script> + $(document).ready(function() { + $(".list-demo").listFlat({ + title: "Hello World" //Set title. + }); + $(".list-demo").listFlat("addItem", "Hello", "2015", "icon-user", "button1"); + //Add one item of the list, parameters are: name, info, icon and button-id
Indentation of the comment is wrong - looks for me there's one more TAB. Also, would be nice to place the comment before the operation.
+ }); + </script> + </body> +</html> \ No newline at end of file -- 2.1.0
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
Few comments below...
On Wed Feb 04 2015 at 3:21:55 PM Wen Wang <wenwang@linux.vnet.ibm.com <mailto:wenwang@linux.vnet.ibm.com>> wrote:
V1 -> V2: Add lincense and rename the sample file
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com <mailto:wenwang@linux.vnet.ibm.com>> --- ui/js/widgets/samples/list.html | 45 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 ui/js/widgets/samples/list.html
diff --git a/ui/js/widgets/samples/list.html b/ui/js/widgets/samples/list.html new file mode 100644 index 0000000..286e941 --- /dev/null +++ b/ui/js/widgets/samples/list.html @@ -0,0 +1,45 @@ +<!-- +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014
s/2014/2015 ACK
+ * + * 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. + */ + --> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Gauge Demo</title> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../list-flat.js"></script> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/theme-default/list-flat.css"> + <link rel="stylesheet" href="../../../css/fontello/css/animation.css"> + <link rel="stylesheet" href="../../../css/fontello/css/fontello.css"> + </head> + <body> + <div class="list-demo"></div> + <script> + $(document).ready(function() { + $(".list-demo").listFlat({ + title: "Hello World" //Set title. + }); + $(".list-demo").listFlat("addItem", "Hello", "2015", "icon-user", "button1"); + //Add one item of the list, parameters are: name, info, icon and button-id
Indentation of the comment is wrong - looks for me there's one more TAB. Also, would be nice to place the comment before the operation. I have checked I might not be able to find the tab. If there is any, could you please be more specific in which way I can find and have it replaced. Comments is used for the usage of the widgets and there will be a sample
On 2/4/2015 11:00 PM, Paulo Ricardo Paz Vital wrote: html file used for the demo of the widgets. I prefer to place it here in which way user could see the usage of the widgets either in the demo html file or within the widgets.
+ }); + </script> + </body> +</html> \ No newline at end of file -- 2.1.0
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org <mailto:Kimchi-devel@ovirt.org> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (2)
-
Paulo Ricardo Paz Vital -
Wen Wang