add icons for fields

reddec · Sep 26, 2023 · 892869f · 892869f
1 parent 9c78bbe
commit 892869f
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 23 deletions.
diff --git a/Makefile b/Makefile
@@ -2,6 +2,7 @@ LOCAL := $(PWD)/.local
 export PATH := $(LOCAL)/bin:$(PATH)
 export GOBIN := $(LOCAL)/bin
 
+MDIVERSION := 7.2.96
 LINTER := $(GOBIN)/golangci-lint
 GORELEASER := $(GOBIN)/goreleaser
 
@@ -15,6 +16,23 @@ lint: $(LINTER)
 	$(LINTER) run
 .PHONY: lint
 
+# it will not download heavy eot and ttf
+update-assets:
+	mkdir -p internal/assets/static/css
+	mkdir -p internal/assets/static/fonts
+	curl -L -f -o internal/assets/static/css/materialdesignicons.min.css "https://cdn.jsdelivr.net/npm/@mdi/font@$(MDIVERSION)/css/materialdesignicons.min.css"
+	cd internal/assets/static/css && cat materialdesignicons.min.css | \
+		tr -s ';{},' '\n' | \
+		grep url | \
+		sed -rn 's|.*?url\("([^"]+?)".*|\1|p' | \
+		grep -v '#' | \
+		grep -v '.eot' | \
+		grep -v '.ttf' | \
+		cut -d '?' -f 1 | \
+		xargs -I{} curl -L -f -o {} "https://cdn.jsdelivr.net/npm/@mdi/font@$(MDIVERSION)/css/{}"
+.PHONY: update-assets
+
+
 snapshot: $(GORELEASER)
 	$(GORELEASER) release --snapshot --clean
 	docker tag ghcr.io/reddec/$(notdir $(CURDIR)):$$(jq -r .version dist/metadata.json)-amd64 ghcr.io/reddec/$(notdir $(CURDIR)):latest

diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ that any changes made are shared with the community. This promotes collaboration
 
 Read docs for details: https://web-form.reddec.net/
 
