On/Off toggle buttom

[tomalex0]

Hi,

I got few feedbacks regarding earlier implementaion if it can be done using CSS3.
So tried to implement ios toggle field with using CSS3 techniques. I think i'm almost got it right

css techniques are shared from http://development.tobypitman.com/ip...eckboxes2.html

I have not done much change in exisiting togglefield i just added a functionality to change the state text.
I thought to kept it as a separate component.

You may also find bit odd as the State text are specified in the thumb itself. I think there areas where we can better the way CSS are laid out, feel free to inform me if it can be written in a better way.

Features
Look and feel of ios toggle field with CSS3
Custom text for min and max state (I have not tackled the issue if text is long)


Main IosToggleField

/**
 * @class Ext.form.iosToggle
 * @extends Ext.form.Toggle
 * <p>Specialized Slider with a single thumb and only two values. By default the toggle component can
 * be switched between the values of 0 and 1.</p>
 * @xtype iostogglefield
 */
Ext.form.iosToggle = Ext.extend(Ext.form.Toggle, {
    
    /**
     * @cfg {String} minValueCls CSS class added to the field when toggled to its minValue
     */
    minValueCls: 'x-iostoggle-off',


    /**
     * @cfg {String} maxValueCls CSS class added to the field when toggled to its maxValue
     */
    maxValueCls: 'x-iostoggle-on',
    
    /**
    * @cfg {String} minText default text for minValue
    */
    minText : 'OFF',
    
    /**
    * @cfg {String} maxText default text for maxValue
    */
    maxText:'ON',
   
    // inherit docs
    setValue: function(value) {
        Ext.form.iosToggle.superclass.setValue.call(this, value, this.animationDuration);


        var fieldEl = this.fieldEl,thumbText;
        if (this.constrain(value) === this.minValue) {
            fieldEl.addCls(this.minValueCls);
            fieldEl.removeCls(this.maxValueCls);
            thumbText = this.minText;
        }
        else {
            fieldEl.addCls(this.maxValueCls);
            fieldEl.removeCls(this.minValueCls);
            thumbText = this.maxText;
        }
         Ext.get(this.el.query(".x-toggle-thumb-iosthumb")[0]).update(thumbText);
    },
    getThumbClass: function() {
        return Ext.form.Toggle.iosThumb;
    }
});


Ext.reg('iostogglefield', Ext.form.iosToggle);

ios thumb

/**
 * @class Ext.form.Toggle.iosThumb
 * @extends Ext.form.Slider.Thumb
 * @private
 * @ignore
 */
Ext.form.Toggle.iosThumb = Ext.extend(Ext.form.Slider.Thumb, {
    onRender: function() {
        Ext.form.Toggle.iosThumb.superclass.onRender.apply(this, arguments);
        Ext.DomHelper.append(this.el, [{
            cls: 'x-toggle-thumb-iosthumb'
        }]);
    }
});

CSS

.x-toggle-thumb-iosthumb{
    position:relative;
    margin:0.38em 0 0 0;
    text-align:center;
}


.x-iostoggle-on .x-toggle-thumb-iosthumb{
    color:white;
    text-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
}


.x-iostoggle-off .x-toggle-thumb-iosthumb{
    position:relative;
    margin:0.38em 0 0 0;
    text-align:center;
    text-shadow:0px 0px 2px #F4F4F4;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
    display: block;
    margin-bottom: 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #555555;
    width: 80px;
    position: relative;
    height: 32px;  
}


.x-field-toggle .x-slider.x-iostoggle-off{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
}


.x-field-toggle .x-slider.x-iostoggle-on{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#white));
}


.x-iostoggle-off .x-thumb::before, .x-iostoggle-on .x-thumb::before {
    content: "";
    position: absolute;
    width: 2.2em;
    height: 1.650em;
    top: 0em !important;
    left: 0em !important;
    -webkit-border-radius: 0.925em;
    border-radius:3px;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}
