github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Move style for selected toggle item

GitOrigin-RevId: 516e77839c708c77510ad0e77137dd45f54ff3ed
This commit is contained in:
Timothée Alby 2021-12-14 14:25:42 +01:00 committed by Copybot
parent 655c65f873
commit c96bb1551c
3 changed files with 35 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
services/web/frontend/js/ide/editor/directives/toggleSwitch.js
View file

@ -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>\
`,
}))

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

@ -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,

60
services/web/frontend/stylesheets/app/editor/toolbar.less
View file

@ -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;
}
}
/**************************************