Added new color field

PiranhaCMS · Dec 13, 2020 · a0fcd98 · a0fcd98
1 parent 4c63445
commit a0fcd98
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 3 deletions.
diff --git a/core/Piranha.Manager/assets/src/js/components/fields/color-field.vue b/core/Piranha.Manager/assets/src/js/components/fields/color-field.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="input-group color-field">
+        <div class="input-group-prepend">
+            <div class="color-preview" :style="{ backgroundColor: model.value }"></div>
+            <input class="form-control" type="color" v-model="model.value">
+        </div>
+        <input class="form-control" type="text" v-model="model.value" :placeholder="meta.placeholder">
+    </div>    
+</template>
+
+<script>
+export default {
+    props: ["uid", "model", "meta"]
+}
+</script>
diff --git a/core/Piranha.Manager/assets/src/scss/inc/_fields.scss b/core/Piranha.Manager/assets/src/scss/inc/_fields.scss
@@ -10,6 +10,30 @@
     margin: 0 auto;
 }
 
+.color-field {
+    .input-group-prepend {
+        width: 35px;
+        position: relative;
+    }
+
+    .color-preview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: solid 1px $gray-400;
+        border-right: 0;
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+    }
+
+    input[type="color"] {
+        position: absolute;
+        opacity: 0;
+    }
+}
+
 .html-field {
     @include content();
 

diff --git a/core/Piranha.Manager/assets/src/scss/inc/_forms.scss b/core/Piranha.Manager/assets/src/scss/inc/_forms.scss
@@ -36,9 +36,6 @@
 }
 
 .input-group {
-    .form-control {
-        border-right: 0;
-    }
     .input-group-text {
         background: #fff;
         font-size: 87.5%;

diff --git a/core/Piranha.Manager/gulpfile.js b/core/Piranha.Manager/gulpfile.js
@@ -219,6 +219,7 @@ var js = [
 
             "assets/src/js/components/fields/audio-field.vue",
             "assets/src/js/components/fields/checkbox-field.vue",
+            "assets/src/js/components/fields/color-field.vue",
             "assets/src/js/components/fields/data-select-field.vue",
             "assets/src/js/components/fields/date-field.vue",
             "assets/src/js/components/fields/document-field.vue",

diff --git a/core/Piranha/App.cs b/core/Piranha/App.cs
@@ -209,6 +209,7 @@ static App()
             // Compose field types
             Instance._fields.Register<Extend.Fields.AudioField>();
             Instance._fields.Register<Extend.Fields.CheckBoxField>();
+            Instance._fields.Register<Extend.Fields.ColorField>();
             Instance._fields.Register<Extend.Fields.DateField>();
             Instance._fields.Register<Extend.Fields.DocumentField>();
             Instance._fields.Register<Extend.Fields.HtmlField>();
@@ -242,6 +243,7 @@ static App()
 
             // Compose serializers
             Instance._serializers.Register<Extend.Fields.CheckBoxField>(new CheckBoxFieldSerializer<Extend.Fields.CheckBoxField>());
+            Instance._serializers.Register<Extend.Fields.ColorField>(new StringFieldSerializer<Extend.Fields.ColorField>());
             Instance._serializers.Register<Extend.Fields.DateField>(new DateFieldSerializer());
             Instance._serializers.Register<Extend.Fields.DocumentField>(new DocumentFieldSerializer());
             Instance._serializers.Register<Extend.Fields.HtmlField>(new StringFieldSerializer<Extend.Fields.HtmlField>());

diff --git a/core/Piranha/Extend/Fields/ColorField.cs b/core/Piranha/Extend/Fields/ColorField.cs
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) .NET Foundation and Contributors
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license.  See the LICENSE file for details.
+ *
+ * https://github.com/piranhacms/piranha.core
+ *
+ */
+
+namespace Piranha.Extend.Fields
+{
+    [FieldType(Name = "Color", Shorthand = "Color", Component = "color-field")]
+    public class ColorField : SimpleField<string>
+    {
+        /// <summary>
+        /// Implicit operator for converting a string to a field.
+        /// </summary>
+        /// <param name="str">The color value</param>
+        public static implicit operator ColorField(string str)
+        {
+            return new ColorField { Value = str };
+        }
+
+        /// <summary>
+        /// Implicitly converts the color field to a string.
+        /// </summary>
+        /// <param name="field">The field</param>
+        public static implicit operator string(ColorField field)
+        {
+            return field.Value;
+        }
+    }
+}
diff --git a/examples/RazorWeb/Models/Regions/AllFields.cs b/examples/RazorWeb/Models/Regions/AllFields.cs
@@ -35,6 +35,9 @@ public enum StyleType
         [Field(Placeholder = "Etiam porta sem malesuada magna mollis euismod.")]
         public CheckBoxField CheckBox { get; set; }
 
+        [Field(Placeholder = "Etiam porta sem malesuada magna mollis euismod.")]
+        public ColorField Color { get; set; }
+
         [Field(Placeholder = "Etiam porta sem malesuada magna mollis euismod.")]
         public DateField Date { get; set; }