[Kimchi-devel] [PATCH V2 1/2] UI: Adding new widget of list
Paulo Ricardo Paz Vital
pvital at gmail.com
Wed Feb 4 14:59:50 UTC 2015
Few comments below...
On Wed Feb 04 2015 at 3:21:50 PM Wen Wang <wenwang at linux.vnet.ibm.com>
wrote:
> 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
>
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 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/20150204/3b8f2e16/attachment.html>
More information about the Kimchi-devel
mailing list