diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2018-09-03 13:16:23 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-09-03 13:16:23 +0000 |
commit | 743add978aafa43862867a89b00a04e888199947 (patch) | |
tree | e2ff2db449f186d5c2dcb9da055d75851af6ab5a /app/assets/javascripts/badges | |
parent | c0625e5de1fe491675aadf825fdb9e976f089409 (diff) | |
download | gitlab-ce-743add978aafa43862867a89b00a04e888199947.tar.gz |
Move badge settings to general settings
Diffstat (limited to 'app/assets/javascripts/badges')
3 files changed, 73 insertions, 44 deletions
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue index 7a13f74c570..b3f25da87ce 100644 --- a/app/assets/javascripts/badges/components/badge_form.vue +++ b/app/assets/javascripts/badges/components/badge_form.vue @@ -23,6 +23,11 @@ export default { required: true, }, }, + data() { + return { + wasValidated: false, + }; + }, computed: { ...mapState([ 'badgeInAddForm', @@ -39,16 +44,6 @@ export default { return this.badgeInAddForm; }, - canSubmit() { - return ( - this.badge !== null && - this.badge.imageUrl && - this.badge.imageUrl.trim() !== '' && - this.badge.linkUrl && - this.badge.linkUrl.trim() !== '' && - !this.isSaving - ); - }, helpText() { const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha'] .map(placeholder => `<code>%{${placeholder}}</code>`) @@ -93,11 +88,18 @@ export default { }); }, }, - submitButtonLabel() { - if (this.isEditing) { - return s__('Badges|Save changes'); - } - return s__('Badges|Add badge'); + badgeImageUrlExample() { + const exampleUrl = + 'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/badge.svg'; + return sprintf(s__('Badges|e.g. %{exampleUrl}'), { + exampleUrl, + }); + }, + badgeLinkUrlExample() { + const exampleUrl = 'https://example.gitlab.com/%{project_path}'; + return sprintf(s__('Badges|e.g. %{exampleUrl}'), { + exampleUrl, + }); }, }, methods: { @@ -109,7 +111,9 @@ export default { this.stopEditing(); }, onSubmit() { - if (!this.canSubmit) { + const form = this.$el; + if (!form.checkValidity()) { + this.wasValidated = true; return Promise.resolve(); } @@ -117,6 +121,7 @@ export default { return this.saveBadge() .then(() => { createFlash(s__('Badges|The badge was saved.'), 'notice'); + this.wasValidated = false; }) .catch(error => { createFlash( @@ -129,6 +134,7 @@ export default { return this.addBadge() .then(() => { createFlash(s__('Badges|A new badge was added.'), 'notice'); + this.wasValidated = false; }) .catch(error => { createFlash( @@ -138,47 +144,58 @@ export default { }); }, }, - badgeImageUrlPlaceholder: - 'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/<badge>.svg', - badgeLinkUrlPlaceholder: 'https://example.gitlab.com/%{project_path}', }; </script> <template> <form - class="prepend-top-default append-bottom-default" + :class="{ 'was-validated': wasValidated }" + class="prepend-top-default append-bottom-default needs-validation" + novalidate @submit.prevent.stop="onSubmit" > <div class="form-group"> - <label for="badge-link-url">{{ s__('Badges|Link') }}</label> + <label + for="badge-link-url" + class="label-bold" + >{{ s__('Badges|Link') }}</label> + <p v-html="helpText"></p> <input id="badge-link-url" v-model="linkUrl" - :placeholder="$options.badgeLinkUrlPlaceholder" - type="text" + type="URL" class="form-control" + required @input="debouncedPreview" /> - <span - class="form-text text-muted" - v-html="helpText" - ></span> + <div class="invalid-feedback"> + {{ s__('Badges|Please fill in a valid URL') }} + </div> + <span class="form-text text-muted"> + {{ badgeLinkUrlExample }} + </span> </div> <div class="form-group"> - <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label> + <label + for="badge-image-url" + class="label-bold" + >{{ s__('Badges|Badge image URL') }}</label> + <p v-html="helpText"></p> <input id="badge-image-url" v-model="imageUrl" - :placeholder="$options.badgeImageUrlPlaceholder" - type="text" + type="URL" class="form-control" + required @input="debouncedPreview" /> - <span - class="form-text text-muted" - v-html="helpText" - ></span> + <div class="invalid-feedback"> + {{ s__('Badges|Please fill in a valid URL') }} + </div> + <span class="form-text text-muted"> + {{ badgeImageUrlExample }} + </span> </div> <div class="form-group"> @@ -200,20 +217,32 @@ export default { >{{ s__('Badges|No image to preview') }}</p> </div> - <div class="row-content-block"> + <div + v-if="isEditing" + class="row-content-block" + > <loading-button - :disabled="!canSubmit" :loading="isSaving" - :label="submitButtonLabel" + :label="s__('Badges|Save changes')" type="submit" container-class="btn btn-success" /> <button - v-if="isEditing" class="btn btn-cancel" type="button" @click="onCancel" >{{ __('Cancel') }}</button> </div> + <div + v-else + class="form-group" + > + <loading-button + :loading="isSaving" + :label="s__('Badges|Add badge')" + type="submit" + container-class="btn btn-success" + /> + </div> </form> </template> diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue index 268968b63b3..d2ec0fbb2c0 100644 --- a/app/assets/javascripts/badges/components/badge_list.vue +++ b/app/assets/javascripts/badges/components/badge_list.vue @@ -28,7 +28,7 @@ export default { {{ s__('Badges|Your badges') }} <span v-show="!isLoading" - class="badge" + class="badge badge-pill" >{{ badges.length }}</span> </div> <loading-icon diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue index 98aa00af0d7..712d81d0430 100644 --- a/app/assets/javascripts/badges/components/badge_list_row.vue +++ b/app/assets/javascripts/badges/components/badge_list_row.vue @@ -43,13 +43,13 @@ export default { <badge :image-url="badge.renderedImageUrl" :link-url="badge.renderedLinkUrl" - class="table-section section-30" + class="table-section section-40" /> - <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span> - <div class="table-section section-10"> - <span class="badge">{{ badgeKindText }}</span> + <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span> + <div class="table-section section-15"> + <span class="badge badge-pill">{{ badgeKindText }}</span> </div> - <div class="table-section section-10 table-button-footer"> + <div class="table-section section-15 table-button-footer"> <div v-if="canEditBadge" class="table-action-buttons"> |