1. #11
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default CSS3 iostoggle field

    CSS3 iostoggle field


    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
    Code:
    /**
     * @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
    Code:
    /**
     * @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
    Code:
    .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

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

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

  2. #12
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

  3. #13
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Updated Css

    Code:
    .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
    }

  4. #14
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    FYI, I extended this a bit further:

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

  5. #15
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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.
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  6. #16
    Sencha User rabelanger's Avatar
    Join Date
    Jan 2010
    Location
    Montreal
    Posts
    15
    Vote Rating
    1
    rabelanger is on a distinguished road

      0  

    Default


    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

  7. #17
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    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.

  8. #18
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    @rabelanger

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

    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  9. #19
    Sencha User
    Join Date
    Apr 2011
    Location
    Spain
    Posts
    77
    Vote Rating
    1
    Fanny144 is on a distinguished road

      0  

    Default


    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!!

  10. #20
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    @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
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






Similar Threads

  1. Autoload Refresh when Click the Buttom
    By footballermahesh in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Oct 2009, 7:28 PM
  2. (SOLVED) scroll dataview automatically to the buttom
    By robin30 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Feb 2009, 3:06 PM
  3. in layout column to put button to buttom
    By emredagli in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Aug 2008, 2:35 AM
  4. add tab from a link or a buttom
    By simpaulguy in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 Dec 2006, 11:37 AM

Thread Participants: 14