Merge pull request #6011 from overleaf/jel-toggle-switch

Move style for selected toggle item

GitOrigin-RevId: 516e77839c708c77510ad0e77137dd45f54ff3ed

services/web/frontend/js/ide/editor/directives/toggleSwitch.js

@@ -1,13 +1,3 @@
-/* eslint-disable
-    max-len,
-*/
-// TODO: This file was created by bulk-decaffeinate.
-// Fix any style issues and re-enable lint.
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
 import App from '../../../base'
 
 export default App.directive('toggleSwitch', () => ({
@@ -30,7 +20,7 @@ export default App.directive('toggleSwitch', () => ({
     ng-value="false"
     ng-model="ngModel"
   >
-  <label for="toggle-switch-false-{{$id}}" class="toggle-switch-label">{{labelFalse}}</label>
+  <label for="toggle-switch-false-{{$id}}" class="toggle-switch-label"><span>{{labelFalse}}</span></label>
 
   <input
     type="radio"
@@ -40,9 +30,7 @@ export default App.directive('toggleSwitch', () => ({
     ng-value="true"
     ng-model="ngModel"
   >
-  <label for="toggle-switch-true-{{$id}}" class="toggle-switch-label">{{labelTrue}}</label>
-
-  <span class="toggle-switch-selection" aria-hidden="true"></span>
+  <label for="toggle-switch-true-{{$id}}" class="toggle-switch-label"><span>{{labelTrue}}</span></label>
 </fieldset>\
 `,
 }))

services/web/frontend/stylesheets/app/editor/history-v2.less

@@ -8,7 +8,6 @@
   line-height: 1;
   font-size: @font-size-small;
   background-color: @history-toolbar-bg-color;
-  z-index: 1;
   color: @history-toolbar-color;
   padding-left: (@line-height-computed / 2);
 }
@@ -83,7 +82,6 @@
   line-height: 1;
   position: sticky;
   top: 0;
-  z-index: 3;
 }
 
 .history-entry-toV-handle,

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -257,28 +257,44 @@
 }
 
 .toggle-switch {
-  position: relative;
-  height: 100%;
+  align-items: center;
+  display: flex;
+  height: 24px;
   width: 100%;
   background-color: @toggle-switch-bg;
+  border: 2px solid @toggle-switch-bg;
   border-radius: @btn-border-radius-base;
+  overflow: hidden;
 }
 
 .toggle-switch-label {
-  position: relative;
-  display: block;
+  display: inline-block;
   font-weight: normal;
-  z-index: 2;
-  float: left;
-  width: 50%;
   height: 100%;
-  line-height: 24px;
+  width: 50%;
   text-align: center;
-  margin-bottom: 0;
+  margin: 0;
   cursor: pointer;
   user-select: none;
   color: @text-color;
   transition: color 0.12s ease-out;
+  overflow: hidden;
+
+  span {
+    display: block;
+    height: 100%;
+    line-height: 20px; // parent height minus border
+    width: 100%;
+    background: linear-gradient(
+      to right,
+      @toggle-switch-bg 50%,
+      @toggle-switch-highlight-color 50%
+    );
+
+    background-size: 200% 100%;
+    background-position: 0 0;
+    transition: background-position 0.12s ease-out;
+  }
 }
 
 .toggle-switch-input {
@@ -287,27 +303,17 @@
 }
 
 .toggle-switch-input:checked + .toggle-switch-label {
-  color: #fff;
+  span {
+    background-position: -100% 0;
+  }
+  color: @white;
   font-weight: bold;
 }
 
-.toggle-switch-selection {
-  display: block;
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  width: calc(~'50% - 2px');
-  height: calc(~'100% - 4px');
-  background: @toggle-switch-highlight-color;
-  border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
-  transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
-}
-
-.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
-  transform: translate(100%);
-  border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
+.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
+  span {
+    background-position: 100% 0;
+  }
 }
 
 /**************************************