mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-29 18:03:42 -05:00
Merge pull request #10109 from overleaf/ds-switch-component
Modifying the Switch GitOrigin-RevId: 93b8483aa4aa164ea0be5fc2b4ccc5cfb17eae3c
This commit is contained in:
Tim Down
Copybot
parent
a320982f79
commit
cbc3aef728
5 changed files with 58 additions and 63 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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>\
|
||||
`,
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -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 & {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue