Skip to content

Commit f031e5d

Browse files
mtrezzamtrezza
authored
feat: Add custom CSS styling for info panel items (#2788)
1 parent 3f10ef4 commit f031e5d

File tree

3 files changed

+82
-59
lines changed

3 files changed

+82
-59
lines changed

‎README.md

+56-36
Original file line numberDiff line numberDiff line change
@@ -126,25 +126,25 @@ Parse Dashboard is continuously tested with the most recent releases of Node.js
126126

127127
### Options
128128

129-
| Parameter | Type | Optional | Default | Example | Description |
130-
|----------------------------------------|---------------------|----------|---------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
131-
| `apps` | Array<Object> | no | - | `[{ ... }, { ... }]` | The apps that are configured for the dashboard. |
132-
| `apps.appId` | String | yes | - | `"myAppId"` | The Application ID for your Parse Server instance. |
133-
| `apps.masterKey` | String \| Function | yes | - | `"exampleMasterKey"`, `() => "exampleMasterKey"` | The master key for full access to Parse Server. It can be provided directly as a String or as a Function returning a String. |
134-
| `apps.masterKeyTtl` | Number | no | - | `3600` | Time-to-live (TTL) for the master key in seconds. This defines how long the master key is cached before the `masterKey` function is re-triggered. |
135-
| `apps.serverURL` | String | yes | - | `"http://localhost:1337/parse"` | The URL where your Parse Server is running. |
136-
| `apps.appName` | String | no | - | `"MyApp"` | The display name of the app in the dashboard. |
137-
| `infoPanel` | Array<Object> | yes | - | `[{ ... }, { ... }]` | The [info panel](#info-panel) configuration. |
138-
| `infoPanel[*].title` | String | no | - | `User Details` | The panel title. |
139-
| `infoPanel[*].classes` | Array<String> | no | - | `["_User"]` | The classes for which the info panel should be displayed. |
140-
| `infoPanel[*].cloudCodeFunction` | String | no | - | `getUserDetails` | The Cloud Code Function which received the selected object in the data browser and returns the response to be displayed in the info panel. |
141-
| `apps.scripts` | Array<Object> | yes | `[]` | `[{ ... }, { ... }]` | The scripts that can be executed for that app. |
142-
| `apps.scripts.title` | String | no | - | `'Delete User'` | The title that will be displayed in the data browser context menu and the script run confirmation dialog. |
143-
| `apps.scripts.classes` | Array<String> | no | - | `['_User']` | The classes of Parse Objects for which the scripts can be executed. |
144-
| `apps.scripts.cloudCodeFunction` | String | no | - | `'deleteUser'` | The name of the Parse Cloud Function to execute. |
145-
| `apps.scripts.showConfirmationDialog` | Bool | yes | `false` | `true` | Is `true` if a confirmation dialog should be displayed before the script is executed, `false` if the script should be executed immediately. |
146-
| `apps.scripts.confirmationDialogStyle` | String | yes | `info` | `critical` | The style of the confirmation dialog. Valid values: `info` (blue style), `critical` (red style). |
147-
| `apps.cloudConfigHistoryLimit` | Integer | yes | `100` | `100` | The number of historic values that should be saved in the Cloud Config change history. Valid values: `0`...`Number.MAX_SAFE_INTEGER`. |
129+
| Parameter | Type | Optional | Default | Example | Description |
130+
|----------------------------------------|---------------------|----------|---------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
131+
| `apps` | Array<Object> | no | - | `[{ ... }, { ... }]` | The apps that are configured for the dashboard. |
132+
| `apps.appId` | String | yes | - | `"myAppId"` | The Application ID for your Parse Server instance. |
133+
| `apps.masterKey` | String \| Function | yes | - | `"exampleMasterKey"`, `() => "exampleMasterKey"` | The master key for full access to Parse Server. It can be provided directly as a String or as a Function returning a String. |
134+
| `apps.masterKeyTtl` | Number | no | - | `3600` | Time-to-live (TTL) for the master key in seconds. This defines how long the master key is cached before the `masterKey` function is re-triggered. |
135+
| `apps.serverURL` | String | yes | - | `"http://localhost:1337/parse"` | The URL where your Parse Server is running. |
136+
| `apps.appName` | String | no | - | `"MyApp"` | The display name of the app in the dashboard. |
137+
| `infoPanel` | Array<Object> | yes | - | `[{ ... }, { ... }]` | The [info panel](#info-panel) configuration. |
138+
| `infoPanel[*].title` | String | no | - | `User Details` | The panel title. |
139+
| `infoPanel[*].classes` | Array<String> | no | - | `["_User"]` | The classes for which the info panel should be displayed. |
140+
| `infoPanel[*].cloudCodeFunction` | String | no | - | `getUserDetails` | The Cloud Code Function which received the selected object in the data browser and returns the response to be displayed in the info panel. |
141+
| `apps.scripts` | Array<Object> | yes | `[]` | `[{ ... }, { ... }]` | The scripts that can be executed for that app. |
142+
| `apps.scripts.title` | String | no | - | `'Delete User'` | The title that will be displayed in the data browser context menu and the script run confirmation dialog. |
143+
| `apps.scripts.classes` | Array<String> | no | - | `['_User']` | The classes of Parse Objects for which the scripts can be executed. |
144+
| `apps.scripts.cloudCodeFunction` | String | no | - | `'deleteUser'` | The name of the Parse Cloud Function to execute. |
145+
| `apps.scripts.showConfirmationDialog` | Bool | yes | `false` | `true` | Is `true` if a confirmation dialog should be displayed before the script is executed, `false` if the script should be executed immediately. |
146+
| `apps.scripts.confirmationDialogStyle` | String | yes | `info` | `critical` | The style of the confirmation dialog. Valid values: `info` (blue style), `critical` (red style). |
147+
| `apps.cloudConfigHistoryLimit` | Integer | yes | `100` | `100` | The number of historic values that should be saved in the Cloud Config change history. Valid values: `0`...`Number.MAX_SAFE_INTEGER`. |
148148

149149
### File
150150

@@ -883,11 +883,13 @@ The Cloud Code Function receives the selected object in the payload and returns
883883

884884
The info panel can contain multiple segments to display different groups of information.
885885

886-
| Parameter | Value | Optional | Description |
887-
|---------------------|--------|----------|----------------------------------------------------------------------------------------------------------------------------------------|
888-
| `segments` | Array | No | An ordered array of segments, where each segment represents a distinct group of items to display. |
889-
| `segments[i].title` | String | No | The title of the segment that will be displayed. |
890-
| `segments[i].items` | Array | No | An ordered array of items within the segment. Each item can be of different types, such as text, key-value pairs, tables, images, etc. |
886+
| Parameter | Value | Optional | Description |
887+
|--------------------------|--------|----------|----------------------------------------------------------------------------------------------------------------------------------------|
888+
| `segments` | Array | No | An ordered array of segments, where each segment represents a distinct group of items to display. |
889+
| `segments[i].title` | String | No | The title of the segment that will be displayed. |
890+
| `segments[i].items` | Array | No | An ordered array of items within the segment. Each item can be of different types, such as text, key-value pairs, tables, images, etc. |
891+
| `segments[i].style` | Object | Yes | The CSS style definition for the segment. |
892+
| `segments[i].titleStyle` | Object | Yes | The CSS style definition for the segment title. |
891893

892894
Example:
893895

@@ -897,6 +899,8 @@ Example:
897899
"segments": [
898900
{
899901
"title": "Purchases",
902+
"style": { "backgroundColor": "lightgray", "font-size": "10px" },
903+
"titleStyle": { "backgroundColor": "orange", "color": "white" },
900904
"items": [
901905
{
902906
"type": "text",
@@ -915,17 +919,19 @@ The items array can include various types of content such as text, key-value pai
915919

916920
A simple text field.
917921

918-
| Parameter | Value | Optional | Description |
919-
|-----------|--------|----------|----------------------|
920-
| `type` | String | No | Must be `"text"`. |
921-
| `text` | String | No | The text to display. |
922+
| Parameter | Value | Optional | Description |
923+
|-----------|--------|----------|---------------------------|
924+
| `type` | String | No | Must be `"text"`. |
925+
| `text` | String | No | The text to display. |
926+
| `style` | Object | Yes | The CSS style definition. |
922927

923928
Example:
924929

925930
```json
926931
{
927932
"type": "text",
928-
"text": "This user has a high churn risk!"
933+
"text": "This user has a high churn risk!",
934+
"style": { "backgroundColor": "red" },
929935
}
930936
```
931937

@@ -940,14 +946,16 @@ A text item that consists of a key and a value. The value can optionally be link
940946
| `value` | String | - | No | The value text to display. |
941947
| `url` | String | `undefined` | Yes | The URL that will be opened in a new browser tab when clicking on the value text. It can be set to an absolute URL or a relative URL in which case the base URL is `<PROTOCOL>://<HOST>/<MOUNT_PATH>/`. |
942948
| `isRelativeUrl` | Boolean | `false` | Yes | Set this to `true` when linking to another dashboard page, in which case the base URL for the relative URL will be `<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/`. |
949+
| `style` | Object | - | Yes | The CSS style definition. |
943950

944951
Examples:
945952

946953
```json
947954
{
948955
"type": "keyValue",
949956
"key": "Lifetime purchase value",
950-
"value": "$10k"
957+
"value": "$10k",
958+
"style": { "backgroundColor": "green" },
951959
}
952960
```
953961

@@ -997,6 +1005,7 @@ A table with columns and rows to display data in a structured format.
9971005
| `columns[*].name` | String | No | The name of the column to display. |
9981006
| `columns[*].type` | String | No | The type of the column value (e.g., `"string"`, `"number"`). |
9991007
| `rows` | Array | No | The rows of data, where each row is an object containing values for each column. |
1008+
| `style` | Object | Yes | The CSS style definition. |
10001009

10011010
Example:
10021011

@@ -1022,7 +1031,8 @@ Example:
10221031
"Name": "Bob",
10231032
"Age": 40
10241033
}
1025-
]
1034+
],
1035+
"style": { "backgroundColor": "lightGray" }
10261036
}
10271037
```
10281038

@@ -1034,13 +1044,15 @@ An image to be displayed in the panel.
10341044
|-----------|--------|----------|----------------------------------|
10351045
| `type` | String | No | Must be `"image"`. |
10361046
| `url` | String | No | The URL of the image to display. |
1047+
| `style` | Object | Yes | The CSS style definition. |
10371048

10381049
Example:
10391050

10401051
```json
10411052
{
10421053
"type": "image",
1043-
"url": "https://example.com/images?purchaseId=012345"
1054+
"url": "https://example.com/images?purchaseId=012345",
1055+
"style": { "backgroundColor": "white" }
10441056
}
10451057
```
10461058

@@ -1052,13 +1064,15 @@ A video to be displayed in the panel.
10521064
|-----------|--------|----------|----------------------------------|
10531065
| `type` | String | No | Must be `"video"`. |
10541066
| `url` | String | No | The URL of the video to display. |
1067+
| `style` | Object | Yes | The CSS style definition. |
10551068

10561069
Example:
10571070

10581071
```json
10591072
{
10601073
"type": "video",
1061-
"url": "https://example.com/video.mp4"
1074+
"url": "https://example.com/video.mp4",
1075+
"style": { "backgroundColor": "white" }
10621076
}
10631077
```
10641078

@@ -1070,13 +1084,15 @@ An audio file to be played in the panel.
10701084
|-----------|--------|----------|-------------------------------|
10711085
| `type` | String | No | Must be `"audio"`. |
10721086
| `url` | String | No | The URL of the audio to play. |
1087+
| `style` | Object | Yes | The CSS style definition. |
10731088

10741089
Example:
10751090

10761091
```json
10771092
{
10781093
"type": "audio",
1079-
"url": "https://example.com/audio.mp3"
1094+
"url": "https://example.com/audio.mp3",
1095+
"style": { "backgroundColor": "white" }
10801096
}
10811097
```
10821098

@@ -1093,6 +1109,7 @@ A button that triggers an action when clicked.
10931109
| `action.method` | String | No | The HTTP method to use for the action (e.g., `"POST"`). |
10941110
| `action.headers` | Object | Yes | Optional headers to include in the request. |
10951111
| `action.body` | Object | Yes | The body of the request in JSON format. |
1112+
| `style` | Object | Yes | The CSS style definition. |
10961113

10971114
Example:
10981115

@@ -1109,7 +1126,8 @@ Example:
11091126
"body": {
11101127
"key": "value"
11111128
}
1112-
}
1129+
},
1130+
"style": { "backgroundColor": "pink", "color": "white" }
11131131
}
11141132
```
11151133

@@ -1122,14 +1140,16 @@ A sub-panel whose data is loaded on-demand by expanding the item.
11221140
| `type` | String | No | Must be `"infoPanel"`. |
11231141
| `title` | String | No | The title to display in the expandable headline. |
11241142
| `cloudCodeFunction` | String | No | The Cloud Code Function to call which receives the selected object in the data browser and returns the response to be displayed in the sub-panel. |
1143+
| `style` | Object | Yes | The CSS style definition. |
11251144

11261145
Example:
11271146

11281147
```json
11291148
{
11301149
"type": "panel",
11311150
"title": "Purchase History",
1132-
"cloudCodeFunction": "getUserPurchaseHistory"
1151+
"cloudCodeFunction": "getUserPurchaseHistory",
1152+
"style": { "backgroundColor": "lightGray" },
11331153
}
11341154
```
11351155

0 commit comments

Comments
 (0)