Skip to content

Commit

Permalink
Merge branch 'master' into wizard
Browse files Browse the repository at this point in the history
smartapant committed Jul 17, 2017
2 parents 0b5da4a + 26ba44a commit 1f64766
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'"
@@ -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: {
@@ -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) {
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -23,11 +23,6 @@
},
methods: {
enableBarAnimation (flag) {
// if (flag) {
// this.progressBarElement.setAttribute('class', 'progress-bar active')
// } else {
// this.progressBarElement.setAttribute('class', 'progress-bar')
// }
}
},
watch: {
@@ -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;
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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);
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">
@@ -15,6 +15,7 @@
import Navbar from './navbar/Navbar'
import Sidebar from './sidebar/Sidebar'
import Resize from 'directives/ResizeHandler'
export default {
name: 'layout',
@@ -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>
7 changes: 4 additions & 3 deletions src/components/layout/navbar/Navbar.vue
Original file line number Diff line number Diff line change
@@ -86,12 +86,13 @@ justify-content-lg-end" v-dropdown>
},
computed: mapGetters([
'sidebarOpened'
'sidebarOpened',
'toggleWithoutAnimation'
]),
methods: {
...mapActions([
'toggleSidebar'
'toggleSidebar',
'isToggleWithoutAnimation'
])
}
}
12 changes: 12 additions & 0 deletions src/components/layout/sidebar/Sidebar.vue
Original file line number Diff line number Diff line change
@@ -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;
@@ -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 {
32 changes: 18 additions & 14 deletions src/components/statistics/progress-bars/ProgressBars.vue
Original file line number Diff line number Diff line change
@@ -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>
@@ -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>
@@ -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: {
@@ -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
25 changes: 15 additions & 10 deletions src/components/tables/Table.vue
Original file line number Diff line number Diff line change
@@ -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>
@@ -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>
@@ -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
@@ -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">
@@ -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;
}
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()
})
}
}

31 changes: 28 additions & 3 deletions src/sass/_override-bootstrap.scss
Original file line number Diff line number Diff line change
@@ -264,6 +264,9 @@ h4, .h4 {
thead tr {
border-bottom: 2px solid rgb(85, 85, 85);
color: $vue-green;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}

td:first-child {
@@ -277,12 +280,34 @@ h4, .h4 {

td, th {
vertical-align: middle !important;
padding: .5rem;
}

.badge {
min-width: 6rem;
padding-left: 1rem;
padding-right: 1rem;
line-height: .9rem;
width: 5rem;
display: inline-block;
font-size: .7rem;
font-family: "Source Sans Pro", serif;
font-weight: bold;
text-transform: uppercase;
vertical-align: text-top;
}

.table-info {
background-color: #dcf1ff;
}

.table-warning {
background-color: #fff1c8;
}

.table-success {
background-color: #c8fac6;
}

.table-danger {
background-color: #ffcece;
}

}
12 changes: 8 additions & 4 deletions src/sass/_variables.scss
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ $brand-danger: $theme-red;
$brand-warning: $theme-orange;
$brand-info: $theme-blue;
$brand-success: $theme-violet;
$light-grey: #eff4f5;
$light-gray2: #eff4f5;

$colors-map: (
brand-danger: $brand-danger,
@@ -64,6 +64,7 @@ $sidebar-mobile-width: calc(100% - #{$layout-mobile-padding-right});
$sidebar-mobile-top: $top-mobile-nav-height+$layout-mobile-padding;
$sidebar-mobile-left: $layout-mobile-padding;
$content-mobile-wrap-margin: 1.125rem;
$sidebar-mobile-z-index: 1000;
$nav-mobile-padding-h : .875rem;
$nav-mobile-pt: 3rem;
$nav-mobile-pb: 1.375rem;
@@ -88,7 +89,6 @@ $font-size-base : 1rem !default;
$font-size-larger : 1.2rem;
$font-size-large : 1.5rem;
$font-size-mini : 0.8rem;
$font-size-pb-value: 0.6875rem;

$font-weight-bold : 700 !default;
$font-weight-semi-bold : 600 !default;
@@ -122,7 +122,8 @@ $sidebar-menu-item-icon-size : 19px;
$sidebar-viewport-height: calc(100vh - #{$top-nav-height} - #{$content-wrap-pt} - #{$content-wrap-pb});

$sidebar-hidden-top : -150px;

$sidebar-hidden-top-mobile : $sidebar-mobile-top;
$sidebar-hidden-height-mobile: 0;
$sidebar-box-shadow : $greeny-box-shadow;

//Widgets
@@ -186,6 +187,8 @@ $dropdown-item-height: 40px;
$dropdown-menu-padding-y: 10px;
$dropdown-menu-padding-x: 0;
$dropdown-min-width: 15rem;
$dropdown-simple-visible-items: 4;
$dropdown-multi-visible-items: 4;

//Modals
$modal-header-padding-x: $widget-padding;
@@ -209,6 +212,7 @@ $vuestic-switch-padding: 0.313rem 2.375rem;
$vuestic-switch-border-size: 0.125rem;

//Progress Bars
$progress-bar-value-font-size: 0.6875rem;
$progress-bar-circle-diameter: 3.125rem;
$progress-bar-circle-bw: .125rem;
$progress-bar-circle-overlay-diameter: calc(#{$progress-bar-circle-diameter} - 2*#{$progress-bar-circle-bw});
@@ -220,4 +224,4 @@ $progress-bar-width-thick: 1.5rem;
//Tables
$table-bg-accent: $white;
$table-border-width: $white;
$striped-row: $light-gray;
$striped-row: $light-gray2;
2 changes: 2 additions & 0 deletions src/store/getters.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
const menuItems = state => state.menu.items
const sidebarOpened = state => state.app.sidebar.opened
const toggleWithoutAnimation = state => state.app.sidebar.withoutAnimation
const config = state => state.app.config
const namesOfSetsOfIcons = state => state.icons.namesOfSetsOfIcons
const setsOfIcons = state => state.icons.setsOfIcons

export {
menuItems,
toggleWithoutAnimation,
sidebarOpened,
config,
namesOfSetsOfIcons,
12 changes: 10 additions & 2 deletions src/store/modules/app.js
Original file line number Diff line number Diff line change
@@ -2,24 +2,32 @@ import * as types from '../mutation-types'

const state = {
sidebar: {
opened: false
opened: false,
withoutAnimation: false
},
config: {
googleMaps: {
apiKey: 'AIzaSyBNAqPrTQoz9P4NBlDDyfxrnKiafkaL8iQ'
}
},
windowMatchSizeLg: '(min-width: 992px)'
}
}

const mutations = {
[types.TOGGLE_SIDEBAR] (state, opened) {
state.sidebar.opened = opened
},
[types.TOGGLE_WITHOUT_ANIMATION] (state, value) {
state.sidebar.withoutAnimation = value
}
}

const actions = {
toggleSidebar ({ commit }, opened) {
commit(types.TOGGLE_SIDEBAR, opened)
},
isToggleWithoutAnimation ({ commit }, value) {
commit(types.TOGGLE_WITHOUT_ANIMATION, value)
}
}

2 changes: 2 additions & 0 deletions src/store/mutation-types.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export const TOGGLE_EXPAND_MENU_ITEM = 'TOGGLE_EXPAND_MENU_ITEM'

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'

export const TOGGLE_WITHOUT_ANIMATION = 'TOGGLE_WITHOUT_ANIMATION'

0 comments on commit 1f64766

Please sign in to comment.