nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): select checkbox via adjacent label (text)

Browse Source
This commit is contained in:
Jaroslav Rakhmatoullin 2024-04-02 05:46:03 +02:00
parent 6ca3d5a573
commit 34ba11f3a2
7 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/settings/Permissions.vue
View File

@ -4,37 +4,37 @@
<p class="small">{{ $t("settings.permissionsHelp") }}</p> <p class="small">{{ $t("settings.permissionsHelp") }}</p>
<p> <p>
<input type="checkbox" v-model="admin" /> <input id="uds-admin" type="checkbox" v-model="admin" />
{{ $t("settings.administrator") }} <label for="uds-admin">{{ $t("settings.administrator") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.create" /> <input id="uds-create" type="checkbox" :disabled="admin" v-model="perm.create" />
{{ $t("settings.perm.create") }} <label for="uds-create">{{ $t("settings.perm.create") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.delete" /> <input id="uds-delete" type="checkbox" :disabled="admin" v-model="perm.delete" />
{{ $t("settings.perm.delete") }} <label for="uds-delete">{{ $t("settings.perm.delete") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.download" /> <input id="uds-download" type="checkbox" :disabled="admin" v-model="perm.download" />
{{ $t("settings.perm.download") }} <label for="uds-download">{{ $t("settings.perm.download") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.modify" /> <input id="uds-modify" type="checkbox" :disabled="admin" v-model="perm.modify" />
{{ $t("settings.perm.modify") }} <label for="uds-modify">{{ $t("settings.perm.modify") }}</label>
</p> </p>
<p v-if="isExecEnabled"> <p v-if="isExecEnabled">
<input type="checkbox" :disabled="admin" v-model="perm.execute" /> <input id="uds-execute" type="checkbox" :disabled="admin" v-model="perm.execute" />
{{ $t("settings.perm.execute") }} <label for="uds-execute">{{ $t("settings.perm.execute") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.rename" /> <input id="uds-rename" type="checkbox" :disabled="admin" v-model="perm.rename" />
{{ $t("settings.perm.rename") }} <label for="uds-rename">{{ $t("settings.perm.rename") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" :disabled="admin" v-model="perm.share" /> <input id="uds-share" type="checkbox" :disabled="admin" v-model="perm.share" />
{{ $t("settings.perm.share") }} <label for="uds-share">{{ $t("settings.perm.share") }}</label>
</p> </p>
</div> </div>
</template> </template>

7
frontend/src/components/settings/Rules.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<form class="rules small"> <form class="rules small">
<div v-for="(rule, index) in rules" :key="index"> <div v-for="(rule, index) in rules" :key="index">
<input type="checkbox" v-model="rule.regex" /><label>Regex</label> <input :id="'regex-'+index" type="checkbox" v-model="rule.regex" />
<input type="checkbox" v-model="rule.allow" /><label>Allow</label> <label :for="'regex-'+index" >Regex</label>
<input :id="'allow-'+index" type="checkbox" v-model="rule.allow" />
<label :for="'allow-'+index">Allow</label>
<input <input
@keypress.enter.prevent @keypress.enter.prevent

3
frontend/src/components/settings/UserForm.vue
View File

@ -51,8 +51,9 @@
type="checkbox" type="checkbox"
:disabled="user.perm.admin" :disabled="user.perm.admin"
v-model="user.lockPassword" v-model="user.lockPassword"
id="user-lock-pass"
/> />
{{ t("settings.lockPassword") }} <label for="user-lock-pass">{{ t("settings.lockPassword") }}</label>
</p> </p>
<permissions v-model:perm="user.perm" /> <permissions v-model:perm="user.perm" />

14
frontend/src/css/dashboard.css
View File

@ -32,12 +32,16 @@ a {
color: inherit; color: inherit;
} }
.dashboard p label { .dashboard p input[type="checkbox"] {
cursor: pointer;
vertical-align: middle;
margin-bottom: 0.2em; margin-bottom: 0.2em;
display: block; }
font-size: 0.8em; .dashboard p label {
font-weight: 500; margin-left: 0.35em;
color: var(--textPrimary); vertical-align: bottom;
display: inline-block;
cursor: pointer;
} }
li code, li code,

2
frontend/src/css/styles.css
View File

@ -417,6 +417,7 @@ html[dir="rtl"] .breadcrumbs .chevron {
.rules input[type="checkbox"] { .rules input[type="checkbox"] {
margin-right: 0.2rem; margin-right: 0.2rem;
cursor: pointer;
} }
.rules input[type="text"] { .rules input[type="text"] {
@ -426,6 +427,7 @@ html[dir="rtl"] .breadcrumbs .chevron {
.rules label { .rules label {
margin-right: 0.5rem; margin-right: 0.5rem;
cursor: pointer;
} }
.rules button { .rules button {

13
frontend/src/views/settings/Global.vue
View File

@ -9,13 +9,14 @@
<div class="card-content"> <div class="card-content">
<p> <p>
<input type="checkbox" v-model="settings.signup" /> <input id="allowSignup" type="checkbox" v-model="settings.signup" />
{{ t("settings.allowSignup") }} <label for="allowSignup">{{ t("settings.allowSignup") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" v-model="settings.createUserDir" /> <input id="createUserDir" type="checkbox" v-model="settings.createUserDir" />
{{ t("settings.createUserDir") }} <label for="createUserDir">{{ t("settings.createUserDir") }}</label>
</p> </p>
<div> <div>
@ -64,7 +65,7 @@
v-model="settings.branding.disableExternal" v-model="settings.branding.disableExternal"
id="branding-links" id="branding-links"
/> />
{{ t("settings.disableExternalLinks") }} <label for="branding-links">{{ t("settings.disableExternalLinks") }}</label>
</p> </p>
<p> <p>
@ -73,7 +74,7 @@
v-model="settings.branding.disableUsedPercentage" v-model="settings.branding.disableUsedPercentage"
id="branding-used-disk" id="branding-used-disk"
/> />
{{ t("settings.disableUsedDiskPercentage") }} <label for="branding-used-disk">{{ t("settings.disableUsedDiskPercentage") }}</label>
</p> </p>
<p> <p>

12
frontend/src/views/settings/Profile.vue
View File

@ -8,16 +8,16 @@
<div class="card-content"> <div class="card-content">
<p> <p>
<input type="checkbox" name="hideDotfiles" v-model="hideDotfiles" /> <input id="hideDotfiles" type="checkbox" name="hideDotfiles" v-model="hideDotfiles" />
{{ t("settings.hideDotfiles") }} <label for="hideDotfiles">{{ t("settings.hideDotfiles") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" name="singleClick" v-model="singleClick" /> <input id="singleClick" type="checkbox" name="singleClick" v-model="singleClick" />
{{ t("settings.singleClick") }} <label for="singleClick">{{ t("settings.singleClick") }}</label>
</p> </p>
<p> <p>
<input type="checkbox" name="dateFormat" v-model="dateFormat" /> <input id="dateFormat" type="checkbox" name="dateFormat" v-model="dateFormat" />
{{ t("settings.setDateFormat") }} <label for="dateFormat">{{ t("settings.setDateFormat") }}</label>
</p> </p>
<h3>{{ t("settings.language") }}</h3> <h3>{{ t("settings.language") }}</h3>
<languages <languages