[Kimchi-devel] [PATCH V3] UI: Adding widget of gauge
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Jan 19 15:09:06 UTC 2015
Below is how I can see the widget in the sample file:
And then how it is in the proposed new UI:
In the proposed new UI we don't have borders - the border and the
background has the same color.
Also the border is squared and not circled.
And in some cases the bar has a different colour in the end.
On 16/01/2015 08:05, Wen Wang wrote:
> V2 -> V3:
> Adding Samples of gauge.
>
> 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 | 109 ++++++++++++++++++++++++++++++++
> ui/js/widgets/samples/gauge-sample.html | 34 ++++++++++
> 3 files changed, 188 insertions(+)
> create mode 100755 ui/css/theme-default/gauge-flat.css
> create mode 100755 ui/js/widgets/gauge-flat.js
> create mode 100644 ui/js/widgets/samples/gauge-sample.html
Don't forget the license header for the sample HTML files
>
> diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css
> new file mode 100755
> index 0000000..535f0a8
> --- /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;
> + width: 100px;
> + 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;
> +}
> \ No newline at end of file
> diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js
> new file mode 100755
> index 0000000..a212223
> --- /dev/null
> +++ b/ui/js/widgets/gauge-flat.js
> @@ -0,0 +1,109 @@
> +/*
> + * 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( "kimchi.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);
> diff --git a/ui/js/widgets/samples/gauge-sample.html b/ui/js/widgets/samples/gauge-sample.html
> new file mode 100644
> index 0000000..bc1dca6
> --- /dev/null
> +++ b/ui/js/widgets/samples/gauge-sample.html
> @@ -0,0 +1,34 @@
> +<!--Sample code of gauge-->
> +<!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="../gauge-flat.js"></script>
> + <link rel="stylesheet" href="../../../css/theme-default/gauge-flat.css">
> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css">
> + </head>
> + <body>
> + <div class="gauge-demo"></div>
> + <script>
> + $(document).ready(function() {
> + console.log("test started1");
> + var gauged = $(".gauge-demo");
> + gauged.gaugeFlat({
> + value: 25,
> + color: "red"
> + });
> + var gaugeAdd = function() {
> + var gaugeValue = gauged.gaugeFlat("value");
> + gauged.gaugeFlat("value", gaugeValue + 1);
> + if (gaugeValue < 99) {
> + setTimeout(gaugeAdd, 300);
> + }
> + }
> + gaugeAdd();
> + });
> + </script>
> + </body>
> +</html>
> \ No newline at end of file
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150119/7d82016e/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: figcajbc.
Type: image/jpeg
Size: 1852 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150119/7d82016e/attachment.jpe>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: fdceejge.
Type: image/jpeg
Size: 7016 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150119/7d82016e/attachment-0001.jpe>
More information about the Kimchi-devel
mailing list