Fixes #108

Cockpit-HQ · Jun 3, 2023 · c59481d · c59481d
1 parent 4f98184
commit c59481d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/modules/App/assets/app.bundle.css b/modules/App/assets/app.bundle.css
@@ -4509,6 +4509,10 @@ app-actionbar kiss-container {
 [field="boolean"] {
     font-size: .95em;
 }
+[field="boolean"] label{
+    all: unset;
+    cursor: pointer;
+}
 .fields-renderer[nested="true"] .fields-renderer-field {
     display: inline-block;
     font-weight: normal;

diff --git a/modules/App/assets/css/app.css b/modules/App/assets/css/app.css
@@ -360,6 +360,11 @@ app-actionbar kiss-container {
     font-size: .95em;
 }
 
+[field="boolean"] label{
+    all: unset;
+    cursor: pointer;
+}
+
 .fields-renderer[nested="true"] .fields-renderer-field {
     display: inline-block;
     font-weight: normal;

diff --git a/modules/App/assets/vue-components/fields/field-boolean.js b/modules/App/assets/vue-components/fields/field-boolean.js
@@ -1,3 +1,5 @@
+let uuid = 0;
+
 export default {
 
     _meta: {
@@ -19,7 +21,8 @@ export default {
 
     data() {
         return {
-            val: this.modelValue
+            val: this.modelValue,
+            uuid: `field-boolean-${++uuid}`
         }
     },
 
@@ -49,8 +52,8 @@ export default {
 
     template: /*html*/`
         <div class="kiss-flex kiss-flex-middle" field="boolean">
-            <div class="kiss-flex kiss-flex-middle"><input class="app-switch" type="checkbox" v-model="val" @change="update"></div>
-            <span class="kiss-text-caption kiss-margin-small-left" :class="{'kiss-color-muted':!val}" v-if="label">{{ label }}</span>
+            <input :id="uuid" class="app-switch" type="checkbox" v-model="val" @change="update">
+            <label :for="uuid" class="kiss-margin-small-left" :class="{'kiss-color-muted':!val}" v-if="label">{{ label }}</label>
         </div>
     `,
 }
diff --git a/modules/System/views/users/roles/role.php b/modules/System/views/users/roles/role.php
@@ -65,13 +65,8 @@
                     </div>
 
                     <div class="kiss-margin" :class="{'kiss-hidden': !visible[group]}">
-                        <div class="kiss-margin-small kiss-size-small kiss-flex kiss-middle" v-for="(label, permission) in permissions">
-                            <div><field-boolean v-model="role.permissions[permission]"></field-boolean></div>
-                            <div class="kiss-flex-1 kiss-margin-small-left">
-                                <div :class="{'kiss-color-muted':!role.permissions[permission]}">
-                                    {{label}}
-                                </div>
-                            </div>
+                        <div class="kiss-margin-small kiss-size-small" v-for="(label, permission) in permissions">
+                            <field-boolean v-model="role.permissions[permission]" :label="label"></field-boolean>
                         </div>
                     </div>