knadh/listmonk
1
1
Fork 0
mirror of https://github.com/knadh/listmonk.git synced 2025-09-23 06:49:53 +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) {
height: auto;
padding: 10px 20px;
@ -592,6 +606,10 @@ body.is-noscroll {
color: $grey-dark;
}
&.is-floating-label label.label {
font-size: 0.875rem;
}
.help {
color: $grey;
}

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

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