rixty
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Turn submit button red if form is invalid rather than disabling it completely.

This commit is contained in:
Buster "Silver Eagle" Neece 2021-11-22 14:12:18 -06:00
parent 784438fd80
commit e7ee57af5d
No known key found for this signature in database
GPG Key ID: 6D9E12FF03411F4E
12 changed files with 28 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/vue/components/Account/ApiKeyModal.vue
View File

@ -26,8 +26,8 @@
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button v-if="newKey === null" variant="primary" type="submit" @click="doSubmit"
:disabled="$v.form.$invalid">
<b-button v-if="newKey === null" :variant="($v.form.$invalid) ? 'danger' : 'primary'" type="submit"
@click="doSubmit">
<translate key="lang_btn_create_key">Create New Key</translate>
</b-button>
</slot>

4
frontend/vue/components/Admin/Backups/RunBackupModal.vue
View File

@ -53,8 +53,8 @@
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button v-if="logUrl === null" variant="primary" type="submit" @click="submit"
:disabled="$v.form.$invalid">
<b-button v-if="logUrl === null" :variant="($v.form.$invalid) ? 'danger' : 'primary'" type="submit"
@click="submit">
<translate key="lang_btn_run_backup">Run Manual Backup</translate>
</b-button>
</slot>

2
frontend/vue/components/Admin/Settings.vue
View File

@ -27,7 +27,7 @@
</b-overlay>
<b-card-body body-class="card-padding-sm">
<b-button size="lg" type="submit" variant="primary" :disabled="$v.form.$invalid">
<b-button size="lg" type="submit" :variant="($v.form.$invalid) ? 'danger' : 'primary'">
<slot name="submitButtonName">
<translate key="lang_btn_save_changes">Save Changes</translate>
</slot>

2
frontend/vue/components/Admin/Stations/EditModal.vue
View File

@ -13,7 +13,7 @@
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="disableSaveButton">
<b-button :variant="(disableSaveButton) ? 'danger' : 'primary'" type="submit" @click="doSubmit">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>

2
frontend/vue/components/Admin/Stations/StationForm.vue
View File

@ -21,7 +21,7 @@
<slot name="submitButton">
<b-card-body body-class="card-padding-sm">
<b-button size="lg" type="submit" variant="primary" :disabled="!isValid">
<b-button size="lg" type="submit" :variant="(!isValid) ? 'danger' : 'primary'">
<slot name="submitButtonText">
<translate key="lang_btn_save_changes">Save Changes</translate>
</slot>

2
frontend/vue/components/Common/ModalForm.vue
View File

@ -19,7 +19,7 @@
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="disableSaveButton">
<b-button :variant="(disableSaveButton) ? 'danger' : 'primary'" type="submit" @click="doSubmit">
<slot name="save-button-name">
<translate key="lang_btn_save_changes">Save Changes</translate>
</slot>

3
frontend/vue/components/Setup/Register.vue
View File

@ -47,7 +47,8 @@
</template>
</b-wrapped-form-group>
<b-button type="submit" size="lg" block variant="primary" class="mt-2" :disabled="$v.form.$invalid">
<b-button type="submit" size="lg" block :variant="($v.form.$invalid) ? 'danger' : 'primary'"
class="mt-2">
<translate key="btn_create_acct">Create Account</translate>
</b-button>
</form>

2
frontend/vue/components/Stations/LiquidsoapConfig.vue
View File

@ -31,7 +31,7 @@
</b-form-markup>
</b-form-fieldset>
<b-button size="lg" type="submit" variant="primary" :disabled="$v.form.$invalid">
<b-button size="lg" type="submit" :variant="($v.form.$invalid) ? 'danger' : 'primary'">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</div>

57
frontend/vue/components/Stations/Media.vue
View File

