From b795a187568553a7ed786284b3d982bb3f6a1839 Mon Sep 17 00:00:00 2001 From: Nathan Reyes Date: Sat, 25 Nov 2017 21:17:56 -0600 Subject: [PATCH 1/7] Add changes --- src/components/CalendarDay.vue | 43 ++++++++++++++----- src/components/CalendarPane.vue | 2 +- src/components/DatePicker.vue | 5 ++- src/components/Popover.vue | 73 +++++++++++++++------------------ src/styles/vars.sass | 2 +- 5 files changed, 72 insertions(+), 53 deletions(-) diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 04ec2e2bb..177fd0db0 100755 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -1,5 +1,6 @@ @@ -205,9 +189,6 @@ export default { touchState: {}, navForceHidden: false, weeksTransitioning: false, - popoverDayInfo: null, - popoverAttributes: null, - popoverVisibility: 'hidden', }; }, computed: { @@ -283,30 +264,6 @@ export default { this.preloadPages(); }, methods: { - popoverExists(attr) { - if (!attr) return false; - return Object.values(attr).find(a => a.popover); - }, - daySelect() { - console.log('day select'); - this.popoverVisibility = 'focus'; - }, - dayMouseEnter(d, attr) { - this.popoverDayInfo = d; - this.popoverAttributes = attr; - this.popoverVisibility = this.popoverExists(attr) ? 'visible' : 'hidden'; - }, - dayMouseLeave() { - this.popoverDayInfo = null; - this.popoverAttributes = null; - this.popoverVisibility = 'hidden'; - }, - dayUpdated(d, attr) { - if (d === this.popoverDayInfo) { - this.popoverAttributes = attr; - this.popoverVisibility = this.popoverExists(attr) ? 'visible' : 'hidden'; - } - }, navPageSelected(page) { this.navForceHidden = true; this.move(page); diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue index 826e2fd1b..2df1b1ebd 100755 --- a/src/components/DatePicker.vue +++ b/src/components/DatePicker.vue @@ -6,6 +6,7 @@ :to-page.sync='toPage_' :theme-styles='themeStyles_' :disabled-attribute='disabledAttribute' + :date-formatter='dateFormatter' @drag='dragValue = $event' v-bind='$attrs' v-on='filteredListeners()' @@ -40,6 +41,7 @@ :to-page.sync='toPage_' :theme-styles='themeStyles_' :disabled-attribute='disabledAttribute' + :date-formatter='dateFormatter' @drag='dragValue = $event' v-bind='$attrs' v-on='filteredListeners()'> diff --git a/src/components/Popover.vue b/src/components/Popover.vue index 34dbe0ef1..b109e4e81 100755 --- a/src/components/Popover.vue +++ b/src/components/Popover.vue @@ -17,7 +17,7 @@ @after-leave='afterContentLeave'>
defaults.popoverDirection }, align: { type: String, default: () => defaults.popoverAlign }, visibility: { type: String, default: () => defaults.popoverVisibility }, + isInteractive: Boolean, forceHidden: Boolean, toggleVisibleOnClick: Boolean, // Only valid when visibility === "focus" contentStyle: Object, @@ -94,7 +95,7 @@ export default { }, visibility() { // Reset managed visible state - // this.visibleManaged = false; + this.visibleManaged = false; }, }, created() { @@ -136,12 +137,18 @@ export default { // } // }, mousemove() { - if (this.visibility === VISIBILITIES.HOVER && !this.forceHidden && !this.contentTransitioning) { + if ( + (this.visibility === VISIBILITIES.HOVER || !this.visibilityIsManaged) && + !this.forceHidden && + !this.contentTransitioning) { this.visibleManaged = true; } }, mouseleave(e) { - if (this.visibility === VISIBILITIES.HOVER && !this.forceHidden && !elementHasAncestor(e.relatedTarget, this.$refs.popover)) { + if ( + (this.visibility === VISIBILITIES.HOVER || !this.visibilityIsManaged) && + !this.forceHidden && + !elementHasAncestor(e.relatedTarget, this.$refs.popover)) { this.visibleManaged = false; } }, @@ -206,10 +213,12 @@ export default { &.direction-left.align-bottom, &.direction-right.align-bottom top: initial bottom: 0 + &.interactive + .popover-content-wrapper + pointer-events: all .popover-content-wrapper position: relative outline: none - pointer-events: initial &.align-center transform: translateX(-50%) &.align-middle diff --git a/src/utils/attributeStore.js b/src/utils/attributeStore.js index 9c7c653c7..667d37fc7 100644 --- a/src/utils/attributeStore.js +++ b/src/utils/attributeStore.js @@ -17,9 +17,12 @@ const AttributeStore = (attrs) => { // ...and the first matching date info find(dayInfo) { return list - .map(attribute => ({ attribute, dateInfo: attribute.includesDay(dayInfo) })) - .filter(a => a.dateInfo) - .sort((a, b) => a.dateInfo.compare(b.dateInfo)); + .map(attribute => ({ + ...attribute, + targetDate: attribute.includesDay(dayInfo), + })) + .filter(a => a.targetDate) + .sort((a, b) => a.targetDate.compare(b.targetDate)); }, }; }; diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 1dc2ea9bd..600ddd211 100755 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -55,6 +55,8 @@ const defaults = { border: '0', }, popover: { + isDark: true, + isInteractive: true, label: popoverLabel, }, }), @@ -69,6 +71,7 @@ const defaults = { border: '0', }, popover: { + isDark: true, label: popoverLabel, }, }), diff --git a/src/utils/helpers.js b/src/utils/helpers.js index f837184c7..6562fa739 100755 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -151,7 +151,7 @@ export const elementPositionInAncestor = (el, ancestor) => { export const objectFromArray = (array, keyProp = 'key') => { if (!array || !array.length) return {}; - return array.reduce((prev, curr) => ({ ...prev, ...{ [`${curr[keyProp]}`]: curr } }), {}); + return array.reduce((obj, curr) => { obj[curr[keyProp]] = curr[keyProp]; return obj; }, {}); }; export const mixinOptionalProps = (source, target, props) => { From 38dd0d8a0f251ba9f64ade8eec4cf47a847da076 Mon Sep 17 00:00:00 2001 From: Nathan Reyes Date: Wed, 27 Dec 2017 09:43:02 -0600 Subject: [PATCH 7/7] Commit latest changes --- .../components/home/examples/ExAttributes.vue | 4 - .../home/sections/SectionPopovers.vue | 6 +- src/components/CalendarDay.vue | 152 ++++++++++-------- 3 files changed, 91 insertions(+), 71 deletions(-) diff --git a/docs/components/home/examples/ExAttributes.vue b/docs/components/home/examples/ExAttributes.vue index 1fb000906..45f6c4c25 100755 --- a/docs/components/home/examples/ExAttributes.vue +++ b/docs/components/home/examples/ExAttributes.vue @@ -101,10 +101,6 @@ export default { backgroundColor: todo.color, opacity: todo.isComplete ? 0.3 : 1, }, - contentHoverStyle: { - backgroundColor: 'rgba(0, 0, 0, 0.1)', - cursor: 'pointer', - }, popover: { label: todo.description, }, diff --git a/docs/components/home/sections/SectionPopovers.vue b/docs/components/home/sections/SectionPopovers.vue index aa4e05f7e..2e712459c 100755 --- a/docs/components/home/sections/SectionPopovers.vue +++ b/docs/components/home/sections/SectionPopovers.vue @@ -9,10 +9,10 @@
    -
  • Supports both simple toolips and custom slot content
    • +
  • Assign simple toolips and custom slot content per attribute
  • Makes inline editing possible for custom data
    • -
  • Optionally animated on appearance or disappearance
    • -
  • Use content styles to properly display day content
    • +
  • Multiple visibility options like 'hover' and 'focus'
    • +
  • Assignable slots for header and footer content
 diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 7287a032c..be4b9ff2a 100755 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -8,65 +8,67 @@ :content-style='popoverContentStyle' :is-interactive='popoverIsInteractive' toggle-visible-on-click> -
- - -
-
-
-
- - -
+ + +
- {{ label }} + class='c-day-background' + :style='background.style'>
- + + +
-
- - -
+ ref='dayContent' + class='c-day-content' + :style='contentStyle_' + @click='click' + @mouseenter='mouseenter' + @mouseover='mouseover' + @mouseleave='mouseleave'> + {{ label }}
- +
+ +
-
- - -
+ class='c-day-dots' + :style='dotsStyle'> + + +
+
+ +
+
+ +
@@ -139,11 +141,26 @@ export default { inMonth() { return this.dayInfo.inMonth; }, + dayOpacityStyle() { + const dayCell = this.styles.dayCell; + const dayCellNotInMonth = this.styles.dayCellNotInMonth; + // Assign default opacity + let opacity = (dayCell && dayCell.opacity) || 1; + // Reassign to 'not in month' opacity if it was specified + if (!this.inMonth && Object.prototype.hasOwnProperty.call(dayCellNotInMonth, 'opacity')) opacity = dayCellNotInMonth.opacity; + return { + opacity, + }; + }, dayCellStyle() { - return this.inMonth ? this.styles.dayCell : { + // Merge 'not in month' style if needed + const style = this.inMonth ? this.styles.dayCell : { ...this.styles.dayCell, ...this.styles.dayCellNotInMonth, }; + // Due to some rendering glitches in Chrome, we need to remove opacity from top level style + delete style.opacity; + return style; }, contentStyle_() { let style = this.contentStyle; @@ -278,7 +295,7 @@ export default { }, }; if (dateInfo.isDate) { - background.wrapperClass = `c-day-layer c-day-box-center-center${highlight.animated ? ' c-day-scale-enter c-day-scale-leave' : ''}`; + background.wrapperClass = `c-day-box-center-center${highlight.animated ? ' c-day-scale-enter c-day-scale-leave' : ''}`; } else { const onStart = dateInfo.startTime === this.dateTime; const onEnd = dateInfo.endTime === this.dateTime; @@ -287,25 +304,25 @@ export default { const endWidth = '95%'; // Is the day date on the highlight start and end date if (onStart && onEnd) { - background.wrapperClass = `c-day-layer c-day-box-center-center${highlight.animated ? ' c-day-scale-enter c-day-scale-leave' : ''}`; + background.wrapperClass = `c-day-box-center-center${highlight.animated ? ' c-day-scale-enter c-day-scale-leave' : ''}`; background.style.width = endWidth; background.style.borderWidth = borderWidth; background.style.borderRadius = `${borderRadius} ${borderRadius} ${borderRadius} ${borderRadius}`; // Is the day date on the highlight start date } else if (onStart) { - background.wrapperClass = `c-day-layer c-day-box-right-center shift-right${highlight.animated ? ' c-day-slide-left-enter' : ''}`; + background.wrapperClass = `c-day-box-right-center shift-right${highlight.animated ? ' c-day-slide-left-enter' : ''}`; background.style.width = endWidth; background.style.borderWidth = `${borderWidth} 0 ${borderWidth} ${borderWidth}`; background.style.borderRadius = `${borderRadius} 0 0 ${borderRadius}`; // Is the day date on the highlight end date } else if (onEnd) { - background.wrapperClass = `c-day-layer c-day-box-left-center shift-left${highlight.animated ? ' c-day-slide-right-enter' : ''}`; + background.wrapperClass = `c-day-box-left-center shift-left${highlight.animated ? ' c-day-slide-right-enter' : ''}`; background.style.width = endWidth; background.style.borderWidth = `${borderWidth} ${borderWidth} ${borderWidth} 0`; background.style.borderRadius = `0 ${borderRadius} ${borderRadius} 0`; // Is the day date between the highlight start/end dates } else { - background.wrapperClass = 'c-day-layer c-day-box-center-center shift-left-right'; + background.wrapperClass = 'c-day-box-center-center shift-left-right'; background.style.width = '100%'; background.style.borderWidth = `${borderWidth} 0`; background.style.borderRadius = '0'; @@ -374,11 +391,8 @@ export default { @import '../styles/mixins.sass' .c-day-popover - flex: 1 - -.c-day position: relative - overflow: hidden + flex: 1 height: $dayHeight .c-day-layer @@ -388,23 +402,32 @@ export default { top: 0 bottom: 0 pointer-events: none - overflow: hidden .c-day-box-center-center +box() + height: 100% transform-origin: 50% 50% .c-day-box-left-center +box(flex-start) + height: 100% transform-origin: 0% 50% .c-day-box-right-center +box(flex-end) + height: 100% transform-origin: 100% 50% .c-day-box-center-bottom +box(center, flex-end) +.c-day-box-not-in-month + opacity: 0.4 + +.c-day-backgrounds + height: 100% + overflow: hidden + .c-day-background transition: height $backgroundTransitionTime, background-color $backgroundTransitionTime @@ -445,6 +468,7 @@ export default { height: $dayContentHeight font-size: $dayContentFontSize font-weight: $dayContentFontWeight + line-height: 1 border-radius: $dayContentBorderRadius transition: all $dayContentTransitionTime user-select: none