diff options
Diffstat (limited to 'app/assets')
4 files changed, 100 insertions, 73 deletions
diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js index 152e75b747e..4d623763ca7 100644 --- a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js +++ b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js @@ -24,9 +24,6 @@ export default { }; }, computed: { - showUnsetWarning() { - return this.cronInterval === ''; - }, intervalIsPreset() { return _.contains(this.cronIntervalPresets, this.cronInterval); }, @@ -63,67 +60,75 @@ export default { }, template: ` <div class="interval-pattern-form-group"> - <input - id="custom" - class="label-light" - type="radio" - :name="inputNameAttribute" - :value="cronInterval" - :checked="isEditable" - @click="toggleCustomInput(true)" - /> + <div class="cron-preset-radio-input"> + <input + id="custom" + class="label-light" + type="radio" + :name="inputNameAttribute" + :value="cronInterval" + :checked="isEditable" + @click="toggleCustomInput(true)" + /> - <label for="custom"> - Custom - </label> + <label for="custom"> + Custom + </label> - <span class="cron-syntax-link-wrap"> - (<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>) - </span> + <span class="cron-syntax-link-wrap"> + (<a :href="cronSyntaxUrl" target="_blank">Cron syntax</a>) + </span> + </div> - <input - id="every-day" - class="label-light" - type="radio" - v-model="cronInterval" - :name="inputNameAttribute" - :value="cronIntervalPresets.everyDay" - @click="toggleCustomInput(false)" - /> + <div class="cron-preset-radio-input"> + <input + id="every-day" + class="label-light" + type="radio" + v-model="cronInterval" + :name="inputNameAttribute" + :value="cronIntervalPresets.everyDay" + @click="toggleCustomInput(false)" + /> - <label class="label-light" for="every-day"> - Every day (at 4:00am) - </label> + <label class="label-light" for="every-day"> + Every day (at 4:00am) + </label> + </div> - <input - id="every-week" - class="label-light" - type="radio" - v-model="cronInterval" - :name="inputNameAttribute" - :value="cronIntervalPresets.everyWeek" - @click="toggleCustomInput(false)" - /> + <div class="cron-preset-radio-input"> + <input + id="every-week" + class="label-light" + type="radio" + v-model="cronInterval" + :name="inputNameAttribute" + :value="cronIntervalPresets.everyWeek" + @click="toggleCustomInput(false)" + /> - <label class="label-light" for="every-week"> - Every week (Sundays at 4:00am) - </label> + <label class="label-light" for="every-week"> + Every week (Sundays at 4:00am) + </label> + </div> - <input - id="every-month" - class="label-light" - type="radio" - v-model="cronInterval" - :name="inputNameAttribute" - :value="cronIntervalPresets.everyMonth" - @click="toggleCustomInput(false)" - /> + <div class="cron-preset-radio-input"> + <input + id="every-month" + class="label-light" + type="radio" + v-model="cronInterval" + :name="inputNameAttribute" + :value="cronIntervalPresets.everyMonth" + @click="toggleCustomInput(false)" + /> - <label class="label-light" for="every-month"> - Every month (on the 1st at 4:00am) - </label> + <label class="label-light" for="every-month"> + Every month (on the 1st at 4:00am) + </label> + </div> - <div class="cron-interval-input-wrapper col-md-6"> + <div class="cron-interval-input-wrapper"> <input id="schedule_cron" class="form-control inline cron-interval-input" @@ -135,9 +140,6 @@ export default { :disabled="!isEditable" /> </div> - <span class="cron-unset-status col-md-3" v-if="showUnsetWarning"> - Schedule not yet set - </span> </div> `, }; diff --git a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js index 22e746ad2c3..0c3926d76b5 100644 --- a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js +++ b/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js @@ -3,7 +3,7 @@ export default class TargetBranchDropdown { this.$dropdown = $('.js-target-branch-dropdown'); this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text'); this.$input = $('#schedule_ref'); - this.initialValue = this.$input.val(); + this.initDefaultBranch(); this.initDropdown(); } @@ -29,13 +29,23 @@ export default class TargetBranchDropdown { } setDropdownToggle() { - if (this.initialValue) { - this.$dropdownToggle.text(this.initialValue); + const initialValue = this.$input.val(); + + this.$dropdownToggle.text(initialValue); + } + + initDefaultBranch() { + const initialValue = this.$input.val(); + const defaultBranch = this.$dropdown.data('defaultBranch'); + + if (!initialValue) { + this.$input.val(defaultBranch); } } updateInputValue({ selectedObj, e }) { e.preventDefault(); + this.$input.val(selectedObj.name); gl.pipelineScheduleFieldErrors.updateFormValidityState(); } diff --git a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js index c70e0502cf8..95ed9c7dc21 100644 --- a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js +++ b/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js @@ -1,12 +1,14 @@ /* eslint-disable class-methods-use-this */ +const defaultTimezone = 'UTC'; + export default class TimezoneDropdown { constructor() { this.$dropdown = $('.js-timezone-dropdown'); this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text'); this.$input = $('#schedule_cron_timezone'); this.timezoneData = this.$dropdown.data('data'); - this.initialValue = this.$input.val(); + this.initDefaultTimezone(); this.initDropdown(); } @@ -42,12 +44,20 @@ export default class TimezoneDropdown { return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`; } - setDropdownToggle() { - if (this.initialValue) { - this.$dropdownToggle.text(this.initialValue); + initDefaultTimezone() { + const initialValue = this.$input.val(); + + if (!initialValue) { + this.$input.val(defaultTimezone); } } + setDropdownToggle() { + const initialValue = this.$input.val(); + + this.$dropdownToggle.text(initialValue); + } + updateInputValue({ selectedObj, e }) { e.preventDefault(); this.$input.val(selectedObj.identifier); diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss index 0fee54a0d19..ab417948931 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -31,14 +31,6 @@ margin-right: 10px; font-size: 12px; } - - .cron-unset-status { - padding-top: 16px; - margin-left: -16px; - color: $gl-text-color-secondary; - font-size: 12px; - font-weight: 600; - } } .pipeline-schedule-table-row { @@ -69,3 +61,16 @@ color: $gl-text-color; } } + +.cron-preset-radio-input { + display: inline-block; + + @media (max-width: $screen-md-max) { + display: block; + margin: 0 0 5px 5px; + } + + input { + margin-right: 3px; + } +} |