Merge pull request #1293 from scireum/feature/sbi/OX-10453

Tycho: Adds a color picker input component

pom.xml

@@ -6,15 +6,15 @@
     <parent>
         <groupId>com.scireum</groupId>
         <artifactId>sirius-parent</artifactId>
-        <version>10.1.1</version>
+        <version>10.2.1</version>
     </parent>
     <artifactId>sirius-web</artifactId>
     <version>DEVELOPMENT-SNAPSHOT</version>
     <name>SIRIUS web</name>
     <description>Provides a modern and scalable web server as SIRIUS module</description>
 
     <properties>
-        <sirius.kernel>dev-38.2.0</sirius.kernel>
+        <sirius.kernel>dev-38.3.0</sirius.kernel>
     </properties>
 
     <repositories>

src/main/resources/default/assets/tycho/lib.css.pasta

@@ -2,6 +2,7 @@
 // A list of all licenses can be obtained via /licenses
 //
 ___include("/assets/tycho/libs/bootstrap/css/bootstrap.min.css")
+___include("/assets/tycho/libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css")
 ___include("/assets/tycho/libs/token-autocomplete/token-autocomplete.css")
 ___include("/assets/tycho/libs/datetimepicker/css/bootstrap-datetimepicker.min.css")
 ___include("/assets/tycho/libs/dropzonejs/dropzone.css")

src/main/resources/default/assets/tycho/lib.js.pasta

@@ -5,6 +5,7 @@
 ___include("/assets/tycho/libs/jquery/jquery-3.5.1.min.js")
 ___include("/assets/tycho/libs/popper/popper-1.14.3.min.js")
 ___include("/assets/tycho/libs/bootstrap/js/bootstrap.min.js")
+___include("/assets/tycho/libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js")
 ___include("/assets/tycho/libs/mustache/mustache.min.js")
 ___include("/assets/tycho/libs/token-autocomplete/token-autocomplete.js")
 ___include("/assets/tycho/libs/chartjs/chart.umd.js")

src/main/resources/default/assets/tycho/libs/bootstrap-colorpicker/LICENSE.txt

@@ -0,0 +1,21 @@
+boostrap-colorpicker - MIT License
+
+Copyright (c) 2017 Javi Aguilar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/main/resources/default/taglib/t/colorpicker.html.pasta

@@ -0,0 +1,51 @@
+<i:arg name="class" type="String" default="" description="Lists additional CSS classes to apply to the field."/>
+<i:arg name="fieldClass" type="String" default="" description="Lists additional CSS classes to apply to the field."/>
+<i:arg name="labelClass" type="String" default="" description="Lists additional CSS classes to apply to the label."/>
+<i:arg name="name" type="String" default=""/>
+<i:arg name="fieldName" type="String" default="@name"/>
+<i:arg name="value" type="String"/>
+<i:arg name="labelKey" type="String" default=""/>
+<i:arg name="label" type="String" default="@i18n(labelKey)"/>
+<i:arg name="forceLabel" type="boolean" default="false"/>
+<i:arg name="helpKey" type="String" default=""/>
+<i:arg name="help" type="String" default="@i18n(helpKey)"/>
+<i:arg name="id" type="String" default="@generateId('colorpicker-%s')"/>
+<i:arg name="placeholder" type="String" default=""/>
+<i:arg name="tabIndex" type="String" default=""/>
+
+<i:pragma name="description" value="Renders a color picker within a Tycho template"/>
+
+<div class="form-group @UserContext.get().signalFieldError(name) @class">
+    <i:if test="isFilled(label) || forceLabel">
+        <label><span class="@labelClass">@label</span></label>
+    </i:if>
+
+    <div class="input-group">
+        <input @if(isFilled(fieldName)) { name="@fieldName" }
+               @if(isFilled(id)) { id="@id" }
+               type="text"
+               value="@UserContext.get().getFieldValue(name, value)"
+               class="form-control input-block-level @fieldClass"
+               @if (isFilled(placeholder)) { placeholder="@placeholder" }
+               @if (isFilled(tabIndex)) { tabindex="@tabIndex" }/>
+        <span class="input-group-append">
+            <span class="input-group-text colorpicker-input-addon"><i></i></span>
+        </span>
+    </div>
+
+    <i:if test="isFilled(help)">
+        <small class="form-text text-muted">
+            <i:raw>@expandMessage(help)</i:raw>
+        </small>
+    </i:if>
+    <i:if test="UserContext.get().hasError(name)">
+        <small class="error-block form-text">@UserContext.get().getFieldErrorMessage(name)</small>
+    </i:if>
+    <script>
+        $(function () {
+            $('#@id').parent().colorpicker({
+                format: 'hex'
+            });
+        });
+    </script>
+</div>