Skip to content

Commit

Permalink
update NumberBox behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@metagrover
metagrover committed Feb 6, 2017
1 parent c6c01bf commit d7c9645
Show file tree
Hide file tree
Showing 9 changed files with 303 additions and 163 deletions.
78 changes: 76 additions & 2 deletions app/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,10 @@ a {
.rbc-red .rbc .rc-slider .rc-slider-dot-active {
border-color: red;
background-color: red; }
.rbc-red .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #5e5e5e; }
.rbc-red .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: #b7b7b7; }
.rbc-red .rbc label,
.rbc-red .rbc [type="checkbox"] + label:before, .rbc-red .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-red .rbc [type="radio"]:not(:checked) + label:before, .rbc-red .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -481,6 +485,10 @@ a {
.rbc-orange .rbc .rc-slider .rc-slider-dot-active {
border-color: orange;
background-color: orange; }
.rbc-orange .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #5e5e5e; }
.rbc-orange .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: #b7b7b7; }
.rbc-orange .rbc label,
.rbc-orange .rbc [type="checkbox"] + label:before, .rbc-orange .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-orange .rbc [type="radio"]:not(:checked) + label:before, .rbc-orange .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -631,6 +639,10 @@ a {
.rbc-yellow .rbc .rc-slider .rc-slider-dot-active {
border-color: yellow;
background-color: yellow; }
.rbc-yellow .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #5e5e5e; }
.rbc-yellow .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: #b7b7b7; }
.rbc-yellow .rbc label,
.rbc-yellow .rbc [type="checkbox"] + label:before, .rbc-yellow .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-yellow .rbc [type="radio"]:not(:checked) + label:before, .rbc-yellow .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -781,6 +793,10 @@ a {
.rbc-green .rbc .rc-slider .rc-slider-dot-active {
border-color: green;
background-color: green; }
.rbc-green .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #5e5e5e; }
.rbc-green .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: #b7b7b7; }
.rbc-green .rbc label,
.rbc-green .rbc [type="checkbox"] + label:before, .rbc-green .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-green .rbc [type="radio"]:not(:checked) + label:before, .rbc-green .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -931,6 +947,10 @@ a {
.rbc-blue .rbc .rc-slider .rc-slider-dot-active {
border-color: #1893e7;
background-color: #1893e7; }
.rbc-blue .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #5e5e5e; }
.rbc-blue .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: #b7b7b7; }
.rbc-blue .rbc label,
.rbc-blue .rbc [type="checkbox"] + label:before, .rbc-blue .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-blue .rbc [type="radio"]:not(:checked) + label:before, .rbc-blue .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -964,10 +984,10 @@ a {
color: #ccc; }

.rbc-dark .rbc-poweredby .rbc-img-responsive.rbc-poweredby-dark {
display: inline-block; }
display: none; }

.rbc-dark .rbc-poweredby .rbc-img-responsive.rbc-poweredby-light {
display: none; }
display: inline-block; }

.rbc-dark .rbc.rbc-datepicker .CalendarMonth__day--selected,
.rbc-dark .rbc.rbc-datepicker .CalendarMonth__day--selected-end,
Expand Down Expand Up @@ -1081,6 +1101,10 @@ a {
.rbc-dark .rbc .rc-slider .rc-slider-dot-active {
border-color: #ccc;
background-color: #ccc; }
.rbc-dark .rbc.rbc-numberbox .rbc-numberbox-btn-active {
color: #d5d5d5; }
.rbc-dark .rbc.rbc-numberbox .rbc-numberbox-btn-inactive {
color: white; }
.rbc-dark .rbc label,
.rbc-dark .rbc [type="checkbox"] + label:before, .rbc-dark .rbc [type="checkbox"]:not(.filled-in) + label:after,
.rbc-dark .rbc [type="radio"]:not(:checked) + label:before, .rbc-dark .rbc [type="radio"]:not(:checked) + label:after {
Expand Down Expand Up @@ -1110,6 +1134,12 @@ a {
.rbc-dark a {
color: #eee; }

.rbc-dark .rbc-poweredby .rbc-img-responsive.rbc-poweredby-dark {
display: inline-block; }

.rbc-dark .rbc-poweredby .rbc-img-responsive.rbc-poweredby-light {
display: none; }

.rbc.rbc-datasearch {
margin-top: 10px;
padding: 0; }
Expand Down Expand Up @@ -1495,6 +1525,50 @@ a {
.rbc.rbc-datepicker .DayPicker__week-header, .rbc.rbc-daterange .DayPicker__week-header {
top: 57px; }

.rbc.rbc-numberbox {
padding: 0; }
.rbc.rbc-numberbox .rbc-numberbox-btn {
display: inline-block;
width: 2em;
height: 2em;
font-size: 1em;
background: #ebebed;
line-height: 30px;
padding: 0;
text-align: center;
vertical-align: middle;
box-shadow: none; }
.rbc.rbc-numberbox .rbc-numberbox-btn-icon {
line-height: inherit; }
.rbc.rbc-numberbox .rbc-numberbox-btn-container {
padding: 10px 0; }
.rbc.rbc-numberbox .rbc-numberbox-container {
display: flex;
justify-content: flex-start; }
.rbc.rbc-numberbox .rbc-numberbox-container-right .rbc-numberbox-label,
.rbc.rbc-numberbox .rbc-numberbox-container-bottom .rbc-numberbox-label {
order: 2; }
.rbc.rbc-numberbox .rbc-numberbox-container-right .rbc-numberbox-label {
padding-left: 15px; }
.rbc.rbc-numberbox .rbc-numberbox-container-left .rbc-numberbox-label {
padding-right: 15px; }
.rbc.rbc-numberbox .rbc-numberbox-container-left,
.rbc.rbc-numberbox .rbc-numberbox-container-right {
flex-direction: row; }
.rbc.rbc-numberbox .rbc-numberbox-container-top,
.rbc.rbc-numberbox .rbc-numberbox-container-bottom {
flex-direction: column; }
.rbc.rbc-numberbox .rbc-numberbox-container-top .rbc-numberbox-btn-container,
.rbc.rbc-numberbox .rbc-numberbox-container-bottom .rbc-numberbox-btn-container {
text-align: center; }
.rbc.rbc-numberbox .rbc-numberbox-number {
padding: 1em; }
.rbc.rbc-numberbox .rbc-numberbox-label {
display: inline-block;
line-height: 50px;
text-align: center;
vertical-align: middle; }

.rbc-poweredby {
display: inline-block;
position: absolute;
Expand Down
109 changes: 59 additions & 50 deletions app/assets/styles/partials/components/_numberbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,73 @@
.rbc.rbc-numberbox {
padding: 0;
padding: 0;

.rbc-numberbox-btn {
display: inline-block;
width: 2em;
height: 2em;
font-size: 1em !important;
background: #ebebed;
line-height: 30px;
padding: 0 !important;
text-align: center;
vertical-align: middle;
}
.rbc-numberbox-btn {
display: inline-block;
width: 2em;
height: 2em;
font-size: 1em;
background: #ebebed;
line-height: 30px;
padding: 0;
text-align: center;
vertical-align: middle;
box-shadow: none;
}

.rbc-numberbox-btn-icon {
line-height: inherit;
}
.rbc-numberbox-btn-icon {
line-height: inherit;
}

.rbc-numberbox-btn-active {
color: #545456;
}
.rbc-numberbox-btn-container {
padding: 10px 0;
}

.rbc-numberbox-btn-inactive {
color: #acacaf;
}
.rbc-numberbox-container {
display: flex;
justify-content: flex-start;
}

.rbc-numberbox-btn-container {
width: 9em;
padding: 10px;
}
.rbc-numberbox-container-right,
.rbc-numberbox-container-bottom {
.rbc-numberbox-label {
order: 2;
}
}

.rbc-numberbox-container {
display: flex;
}
.rbc-numberbox-container-right {
.rbc-numberbox-label {
padding-left: 15px;
}
}

.rbc-numberbox-container-top {
flex-direction: column;
}
.rbc-numberbox-container-left {
.rbc-numberbox-label {
padding-right: 15px;
}
}

.rbc-numberbox-container-bottom {
flex-direction: column-reverse;
}
.rbc-numberbox-container-left,
.rbc-numberbox-container-right {
flex-direction: row;
}

.rbc-numberbox-container-right {
flex-direction: row-reverse;
}
.rbc-numberbox-container-top,
.rbc-numberbox-container-bottom {
flex-direction: column;

.rbc-numberbox-container-left {
flex-direction: row;
}
.rbc-numberbox-btn-container {
text-align: center;
}
}

.rbc-numberbox-number {
padding: 1em;
}
.rbc-numberbox-number {
padding: 1em;
}

.rbc-numberbox-label {
display: inline-block;
line-height: 50px;
text-align: center;
vertical-align: middle;
width: 8em;
}
.rbc-numberbox-label {
display: inline-block;
line-height: 50px;
text-align: center;
vertical-align: middle;
}
}
36 changes: 28 additions & 8 deletions app/assets/styles/partials/theme/_default.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
$themes: (
rbc-red: (color: red, background: #fff, font-color: #777, input-bg: #f5f5f5, poweredby-dark: none, poweredby-light: inline-block),
rbc-orange: (color: orange, background: #fff, font-color: #777, input-bg: #f5f5f5, poweredby-dark: none, poweredby-light: inline-block),
rbc-yellow: (color: yellow, background: #fff, font-color: #777, input-bg: #f5f5f5, poweredby-dark: none, poweredby-light: inline-block),
rbc-green: (color: green, background: #fff, font-color: #777, input-bg: #f5f5f5, poweredby-dark: none, poweredby-light: inline-block),
rbc-blue: (color: #1893e7, background: #fff, font-color: #777, input-bg: #f5f5f5, poweredby-dark: none, poweredby-light: inline-block),
rbc-dark: (color: #ccc, background: #555, font-color: #eee, input-bg: #aaa, poweredby-dark: inline-block, poweredby-light: none)
rbc-red: (color: red, background: #fff, font-color: #777, input-bg: #f5f5f5),
rbc-orange: (color: orange, background: #fff, font-color: #777, input-bg: #f5f5f5),
rbc-yellow: (color: yellow, background: #fff, font-color: #777, input-bg: #f5f5f5),
rbc-green: (color: green, background: #fff, font-color: #777, input-bg: #f5f5f5),
rbc-blue: (color: #1893e7, background: #fff, font-color: #777, input-bg: #f5f5f5),
rbc-dark: (color: #ccc, background: #555, font-color: #eee, input-bg: #aaa)
);

@each $theme, $map in $themes {
Expand All @@ -23,10 +23,10 @@ $themes: (
.rbc-poweredby {
.rbc-img-responsive {
&.rbc-poweredby-dark {
display: map-get($map, poweredby-dark);
display: none;
}
&.rbc-poweredby-light {
display: map-get($map, poweredby-light);
display: inline-block;
}
}
}
Expand Down Expand Up @@ -200,7 +200,16 @@ $themes: (
background-color: map-get($map, color);
}
}

&.rbc-numberbox {
.rbc-numberbox-btn-active {
color: darken(map-get($map, font-color), 10%);
}

.rbc-numberbox-btn-inactive {
color: lighten(map-get($map, font-color), 25%);
}
}

label,
[type="checkbox"]+label:before, [type="checkbox"]:not(.filled-in)+label:after,
Expand Down Expand Up @@ -239,3 +248,14 @@ $themes: (

}
}

.rbc-dark .rbc-poweredby {
.rbc-img-responsive {
&.rbc-poweredby-dark {
display: inline-block;
}
&.rbc-poweredby-light {
display: none;
}
}
}
18 changes: 16 additions & 2 deletions app/middleware/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,22 @@ export var stepValidation = function(props, propName) {
}

export var validateThreshold = function(props, propName, componentName) {
if(!(!isNaN(props[propName]) && props['end'] > props['start'])) {
return new Error('Threshold value validation is failed, end value should be greater than start value.');
if (componentName == 'NumberBox') {
if(!(!isNaN(props[propName]) && props['max'] > props['min'])) {
return new Error('Threshold value validation is failed, max value should be greater than min value.');
}
} else {
if(!(!isNaN(props[propName]) && props['end'] > props['start'])) {
return new Error('Threshold value validation is failed, end value should be greater than start value.');
}
}
}

export var valueValidation = function(props, propName) {
const max = props['data']['max'] ? props['data']['max'] : props['defaultSelected'];
const min = props['data']['min'] ? props['data']['min'] : props['defaultSelected'];
if(!(!isNaN(props[propName]) && max >= props['defaultSelected'] && min <= props['defaultSelected'])) {
return new Error('Default value validation is failed, Default value should be between min and max values.');
}
}

Expand Down

0 comments on commit d7c9645

Please sign in to comment.