[Kimchi-devel] [PATCH] UI: Adding widget of gauge

[Aline Manera]

On 14/01/2015 08:04, Wen Wang wrote:
> Hi Aline,
>
> Please apply the patch for widget " messagebar-flat" first. I have 
> created a "widget/sample" directory there. After you apply that patch, 
> I will sent another patch with the sample of gauge.
>

OK.

> Best Regards
>
> Wang Wen
> On 1/14/2015 6:01 PM, Wen Wang wrote:
>> V1 -> V2:
>> Change the time of the copyright.
>>
>> New widget accept two options: "value" and "color". value varies from 0
>> to 100 and color contains "red", "blue", "yellow" and "purple".
>>
>> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
>> ---
>>   ui/css/theme-default/gauge-flat.css |  45 +++++++++++++++
>>   ui/js/widgets/gauge-flat.js         | 110 
>> ++++++++++++++++++++++++++++++++++++
>>   2 files changed, 155 insertions(+)
>>   create mode 100755 ui/css/theme-default/gauge-flat.css
>>   create mode 100755 ui/js/widgets/gauge-flat.js
>>
>> diff --git a/ui/css/theme-default/gauge-flat.css 
>> b/ui/css/theme-default/gauge-flat.css
>> new file mode 100755
>> index 0000000..4f65cd9
>> --- /dev/null
>> +++ b/ui/css/theme-default/gauge-flat.css
>> @@ -0,0 +1,45 @@
>> +/*
>> + * 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.
>> + */
>> +
>> +.ui-gauge-flat {
>> +    height: 15px;
>> +    text-align: left;
>> +    overflow: hidden;
>> +    background: #E6E7E8;
>> +}
>> +
>> +.ui-gauge-flat .ui-gauge-flat-value {
>> +    margin: -1px;
>> +    height: 100%;
>> +}
>> +
>> +.ui-gauge-flat .red {
>> +    background: #D9182D;
>> +}
>> +
>> +.ui-gauge-flat .blue {
>> +    background: #008ABF;
>> +}
>> +
>> +.ui-gauge-flat .yellow {
>> +    background: #FDB813;
>> +}
>> +
>> +.ui-gauge-flat .purple {
>> +    background: #7F1C7D;
>> +}
>> diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js
>> new file mode 100755
>> index 0000000..41a9ce8
>> --- /dev/null
>> +++ b/ui/js/widgets/gauge-flat.js
>> @@ -0,0 +1,110 @@
>> +/*
>> + * 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.
>> + */
>> +
>> +
>> +(function( $ ) {
>> +
>> +return $.widget( "ui.gaugeflat", {
>> +    version: "@VERSION",
>> +    options: {
>> +        max: 100,
>> +        value: 0,
>> +        color: "red"
>> +    },
>> +
>> +    min: 0,
>> +
>> +    _create: function() {
>> +        this.oldValue = this.options.value = this._constrainedValue();
>> +
>> +        this.element
>> +            .addClass( "ui-gauge-flat ui-widget ui-widget-content 
>> ui-corner-all" )
>> +            .attr({
>> +                role: "gaugeflat",
>> +                "aria-valuemin": this.min
>> +            });
>> +
>> +        var color = this.options.color;
>> +
>> +        this.valueDiv = $( "<div class='ui-gauge-flat-value " + 
>> color + " ui-widget-header ui-corner-left'></div>" )
>> +            .appendTo( this.element );
>> +
>> +        this._refreshValue();
>> +    },
>> +
>> +    _destroy: function() {
>> +        this.element
>> +            .removeClass( "ui-gauge-flat ui-widget ui-widget-content 
>> ui-corner-all" )
>> +            .removeAttr( "role" )
>> +            .removeAttr( "aria-valuemin" )
>> +            .removeAttr( "aria-valuemax" )
>> +            .removeAttr( "aria-valuenow" );
>> +
>> +        this.valueDiv.remove();
>> +    },
>> +
>> +    value: function( newValue ) {
>> +        if ( newValue === undefined ) {
>> +            return this.options.value;
>> +        }
>> +
>> +        this.options.value = this._constrainedValue( newValue );
>> +        this._refreshValue();
>> +    },
>> +
>> +    _constrainedValue: function( newValue ) {
>> +        if ( newValue === undefined ) {
>> +            newValue = this.options.value;
>> +        }
>> +
>> +        this.indeterminate = newValue === false;
>> +
>> +        if ( typeof newValue !== "number" ) {
>> +            newValue = 0;
>> +        }
>> +
>> +        return this.indeterminate ? false :
>> +            Math.min( this.options.max, Math.max( this.min, newValue 
>> ) );
>> +    },
>> +
>> +    _setOptions: function( options ) {
>> +        var value = options.value;
>> +        delete options.value;
>> +
>> +        this._super( options );
>> +
>> +        this.options.value = this._constrainedValue( value );
>> +        this._refreshValue();
>> +    },
>> +
>> +    _percentage: function() {
>> +        return this.indeterminate ? 100 : 100 * ( this.options.value 
>> - this.min ) / ( this.options.max - this.min );
>> +    },
>> +
>> +    _refreshValue: function() {
>> +        var value = this.options.value,
>> +            percentage = this._percentage();
>> +
>> +        this.valueDiv
>> +            .toggle( this.indeterminate || value > this.min )
>> +            .toggleClass( "ui-corner-right", value === 
>> this.options.max )
>> +            .width( percentage.toFixed(0) + "%" );
>> +    }
>> +});
>> +
>> +})(jQuery);
>
>
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>