added new component: button-set

pm7 · Oct 5, 2012 · b4dabae · b4dabae
1 parent 26ce43c
commit b4dabae
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 1 deletion.
diff --git a/css/modern.css b/css/modern.css
@@ -1524,6 +1524,29 @@ button:focus,
 .command-button.default  > small {
   color: #ccc;
 }
+.tool-button {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  padding-top: 3px;
+}
+.tool-button img {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  display: inline;
+  float: none;
+  clear: both;
+}
+.button-set button {
+  margin-right: 0;
+}
+.button-set button.active {
+  background-color: #008287;
+  color: #fff;
+}
 /*
  * Metro UI CSS v 0.1.1
  * Copyright 2012 Sergey Pimenov

diff --git a/javascript/buttonset.js b/javascript/buttonset.js
@@ -0,0 +1,34 @@
+(function($){
+    $.fn.ButtonSet = function( options ){
+        var defaults = {
+        };
+
+        var $this = $(this)
+            , $buttons = $this.find("button")
+            ;
+
+        var initButtons = function(buttons){
+            buttons.on('click', function(e){
+                e.preventDefault();
+                var $a = $(this);
+                if ( $a.hasClass('active') ) return false;
+                $buttons.removeClass("active");
+                $(this).addClass("active");
+            });
+        }
+
+        return this.each(function(){
+            if ( options ) {
+                $.extend(defaults, options)
+            }
+
+            initButtons($buttons);
+        });
+    }
+
+    $(function () {
+        $('[data-role="button-set"]').each(function () {
+            $(this).ButtonSet();
+        })
+    })
+})(window.jQuery);
diff --git a/less/buttons.less b/less/buttons.less
@@ -93,3 +93,31 @@ button, .button {
         }
     }
 }
+
+.tool-button {
+    min-width: 32px;
+    min-height: 32px;
+    width: 32px;
+    height: 32px;
+    padding-top: 3px;
+
+    img {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        padding: 0;
+        display: inline;
+        float: none;
+        clear: both;
+    }
+}
+
+.button-set {
+    button {
+        margin-right: 0;
+    }
+    button.active {
+        background-color: #008287;
+        color: #fff;
+    }
+}
diff --git a/less/tiles.less b/less/tiles.less
@@ -250,7 +250,7 @@
             margin-bottom: 5px;
             margin-left: 15px;
             .tertiary-text;
-             
+
             font-family: @baseFontUI;
             color: @white;
             &:hover {

diff --git a/public/buttons.php b/public/buttons.php
@@ -15,6 +15,7 @@
     <script src="js/google-analytics.js"></script>
     <script src="js/github.info.js"></script>
     <script src="js/google-code-prettify/prettify.js"></script>
+    <script src="js/buttonset.js"></script>
 
     <title>Modern UI CSS</title>
 </head>
@@ -81,8 +82,39 @@
 
                         </div>
                     </div>
+
+                    <div class="row">
+                        <div class="span10">
+                            <h2>Button set</h2>
+                            <div class="button-set place-left" data-role="button-set">
+                                <button class="active">button 1</button>
+                                <button>button 2</button>
+                                <button>button 3</button>
+                            </div>
+                            <div class="button-set" data-role="button-set">
+                                <button class="tool-button active"><img src="images/bage-playing.png" /></button>
+                                <button class="tool-button"><img src="images/bage-paused.png" /></button>
+                                <button class="tool-button"><img src="images/bage-busy.png" /></button>
+                            </div>
+<pre class="prettyprint linenums">
+    &lt;div class="button-set" data-role="button-set"&gt;
+        &lt;button class="active"&gt; ... &lt;/button&gt;
+        &lt;button&gt; ... &lt;/button&gt;
+    &lt;/div&gt;
+    ------------
+    &lt;div class="button-set" data-role="button-set"&gt;
+        &lt;button class="tool-button active"&gt; ... &lt;/button&gt;
+        &lt;button class="tool-button"&gt; ... &lt;/button&gt;
+    &lt;/div&gt;
+</pre>
+                            <h3>Javascript</h3>
+                            <p>To activate button set include in head <code>buttonset.js</code></p>
+                        </div>
+                    </div>
                 </div>
 
+
+
                 <div class="grid">
                     <div class="row">
                         <? include("adsense.php")?>

diff --git a/public/css/modern.css b/public/css/modern.css
@@ -1524,6 +1524,29 @@ button:focus,
 .command-button.default  > small {
   color: #ccc;
 }
+.tool-button {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  padding-top: 3px;
+}
+.tool-button img {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  display: inline;
+  float: none;
+  clear: both;
+}
+.button-set button {
+  margin-right: 0;
+}
+.button-set button.active {
+  background-color: #008287;
+  color: #fff;
+}
 /*
  * Metro UI CSS v 0.1.1
  * Copyright 2012 Sergey Pimenov

diff --git a/public/js/buttonset.js b/public/js/buttonset.js
@@ -0,0 +1,34 @@
+(function($){
+    $.fn.ButtonSet = function( options ){
+        var defaults = {
+        };
+
+        var $this = $(this)
+            , $buttons = $this.find("button")
+            ;
+
+        var initButtons = function(buttons){
+            buttons.on('click', function(e){
+                e.preventDefault();
+                var $a = $(this);
+                if ( $a.hasClass('active') ) return false;
+                $buttons.removeClass("active");
+                $(this).addClass("active");
+            });
+        }
+
+        return this.each(function(){
+            if ( options ) {
+                $.extend(defaults, options)
+            }
+
+            initButtons($buttons);
+        });
+    }
+
+    $(function () {
+        $('[data-role="button-set"]').each(function () {
+            $(this).ButtonSet();
+        })
+    })
+})(window.jQuery);