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

[Wen Wang]

Okay, I will sent a separate patch that contains only adding this Demo 
directory and all future widget will have the mock placed in this directory.

Best Regards

On 1/15/2015 8:34 PM, Aline Manera wrote:
>
> 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.
>>
>
> You can send a simple patch that only creates the directory 
> "widgets/samples" to avoid delaying on get a specific patch accepted.
>
>> 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
>>
>