@ -2,26 +2,19 @@
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header bg-primary-dark">
<div class="row align-items-center">
<div class="col-md-7">
<b-card-header header-bg-variant="primary-dark">
<b-row class="align-items-center">
<b-col md="7">
<h2 class="card-title">
<translate key="lang_title">Music Files</translate>
</h2>
</div>
<div v-if="!quotaLoading" class="col-md-5 text-right text-white-50">
<template v-if="quota.available">
<b-progress class="mb-1" :value="quota.used_percent" show-progress
height="20px"></b-progress>
</b-col>
<b-col md="5" class="text-right text-white-50">
<stations-common-quota :quota-url="quotaUrl" ref="quota"></stations-common-quota>
</b-col>
</b-row>
</b-card-header>
{{ langSpaceUsed }}
</template>
<template v-else>
{{ langSpaceUsed }}
</template>
</div>
</div>
</div>
<div v-if="showSftp" class="card-body alert-info d-flex align-items-center" role="alert">
<div class="flex-shrink-0 mr-2">
<i class="material-icons" aria-hidden="true">info</i>
@ -160,10 +153,11 @@ import Icon from '~/components/Common/Icon';
import AlbumArt from '~/components/Common/AlbumArt';
import PlayButton from "~/components/Common/PlayButton";
import {DateTime} from 'luxon';
import mergeExisting from "~/functions/mergeExisting";
import StationsCommonQuota from "~/components/Stations/Common/Quota";
export default {
components: {
StationsCommonQuota,
PlayButton,
AlbumArt,
Icon,
@ -221,7 +215,6 @@ export default {
default: () => []
},
stationTimeZone: String,
filesCount: Number,
showSftp: Boolean,
sftpUrl: String
},
@ -284,12 +277,7 @@ export default {
files: [],
directories: []
},
quotaLoading: true,
quota: {
used: null,
used_percent: null,
available: null
},
currentDirectory: '',
searchPhrase: null
};
@ -301,7 +289,6 @@ export default {
window.removeEventListener('hashchange', this.onHashChange);
},
mounted () {
this.loadQuotas();
this.onHashChange();
},
computed: {
@ -317,29 +304,11 @@ export default {
langPlaylistSelect() {
return this.$gettext('View tracks in playlist');
},
langSpaceUsed() {
let lang = (this.quota.available)
? this.$gettext('%{spaceUsed} of %{spaceTotal} Used (%{filesCount} Files)')
: this.$gettext('%{spaceUsed} Used (%{filesCount} Files)');
return this.$gettextInterpolate(lang, {
spaceUsed: this.quota.used,
spaceTotal: this.quota.available,
filesCount: this.filesCount
});
},
},
methods: {
formatFileSize(size) {
return formatFileSize(size);
},
loadQuotas() {
this.axios.get(this.quotaUrl)
.then((resp) => {
this.quota = mergeExisting(this.quota, resp.data);
this.quotaLoading = false;
});
},
onRowSelected(items) {
let splitItems = _.partition(items, 'is_dir');
@ -356,7 +325,7 @@ export default {
this.$refs.datatable.navigate();
},
onTriggerRelist () {
this.loadQuotas();
this.$refs.quota.update();
this.$refs.datatable.relist();
},
onAddPlaylist (row) {

3
frontend/vue/components/Stations/Media/NewDirectoryModal.vue
View File

@ -11,7 +11,8 @@
<b-button variant="default" @click="close" key="lang_btn_close" v-translate>
Close
</b-button>
<b-button variant="primary" @click="doMkdir" key="lang_btn_create" :disabled="$v.$invalid" v-translate>
<b-button :variant="($v.$invalid) ? 'danger' : 'primary'" @click="doMkdir" key="lang_btn_create"
v-translate>
Create Directory
</b-button>
</template>

2
frontend/vue/components/Stations/Media/RenameModal.vue
View File

@ -11,7 +11,7 @@
<b-button variant="default" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" @click="doRename" :disabled="$v.form.$invalid">
<b-button :variant="($v.form.$invalid) ? 'danger' : 'primary'" @click="doRename">
<translate key="lang_btn_rename">Rename</translate>
</b-button>
</template>

2
frontend/vue/components/Stations/Reports/SoundExchange.vue
View File

@ -65,7 +65,7 @@
</b-wrapped-form-checkbox>
</b-form-fieldset>
<b-button type="submit" size="lg" variant="primary" class="mt-2" :disabled="$v.form.$invalid">
<b-button type="submit" size="lg" :variant="($v.form.$invalid) ? 'danger' : 'primary'" class="mt-2">
<translate key="btn_submit">Generate Report</translate>
</b-button>
</div>