From 1c1f498aaa6937aa5b9e500f74adbd879beb5526 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sun, 9 Aug 2015 01:29:58 +0200 Subject: [PATCH 01/37] Add date utils --- components/date_utils.coffee | 49 ++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 components/date_utils.coffee diff --git a/components/date_utils.coffee b/components/date_utils.coffee new file mode 100644 index 00000000..67b0c1af --- /dev/null +++ b/components/date_utils.coffee @@ -0,0 +1,49 @@ +module.exports = + daysInMonth: (date) -> + (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate() + + firstWeekDay: (date) -> + (new Date(date.getFullYear(), date.getMonth() + 1, 1)).getDay() + + monthInWords: (date) -> + switch (date.getMonth()) + when 0 then 'January' + when 1 then 'February' + when 2 then 'March' + when 3 then 'April' + when 4 then 'May' + when 5 then 'June' + when 6 then 'July' + when 7 then 'August' + when 8 then 'September' + when 9 then 'October' + when 10 then 'November' + when 11 then 'December' + + weekDayInWords: (day) -> + switch (day) + when 0 then 'Sunday' + when 1 then 'Monday' + when 2 then 'Tuesday' + when 3 then 'Wednesday' + when 4 then 'Thursday' + when 5 then 'Friday' + when 6 then 'Saturday' + + addDays: (date, days) -> + newDate = @cloneDatetime(date) + newDate.setDate(date.getDate() + days) + newDate + + addMonths: (date, months) -> + newDate = @cloneDatetime(date) + newDate.setMonth(date.getMonth() + months) + newDate + + addYears: (date, years) -> + newDate = @cloneDatetime(date) + newDate.setFullYear(date.getFullYear() + years) + newDate + + cloneDatetime: (date) -> + new Date(date.getTime()) From 2978decf0631659f32bbec69d591ed66ccb69e4c Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sun, 9 Aug 2015 01:30:24 +0200 Subject: [PATCH 02/37] Add onClick to font icon --- components/font_icon/index.cjsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/font_icon/index.cjsx b/components/font_icon/index.cjsx index 1a99ab84..5cc12666 100644 --- a/components/font_icon/index.cjsx +++ b/components/font_icon/index.cjsx @@ -10,7 +10,10 @@ module.exports = React.createClass getDefaultProps: -> className : '' + onClick: (event) -> + @props.onClick? @props.onClick(event) + # -- Render render: -> className = "#{localCSS.root} #{@props.className} #{@props.value}" - + From 8a967f18de098e5173e750c39f2c6dcbea01fec1 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sun, 9 Aug 2015 01:30:51 +0200 Subject: [PATCH 03/37] Add calendar component --- components/calendar/index.cjsx | 92 ++++++++++++++++++++++++++ components/calendar/style.styl | 115 +++++++++++++++++++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 components/calendar/index.cjsx create mode 100644 components/calendar/style.styl diff --git a/components/calendar/index.cjsx b/components/calendar/index.cjsx new file mode 100644 index 00000000..c7286a31 --- /dev/null +++ b/components/calendar/index.cjsx @@ -0,0 +1,92 @@ +CTG = React.addons.CSSTransitionGroup +css = require './style' +FontIcon = require '../font_icon' +dateUtils = require '../date_utils' + +module.exports = React.createClass + + # -- States & Properties + propTypes: + className: React.PropTypes.string + selectedDate: React.PropTypes.object + viewDate: React.PropTypes.object + + getDefaultProps: -> + className: '' + selectedDate: new Date() + viewDate: new Date() + + getInitialState: -> + selectedDate: @props.selectedDate + viewDate: @props.viewDate + + # -- Events + onDayClick: (event) -> + day = parseInt(event.target.textContent) + newDate = dateUtils.cloneDatetime(@state.viewDate) + newDate.setDate(day) + @setState selectedDate: newDate + + # -- Handle month increment and decrement + incrementViewMonth: -> + @setState + viewDate: dateUtils.addMonths(@state.viewDate, 1) + direction: 'right' + + decrementViewMonth: -> + @setState + viewDate: dateUtils.addMonths(@state.viewDate, -1) + direction: 'left' + + # -- Render helpers + isDaySelected: (day) -> + isSameYear = @state.viewDate.getFullYear() == @state.selectedDate.getFullYear() + isSameMonth = @state.viewDate.getMonth() == @state.selectedDate.getMonth() + isSameDay = day == @state.selectedDate.getDate() + if isSameYear && isSameMonth && isSameDay then 'active' else '' + + # -- Render + render: -> +
+ + {# Controllers to move to prev and next month } + + + + {# Calendar itself } + +
+
+ {"#{dateUtils.monthInWords(@state.viewDate)}, #{@state.viewDate.getFullYear()}"} +
+ +
+
+ { + for i in [0..6] + + {dateUtils.weekDayInWords(i).charAt(0)} + + } +
+
+ + 1 + + { + for i in [2..dateUtils.daysInMonth(@state.viewDate)] + + {i} + + } +
+
+
+ +
diff --git a/components/calendar/style.styl b/components/calendar/style.styl new file mode 100644 index 00000000..16b28bc2 --- /dev/null +++ b/components/calendar/style.styl @@ -0,0 +1,115 @@ +@import '../constants' + +// -- Calendar sizes +monthHeight = 38px +dayWidth = 38px +innerPadding = 10px +dayHeight = dayWidth +calendarWidth = dayWidth * 7 +calendarHeight = dayHeight * 7 +totalHeight = monthHeight + calendarHeight + innerPadding * 2 +totalWidth = calendarWidth + innerPadding * 2 + +:local(.root) + border-radius : 3px + height : totalHeight + overflow : hidden + position : relative + text-align : center + width : totalWidth + +// -- Prev and next controls +:local(.prevMonth), :local(.nextMonth) + cursor : pointer + height : monthHeight + line-height : monthHeight + opacity : .7 + position : absolute + text-align : center + top : innerPadding + width : dayWidth + z-index : 2 + +:local(.prevMonth) + left : innerPadding + +:local(.nextMonth) + right : innerPadding + +// -- Calendar +:local(.title) + font-size : 14px + left : innerPadding + line-height : monthHeight + position : absolute + right : innerPadding + top : innerPadding + +:local(.calendar) + bottom : innerPadding + font-size : 12px + left : innerPadding + position : absolute + right : innerPadding + top : monthHeight + innerPadding + +:local(.calendarWeekDays) + display : flex + flex-wrap : wrap + height : dayHeight + line-height : dayHeight + opacity : .5 + +:local(.calendarWeekDay) + flex : 0 0 (100/7)% + +:local(.calendarBody) + display : flex + flex-wrap : wrap + +:local(.calendarBodyDay) + border-radius : 50% + cursor : pointer + flex : 0 0 (100/7)% + height : dayHeight + line-height : dayHeight + + &:hover:not(.active) + background : lighten(ACCENT, 65%) + color : white + + &.active + background : ACCENT + color : white + +// -- Slide transitions +:local(.root) .slide-horizontal-enter, :local(.root) .slide-horizontal-leave + transition : all .5s + +// -- Slide horizontal transition left to right +:local(.root).right + .slide-horizontal-enter + transform : translateX(100%) + opacity : 0 + + .slide-horizontal-leave, .slide-horizontal-enter-active + transform : translateX(0) + opacity : 1 + + .slide-horizontal-leave-active + transform : translateX(-100%) + opacity : 0 + +// -- Slide horizontal transition right to left +:local(.root).left + .slide-horizontal-enter + transform : translateX(-100%) + opacity : 0 + + .slide-horizontal-leave, .slide-horizontal-enter-active + transform : translateX(0) + opacity : 1 + + .slide-horizontal-leave-active + transform : translateX(100%) + opacity : 0 From 8f2734dc511e3d06db51b7687be8a0117f2308ed Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sun, 9 Aug 2015 03:19:26 +0200 Subject: [PATCH 04/37] Add date picker initial version --- components/calendar/index.cjsx | 7 +++++++ components/date_picker/index.cjsx | 35 +++++++++++++++++++++++++++++++ components/date_picker/style.styl | 34 ++++++++++++++++++++++++++++++ components/date_utils.coffee | 29 +++++++++++++++++++++++-- 4 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 components/date_picker/index.cjsx create mode 100644 components/date_picker/style.styl diff --git a/components/calendar/index.cjsx b/components/calendar/index.cjsx index c7286a31..4463ce8d 100644 --- a/components/calendar/index.cjsx +++ b/components/calendar/index.cjsx @@ -8,6 +8,7 @@ module.exports = React.createClass # -- States & Properties propTypes: className: React.PropTypes.string + onChange: React.PropTypes.func selectedDate: React.PropTypes.object viewDate: React.PropTypes.object @@ -20,6 +21,9 @@ module.exports = React.createClass selectedDate: @props.selectedDate viewDate: @props.viewDate + componentDidUpdate: (prevProps, prevState) -> + @props.onChange? @ if prevState.selectedDate.getTime() != @state.selectedDate.getTime() + # -- Events onDayClick: (event) -> day = parseInt(event.target.textContent) @@ -90,3 +94,6 @@ module.exports = React.createClass + + getValue: -> + @state.selectedDate diff --git a/components/date_picker/index.cjsx b/components/date_picker/index.cjsx new file mode 100644 index 00000000..8e1b8810 --- /dev/null +++ b/components/date_picker/index.cjsx @@ -0,0 +1,35 @@ +css = require './style' +Calendar = require '../calendar' +dateUtils = require '../date_utils' + +module.exports = React.createClass + + # -- States & Properties + propTypes: + className: React.PropTypes.string + initialDate: React.PropTypes.object + + getDefaultProps: -> + className: '' + initialDate: new Date() + + getInitialState: -> + date: @props.initialDate + + # -- Events + onCalendarChange: (calendar) -> + @setState + date: dateUtils.cloneDatetime(calendar.getValue()) + + # -- Render + render: -> +
+
+

{dateUtils.weekDayInWords(@state.date.getDay())}

+

{dateUtils.monthInShortWords(@state.date)}

+

{@state.date.getDate()}

+

{@state.date.getFullYear()}

+
+ + +
diff --git a/components/date_picker/style.styl b/components/date_picker/style.styl new file mode 100644 index 00000000..e5bebc69 --- /dev/null +++ b/components/date_picker/style.styl @@ -0,0 +1,34 @@ +@import '../constants' + +dayWidth = 38px +innerPadding = 10px +calendarWidth = dayWidth * 7 +totalWidth = calendarWidth + innerPadding * 2 + +:local(.root) + text-align : center + width : totalWidth + +:local(.header) + background-color : ACCENT + color : white + +:local(.headerWeekday) + background-color : darken(ACCENT, 20%) + font-size : 14px + line-height : 1.8 + width : 100% + +:local(.headerMonth) + font-size : 18px + padding : 10px + text-transform : uppercase + +:local(.headerDay) + font-size : 50px + line-height : 40px + +:local(.headerYear) + font-size : 18px + opacity : .7 + padding : 10px diff --git a/components/date_utils.coffee b/components/date_utils.coffee index 67b0c1af..7a21c5c4 100644 --- a/components/date_utils.coffee +++ b/components/date_utils.coffee @@ -1,9 +1,9 @@ module.exports = daysInMonth: (date) -> - (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate() + (new Date(date.getFullYear(), date.getMonth(), 0)).getDate() firstWeekDay: (date) -> - (new Date(date.getFullYear(), date.getMonth() + 1, 1)).getDay() + (new Date(date.getFullYear(), date.getMonth(), 1)).getDay() monthInWords: (date) -> switch (date.getMonth()) @@ -20,6 +20,21 @@ module.exports = when 10 then 'November' when 11 then 'December' + monthInShortWords: (date) -> + switch (date.getMonth()) + when 0 then 'Jan' + when 1 then 'Feb' + when 2 then 'Mar' + when 3 then 'Apr' + when 4 then 'May' + when 5 then 'Jun' + when 6 then 'Jul' + when 7 then 'Aug' + when 8 then 'Sep' + when 9 then 'Oct' + when 10 then 'Nov' + when 11 then 'Dec' + weekDayInWords: (day) -> switch (day) when 0 then 'Sunday' @@ -30,6 +45,16 @@ module.exports = when 5 then 'Friday' when 6 then 'Saturday' + weekDayInShortWords: (day) -> + switch (day) + when 0 then 'Sun' + when 1 then 'Mon' + when 2 then 'Tue' + when 3 then 'Wed' + when 4 then 'Thu' + when 5 then 'Fri' + when 6 then 'Sat' + addDays: (date, days) -> newDate = @cloneDatetime(date) newDate.setDate(date.getDate() + days) From 9ade3346f6e926365295c9e58bc973444f5a377d Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 12 Aug 2015 22:45:43 +0200 Subject: [PATCH 05/37] Add behavior to select the hour --- components/clock/index.cjsx | 117 ++++++++++++++++++++++++++++++++++++ components/clock/style.styl | 94 +++++++++++++++++++++++++++++ 2 files changed, 211 insertions(+) create mode 100644 components/clock/index.cjsx create mode 100644 components/clock/style.styl diff --git a/components/clock/index.cjsx b/components/clock/index.cjsx new file mode 100644 index 00000000..f2dce855 --- /dev/null +++ b/components/clock/index.cjsx @@ -0,0 +1,117 @@ +css = require './style' + +module.exports = React.createClass + + getInitialState: -> + angle: 0 + pressed: false + + # -- Lifecycle + componentDidMount: -> + clockBounds = @refs.clock.getDOMNode().getBoundingClientRect() + @setState + center: @_getClockCenter() + minRadius: @_getMinRadius() + maxRadius: @_getMaxRadius() + + onKnobMouseDown: -> + @setState pressed: true + _addEventsToDocument(@getMouseEventMap()) + + getMouseEventMap: -> + mousemove: @onMouseMove + mouseup: @onMouseUp + + onMouseMove: (event) -> + radius = @_getClickRadius(event) + if (@state.minRadius < radius < @state.maxRadius) + @setState angle: @_trimValue(@_getAngleFromClickEvent(event)) + + onMouseUp: -> + @setState pressed: false + @end(@getMouseEventMap()) + + end: (events) -> + _removeEventsFromDocument(events) + + _getClockCenter: -> + bounds = @refs.clock.getDOMNode().getBoundingClientRect() + return { + x: bounds.left + (bounds.right - bounds.left)/2 + y: bounds.top + (bounds.bottom - bounds.top) /2 + } + + _getMinRadius: -> + bounds = @refs.clockInner.getDOMNode().getBoundingClientRect() + (bounds.right - bounds.left)/2 + + _getMaxRadius: -> + bounds = @refs.root.getDOMNode().getBoundingClientRect() + (bounds.right - bounds.left)/2 + + _getAngleFromClickEvent: (event) -> + mouse = _getMousePosition(event) + _angle360(@state.center.x, @state.center.y, mouse.x, mouse.y) + + onClockClick: (event) -> + radius = @_getClickRadius(event) + if (@state.minRadius < radius < @state.maxRadius) + @setState angle: @_trimValue(@_getAngleFromClickEvent(event)) + + _trimValue: (angle) -> + step = 360/12 + step * Math.round(angle/step) + + _getClickRadius: (event) -> + mouse = _getMousePosition(event) + x = @state.center.x - mouse.x + y = @state.center.y - mouse.y + r = Math.sqrt(x * x + y * y) + return r + + render: -> + className = '' + className += ' pressed' if @state.pressed + handStyle = + transform: "rotate(#{@state.angle}deg)" + +
+
+
+
+
+
+ { {i} for i in [1..12] } +
+
+
+
+ +_pauseEvent = (event) -> + event.stopPropagation() + event.preventDefault() + event.returnValue = false + event.cancelBubble = true + return null + +_getMousePosition = (event) -> + x: event.pageX + y: event.pageY + +_angle = (cx, cy, ex, ey) -> + dy = ey - cy; + dx = ex - cx; + theta = Math.atan2(dy, dx) + Math.PI/2 + theta = theta * 180 / Math.PI + return theta + +_angle360 = (cx, cy, ex, ey) -> + theta = _angle(cx, cy, ex, ey) + theta = 360 + theta if (theta < 0) + return theta + +_addEventsToDocument = (events) -> + document.addEventListener(key, events[key], false) for key of events + +_removeEventsFromDocument = (events) -> + document.removeEventListener(key, events[key], false) for key of events diff --git a/components/clock/style.styl b/components/clock/style.styl new file mode 100644 index 00000000..1bdc26d0 --- /dev/null +++ b/components/clock/style.styl @@ -0,0 +1,94 @@ +rootSize = 266px +innerPadding = 10px +knobSize = 40px +clockSize = rootSize - knobSize - innerPadding +clockSizeInner = clockSize - knobSize - innerPadding +clockRadius = (clockSize/2) +hourSize = 30px +handWidth = 2px + +:local(.root) + border-radius : 50% + border : 1px solid red + height : rootSize + margin-left : 35px + padding : (hourSize/2) + position : relative + width : rootSize + +:local(.clock) + border-radius : 50% + height : clockSize + left : 50% + margin-left : -(clockSize/2) + margin-top : -(clockSize/2) + position : absolute + top : 50% + width : clockSize + +:local(.clockInner) + border-radius : 50% + border: 1px solid blue + height : clockSizeInner + left : 50% + margin-left : -(clockSizeInner/2) + margin-top : -(clockSizeInner/2) + position : absolute + top : 50% + width : clockSizeInner + z-index : 2 + +:local(.hand) + background-color : blue + bottom : 50% + display : block + height : clockRadius - (knobSize/2) + left : 50% + margin-left : -(handWidth/2) + position : absolute + transform-origin : 0 100% + width : handWidth + + &:before + background-color : blue + border-radius : 50% + bottom : 0 + content : '' + height : 8px + left : 50% + margin-bottom : -4px + margin-left : -4px + position : absolute + width : 8px + +:local(.knob) + cursor : pointer + border-radius : 50% + background-color : blue + height : knobSize + left : 50% + margin-left : -(knobSize/2) + position : absolute + top : -(knobSize) + width : knobSize + +:local(.root).pressed :local(.knob) + background-color : pink + +:local(.hour) + color : #444 + border-radius : 50% + height : hourSize + line-height : hourSize + margin-left : -(hourSize/2) + pointer-events : none + margin-top : -(hourSize/2) + position : absolute + text-align : center + width : hourSize + +:local(.hours) + for num in 1 2 3 4 5 6 7 8 9 10 11 12 + :local(.hour):nth-child({num}) + left : (clockRadius + clockRadius * sin(PI * 2 * (num/12)))px + top : (clockRadius - clockRadius * cos(PI * 2 * (num/12)))px From 0f71b32e7c4528368f1074f555e03e205f2a7e0c Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 13 Aug 2015 02:39:40 +0200 Subject: [PATCH 06/37] Improve clock adding two levels --- components/clock/index.cjsx | 162 +++++++++++++++++++++--------------- components/clock/style.styl | 102 ++++++++++++++--------- 2 files changed, 161 insertions(+), 103 deletions(-) diff --git a/components/clock/index.cjsx b/components/clock/index.cjsx index f2dce855..01d9ee80 100644 --- a/components/clock/index.cjsx +++ b/components/clock/index.cjsx @@ -2,97 +2,129 @@ css = require './style' module.exports = React.createClass + # -- States & Properties + propTypes: + className : React.PropTypes.string + + getDefaultProps: -> + className : '' + getInitialState: -> - angle: 0 - pressed: false + clockCenter : undefined + clockCenter : undefined + clockInnerMaxRadius : undefined + clockInnerMinRadius : undefined + clockMaxRadius : undefined + clockMinRadius : undefined + handInner : false + pressed : false + handAngle : 0 # -- Lifecycle componentDidMount: -> - clockBounds = @refs.clock.getDOMNode().getBoundingClientRect() @setState - center: @_getClockCenter() - minRadius: @_getMinRadius() - maxRadius: @_getMaxRadius() - - onKnobMouseDown: -> - @setState pressed: true - _addEventsToDocument(@getMouseEventMap()) - - getMouseEventMap: -> - mousemove: @onMouseMove - mouseup: @onMouseUp - - onMouseMove: (event) -> - radius = @_getClickRadius(event) - if (@state.minRadius < radius < @state.maxRadius) - @setState angle: @_trimValue(@_getAngleFromClickEvent(event)) - - onMouseUp: -> - @setState pressed: false - @end(@getMouseEventMap()) - - end: (events) -> - _removeEventsFromDocument(events) + clockCenter : @_getClockCenter() + clockMaxRadius : @_getRefRadius('root') + clockMinRadius : @_getRefRadius('clockHolder') + clockInnerMaxRadius : @_getRefRadius('clockHolder') + clockInnerMinRadius : @_getRefRadius('innerClockHolder') + # -- Position Functions _getClockCenter: -> - bounds = @refs.clock.getDOMNode().getBoundingClientRect() + bounds = @refs.root.getDOMNode().getBoundingClientRect() return { x: bounds.left + (bounds.right - bounds.left)/2 y: bounds.top + (bounds.bottom - bounds.top) /2 } - _getMinRadius: -> - bounds = @refs.clockInner.getDOMNode().getBoundingClientRect() + _getRefRadius: (ref) -> + bounds = @refs[ref].getDOMNode().getBoundingClientRect() (bounds.right - bounds.left)/2 - _getMaxRadius: -> - bounds = @refs.root.getDOMNode().getBoundingClientRect() - (bounds.right - bounds.left)/2 + _isInsideClockArea: (position) -> + @state.clockMinRadius < @_getPositionRadius(position) < @state.clockMaxRadius - _getAngleFromClickEvent: (event) -> - mouse = _getMousePosition(event) - _angle360(@state.center.x, @state.center.y, mouse.x, mouse.y) + _isInsideClockInnerArea: (position) -> + @state.clockInnerMinRadius < @_getPositionRadius(position) < @state.clockInnerMaxRadius - onClockClick: (event) -> - radius = @_getClickRadius(event) - if (@state.minRadius < radius < @state.maxRadius) - @setState angle: @_trimValue(@_getAngleFromClickEvent(event)) + _getPositionRadius: (position) -> + x = @state.clockCenter.x - position.x + y = @state.clockCenter.y - position.y + Math.sqrt(x * x + y * y) - _trimValue: (angle) -> + # -- Helper Functions + _positionToAngle: (position) -> + _angle360(@state.clockCenter.x, @state.clockCenter.y, position.x, position.y) + + _trimAngleToValue: (angle) -> step = 360/12 step * Math.round(angle/step) - _getClickRadius: (event) -> - mouse = _getMousePosition(event) - x = @state.center.x - mouse.x - y = @state.center.y - mouse.y - r = Math.sqrt(x * x + y * y) - return r + _getMouseEventMap: -> + mousemove: @onMouseMove + mouseup: @onMouseUp + + _moveHandToPosition: (position) -> + trimAngle = @_trimAngleToValue(@_positionToAngle(position)) + if @_isInsideClockInnerArea(position) + @setState + handAngle: trimAngle + handInner: true + else if @_isInsideClockArea(position) + @setState + handAngle: trimAngle + handInner: false + + _end: (events) -> + _removeEventsFromDocument(events) + + # -- Event handlers + onClockMouseDown: (event) -> + position = _getMousePosition(event) + @_moveHandToPosition(position) + _addEventsToDocument(@_getMouseEventMap()) + @setState pressed: true + + onKnobMouseDown: (event) -> + _addEventsToDocument(@_getMouseEventMap()) + @setState pressed: true + + onMouseMove: (event) -> + position = _getMousePosition(event) + @_moveHandToPosition(position) + + onMouseUp: -> + @_end(@_getMouseEventMap()) + @setState pressed: false render: -> - className = '' - className += ' pressed' if @state.pressed - handStyle = - transform: "rotate(#{@state.angle}deg)" + className = @props.className + className += css.root + className += " hand-inner" if @state.handInner + className += " pressed" if @state.pressed + handStyle = transform: "rotate(#{@state.handAngle}deg)" -
+
+ {# Main Clock }
-
-
-
-
- { {i} for i in [1..12] } -
+ { {i} for i in [13..23] } + 00
-
-
-_pauseEvent = (event) -> - event.stopPropagation() - event.preventDefault() - event.returnValue = false - event.cancelBubble = true - return null + {# Inner Clock } +
+ { {i} for i in [1..12] } +
+ + {# Support area holders } +
+
+ + {# Clock hand } +
+
+
+
_getMousePosition = (event) -> x: event.pageX diff --git a/components/clock/style.styl b/components/clock/style.styl index 1bdc26d0..b72d4396 100644 --- a/components/clock/style.styl +++ b/components/clock/style.styl @@ -1,45 +1,48 @@ -rootSize = 266px -innerPadding = 10px -knobSize = 40px -clockSize = rootSize - knobSize - innerPadding -clockSizeInner = clockSize - knobSize - innerPadding -clockRadius = (clockSize/2) -hourSize = 30px +rootSize = 250px +innerPadding = 12px +knobSize = 28px +hourSize = 28px handWidth = 2px +handDotSize = 8px +clockSize = rootSize - knobSize - innerPadding +clockRadius = clockSize / 2 +clockHolderSize = clockSize - knobSize - innerPadding +innerClockSize = clockHolderSize - knobSize - innerPadding +clockInnerRadius = innerClockSize / 2 +innerClockHolderSize = innerClockSize - knobSize - innerPadding + +centeredCircle(circleSize) + border-radius : 50% + height : circleSize + left : 50% + margin-left : -(circleSize/2) + margin-top : -(circleSize/2) + position : absolute + top : 50% + width : circleSize :local(.root) border-radius : 50% - border : 1px solid red + background-color : #ccc height : rootSize - margin-left : 35px padding : (hourSize/2) position : relative width : rootSize :local(.clock) - border-radius : 50% - height : clockSize - left : 50% - margin-left : -(clockSize/2) - margin-top : -(clockSize/2) - position : absolute - top : 50% - width : clockSize + centeredCircle clockSize -:local(.clockInner) - border-radius : 50% - border: 1px solid blue - height : clockSizeInner - left : 50% - margin-left : -(clockSizeInner/2) - margin-top : -(clockSizeInner/2) - position : absolute - top : 50% - width : clockSizeInner - z-index : 2 +:local(.clockHolder) + centeredCircle clockHolderSize + +:local(.innerClock) + centeredCircle innerClockSize + +:local(.innerClockHolder) + centeredCircle innerClockHolderSize :local(.hand) - background-color : blue + background-color : magenta bottom : 50% display : block height : clockRadius - (knobSize/2) @@ -50,21 +53,24 @@ handWidth = 2px width : handWidth &:before - background-color : blue + background-color : magenta border-radius : 50% bottom : 0 content : '' - height : 8px + height : handDotSize left : 50% - margin-bottom : -4px - margin-left : -4px + margin-bottom : -(handDotSize/2) + margin-left : -(handDotSize/2) position : absolute - width : 8px + width : handDotSize + +:local(.root).hand-inner :local(.hand) + height : clockRadius - (knobSize/2) - knobSize - innerPadding :local(.knob) cursor : pointer border-radius : 50% - background-color : blue + background-color : magenta height : knobSize left : 50% margin-left : -(knobSize/2) @@ -78,6 +84,7 @@ handWidth = 2px :local(.hour) color : #444 border-radius : 50% + background-color : gray height : hourSize line-height : hourSize margin-left : -(hourSize/2) @@ -87,8 +94,27 @@ handWidth = 2px text-align : center width : hourSize -:local(.hours) +:local(.innerHour) + color : purple + border-radius : 50% + height : hourSize + line-height : hourSize + background-color : yellowgreen + margin-left : -(hourSize/2) + pointer-events : none + margin-top : -(hourSize/2) + position : absolute + text-align : center + width : hourSize + +:local(.clock) for num in 1 2 3 4 5 6 7 8 9 10 11 12 :local(.hour):nth-child({num}) - left : (clockRadius + clockRadius * sin(PI * 2 * (num/12)))px - top : (clockRadius - clockRadius * cos(PI * 2 * (num/12)))px + left : ((clockRadius) + (clockRadius) * sin(PI * 2 * (num/12))) + top : ((clockRadius) - (clockRadius) * cos(PI * 2 * (num/12))) + +:local(.innerClock) + for num in 1 2 3 4 5 6 7 8 9 10 11 12 + :local(.innerHour):nth-child({num}) + left : (clockInnerRadius + clockInnerRadius * sin(PI * 2 * (num/12))) + top : (clockInnerRadius - clockInnerRadius * cos(PI * 2 * (num/12))) From 81150bc95168d0063faeef5728ed05bb72fb601c Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 13 Aug 2015 02:42:29 +0200 Subject: [PATCH 07/37] Add current spec files --- spec/components/calendar.cjsx | 5 +++++ spec/components/clock.cjsx | 5 +++++ spec/components/date_picker.cjsx | 5 +++++ spec/index.cjsx | 15 ++++----------- 4 files changed, 19 insertions(+), 11 deletions(-) create mode 100644 spec/components/calendar.cjsx create mode 100644 spec/components/clock.cjsx create mode 100644 spec/components/date_picker.cjsx diff --git a/spec/components/calendar.cjsx b/spec/components/calendar.cjsx new file mode 100644 index 00000000..3dee19b5 --- /dev/null +++ b/spec/components/calendar.cjsx @@ -0,0 +1,5 @@ +Calendar = require '../../components/calendar' + +module.exports = React.createClass + render: -> + diff --git a/spec/components/clock.cjsx b/spec/components/clock.cjsx new file mode 100644 index 00000000..16388ff5 --- /dev/null +++ b/spec/components/clock.cjsx @@ -0,0 +1,5 @@ +Clock = require '../../components/clock' + +module.exports = React.createClass + render: -> + diff --git a/spec/components/date_picker.cjsx b/spec/components/date_picker.cjsx new file mode 100644 index 00000000..9970a910 --- /dev/null +++ b/spec/components/date_picker.cjsx @@ -0,0 +1,5 @@ +DatePicker = require '../../components/date_picker' + +module.exports = React.createClass + render: -> + diff --git a/spec/index.cjsx b/spec/index.cjsx index 876c4001..3935ae4c 100644 --- a/spec/index.cjsx +++ b/spec/index.cjsx @@ -12,6 +12,9 @@ Form = require './components/form' Progress = require './components/progress' Slider = require './components/slider' Switch = require './components/switch' +Calendar = require './components/calendar' +DatePicker = require './components/date_picker' +Clock = require './components/clock' Test = React.createClass @@ -20,17 +23,7 @@ Test = React.createClass

React-Toolbox New way for create

-