Skip to content

Commit

Permalink
Merge pull request #300 from FlowFuse/ui-template-btn-group
Browse files Browse the repository at this point in the history
Fixes CSS styling for Vuetify btn-groups & updates ui-template docs for consistency
  • Loading branch information
joepavitt authored Oct 25, 2023
2 parents 7189cfc + 1fa2a0b commit f4ed80d
Showing 3 changed files with 15 additions and 7 deletions.
4 changes: 2 additions & 2 deletions docs/nodes/widgets/ui-template.md
Original file line number Diff line number Diff line change
@@ -39,10 +39,10 @@ Let's consider a use case where a user wants to add [Vuetify's star rating widge

```html
<v-rating hover :length="5" :size="32" v-model="value"
active-color="primary" @change="send({payload: value})"/>
active-color="primary" @update:modelValue="send({payload: value})"/>
```

Here, we've used Vue's `v-model` to create a two-way binding of the variable to whatever selection a user makes in the `v-rating` widget. Then, defined an `@change` event, such that when that value changes, we call our in-built `send(msg)` function, where we can make our `msg` on the fly in the function call itself.
Here, we've used Vue's `v-model` to create a two-way binding of the variable to whatever selection a user makes in the `v-rating` widget. Then, defined an `@update:modelValue` event, such that when that bound value changes, we call our in-built `send(msg)` function, where we can make our `msg` on the fly in the function call itself.


When changed, if wired to a "Debug" node, then we can see the resulting outcome is as follows:
17 changes: 13 additions & 4 deletions ui/src/stylesheets/common.css
Original file line number Diff line number Diff line change
@@ -190,13 +190,22 @@ main {
}

/* Override the default Vuetify theme by making 'primary' the main colour for widgets, rather than 'surface' */
.v-btn--variant-elevated, .v-btn--variant-flat {
.v-btn--variant-elevated,
.v-btn--variant-flat,
.v-btn-group .v-btn--variant-elevated.v-btn--active,
.v-btn-group .v-btn--variant-flat.v-btn--active {
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));
}
.v-btn--variant-elevated, .v-btn--variant-flat {
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));

.v-btn-group .v-btn--variant-elevated,
.v-btn-group .v-btn--variant-flat {
background-color: rgb(var(--v-theme-surface));
color: rgb(var(--v-theme-on-surface));
}

.v-btn-group .v-btn {
flex-grow: 1;
}

.v-card {
1 change: 0 additions & 1 deletion ui/src/widgets/ui-template/UITemplate.vue
Original file line number Diff line number Diff line change
@@ -97,7 +97,6 @@ export default {
},
value: {
get () {
console.log('get value', this.id, this.messages[this.id]?.payload)
return this.messages[this.id]?.payload
},
set (val) {

0 comments on commit f4ed80d

Please sign in to comment.