[Pkg-javascript-commits] [jquery-minicolors] 02/15: Fixed opacity with swatches rendering

[David Prévot]

This is an automated email from the git hooks/post-receive script.

taffit pushed a commit to branch master
in repository jquery-minicolors.

commit 3fb25e1d3d8e34ce0cf5381468195d4627ea2f2c
Author: Andrea Baron <andrea at bhweb.it>
Date:   Tue Jan 26 11:05:59 2016 +0100

    Fixed opacity with swatches rendering
---
 index.html             | 23 +++++++++++++++++++++--
 jquery.minicolors.css  |  6 +++++-
 jquery.minicolors.js   |  2 +-
 without-bootstrap.html |  7 ++++++-
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index bc64fca..dc17103 100644
--- a/index.html
+++ b/index.html
@@ -351,12 +351,22 @@
                         <div class="form-group">
                             <label for="letter-case">Swatches</label>
                             <br>
-                            <input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)"  value="#abcdef">
+                            <input type="text" id="swatches" class="form-control demo" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff"  value="#abcdef">
                             <span class="help-block">
                                 Example with swatches.
                             </span>
                         </div>
                     </div>
+                    <div class="col-lg-4 col-sm-4 col-12">
+                        <div class="form-group">
+                            <label for="letter-case">Swatches and opacity</label>
+                            <br>
+                            <input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)"  value="#abcdef">
+                            <span class="help-block">
+                                Example with swatches and opacity.
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -396,7 +406,8 @@ $.minicolors = {
         position: 'bottom left',
         show: null,
         showSpeed: 100,
-        theme: 'default'
+        theme: 'default',
+        swatches: []
     }
 };
 </pre>
@@ -565,6 +576,14 @@ $.minicolors.defaults = $.extend($.minicolors.defaults, {
 </pre>
                     </div>
                 </dd>
+                
+                <dt>swatches</dt>
+                <dd>
+                    <p>
+                        An array containing some colors, in either rgb(a) or hex format, that will
+                        show up under the main color grid. There can be only up to 7 colors.
+                    </p>
+                </dd>
             </dl>
 
             <!-- Methods -->
diff --git a/jquery.minicolors.css b/jquery.minicolors.css
index 0cb7a49..29e1745 100644
--- a/jquery.minicolors.css
+++ b/jquery.minicolors.css
@@ -54,7 +54,7 @@
     display: none;
 }
 
-.minicolors-panel.with-swatches {
+.minicolors-panel.minicolors-with-swatches {
 	height: 182px;
 }
 
@@ -215,6 +215,10 @@
 	margin:0 4px 0 0;
 }
 
+.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+	margin-right:7px;
+}
+
 .minicolors-swatch.selected {
 	border-color:#000;
 }
diff --git a/jquery.minicolors.js b/jquery.minicolors.js
index c866871..5ac3420 100644
--- a/jquery.minicolors.js
+++ b/jquery.minicolors.js
@@ -224,7 +224,7 @@
             if (settings.swatches.length > 7) {
                 settings.swatches.length = 7;
             }
-            panel.addClass('with-swatches');
+            panel.addClass('minicolors-with-swatches');
             swatches = $('<ul class="minicolors-swatches"></ul>')
                 .appendTo(panel);
             for(i = 0; i < settings.swatches.length; ++i) {
diff --git a/without-bootstrap.html b/without-bootstrap.html
index 75e1a59..7772b82 100644
--- a/without-bootstrap.html
+++ b/without-bootstrap.html
@@ -173,7 +173,12 @@
     <div class="form-group">
         <label for="letter-case">Swatches</label>
         <br>
-        <input type="text" id="letter-case" class="demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)">
+        <input type="text" id="swatches" class="demo" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff" value="#f00">
+    </div>
+    <div class="form-group">
+        <label for="letter-case">Swatches and opacity</label>
+        <br>
+        <input type="text" id="swatches-opacity" class="demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="#f00">
     </div>
 
 </body>

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-minicolors.git