Skip to content

Commit

Permalink
Merge branch 'master' into wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
smartapant committed Jul 17, 2017
2 parents 0b5da4a + 26ba44a commit 1f64766
Show file tree
Hide file tree
Showing 16 changed files with 163 additions and 56 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="custom-progress-bar" v-set="{props: $props, refs: $refs, data: $data}">
<div class="vuestic-progress-bar" v-set="{props: $props, refs: $refs, data: $data}">
<horizontal-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'horizontal'"
:isActive = "isActive" ref="bar"></horizontal-bar>
<vertical-bar :min="min" :max="max" :value="value" :size="size" :color="color" v-if="type == 'vertical'"
Expand All @@ -10,9 +10,9 @@
</template>

<script>
import HorizontalBar from './progress_types/HorizontalProgressBar.vue'
import VerticalBar from './progress_types/VerticalProgressBar.vue'
import CircleBar from './progress_types/CircleProgressBar.vue'
import HorizontalBar from './progress-types/HorizontalProgressBar.vue'
import VerticalBar from './progress-types/VerticalProgressBar.vue'
import CircleBar from './progress-types/CircleProgressBar.vue'
export default {
components: {
Expand Down Expand Up @@ -63,6 +63,10 @@
let valueMsecs = this.valueAnimationInterval / this.max
let delta = Math.sign(this.value - this.$refs.bar.animatedValue)
let valueInterval = setInterval(() => {
if (!this.$refs.bar) {
clearInterval(valueInterval)
return
}
if (startValue !== this.value || this.$refs.bar.animatedValue === this.value) {
clearInterval(valueInterval)
if (this.value === this.max) {
Expand All @@ -89,9 +93,9 @@
@import "../../../sass/mixins";
@import "../../../../node_modules/bootstrap/scss/variables";
.custom-progress-bar {
font-size: $font-size-pb-value !important; //TODO: fix thick font-size
font-weight: $font-weight-bold !important; //TODO: fix thick font-weight
.vuestic-progress-bar {
font-size: $progress-bar-value-font-size;
font-weight: $font-weight-bold;
&:hover {
cursor: pointer;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@
},
methods: {
enableBarAnimation (flag) {
// if (flag) {
// this.progressBarElement.setAttribute('class', 'progress-bar active')
// } else {
// this.progressBarElement.setAttribute('class', 'progress-bar')
// }
}
},
watch: {
Expand All @@ -49,7 +44,7 @@
@import "../../../../sass/mixins";
@import "../../../../../node_modules/bootstrap/scss/variables";
.circle {
.vuestic-progress-bar .circle {
$innerColor: white;
$startColor: $gray-lighter;
$step: 1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
@import "../../../../sass/mixins";
@import "../../../../../node_modules/bootstrap/scss/variables";
.horizontal {
.vuestic-progress-bar .horizontal {
@each $name in map-keys($colors-map) {
&.color-#{$name} {
$color: map-get($colors-map, $name);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
@import "../../../../sass/mixins";
@import "../../../../../node_modules/bootstrap/scss/variables";
.vertical {
.vuestic-progress-bar .vertical {
@each $name in map-keys($colors-map) {
&.color-#{$name} {
$color: map-get($colors-map, $name);
Expand Down
17 changes: 14 additions & 3 deletions src/components/layout/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div :class="{'sidebar-hidden': !sidebarOpened}">
<div :class="classObject" v-resize>
<navbar></navbar>
<sidebar></sidebar>
<div class="content-wrap" id="content-wrap">
Expand All @@ -15,6 +15,7 @@
import Navbar from './navbar/Navbar'
import Sidebar from './sidebar/Sidebar'
import Resize from 'directives/ResizeHandler'
export default {
name: 'layout',
Expand All @@ -23,10 +24,20 @@
Navbar,
Sidebar
},
directives: {
resize: Resize
},
computed: {
...mapGetters([
'sidebarOpened'
])
'sidebarOpened',
'toggleWithoutAnimation'
]),
classObject: function () {
return {
'sidebar-hidden': !this.toggleWithoutAnimation && !this.sidebarOpened,
'sidebar-hidden sidebar-hidden_without-animation': this.toggleWithoutAnimation && !this.sidebarOpened
}
}
}
}
</script>
Expand Down
7 changes: 4 additions & 3 deletions src/components/layout/navbar/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,13 @@ justify-content-lg-end" v-dropdown>
},
computed: mapGetters([
'sidebarOpened'
'sidebarOpened',
'toggleWithoutAnimation'
]),
methods: {
...mapActions([
'toggleSidebar'
'toggleSidebar',
'isToggleWithoutAnimation'
])
}
}
Expand Down
12 changes: 12 additions & 0 deletions src/components/layout/sidebar/Sidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
top: $sidebar-mobile-top;
left: $sidebar-mobile-left;
width: $sidebar-mobile-width;
z-index: $sidebar-mobile-z-index;
}
height: $sidebar-viewport-height;
Expand All @@ -131,10 +132,21 @@
transition: all 0.2s ease;
opacity: 1;
.sidebar-hidden_without-animation & {
transition: none;
}
.sidebar-hidden & {
@include media-breakpoint-down(md) {
top: $sidebar-hidden-top-mobile;
opacity: 0;
z-index: $sidebar-mobile-z-index;
height: $sidebar-hidden-height-mobile;
}
top: $sidebar-hidden-top;
opacity: 0;
z-index: $min-z-index;
}
.sidebar-link {
Expand Down
32 changes: 18 additions & 14 deletions src/components/statistics/progress-bars/ProgressBars.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,43 @@
<div class="row">
<widget class="col-12" headerText="Progress Bars">
<div class="row">
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Basic
<div class="pb-container">
<progress-bar ref="hBasic">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thin
<div class="pb-container">
<progress-bar size="thin" ref="hThin">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thick
<div class="pb-container">
<progress-bar size="thick" ref="hThick">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Basic Vertical
<div class="pb-container">
<div>
<progress-bar type="vertical" ref="vBasic"></progress-bar>
</div>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thin Vertical
<div>
<progress-bar size="thin" type="vertical" ref="vThin">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Circle
<div>
<progress-bar type="circle" ref="circle"></progress-bar>
Expand All @@ -49,43 +49,43 @@
</widget>
<widget class="col-12" headerText="Colorful Bars">
<div class="row">
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Basic
<div class="pb-container">
<progress-bar ref="chBasic" color="brand-danger">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thin
<div class="pb-container">
<progress-bar size="thin" ref="chThin" color="brand-info">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thick
<div class="pb-container">
<progress-bar size="thick" ref="chThick" color="brand-warning">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Basic Vertical
<div class="pb-container">
<div>
<progress-bar type="vertical" ref="cvBasic" color="brand-success"></progress-bar>
</div>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Thin Vertical
<div class="pb-container">
<progress-bar size="thin" type="vertical" ref="cvThin" color="black">
</progress-bar>
</div>
</div>
<div class="col-sm-4 col-6">
<div class="col-sm-4 col-12">
Circle
<div class="pb-container">
<progress-bar type="circle" ref="ccircle"></progress-bar>
Expand All @@ -99,7 +99,7 @@

<script>
import Widget from '../../common/widget/Widget'
import ProgressBar from '../../common/progress-bar/ProgressBar.vue'
import ProgressBar from '../../common/vuestic-progress-bar/VuesticProgressBar.vue'
export default {
components: {
Expand All @@ -111,7 +111,11 @@
let delay = 0
for (let ref in this.$refs) {
this.$refs[ref].$data.valueAnimationInterval = this.valueAnimationInterval
setTimeout(() => {
let timeout = setTimeout(() => {
if (!this.$refs[ref]) {
clearTimeout(timeout)
return
}
this.$refs[ref].$data.value = 100
}, delay)
delay += this.valueAnimationInterval
Expand Down
25 changes: 15 additions & 10 deletions src/components/tables/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<div class="col-xs-12 col-md-12">
<widget headerText="Basic Table">
<div class="table-responsive">
<table class="table table-striped table-sm">
<table class="table table-striped">
<thead>
<tr>
<td>NAME</td>
<td>EMAIL</td>
<td>CITY</td>
<td align="right">SCORE</td>
<td>Name</td>
<td>Email</td>
<td>City</td>
<td align="right">Score</td>
<td></td>
</tr>
</thead>
Expand Down Expand Up @@ -82,14 +82,14 @@
<div class="col-md-12">
<widget headerText="Colors, Icons, Labels">
<div class="table-responsive">
<table class="table table-striped table-sm">
<table class="table table-striped table-sm color-icon-label-table">
<thead>
<tr>
<td></td>
<td>NAME</td>
<td>EMAIL</td>
<td>CITY</td>
<td align="right">SCORE</td>
<td>Name</td>
<td>Email</td>
<td>City</td>
<td align="right">Score</td>
<td align="middle"></td>
</tr>
</thead>
Expand Down Expand Up @@ -189,4 +189,9 @@

<style lang="scss">
.color-icon-label-table {
td:first-child {
width: 1rem;
}
}
</style>
12 changes: 10 additions & 2 deletions src/components/ui/buttons/Buttons.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
</div>
</div>

<div class="row">
<div class="row btn-margin-row">

<div class="col-sm-6 d-flex justify-content-center" :class="{'col-lg-6 col-xl-3' : sidebarOpened, 'col-lg-3' : !sidebarOpened }">
<button class="btn btn-primary btn-sm">
Expand Down Expand Up @@ -173,8 +173,16 @@
</script>

<style lang="scss">
.buttons-page {
@import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
@import "../../../../node_modules/bootstrap/scss/variables";
.buttons-page {
@include media-breakpoint-only(xl) {
.btn-margin-row {
margin-right: -35px;
margin-left: -40px;
}
}
.btn, .btn-group {
margin-bottom: 45px;
}
Expand Down
26 changes: 26 additions & 0 deletions src/directives/ResizeHandler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import store from 'store'

export default {
inserted: function (el) {
let getWindowMatch = () => {
return window.matchMedia(store.getters.config.windowMatchSizeLg).matches
}

let prevMatchlg = getWindowMatch()

el.addEventListener('transitionend', function () {
store.dispatch('isToggleWithoutAnimation', false)
})

window.addEventListener('resize', function () {
if (getWindowMatch() && !prevMatchlg) {
store.dispatch('toggleSidebar', true)
} else if (!getWindowMatch() && prevMatchlg) {
store.dispatch('isToggleWithoutAnimation', true)
store.dispatch('toggleSidebar', false)
}
prevMatchlg = getWindowMatch()
})
}
}

Loading

0 comments on commit 1f64766

Please sign in to comment.