knadh/listmonk
1
1
Fork 0
mirror of https://github.com/knadh/listmonk.git synced 2025-10-08 22:37:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Replace type field in user creation UI with radio-button for better usability.

Browse source
This commit is contained in:
Kailash Nadh 2024-11-13 00:03:40 +05:30
parent 894d284309
commit 0a27de16c6
2 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/assets/style.scss
View file

@ -507,6 +507,20 @@ body.is-noscroll {
} }
} }
&.is-light.is-outlined {
background: lighten($primary, 55%);
&.is-focused {
background: lighten($primary, 55%);
}
&.is-selected {
border-color: $primary;
color: $primary;
font-weight: bold;
}
}
&:not(.is-small) { &:not(.is-small) {
height: auto; height: auto;
padding: 10px 20px; padding: 10px 20px;
@ -592,6 +606,10 @@ body.is-noscroll {
color: $grey-dark; color: $grey-dark;
} }
&.is-floating-label label.label {
font-size: 0.875rem;
}
.help { .help {
color: $grey; color: $grey;
} }

28
frontend/src/views/UserForm.vue
View file

@ -15,15 +15,17 @@
<section expanded class="modal-card-body"> <section expanded class="modal-card-body">
<div class="columns"> <div class="columns">
<div class="column is-6"> <div class="column is-6">
<b-field :label="$t('users.type')" label-position="on-border"> <b-field label-position="on-border" class="mb-6">
<b-select v-model="form.type" name="status" required expanded :disabled="isEditing"> <b-radio-button v-model="form.type" name="type" native-value="user" :disabled="isEditing" expanded
<option value="user"> type="is-light is-outlined">
{{ $t('users.type.user') }} <b-icon icon="account-outline" />
</option> {{ $t('users.type.user') }}
<option value="api"> </b-radio-button>
{{ $t('users.type.api') }} <b-radio-button v-model="form.type" name="type" native-value="api" :disabled="isEditing" expanded
</option> type="is-light is-outlined">
</b-select> <b-icon icon="code" />
{{ $t('users.type.api') }}
</b-radio-button>
</b-field> </b-field>
</div> </div>
<div class="column is-6"> <div class="column is-6">
@ -46,14 +48,14 @@
pattern="[a-zA-Z0-9_\-\.]+$" /> pattern="[a-zA-Z0-9_\-\.]+$" />
</b-field> </b-field>
<b-field v-if="form.type !== 'api'" :label="$t('subscribers.email')" label-position="on-border">
<b-input :maxlength="200" v-model="form.email" name="email" :placeholder="$t('subscribers.email')" required />
</b-field>
<b-field :label="$t('globals.fields.name')" label-position="on-border"> <b-field :label="$t('globals.fields.name')" label-position="on-border">
<b-input :maxlength="200" v-model="form.name" name="name" :placeholder="$t('globals.fields.name')" /> <b-input :maxlength="200" v-model="form.name" name="name" :placeholder="$t('globals.fields.name')" />
</b-field> </b-field>
<b-field v-if="form.type !== 'api'" :label="$t('subscribers.email')" label-position="on-border">
<b-input :maxlength="200" v-model="form.email" name="email" :placeholder="$t('subscribers.email')" required />
</b-field>
<template v-if="form.type !== 'api'"> <template v-if="form.type !== 'api'">
<div class="box"> <div class="box">
<b-field> <b-field>