[Kimchi-devel] [PATCH V2 1/2] UI: Adding new widget of list
Wen Wang
wenwang at linux.vnet.ibm.com
Thu Feb 5 03:40:34 UTC 2015
On 2/4/2015 10:59 PM, Paulo Ricardo Paz Vital wrote:
> Few comments below...
>
> On Wed Feb 04 2015 at 3:21:50 PM Wen Wang <wenwang at linux.vnet.ibm.com
> <mailto:wenwang at linux.vnet.ibm.com>> wrote:
>
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com
> <mailto: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
>
>
> 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
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 at ovirt.org <mailto:Kimchi-devel at ovirt.org>
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150205/c8115c05/attachment.html>
More information about the Kimchi-devel
mailing list