diff options
author | Bryce Johnson <bryce@gitlab.com> | 2017-05-13 04:15:27 +0300 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2017-05-15 20:11:09 +0300 |
commit | ed7bec31cf874de8e4923674d732618fcf654c76 (patch) | |
tree | 9a711737f5224f2f214ca5b49b74006236b300d4 | |
parent | 84199f19197583da44471a6b7f91694b7f4645df (diff) |
Clean up UI and styles.
7 files changed, 112 insertions, 122 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; + } +} diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml index d6f4f1a206c..bbed10039af 100644 --- a/app/views/projects/pipeline_schedules/_form.html.haml +++ b/app/views/projects/pipeline_schedules/_form.html.haml @@ -5,29 +5,29 @@ = form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "form-horizontal js-pipeline-schedule-form" } do |f| = form_errors(@schedule) .form-group - .col-md-6 + .col-md-9 = f.label :description, 'Description', class: 'label-light' = f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: 'Provide a short description for this pipeline' .form-group - .col-md-12 + .col-md-9 = f.label :cron, 'Interval Pattern', class: 'label-light' #interval-pattern-input{ data: { initial_interval: @schedule.cron } } .form-group - .col-md-6 + .col-md-9 = f.label :cron_timezone, 'Cron Timezone', class: 'label-light' = dropdown_tag("Select a timezone", options: { toggle_class: 'btn js-timezone-dropdown', title: "Select a timezone", filter: true, placeholder: "Filter", data: { data: timezone_data } } ) = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true .form-group - .col-md-6 + .col-md-9 = f.label :ref, 'Target Branch', class: 'label-light' - = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } ) + = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } ) = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true .form-group - .col-md-6 + .col-md-9 = f.label :active, 'Activated', class: 'label-light' %div = f.check_box :active, required: false, value: @schedule.active? - active + Active .footer-block.row-content-block = f.submit 'Save pipeline schedule', class: 'btn btn-create', tabindex: 3 = link_to 'Cancel', pipeline_schedules_path(@project), class: 'btn btn-cancel' diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb index fe9f94db574..a97ec25bd16 100644 --- a/spec/features/projects/pipeline_schedules_spec.rb +++ b/spec/features/projects/pipeline_schedules_spec.rb @@ -70,6 +70,11 @@ feature 'Pipeline Schedules', :feature do describe 'POST /projects/pipeline_schedules/new', js: true do let(:visit_page) { visit_new_pipeline_schedule } + it 'sets defaults for timezone and target branch' do + expect(page).to have_button('master') + expect(page).to have_button('UTC') + end + it 'it creates a new scheduled pipeline' do fill_in_schedule_form save_pipeline_schedule diff --git a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js index 08fa6ca9057..845b371d90c 100644 --- a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js +++ b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js @@ -36,20 +36,6 @@ describe('Interval Pattern Input Component', function () { expect(this.intervalPatternComponent.initialCronInterval).toBe(this.initialCronInterval); }); - it('sets showUnsetWarning to false', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.showUnsetWarning).toBe(false); - done(); - }); - }); - - it('does not render showUnsetWarning', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.$el.outerHTML).not.toContain('Schedule not yet set'); - done(); - }); - }); - it('sets isEditable to true', function (done) { Vue.nextTick(() => { expect(this.intervalPatternComponent.isEditable).toBe(true); @@ -72,20 +58,6 @@ describe('Interval Pattern Input Component', function () { expect(this.intervalPatternComponent).toBeDefined(); }); - it('sets showUnsetWarning to false', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.showUnsetWarning).toBe(false); - done(); - }); - }); - - it('does not render showUnsetWarning', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.$el.outerHTML).not.toContain('Schedule not yet set'); - done(); - }); - }); - it('sets isEditable to false', function (done) { Vue.nextTick(() => { expect(this.intervalPatternComponent.isEditable).toBe(false); @@ -113,20 +85,6 @@ describe('Interval Pattern Input Component', function () { expect(this.intervalPatternComponent.initialCronInterval).toBe(defaultInitialCronInterval); }); - it('sets showUnsetWarning to true', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.showUnsetWarning).toBe(true); - done(); - }); - }); - - it('renders showUnsetWarning to true', function (done) { - Vue.nextTick(() => { - expect(this.intervalPatternComponent.$el.outerHTML).toContain('Schedule not yet set'); - done(); - }); - }); - it('sets isEditable to true', function (done) { Vue.nextTick(() => { expect(this.intervalPatternComponent.isEditable).toBe(true); |