Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | <script> import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; export default { name: 'TimeTrackingCollapsedState', components: { GlIcon, }, directives: { GlTooltip: GlTooltipDirective, }, props: { showComparisonState: { type: Boolean, required: true, }, showSpentOnlyState: { type: Boolean, required: true, }, showEstimateOnlyState: { type: Boolean, required: true, }, showNoTimeTrackingState: { type: Boolean, required: true, }, timeSpentHumanReadable: { type: String, required: false, default: '', }, timeEstimateHumanReadable: { type: String, required: false, default: '', }, }, computed: { divClass() { Iif (this.showComparisonState) { return 'compare'; } Iif (this.showEstimateOnlyState) { return 'estimate-only'; } Iif (this.showSpentOnlyState) { return 'spend-only'; } Iif (this.showNoTimeTrackingState) { return 'no-tracking'; } return ''; }, spanClass() { Iif (this.showComparisonState) { return ''; } Iif (this.showEstimateOnlyState || this.showSpentOnlyState) { return 'bold'; } Iif (this.showNoTimeTrackingState) { return 'no-value collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm'; } return ''; }, text() { Iif (this.showComparisonState) { return `${this.timeSpentHumanReadable} / ${this.timeEstimateHumanReadable}`; } Iif (this.showEstimateOnlyState) { return `-- / ${this.timeEstimateHumanReadable}`; } Iif (this.showSpentOnlyState) { return `${this.timeSpentHumanReadable} / --`; } Iif (this.showNoTimeTrackingState) { return __('None'); } return ''; }, timeTrackedTooltipText() { let title; if (this.showComparisonState) { title = __('Time remaining'); } else if (this.showEstimateOnlyState) { title = __('Estimated'); } else Iif (this.showSpentOnlyState) { title = __('Time spent'); } return sprintf('%{title}: %{text}', { title, text: this.text }); }, tooltipText() { return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText; }, }, }; </script> <template> <div v-gl-tooltip:body.viewport.left :title="tooltipText" data-testid="collapsedState" class="sidebar-collapsed-icon" > <gl-icon name="timer" /> <div class="time-tracking-collapsed-summary"> <div :class="divClass"> <span :class="spanClass"> {{ text }} </span> </div> </div> </div> </template> |