Changeset 15718 for trunk/templates

Timestamp:

12/01/11 00:20:03 (6 months ago)

Author:

Alexander Trofimov

Message:

Forms - switcher

Location:

trunk/templates/base

Files:

• css/forms.css (modified) (1 diff)
• scripts/BxBaseFormView.php (modified) (3 diffs)

trunk/templates/base/css/forms.css

@@ -188 +188 @@
 }
 
+/* switcher */
+
+.bx-switcher-cont {
+    position:relative;
+    width:60px;
+    height:24px;    
+    overflow:hidden;
+    cursor:pointer;
+    border:1px solid #ccc;
+    border:1px solid rgba(64, 64, 64, 0.5);
+
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    border-radius: 15px;
+
+    -webkit-box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
+
+    -webkit-transition: background-color 0.2s linear;
+    -moz-transition: background-color 0.2s linear;
+    -ms-transition: background-color 0.2s linear;
+    -o-transition: background-color 0.2s linear;
+}
+
+.bx-switcher-cont input {
+    position:absolute; 
+    top:-30px;
+}
+
+.bx-switcher-canvas {
+    position:relative;  
+    width:90px; 
+
+    -webkit-transition: left 0.2s ease-in-out;
+    -moz-transition: left 0.2s ease-in-out;
+    -ms-transition: left 0.2s ease-in-out;
+    -o-transition: left 0.2s ease-in-out;
+}
+
+.bx-switcher-cont.on {
+    background-color: #9c6;
+}
+
+.bx-switcher-cont.off {
+    background-color: #fff;
+}
+
+.bx-switcher-cont.on .bx-switcher-canvas {
+    left:5px;
+}
+
+.bx-switcher-cont.off .bx-switcher-canvas {
+    left:-31px;
+}
+
+.bx-switcher-on,
+.bx-switcher-off,
+.bx-switcher-handler {
+    position:absolute;  
+    top:-1px;
+    width:30px;
+    height:30px;
+    line-height:28px;
+}
+
+.bx-switcher-on {
+    left:0px;
+    width:2px;
+    height:14px;
+    margin:5px 0 0 15px;
+    background-color:#050;
+    border:1px solid #050;
+
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+
+    -webkit-box-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
+    -moz-box-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
+    box-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
+}
+
+.bx-switcher-off {  
+    left:60px;
+    width:16px;
+    height:16px;
+    padding:0 0 0 0;
+    margin:5px 14px 0 3px;
+
+    background-color:#aaa;
+
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+    -webkit-box-shadow: inset 0px 1px 2px #777; 
+    -moz-box-shadow: inset 0px 1px 2px #777;
+    box-shadow: inset 0px 1px 2px #777;
+}
+
+.bx-switcher-off div {
+    position:absolute;
+    top:3px;
+    left:3px;
+    width:10px;
+    height:10px;
+    background-color:#fff;
+
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+    -webkit-box-shadow: 0px 1px 2px #777; 
+    -moz-box-shadow: 0px 1px 2px #777;
+    box-shadow: 0px 1px 2px #777;
+}
+
+.bx-switcher-handler {
+    left:30px;
+    height:24px;
+    width:24px;
+    margin:0px;
+
+    background-color: #ececec;
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e0e0e0));
+    background-image: -webkit-linear-gradient(top, #fff, #e0e0e0); 
+    background-image: -moz-linear-gradient(top, #fff, #e0e0e0); 
+    background-image: -ms-linear-gradient(top, #fff, #e0e0e0); 
+    background-image: -o-linear-gradient(top, #fff, #e0e0e0); 
+    background-image: linear-gradient(top, #fff, #e0e0e0);
+
+    border:1px solid #ccc;
+    border:1px solid rgba(64, 64, 64, 0.5);
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    border-radius: 15px;
+
+    -webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.3); 
+    -moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.3);
+
+}
+
 /* extra features */
 

trunk/templates/base/scripts/BxBaseFormView.php

@@ -396 +396 @@
             case 'email':
             case 'url':
-            case 'checkbox':
+            case 'checkbox':            
             case 'radio':
             case 'file':
@@ -406 +406 @@
             case 'hidden':
                 $sInput = $this->genInputStandard($aInput);
+            break;
+
+            case 'switcher':
+                $sInput = $this->genInputSwitcher($aInput);
             break;
 
@@ -536 +540 @@
 
         return  "<input $sAttrs />\n";
+    }
+
+    /**
+     * Generate Switcher Input Element (based on checkbox)
+     *
+     * @param array $aInput
+     * @return string
+     */
+    function genInputSwitcher(&$aInput) {
+        $aInput['type'] = 'checkbox';
+        $sCheckbox = $this->genInputStandard(&$aInput);
+
+        $sClass = 'off';
+        if (isset($aInput['checked']) and $aInput['checked'])
+            $sClass = 'on';
+
+        return '
+            <div class="bx-switcher-cont ' . $sClass . '">' . $sCheckbox . '
+                <div class="bx-switcher-canvas">
+                    <div class="bx-switcher-on">&nbsp;</div>
+                    <div class="bx-switcher-off"><div></div></div>
+                    <div class="bx-switcher-handler">&nbsp;</div>
+                </div>
+            </div>';
     }