diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/loading_button.vue | 71 | ||||
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/vue_transitions.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 5 |
5 files changed, 86 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue new file mode 100644 index 00000000000..6670b554faf --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -0,0 +1,71 @@ +<script> + +/* This is a re-usable vue component for rendering a button + that will probably be sending off ajax requests and need + to show the loading status by setting the `loading` option. + This can also be used for initial page load when you don't + know the action of the button yet by setting + `loading: true, label: undefined`. + + Sample configuration: + + <loading-button + :loading="true" + :label="Hello" + @click="..." + /> + +*/ + +import loadingIcon from './loading_icon.vue'; + +export default { + props: { + loading: { + type: Boolean, + required: false, + default: false, + }, + label: { + type: String, + required: false, + }, + }, + components: { + loadingIcon, + }, + methods: { + onClick(e) { + this.$emit('click', e); + }, + }, +}; +</script> + +<template> + <button + class="btn btn-align-content" + @click="onClick" + type="button" + :disabled="loading" + > + <transition name="fade"> + <loading-icon + v-if="loading" + :inline="true" + class="js-loading-button-icon" + :class="{ + 'append-right-5': label + }" + /> + </transition> + <transition name="fade"> + <span + v-if="label" + class="js-loading-button-label" + > + {{ label }} + </span> + </transition> + </button> +</template> diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index aa61ddc6a2c..a0bb9e61436 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -5,6 +5,7 @@ @import "framework/layout"; @import "framework/animations"; +@import "framework/vue_transitions"; @import "framework/avatar"; @import "framework/asciidoctor"; @import "framework/banner"; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b131e2d57ee..00a0e9cef67 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -292,6 +292,11 @@ } } +.btn-align-content { + display: flex; + align-items: center; +} + .btn-group { &.btn-grouped { @include btn-with-margin; diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss new file mode 100644 index 00000000000..e07a177e153 --- /dev/null +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -0,0 +1,9 @@ +.fade-enter-active, +.fade-leave-active { + transition: opacity $sidebar-transition-duration $general-hover-transition-curve; +} + +.fade-enter, +.fade-leave-to { + opacity: 0; +} diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index ea37ccf5e3d..97ca01f0f54 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -1,8 +1,3 @@ -.fade-enter-active, -.fade-leave-active { - transition: opacity $sidebar-transition-duration; -} - .monaco-loader { position: absolute; top: 0; |