Refs #2892: adding periodManager actions css comp.

1 files changed, 35 insertions, 1 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
index 61098d9ea..35968fea3 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
@@ -14,7 +14,41 @@ class PeriodManager extends Component {
         className='period_manager'
         id={this.props.value.id}
       >
-        <strong>{(this.props.value.period_start.split('-')[2]) + ' > ' + actions.getHumanDate(this.props.value.period_end, 3)}</strong>
+        <p className='strong'>
+          {actions.getHumanDate(this.props.value.period_start, 3).substr(0, 7) + ' > ' + actions.getHumanDate(this.props.value.period_end, 3)}
+        </p>
+
+        <div className='dropdown'>
+          <div
+            className='btn dropdown-toggle'
+            id='period_actions'
+            data-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='true'
+          >
+            <span className='fa fa-cog'></span>
+          </div>
+          <ul
+            className='dropdown-menu'
+            aria-labelledby='date_selector'
+          >
+            <li>
+              <button
+                type='button'
+              >
+                Action
+              </button>
+            </li>
+            <li className='delete-action'>
+              <button
+                type='button'
+              >
+                <span className='fa fa-trash'></span>
+                Action
+              </button>
+            </li>
+          </ul>
+        </div>
       </div>
     )
   }