Mercurial > gemma
diff client/src/components/importconfiguration/ScheduledImports.vue @ 3281:439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 16 May 2019 09:52:32 +0200 |
parents | 23f4fb9a205a |
children | 489e583498e3 |
line wrap: on
line diff
--- a/client/src/components/importconfiguration/ScheduledImports.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/ScheduledImports.vue Thu May 16 09:52:32 2019 +0200 @@ -1,12 +1,10 @@ <template> <form @submit.prevent="save" class="w-100"> - <div class="d-flex flex-row"> - <div :key="1" class="flex-column mr-4"> - <div class="flex-row text-left"> - <small class="text-muted"> - <translate>Email Notification</translate> - </small> - </div> + <div class="d-flex px-2"> + <div :key="1" class="flex-column"> + <small class="text-muted"> + <translate>Email Notification</translate> + </small> <div class="flex-flex-row text-left"> <toggle-button v-model="eMailNotification" @@ -21,12 +19,14 @@ /> </div> </div> - <div :key="2" v-if="directImportAvailable" class="flex-column text-left"> - <div> - <small class="text-muted"> - <translate>Import via</translate> - </small> - </div> + <div + :key="2" + v-if="directImportAvailable" + class="flex-column text-left ml-3" + > + <small class="text-muted"> + <translate>Import via</translate> + </small> <div> <!-- '#75c791' is the DEFAULT_COLOR_CHECKED from vue-js-toggle-button as here both states are active --> @@ -130,7 +130,7 @@ :sortBy="sortBy" /> - <div class="d-flex flex-row mt-3"> + <div class="d-flex p-2"> <template v-if="!directImport || !directImportAvailable"> <div class="flex-column mr-4"> <div class="flex-row text-left"> @@ -183,7 +183,7 @@ <input style="width:120px;" v-model="trys" - class="mr-1 form-control" + class="mr-1 form-control form-control-sm" type="number" /> </div> @@ -198,33 +198,36 @@ <input style="width:120px;" v-model="waitRetry" - class="ml-1 form-control" + class="ml-1 form-control form-control-sm" /> </div> </div> </template> </div> <template v-if="!directImport || !directImportAvailable"> - <div class="flex-column w-100 mr-2"> + <div class="flex-column w-100 px-2 pb-3"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Schedule</translate> </small> </div> <div v-if="easyCron" class="text-left w-50"> - <select :disabled="!scheduled" v-model="simple" class="form-control" + <select + :disabled="!scheduled" + v-model="simple" + class="form-control form-control-sm" ><option value="weekly"><translate>Weekly</translate></option> <option value="monthly"><translate>Monthly</translate> </option> </select> </div> <div v-if="!easyCron" class="text-left w-100"> <div class="d-flex flex-row"> - <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4> + <div class="my-auto mr-2">{{ $options.EVERY }}</div> <select :disabled="!scheduled" style="width: 130px;" v-model="cronMode" - class="form-control" + class="form-control form-control-sm" @change="clearInputs" > <option :value="null"></option> @@ -236,34 +239,38 @@ > </select> <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row"> - <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4> + <div class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</div> </div> <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row"> - <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> + <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> </div> <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4> - <select :disabled="!scheduled" v-model="day" class="form-control"> + <div class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</div> + <select + :disabled="!scheduled" + v-model="day" + class="form-control form-control-sm" + > <option v-for="(option, key) in $options.DAYSOFWEEK" :key="key" @@ -271,56 +278,56 @@ >{{ option }}</option > </select> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> </div> <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="dayOfMonth" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-2 form-control" + class="cronfield ml-1 mr-2 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-2 form-control" + class="cronfield ml-1 mr-2 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> + <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> </div> <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="dayOfMonth" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4> + <div class="mt-auto mb-auto">{{ $options.OF }}</div> <select :disabled="!scheduled" v-model="month" - class="ml-1 mr-1 form-control" + class="ml-1 mr-1 form-control form-control-sm" > <option v-for="(option, key) in $options.MONTHS" @@ -329,28 +336,28 @@ >{{ option }}</option > </select> - <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> </div> </div> - <div class="mt-3 w-50 d-flex flex-row"> - <h5 class="mt-auto mb-auto mr-2"> + <div class="mt-3 w-50 d-flex"> + <div class="my-auto mr-2"> <translate>Cronstring</translate> - </h5> + </div> <input :disabled="!scheduled" - class="form-control" + class="form-control form-control-sm" v-model="cronString" type="text" /> @@ -358,14 +365,14 @@ </div> </div> </template> - <div v-else class="d-flex flex-row text-left"> - <div class="mt-3 mb-3 flex-column w-100"> + <div v-else class="d-flex text-left px-2 pb-3"> + <div class="flex-column w-100"> <div class="custom-file"> <input accept=".xml" type="file" @change="fileSelected" - class="custom-file-input" + class="custom-file-input custom-file-input-sm" id="uploadFile" /> <label class="pointer custom-file-label" for="uploadFile"> @@ -374,27 +381,29 @@ </div> </div> </div> - <div class="w-100 d-flex flex-row mt-3"> - <button - @click="triggerManualImport" - type="button" - class="shadow-sm btn btn-outline-info mr-auto" - :disabled="!triggerActive || !isValid" - > - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" /> - <translate>Trigger import</translate> - </button> - <button - v-if="!directImport || !directImportAvailable" - :disabled="!isValid" - type="submit" - class="shadow-sm btn btn-info mr-3" - > - <translate>Save</translate> - </button> - <button :key="1" @click="back()" class="btn btn-warning"> + <div class="d-flex justify-content-between p-2 border-top"> + <button :key="1" @click="back()" class="btn btn-sm btn-warning"> Back </button> + <div> + <button + @click="triggerManualImport" + type="button" + class="btn btn-sm btn-outline-info" + :disabled="!triggerActive || !isValid" + > + <font-awesome-icon fixed-width icon="play" /> + <translate>Trigger import</translate> + </button> + <button + v-if="!directImport || !directImportAvailable" + :disabled="!isValid" + type="submit" + class="btn btn-sm btn-info ml-3" + > + <translate>Save</translate> + </button> + </div> </div> </form> </template> @@ -488,10 +497,6 @@ import_() { return this.currentSchedule.importType; }, - dialogLabel() { - if (this.id) return this.$gettext("Import") + " " + this.id; - return this.$gettext("New Import"); - }, directImportAvailable() { switch (this.import_) { case this.$options.IMPORTTYPES.BOTTLENECK: