Merge pull request #10109 from overleaf/ds-switch-component

Modifying the Switch

GitOrigin-RevId: 93b8483aa4aa164ea0be5fc2b4ccc5cfb17eae3c

services/web/app/views/project/editor/review-panel.pug

@@ -82,7 +82,6 @@
 			)
 				span.rp-tc-state-item-name(
 					ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}"
-					style="color: hsl({{ member.hue }}, 70%, 40%);"
 					tooltip=translate('tc_switch_user_tip')
 					tooltip-placement="left"
 					tooltip-append-to-body="true"
@@ -96,7 +95,7 @@
 				)
 
 			li.rp-tc-state-separator
-			li.rp-tc-state-item.rp-tc-state-item-guests
+			li.rp-tc-state-item
 				span.rp-tc-state-item-name(
 					ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}"
 					tooltip=translate('tc_switch_guests_tip')

services/web/frontend/js/ide/review-panel/directives/reviewPanelToggle.js

@@ -42,10 +42,10 @@ export default App.directive('reviewPanelToggle', () => ({
   },
 
   template: `\
-<fieldset class="rp-toggle" ng-click="handleClick();">
+<fieldset class="input-switch" ng-click="handleClick();">
 <legend class="sr-only">{{description}}</legend>
-<input id="rp-toggle-{{$id}}" ng-disabled="isDisabled" type="checkbox" class="rp-toggle-hidden-input" ng-model="localModel" ng-change="onChange()" />
-<label for="rp-toggle-{{$id}}" class="rp-toggle-btn"></label>
+<input id="input-switch-{{$id}}" ng-disabled="isDisabled" type="checkbox" class="input-switch-hidden-input" ng-model="localModel" ng-change="onChange()" />
+<label for="input-switch-{{$id}}" class="input-switch-btn"></label>
 </fieldset>\
 `,
 }))

services/web/frontend/stylesheets/app/editor/review-panel.less

@@ -124,7 +124,7 @@
 }
 .review-panel-toolbar-icon-on {
   margin-right: 5px;
-  color: @red;
+  color: @ol-green;
 }
 .review-panel-toolbar-label-disabled {
   cursor: auto;
@@ -163,7 +163,6 @@
 }
 .rp-tc-state-item-everyone {
   border-bottom: 1px solid @rp-border-grey;
-  color: @red;
 }
 .rp-tc-state-item-name {
   flex-grow: 1;
@@ -175,9 +174,6 @@
 .rp-tc-state-item-name-disabled {
   opacity: 0.35;
 }
-.rp-tc-state-item-guests {
-  color: @blue;
-}
 
 .rp-entry-list {
   display: none;
@@ -783,59 +779,6 @@
   }
 }
 
-.rp-toggle {
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 5px;
-}
-.rp-toggle-hidden-input {
-  display: none;
-
-  + .rp-toggle-btn {
-    display: block;
-    width: 3.5em;
-    height: 1.75em;
-    position: relative;
-    outline: 0;
-    margin: 0;
-    font-weight: normal;
-    cursor: pointer;
-    user-select: none;
-    padding: 1px;
-    background-color: @rp-highlight-blue;
-    border: 1px solid #fff;
-    border-radius: 0.875em;
-    transition: background 0.15s ease, border-color 0.15s ease;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 50%;
-      height: 100%;
-      position: relative;
-      left: 0;
-      background-color: #fff;
-      border-radius: 0.875em;
-      transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
-    }
-  }
-
-  &:checked + .rp-toggle-btn {
-    background-color: @red;
-    border-color: #fff;
-
-    &::before {
-      left: 50%;
-      background-color: #fff;
-    }
-  }
-
-  &:disabled + .rp-toggle-btn {
-    cursor: default;
-    opacity: 0.35;
-  }
-}
-
 .rp-unsupported-msg-wrapper {
   display: none;
   .rp-size-expanded.rp-unsupported & {

services/web/frontend/stylesheets/components/input-switch.less

@@ -0,0 +1,52 @@
+.input-switch {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+.input-switch-hidden-input {
+  display: none;
+
+  + .input-switch-btn {
+    display: block;
+    width: 34px;
+    height: 20px;
+    position: relative;
+    outline: 0;
+    margin: 0;
+    font-weight: normal;
+    cursor: pointer;
+    user-select: none;
+    padding: 1px;
+    background-color: @rp-highlight-blue;
+    border-radius: 0.875em;
+    transition: background 0.15s ease, border-color 0.15s ease;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      left: 1px;
+      top: 1px;
+      background-color: #fff;
+      border-radius: 0.875em;
+      transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
+    }
+  }
+
+  &:checked + .input-switch-btn {
+    background-color: @ol-green;
+    border-color: #fff;
+
+    &::before {
+      left: 15px;
+      top: 1px;
+    }
+  }
+
+  &:disabled + .input-switch-btn {
+    cursor: default;
+    opacity: 0.35;
+  }
+}

services/web/frontend/stylesheets/style.less

@@ -18,6 +18,7 @@
 @import 'components/navs-ol.less';
 @import 'components/pagination.less';
 @import 'components/tabs.less';
+@import 'components/input-switch.less';
 
 // Pages
 @import 'app/about.less';