-![Screenshot 2023-09-24 211012](https://github.com/reddec/web-form/assets/6597086/605400e1-c660-4c95-a59a-ba20ab70d1ed)
+![image](https://github.com/reddec/web-form/assets/6597086/b4dce0e1-30cf-492d-96a4-dbcc98eb787d)
 
 ## Installation
 

diff --git a/docs/fields.md b/docs/fields.md
@@ -1,4 +1,5 @@
 # Fields
+
 <!--  {% raw %} --> 
 
 Only field `name` is required for the field.
@@ -7,20 +8,21 @@ For all fields text values will be trimmed from leading and trailing white space
 
 Configurations:
 
-| Name          | Type                | Default  | Description                                                         |
-|---------------|---------------------|----------|---------------------------------------------------------------------|
-| *`name`*      | string              |          | column name in database and unique identifier of the field          |
-| `label`       | string              | `.name`  | name of field if UI                                                 |
-| `description` | string              |          | short description for the field, will be shown in UI as hint        |
-| `required`    | boolean             | false    | is field required                                                   |
-| `disabled`    | boolean             | false    | is user allowed to edit field                                       |
-| `hidden`      | boolean             | false    | do not show field in UI. Implicitly disables field                  |
-| `default`     | string              |          | default value for the field. Supports [template](template.md)       |
-| `type`        | [type](#types)      | `string` | field type                                                          |
-| `pattern`     | string              |          | validate user input by regular expression (only for `string` types) |
-| `options`     | [][Option](#option) |          | enum of allowed values                                              |
-| `multiple`    | boolean             | false    | allow multiple options                                              |
-| `multiline`   | boolean             | false    | tell UI to show multi-line input. Has no effect for backend         |
+| Name          | Type                | Default  | Description                                                                                |
+|---------------|---------------------|----------|--------------------------------------------------------------------------------------------|
+| *`name`*      | string              |          | column name in database and unique identifier of the field                                 |
+| `label`       | string              | `.name`  | name of field if UI                                                                        |
+| `description` | string              |          | short description for the field, will be shown in UI as hint                               |
+| `required`    | boolean             | false    | is field required                                                                          |
+| `disabled`    | boolean             | false    | is user allowed to edit field                                                              |
+| `hidden`      | boolean             | false    | do not show field in UI. Implicitly disables field                                         |
+| `default`     | string              |          | default value for the field. Supports [template](template.md)                              |
+| `type`        | [type](#types)      | `string` | field type                                                                                 |
+| `pattern`     | string              |          | validate user input by regular expression (only for `string` types)                        |
+| `options`     | [][Option](#option) |          | enum of allowed values                                                                     |
+| `multiple`    | boolean             | false    | allow multiple options                                                                     |
+| `multiline`   | boolean             | false    | tell UI to show multi-line input. Has no effect for backend                                |
+| `icon`        | string              |          | (0.2.0+) icon name, currently supported only [MDI](https://pictogrammers.com/library/mdi/) |
 
 Notes:
 
@@ -31,13 +33,13 @@ Notes:
     - with `multiple: true` it acts as "any of" (multiple choice)
     - otherwise it acts "one of" (single pick)
 - if `multiple` is true, depending on [storage](stores.md), information will be stored as array or as plain string
+- `icon` should contain type (`mdi`) and icon name. For example: `mdi mdi-cake`
 
 The system has minimal trust to user input therefore:
 
 - `hidden` or `disabled` fields are ignored even if it was provided in POST request
 - `type` and `pattern` verification will be additionally checked on backend side
 
-
 **Examples**
 
 ```yaml
@@ -53,6 +55,7 @@ The system has minimal trust to user input therefore:
   default: '{{now | date "2006-01-02"}}'
   description: We will give you a discount
   type: date
+  icon: "mdi mdi-cake"
 
 - name: client_id
   label: Customer
@@ -87,7 +90,6 @@ The system has minimal trust to user input therefore:
   description: Please use real phone number - we will contact you
 ```
 
-
 ## Types
 
 | Type      | Format             | Example          |

diff --git a/docs/index.md b/docs/index.md
@@ -77,7 +77,7 @@ be http://localhost:8080/forms/order-pizza).
 Once submitted - check `data` directory. It will contain your result. Of course, the main power comes with
 proper [configuration](configuration.md).
 
-![Screenshot 2023-09-24 211012](https://github.com/reddec/web-form/assets/6597086/605400e1-c660-4c95-a59a-ba20ab70d1ed)
+![image](https://github.com/reddec/web-form/assets/6597086/b4dce0e1-30cf-492d-96a4-dbcc98eb787d)
 
 ## Examples
 

diff --git a/examples/assets/img/semweb.svg b/examples/assets/img/semweb.svg
diff --git a/examples/configs/shop.yaml b/examples/configs/shop.yaml
@@ -16,23 +16,26 @@ fields:
     default: '{{now | date "2006-01-02T15:04"}}'
     required: true
     type: date-time
-
+    icon: "mdi mdi-calendar-range"
 
   - name: birthday
     label: Your birthday
     default: '{{now | date "2006-01-02"}}'
     description: We will give you a discount
     type: date
+    icon: "mdi mdi-cake"
 
   - name: client_id
     label: Customer
     default: '{{.User}}' # from OIDC
     required: true
     disabled: true
+    icon: "mdi mdi-account"
 
   - name: dough
     label: Dough kind
     default: "thin"
+    icon: "mdi mdi-bread-slice"
     options:
       - label: Hand made
         value: hand-made
@@ -43,6 +46,7 @@ fields:
     label: Pick cheese
     required: true
     multiple: true
+    icon: mdi mdi-cheese
     options:
       - label: Italian Mozzarella
         value: mozzarella
@@ -54,17 +58,20 @@ fields:
   - name: phone
     label: Phone number
     required: true
+    icon: mdi mdi-phone-dial
     description: Please use real phone number - we will contact you
 
   - name: email
     label: EMail
     pattern: '[^@]+@[^@]+'
     default: "{{.Email}}" # from OIDC
     required: true
+    icon: mdi mdi-email
 
   - name: notify_sms
     label: Notify by SMS
     type: boolean
+    icon: mdi mdi-message-alert
 
   - name: zip
     label: ZIP code
@@ -75,6 +82,7 @@ fields:
     label: Full address
     required: true
     multiline: true
+    icon: mdi mdi-map-marker
 
 success: |
   ## Thank you!

diff --git a/internal/assets/static/bulma.min.css → internal/assets/static/css/bulma.min.css b/internal/assets/static/bulma.min.css → internal/assets/static/css/bulma.min.css
diff --git a/internal/assets/static/css/materialdesignicons.min.css b/internal/assets/static/css/materialdesignicons.min.css
diff --git a/internal/assets/static/fonts/materialdesignicons-webfont.woff b/internal/assets/static/fonts/materialdesignicons-webfont.woff
diff --git a/internal/assets/static/fonts/materialdesignicons-webfont.woff2 b/internal/assets/static/fonts/materialdesignicons-webfont.woff2
diff --git a/internal/assets/views/form.gohtml b/internal/assets/views/form.gohtml
@@ -73,7 +73,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{or .Form.Title .Form.Name .Form.Table}}</title>
-    <link rel="stylesheet" href="../static/bulma.min.css">
+    <link rel="stylesheet" href="../static/css/bulma.min.css">
 </head>
 <body>
 
@@ -90,6 +90,11 @@
             {{- if not $field.Hidden}}
                 <div class="field">
                     <label class="label">
+                        {{- if $field.Icon}}
+                            <span class="icon is-left">
+                              <i class="{{$field.Icon}}"></i>
+                            </span>
+                        {{- end}}
                         {{or $field.Label $field.Name}}
                         {{- if $field.Required}}
                             <sup title="required field" class="has-text-danger">*</sup>
@@ -127,4 +132,5 @@
     </form>
 </div>
 </body>
+<link rel="stylesheet" href="../static/css/materialdesignicons.min.css">
 </html>
diff --git a/internal/assets/views/list.gohtml b/internal/assets/views/list.gohtml
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>All forms</title>
-    <link rel="stylesheet" href="static/bulma.min.css">
+    <link rel="stylesheet" href="static/css/bulma.min.css">
 </head>
 <body>
 <section class="section">
@@ -30,4 +30,5 @@
     </div>
 </section>
 </body>
+<link rel="stylesheet" href="static/css/materialdesignicons.min.css">
 </html>
diff --git a/internal/assets/views/result.gohtml b/internal/assets/views/result.gohtml
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{or .Form.Title .Form.Name .Form.Table}}</title>
-    <link rel="stylesheet" href="../static/bulma.min.css">
+    <link rel="stylesheet" href="../static/css/bulma.min.css">
 </head>
 <body>
 <section class="section">
@@ -24,4 +24,5 @@
         </div>
 </section>
 </body>
+<link rel="stylesheet" href="../static/css/materialdesignicons.min.css">
 </html>
diff --git a/internal/schema/types.go b/internal/schema/types.go
@@ -86,6 +86,7 @@ type Field struct {
 	Options     []Option // allowed values. If [Field.Multiple] set, it acts as "any of", otherwise "one of".
 	Multiple    bool     // allow picking multiple options. Column type in database MUST be ARRAY of corresponding type.
 	Multiline   bool     // multiline input (for [TypeString] only)
+	Icon        string   // optional MDI icon
 }
 
 type Webhook struct {