add and remove opacity on create link when hovering over event

B-3PO · Oct 26, 2016 · f65cc9e · f65cc9e
1 parent ebd212b
commit f65cc9e
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 4 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-material-event-calendar",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Angular material event calander component",
   "main": [
     "dist/angular-material-event-calendar.js",

diff --git a/dist/angular-material-event-calendar.css b/dist/angular-material-event-calendar.css
@@ -166,6 +166,7 @@ md-event-calendar md-event-calendar-month .md-event-calendar-month-row {
       right: 0; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-create-link {
         -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
             align-self: center;
         text-transform: uppercase;
         font-size: 14px;

diff --git a/dist/angular-material-event-calendar.js b/dist/angular-material-event-calendar.js
@@ -506,6 +506,16 @@ function mdEventCalendarBuilderService($$mdEventCalendarUtil, $templateCache) {
     eventElement.classList.add('md-'+type.className);
     eventElement.setAttribute('md-event-id', hash);
 
+    angular.element(eventElement).on('mouseenter', function(thing) {
+      var createLink = this.parentNode.querySelector('.md-event-calendar-create-link');
+      createLink.style.opacity = "0.0";
+    });
+
+    angular.element(eventElement).on('mouseleave', function() {
+      var createLink = this.parentNode.querySelector('.md-event-calendar-create-link');
+      createLink.style.opacity = null;
+    });
+
     if (type.hasLabel === true) {
       // do not show time for allDay events
       if (type.allDay !== true) {

diff --git a/dist/angular-material-event-calendar.min.css b/dist/angular-material-event-calendar.min.css
diff --git a/dist/angular-material-event-calendar.min.js b/dist/angular-material-event-calendar.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-material-event-calendar",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Ben Rubin",
   "description": "Angular material event calander component",
   "keywords": "material, material-design, design, angular, component, calendar, event, md",

diff --git a/src/js/eventCalendarBuilder.service.js b/src/js/eventCalendarBuilder.service.js
@@ -296,6 +296,16 @@ function mdEventCalendarBuilderService($$mdEventCalendarUtil, $templateCache) {
     eventElement.classList.add('md-'+type.className);
     eventElement.setAttribute('md-event-id', hash);
 
+    angular.element(eventElement).on('mouseenter', function(thing) {
+      var createLink = this.parentNode.querySelector('.md-event-calendar-create-link');
+      createLink.style.opacity = "0.0";
+    });
+
+    angular.element(eventElement).on('mouseleave', function() {
+      var createLink = this.parentNode.querySelector('.md-event-calendar-create-link');
+      createLink.style.opacity = null;
+    });
+
     if (type.hasLabel === true) {
       // do not show time for allDay events
       if (type.allDay !== true) {