Merge pull request #451 from joomla/color-chooser

Color chooser

bower.json

@@ -16,6 +16,7 @@
     "g11n-js": "1.1",
     "twbs-pagination": "1.1.2",
     "bootstrap-select": "1.5.4",
-    "d3": "3.4.6"
+    "d3": "3.4.6",
+    "jquery-simple-color": "1.2.1"
  }
 }

templates/github/labels.index.twig

@@ -20,11 +20,12 @@
         <div class="row-fluid well well-small">
             <div class="span5">
                 <label for="name">{{ 'Name'|_ }}</label><br/>
-                <input type="text" id="name" name="name" placeholder="Label name"/>
+                <input type="text" id="name" name="name" placeholder="{{ 'Label name'|_ }}"/>
             </div>
             <div class="span5">
-                <label for="color">{{ 'Color'|_ }}</label><br />
-                <input type="text" id="color" name="color" placeholder="Label color"/>
+                <label for="color_display">{{ 'Color'|_ }}</label>
+                <input class="color_select" id="color" value="#{{ item.color }}"/>
+                <input type="text" name="color" id="color_display" placeholder="{{ 'Label color'|_ }}"/>
             </div>
             <div class="span2 left">
                 <div class="btn btn-large btn-success" onclick="addLabel('{{ project.alias }}');">{{ 'Add Label'|_ }}</div>
@@ -71,6 +72,9 @@
     <script src="{{ uri.base.path }}vendor/blueimp-tmpl/js/tmpl{{ jdebug ? "" : ".min" }}.js"></script>
     <script src="{{ uri.base.path }}jtracker/blueimp-tmpl/js/jtracker-tmpl{{ jdebug ? "" : ".min" }}.js"></script>
 
+    <script type="text/javascript" src="{{ uri.base.path }}vendor/jquery-simple-color/src/jquery.simple-color{{ jdebug ? "" : ".min" }}.js"></script>
+    <script type="text/javascript" src="{{ uri.base.path }}jtracker/core/js/color-select{{ jdebug ? "" : ".min" }}.js"></script>
+
     <script type="text/javascript">
 
         /**

templates/tracker/category.add.twig

@@ -40,10 +40,11 @@
             </div>
 
             <div class="control-group">
-                <label class="control-label" for="color">{{ "Color"|_ }}</label>
+                <label class="control-label" for="color_display">{{ "Color"|_ }}</label>
 
                 <div class="controls">
-                    <input type="text" name="category[color]" id="color"/>
+                    <input class="color_select" id="color"/>
+                    <input type="text" name="category[color]" id="color_display"/>
                 </div>
             </div>
 
@@ -53,3 +54,9 @@
     </form>
 
 {% endblock %}
+
+{% block JavaScriptBottom %}
+    {{ parent() }}
+    <script type="text/javascript" src="{{ uri.base.path }}vendor/jquery-simple-color/src/jquery.simple-color{{ jdebug ? "" : ".min" }}.js"></script>
+    <script type="text/javascript" src="{{ uri.base.path }}jtracker/core/js/color-select{{ jdebug ? "" : ".min" }}.js"></script>
+{% endblock %}

templates/tracker/category.edit.twig

@@ -40,10 +40,11 @@
             </div>
 
             <div class="control-group">
-                <label class="control-label" for="color">{{ "Color"|_ }}</label>
+                <label class="control-label" for="color_display">{{ "Color"|_ }}</label>
 
                 <div class="controls">
-                    <input type="text" style="background-color: #{{ item.color }};color: {{ getContrastColor(item.color) }}" name="category[color]" id="color" value="{{ item.color }}"/>
+                    <input class="color_select" id="color" value="#{{ item.color }}"/>
+                    <input type="text" name="category[color]" id="color_display" value="{{ item.color }}"/>
                 </div>
             </div>
 
@@ -54,3 +55,9 @@
     </form>
 
 {% endblock %}
+
+{% block JavaScriptBottom %}
+{{ parent() }}
+<script type="text/javascript" src="{{ uri.base.path }}vendor/jquery-simple-color/src/jquery.simple-color{{ jdebug ? "" : ".min" }}.js"></script>
+<script type="text/javascript" src="{{ uri.base.path }}jtracker/core/js/color-select{{ jdebug ? "" : ".min" }}.js"></script>
+{% endblock %}

www/jtracker/core/js/color-select.js

@@ -0,0 +1,22 @@
+/**
+ * @copyright  Copyright (C) 2012 - 2014 Open Source Matters, Inc. All rights reserved.
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+$(document).ready(function() {
+	$('.color_select').simpleColor({
+		colors: [
+			'e11d21', 'eb6420', 'fbca04', '009800', '006b75', '207de5', '0052cc', '5319e7',
+			'f7c6c7', 'fad8c7', 'fef2c0', 'bfe5bf', 'bfdadc', 'c7def8', 'bfd4f2', 'd4c5f9'
+		],
+		cellWidth: 25,
+		cellHeight: 25,
+		cellMargin: 0,
+		columns: 8,
+		displayCSS: { 'width': '25px' },
+		chooserCSS: { 'left': '25px', 'border': '0' },
+		onSelect: function(hex, element) {
+			$('#' + element.attr('id') + '_display').val(hex);
+		}
+	});
+});