.x-iostoggle-off .x-thumb::before {
    border:1px solid #E5E5E5;
    background-color: white;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
    background-image: linear-gradient(white,#A1A1A1 2%,#white);
}


.x-iostoggle-on .x-thumb::before {
    border:1px solid #1C60A5;
    background-color: #14539C;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
    background-image: linear-gradient(white,#14539C 2%,#3095C7);
}

How to use

{
                        xtype: 'iostogglefield',
                        name : 'enable'
                        label: 'Security Mode',
            minText : 'M',
            maxText : 'F'
                    }

{
                        xtype: 'iostogglefield',
                        name : 'enable'
                        label: 'Security Mode'
                    }

[tomalex0]

Screen shots

default.png



togglecustom.png

[tomalex0]

Updated Css

.x-toggle-thumb-iosthumb{
    position:relative;
    margin:0.5em 0 0 0;
    text-align:center;
    font-size: 0.9em;
    font-weight :bold;
}


.x-iostoggle-on .x-toggle-thumb-iosthumb{
    color:white;
    text-shadow:#062547 0 -1px 0;
}


.x-iostoggle-off .x-toggle-thumb-iosthumb{
    color :  #666;
    text-shadow:#FFFFFF 0 1px 0;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
    display: block;
    margin-bottom: 20px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: #777 1px solid;
    width: 80px;
    position: relative;
    height: 32px;  
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #EBEBEB),color-stop(.8, #D6D6D6), color-stop(1,#A2A2A2));
    border:#777 1px solid;
   -webkit-box-shadow:#CCC 0 0 2px;
}


.x-iostoggle-off .x-thumb::before, .x-iostoggle-on .x-thumb::before {
    content: "";
    position: absolute;
    width: 2.2em;
    height: 1.650em;
    top: 0em !important;
    left: 0em !important;
    -webkit-border-radius: 0.925em;
    border-radius:3px;
    -webkit-background-clip: padding;
    background-clip: padding-box;
   
}
.x-iostoggle-off .x-thumb::before {
    border:1px solid #E5E5E5;
    background-color: white;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
    background-image: linear-gradient(white,#A1A1A1 2%,#white);
    -webkit-box-shadow:#222 0 0 3px
}


.x-iostoggle-on .x-thumb::before {
    border:1px solid #14539C;
    background-color: #14539C;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
    background-image: linear-gradient(white,#14539C 2%,#3095C7);
    -webkit-box-shadow:#05203F 0 0 3px
}

[jep]

FYI, I extended this a bit further:

http://www.sencha.com/forum/showthre...oggle&p=646474

[tomalex0]

Nice to know that you have updated as per you wanted.,
current implementation of mine no longer uses images but only gradients. and we can specify custom minText and maxText. Just try it and let me know, i haven't got any feedback after i updated.

[rabelanger]

Hi,

I tried your on/off button on my app (sencha touch 1.1/ phonegap 1.0) on a iPad 2. The button inside the slider is off a bit, the button doesn't fit flush inside the slider.

I'll post the solution if I manage to tweak it.

On chrome (dev. 15) and safari 5.1, it does look perfect, that's why its a pain to fix.

raf

[jep]

tomalex0: The problem I had with the current one using the gradients and fonts is that it doesn't really match the iOS one anymore. It makes the application feel not-native. Unfortunately, I'm not sure it's possible to get it very perfect using just html/css.

[tomalex0]

@rabelanger

Thanks for reply, don't have the device to check with .

[Fanny144]

I had encountered the same problem.
In the function cssTranslate, the offset is outside the correct range so the thumb Yes or No goes out of the toggle.

I can only think to put a fixed value in that function to css tranlate3d. But it isn't efficient.
The strange thing is that I think it doesn't happen with the default togglefield of Sencha.

If you have any solution to this problem I'd like know it.

Thanks!!

[tomalex0]

@rabelanger

I have updated css to fix the issue with thumb in slider. I have checked in ipad and iphone and looks fine for me.

Please check the github code