Refs #2892: adding periodManager actions css comp.

3 files changed, 104 insertions, 19 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>
     )
   }
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index 07758d56c..342e6503d 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -117,7 +117,6 @@ table, .table
           padding: 5px 15px
 
         > li.delete-action
-
           > a, > button
             display: block
             position: relative
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 2d0a758d0..ddb4e4116 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -15,10 +15,10 @@
         transform: translateY(-1.4em)
 
   .t2e-head > .td, .t2e-item > .td-group > .td
-    height: 51px
+    height: 65px
 
   .t2e-head > .td
-    line-height: 38px
+    line-height: 50px
 
     > span
       display: inline-block
@@ -74,7 +74,7 @@
           background-color: transparent
 
           &.included
-            background-color: rgba($gold, 0.7)
+            background-color: rgba($gold, 0.5)
 
     > .td-group
       width: 34px
@@ -91,26 +91,15 @@
 
       > .td
         &.in_periods
-          background-color: rgba($gold, 0.7)
-          border-left-color: rgba($gold, 0.7)
-          border-right-color: rgba($gold, 0.7)
+          background-color: rgba($gold, 0.5)
+          border-left-color: rgba($gold, 0.5)
+          border-right-color: rgba($gold, 0.5)
 
           &.start_period
             border-left-color: rgba($grey, 0.5)
           &.end_period
             border-right-color: rgba($grey, 0.5)
 
-  .period_manager
-    display: block
-    height: auto
-    word-wrap: normal
-    white-space: nowrap
-    position: absolute
-    left: 8px
-    top: 50%
-    transform: translateY(-50%)
-    z-index: 5
-
   .form-group > .month_selector
     > .btn.btn-default
       background-color: rgba($grey, 0.15)
@@ -128,3 +117,66 @@
       border-radius: 0 0 4px 4px
       max-height: 230px
       overflow: auto
+
+  .period_manager
+    display: block
+    height: auto
+    word-wrap: normal
+    white-space: nowrap
+    position: absolute
+    left: 8px
+    top: 50%
+    transform: translateY(-50%)
+    z-index: 5
+
+    > *
+      display: inline-block
+      vertical-align: middle
+      margin: 0
+
+      &.dropdown
+        margin-left: 5px
+
+    .btn.dropdown-toggle
+      color: $blue
+      background-color: rgba(#fff, 0)
+      padding: 1px 5px
+      border-radius: 0
+      transition: 0.2s
+
+      &:hover, &:focus
+        background-color: rgba(#fff, 1)
+        transition: 0.2s
+
+    .open > .btn.dropdown-toggle
+      background-color: rgba(#fff, 1)
+      border-color: $blue
+      box-shadow: none
+      transition: 0.2s
+
+    .dropdown-menu
+      margin: 0
+      border-radius: 0
+      box-shadow: 0 0 3px rgba($darkgrey, 0.25)
+
+      > li > a, > li > button
+        padding: 5px 15px
+
+      > li.delete-action
+        > a, > button
+          display: block
+          position: relative
+          margin-top: 11px
+
+          &:before
+            content: ''
+            display: block
+            position: absolute
+            left: 15px
+            right: 15px
+            top: -6px
+            height: 1px
+            background-color: $grey
+
+          .fa:first-child
+            margin-right: 0.5em