diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue | 37 |
1 files changed, 19 insertions, 18 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 91c67a03dfb..d222a2af382 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlIcon, GlLink, GlModal, GlButton, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; import { IssuableType } from '~/issues/constants'; import { s__, __ } from '~/locale'; import { timeTrackingQueries } from '~/sidebar/constants'; @@ -21,6 +21,7 @@ export default { GlIcon, GlLink, GlModal, + GlButton, GlLoadingIcon, TimeTrackingCollapsedState, TimeTrackingSpentOnlyPane, @@ -187,7 +188,11 @@ export default { </script> <template> - <div v-cloak class="time-tracker time-tracking-component-wrap" data-testid="time-tracker"> + <div + v-cloak + class="time-tracker time-tracking-component-wrap sidebar-help-wrap" + data-testid="time-tracker" + > <time-tracking-collapsed-state v-if="showCollapsed" :show-comparison-state="showComparisonState" @@ -198,25 +203,21 @@ export default { :time-spent-human-readable="humanTotalTimeSpent" :time-estimate-human-readable="humanTimeEstimate" /> - <div class="hide-collapsed gl-line-height-20 gl-text-gray-900"> + <div + class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center" + > {{ __('Time tracking') }} <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline /> - <div - v-if="!showHelpState" - data-testid="helpButton" - class="help-button float-right" - @click="toggleHelpState(true)" + <gl-button + :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'" + category="tertiary" + size="small" + variant="link" + class="gl-ml-auto" + @click="toggleHelpState(!showHelpState)" > - <gl-icon name="question-o" /> - </div> - <div - v-else - data-testid="closeHelpButton" - class="close-help-button float-right" - @click="toggleHelpState(false)" - > - <gl-icon name="close" /> - </div> + <gl-icon :name="showHelpState ? 'close' : 'question-o'" class="gl-text-gray-900!" /> + </gl-button> </div> <div v-if="!isTimeTrackingInfoLoading" class="hide-collapsed"> <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane"> |