Commit ee34f16d authored by Tim Zallmann's avatar Tim Zallmann

Merge branch 'ch-gitlab-ui-progress-bar' into 'master'

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

Closes gitlab-ui#11

See merge request gitlab-org/gitlab-ce!20416
parents 08e0d279 6709cfc6
import Vue from 'vue';
import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
Vue.component('gl-progress-bar', progressBar);
...@@ -3,4 +3,5 @@ import './polyfills'; ...@@ -3,4 +3,5 @@ import './polyfills';
import './jquery'; import './jquery';
import './bootstrap'; import './bootstrap';
import './vue'; import './vue';
import './gitlab_ui';
import '../lib/utils/axios_utils'; import '../lib/utils/axios_utils';
...@@ -42,11 +42,14 @@ export default { ...@@ -42,11 +42,14 @@ export default {
return this.timeEstimate - this.timeSpent; return this.timeEstimate - this.timeSpent;
}, },
timeRemainingPercent() { timeRemainingPercent() {
return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`; return Math.floor((this.timeSpent / this.timeEstimate) * 100);
}, },
timeRemainingStatusClass() { timeRemainingStatusClass() {
return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate'; return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
}, },
progressBarVariant() {
return this.timeRemainingPercent > 100 ? 'danger' : 'primary';
},
}, },
}; };
</script> </script>
...@@ -62,16 +65,10 @@ export default { ...@@ -62,16 +65,10 @@ export default {
data-placement="top" data-placement="top"
role="timeRemainingDisplay" role="timeRemainingDisplay"
> >
<div <gl-progress-bar
:aria-valuenow="timeRemainingPercent" :value="timeRemainingPercent"
class="meter-container" :variant="progressBarVariant"
> />
<div
:style="{ width: timeRemainingPercent }"
class="meter-fill"
>
</div>
</div>
<div class="compare-display-container"> <div class="compare-display-container">
<div class="compare-display float-left"> <div class="compare-display float-left">
<span class="compare-label"> <span class="compare-label">
......
...@@ -370,11 +370,14 @@ img.emoji { ...@@ -370,11 +370,14 @@ img.emoji {
margin-right: 10px; margin-right: 10px;
} }
.alert, .alert {
.progress {
margin-bottom: $gl-padding; margin-bottom: $gl-padding;
} }
.progress {
height: 4px;
}
.project-item-select-holder { .project-item-select-holder {
display: inline-block; display: inline-block;
position: relative; position: relative;
......
...@@ -834,17 +834,7 @@ ...@@ -834,17 +834,7 @@
} }
.compare-meter { .compare-meter {
&.within_estimate {
.meter-fill {
background: $gl-primary;
}
}
&.over_estimate { &.over_estimate {
.meter-fill {
background: $red-500;
}
.time-remaining, .time-remaining,
.compare-value.spent { .compare-value.spent {
color: $red-500; color: $red-500;
...@@ -852,18 +842,6 @@ ...@@ -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 { .compare-display-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
...@@ -540,3 +540,9 @@ ...@@ -540,3 +540,9 @@
:why: https://github.com/xtuc/webassemblyjs/blob/master/LICENSE :why: https://github.com/xtuc/webassemblyjs/blob/master/LICENSE
:versions: [] :versions: []
:when: 2018-06-08 05:30:56.764116000 Z :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 @@ ...@@ -19,6 +19,7 @@
}, },
"dependencies": { "dependencies": {
"@gitlab-org/gitlab-svgs": "^1.26.0", "@gitlab-org/gitlab-svgs": "^1.26.0",
"@gitlab-org/gitlab-ui": "1.0.5",
"autosize": "^4.0.0", "autosize": "^4.0.0",
"axios": "^0.17.1", "axios": "^0.17.1",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
......
import $ from 'jquery';
import Vue from 'vue'; import Vue from 'vue';
import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
...@@ -94,21 +93,14 @@ describe('Issuable Time Tracker', () => { ...@@ -94,21 +93,14 @@ describe('Issuable Time Tracker', () => {
describe('Remaining meter', () => { describe('Remaining meter', () => {
it('should display the remaining meter with the correct width', done => { it('should display the remaining meter with the correct width', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const meterWidth = vm.$el.querySelector('.time-tracking-comparison-pane .meter-fill') expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[value="5"]')).not.toBeNull();
.style.width;
const correctWidth = '5%';
expect(meterWidth).toBe(correctWidth);
done(); done();
}); });
}); });
it('should display the remaining meter with the correct background color when within estimate', done => { it('should display the remaining meter with the correct background color when within estimate', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const styledMeter = $(vm.$el).find( expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="primary"]')).not.toBeNull();
'.time-tracking-comparison-pane .within_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1);
done(); done();
}); });
}); });
...@@ -117,10 +109,7 @@ describe('Issuable Time Tracker', () => { ...@@ -117,10 +109,7 @@ describe('Issuable Time Tracker', () => {
vm.time_estimate = 100000; vm.time_estimate = 100000;
vm.time_spent = 20000000; vm.time_spent = 20000000;
Vue.nextTick(() => { Vue.nextTick(() => {
const styledMeter = $(vm.$el).find( expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
'.time-tracking-comparison-pane .over_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1);
done(); 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