Refs #3152: Adding exception links DOM

4 files changed, 68 insertions, 7 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
index cc1e34c52..8a2681c87 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
@@ -8,15 +8,45 @@ class ExceptionsInDay extends Component {
   }
 
   render() {
-    return (
-      <div className="td">
-      </div>
-    )
+    {/* display add or remove link, only if true in daytypes */}
+    if(this.props.outFromDaytypes == true) {
+      {/* display add or remove link, according to context (presence in period, or not) */}
+      if(this.props.value.current_month[this.props.index].in_periods == true) {
+        return (
+          <div className='td'>
+            <button
+              type='button'
+              className='btn btn-circle'
+              data-actiontype='add'
+            >
+              <span className='fa fa-plus'></span>
+            </button>
+          </div>
+        )
+      } else {
+        return (
+          <div className='td'>
+            <button
+              type='button'
+              className='btn btn-circle'
+              data-actiontype='remove'
+            >
+              <span className='fa fa-times'></span>
+            </button>
+          </div>
+        )
+      }
+    } else {
+      return (
+        <div className='td'></div>
+      )
+    }
   }
 }
 
 ExceptionsInDay.propTypes = {
   value: PropTypes.object.isRequired,
+  outFromDaytypes: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired
 }
 
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
index b9b191792..8cb24f146 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -73,6 +73,7 @@ class Timetable extends Component{
                       <ExceptionsInDay
                         index={i}
                         value={this.props.timetable}
+                        outFromDaytypes={this.props.metas.day_types[d.wday]}
                       />
                     </div>
                   )}
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index 342e6503d..a45736104 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -10,10 +10,40 @@
   span + .fa
     padding-left: 0.5em
 
-  &.btn-link
+  &.btn-link, &.btn-circle
     &, &:focus
       outline: none
 
+  &.btn-circle
+    position: relative
+    top: 50%
+    transform: translateY(-50%)
+    border: 1px solid $blue
+    background-color: transparent
+    width: 22px
+    height: 22px
+    line-height: 22px
+    text-align: center
+    border-radius: 50%
+    padding: 0
+    color: $grey
+
+    > .fa
+      display: block
+      line-height: 20px
+
+    &[data-actiontype='add']
+      &:hover, &:focus, &:active, &.active
+        border-color: $green
+        background-color: $green
+        color: #fff
+
+    &[data-actiontype='remove']
+      &:hover, &:focus, &:active, &.active
+        border-color: $red
+        background-color: $red
+        color: #fff
+
   &.btn-default
     background-color: #fff
     border-color: rgba(#fff, 0.5)
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 2b430fb6a..4d05e0966 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -42,7 +42,7 @@
 
       .day
         display: inline-block
-        width: 34px
+        width: 40px
         padding: 20px 0 6px 0
 
         &.last_wday
@@ -77,7 +77,7 @@
             background-color: rgba($gold, 0.5)
 
     > .td-group
-      width: 34px
+      width: 40px
       > .td
         border-right: 1px solid rgba($grey, 0.5)