Tidy up menu toggle buttons

silverstripe · Oct 16, 2018 · 475f6e2 · 475f6e2
1 parent 3e2ce31
commit 475f6e2
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 31 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/Menu/Menu.scss b/client/src/components/Menu/Menu.scss
@@ -129,7 +129,7 @@
     background-color: $base-menu-bg;
     box-shadow: inset $border-color -1px 0 0;
     position: relative;
-    padding-left: 0;
+    padding: 0 1px 0 0;
     justify-content: flex-end;
     border-top: 1px solid rgba($border-color, .5);
 
@@ -140,49 +140,73 @@
         display: none;
       }
     }
-
-    a,
-    a.toggle-expand {
-      padding-top: 14px;
-      padding-bottom: 14px;
-    }
   }
 
-
-
   .sticky-toggle {
+    position: relative;
+  }
+
+  .sticky-toggle__button {
+    position: relative;
     text-indent: -999em;
     background-color: transparent;
-    background-image: url("../images/sticky-toggle-off.png");
-    background-repeat: no-repeat;
-    background-position: center center;
     border: 0;
     transition: position $transition-speed-fast;
-    width: 24px;
-    margin-right: -3px;
+    width: 28px;
+    height: 54px;
+    padding: 0 8px;
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-radius: 50%;
+      content: "";
+      transform: translate(-50%, -50%);
+    }
+
+    &:before {
+      width: 13px;
+      height: 13px;
+      border: solid 1px $gray-600;
+    }
+
+    &:after {
+      display: none;
+      width: 8px;
+      height: 8px;
+      background: $gray-600;
+      border-radius: 50%;
+    }
 
     &:hover {
+      background-color: $base-menu;
       box-shadow: 0 0 0;
       cursor: pointer;
 
       // When the button is hovered, show the status indicator
-      + .sticky-status-indicator {
+      + .sticky-toggle__status {
         display: block;
       }
     }
 
     &.active {
-      background-image: url("../images/sticky-toggle-on.png");
+      &:after {
+        display: block;
+      }
     }
   }
 
-  .sticky-status-indicator {
+  .sticky-toggle__status {
     display: none;
     position: absolute;
     top: 3px;
-    right: 22px;
+    left: 0;
+    width: 100%;
     font-size: 9px;
-    color: #555d60;
+    color: $gray-600;
+    text-align: center;
     text-transform: uppercase;
   }
 

diff --git a/client/src/images/sticky-toggle-off.png b/client/src/images/sticky-toggle-off.png
diff --git a/client/src/images/sticky-toggle-on.png b/client/src/images/sticky-toggle-on.png
diff --git a/client/src/legacy/LeftAndMain.Menu.js b/client/src/legacy/LeftAndMain.Menu.js
@@ -407,7 +407,7 @@ $.entwine('ss', function($){
   /**
    * Toggles the manual override of the left menu's automatic expand / collapse behaviour.
    */
-  $('.cms-menu .sticky-toggle').entwine({
+  $('.cms-menu .sticky-toggle__button').entwine({
 
     onadd: function () {
       var isSticky = $('.cms-menu').getPersistedStickyState() ? true : false;
@@ -433,7 +433,7 @@ $.entwine('ss', function($){
      * @desc Updates the indicator's text based on the sticky state of the menu.
      */
     toggleIndicator: function (isSticky) {
-      this.next('.sticky-status-indicator').text(isSticky ? 'fixed' : 'auto');
+      this.next('.sticky-toggle__status').text(isSticky ? 'fixed' : 'auto');
     },
 
     onclick: function () {

diff --git a/client/src/styles/legacy/_style.scss b/client/src/styles/legacy/_style.scss
@@ -1357,17 +1357,20 @@ form.member-profile-form {
 
     .toggle-collapse,
     .toggle-expand {
+      height: 54px;
       text-align: right;
-      padding: 16px 0;
       text-decoration: none;
-      line-height: 20px;
-      margin: -#{map_get($spacers, xs)} #{0 - $panel-padding-x} -#{map_get($spacers, xs)} 0;
+      line-height: 53px;
+
+      &:hover {
+        background-color: $base-menu;
+      }
 
       span {
         display: inline-block;
         margin: 0 8px;
-        color: #555d60;
-        font-size: 16px;
+        color: $gray-600;
+        font-size: 18px;
       }
     }
 
@@ -1376,7 +1379,6 @@ form.member-profile-form {
     }
 
     .toggle-expand {
-      width: 60px; // will set the collapsed width
       display: none;
     }
   }

diff --git a/templates/SilverStripe/Admin/Includes/LeftAndMain_MenuToggle.ss b/templates/SilverStripe/Admin/Includes/LeftAndMain_MenuToggle.ss
@@ -22,8 +22,10 @@
     <% end_if %>
 </div>
 
-<button class="sticky-toggle" type="button" title="<%t SilverStripe\Admin\LeftAndMain.MenuToggleStickyNav "Sticky nav" %>"><%t SilverStripe\Admin\LeftAndMain.MenuToggleStickyNav "Sticky nav" %></button>
-<span class="sticky-status-indicator"><%t SilverStripe\Admin\LeftAndMain.MenuToggleAuto "Auto" %></span>
+<div class="sticky-toggle">
+    <button class="sticky-toggle__button" type="button" title="<%t SilverStripe\Admin\LeftAndMain.MenuToggleStickyNav "Sticky nav" %>"><%t SilverStripe\Admin\LeftAndMain.MenuToggleStickyNav "Sticky nav" %></button>
+    <span class="sticky-toggle__status sticky-status-indicator"><%t SilverStripe\Admin\LeftAndMain.MenuToggleAuto "Auto" %></span>
+</div>
 
 <a class="toggle-expand" href="#" data-toggle="tooltip" title="<%t SilverStripe\Admin\LeftAndMain.ExpandPanel "Expand panel" %>" aria-label="<%t SilverStripe\Admin\LeftAndMain.ExpandPanel "Expand panel" %>"><span>&raquo;</span></a>
 <a class="toggle-collapse" href="#" data-toggle="tooltip" title="<%t SilverStripe\Admin\LeftAndMain.CollapsePanel "Collapse panel" %>" aria-label="<%t SilverStripe\Admin\LeftAndMain.CollapsePanel "Collapse panel" %>"><span>&laquo;</span></a>