Commit 6709cfc6 authored by Clement Ho's avatar Clement Ho 🔴 Committed by Tim Zallmann

Replace issues time tracking progress bar with gitlab-ui's progress bar

parent 08e0d279
import Vue from 'vue';
import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
Vue.component('gl-progress-bar', progressBar);
  • I don't like the idea of having all UI components globally registered - won't this make code splitting super hard? (cc @mikegreiling)

    We won't use all ui components on every page, but they will be always in the bundle.

    I'm not sure if there is an issue for this. @ClemMakesApps @timzallmann was this considered/discussed in an issue? Could you please link me?

Please register or sign in to reply
......@@ -3,4 +3,5 @@ import './polyfills';
import './jquery';
import './bootstrap';
import './vue';
import './gitlab_ui';
import '../lib/utils/axios_utils';
......@@ -42,11 +42,14 @@ export default {
return this.timeEstimate - this.timeSpent;
},
timeRemainingPercent() {
return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
return Math.floor((this.timeSpent / this.timeEstimate) * 100);
},
timeRemainingStatusClass() {
return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
},
progressBarVariant() {
return this.timeRemainingPercent > 100 ? 'danger' : 'primary';
},
},
};
</script>
......@@ -62,16 +65,10 @@ export default {
data-placement="top"
role="timeRemainingDisplay"
>
<div
:aria-valuenow="timeRemainingPercent"
class="meter-container"
>
<div
:style="{ width: timeRemainingPercent }"
class="meter-fill"
>
</div>
</div>
<gl-progress-bar
:value="timeRemainingPercent"
:variant="progressBarVariant"
/>
<div class="compare-display-container">
<div class="compare-display float-left">
<span class="compare-label">
......
......@@ -370,11 +370,14 @@ img.emoji {
margin-right: 10px;
}
.alert,
.progress {
.alert {
margin-bottom: $gl-padding;
}
.progress {
height: 4px;
}
.project-item-select-holder {
display: inline-block;
position: relative;
......
......@@ -834,17 +834,7 @@
}
.compare-meter {
&.within_estimate {
.meter-fill {
background: $gl-primary;
}
}
&.over_estimate {
.meter-fill {
background: $red-500;
}
.time-remaining,
.compare-value.spent {
color: $red-500;
......@@ -852,18 +842,6 @@
}
}
.meter-container {
background: $border-gray-light;
border-radius: 3px;
.meter-fill {
max-width: 100%;
height: 5px;
border-radius: 3px;
background: $gl-primary;
}
}
.compare-display-container {
display: flex;
justify-content: space-between;
......
......@@ -540,3 +540,9 @@
:why: https://github.com/xtuc/webassemblyjs/blob/master/LICENSE
:versions: []
:when: 2018-06-08 05:30:56.764116000 Z
- - :approve
- "@gitlab-org/gitlab-ui"
- :who: Clement Ho
:why: Our own library
:versions: []
:when: 2018-07-17 21:02:54.529227000 Z
......@@ -19,6 +19,7 @@
},
"dependencies": {
"@gitlab-org/gitlab-svgs": "^1.26.0",
"@gitlab-org/gitlab-ui": "1.0.5",
"autosize": "^4.0.0",
"axios": "^0.17.1",
"babel-core": "^6.26.3",
......
import $ from 'jquery';
import Vue from 'vue';
import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
......@@ -94,21 +93,14 @@ describe('Issuable Time Tracker', () => {
describe('Remaining meter', () => {
it('should display the remaining meter with the correct width', done => {
Vue.nextTick(() => {
const meterWidth = vm.$el.querySelector('.time-tracking-comparison-pane .meter-fill')
.style.width;
const correctWidth = '5%';
expect(meterWidth).toBe(correctWidth);
expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[value="5"]')).not.toBeNull();
done();
});
});
it('should display the remaining meter with the correct background color when within estimate', done => {
Vue.nextTick(() => {
const styledMeter = $(vm.$el).find(
'.time-tracking-comparison-pane .within_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1);
expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="primary"]')).not.toBeNull();
done();
});
});
......@@ -117,10 +109,7 @@ describe('Issuable Time Tracker', () => {
vm.time_estimate = 100000;
vm.time_spent = 20000000;
Vue.nextTick(() => {
const styledMeter = $(vm.$el).find(
'.time-tracking-comparison-pane .over_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1);
expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
done();
});
});
......
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment