141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<template>
|
|
<div class="checkbox-switch" >
|
|
<input type="checkbox" class="input-checkbox"
|
|
v-model="isReverted"
|
|
@change="onRevertToggledAsync()" >
|
|
<div class="checkbox-animate">
|
|
<span class="checkbox-off">revert</span>
|
|
<span class="checkbox-on">revert</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import { StatefulVue } from '@/presentation/StatefulVue';
|
|
import { INode } from './INode';
|
|
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
|
|
|
|
@Component
|
|
export default class RevertToggle extends StatefulVue {
|
|
@Prop() public scriptId: string;
|
|
public isReverted = false;
|
|
public async mounted() {
|
|
const state = await this.getCurrentStateAsync();
|
|
state.selection.changed.on(this.handleSelectionChanged);
|
|
}
|
|
public async onRevertToggledAsync() {
|
|
const state = await this.getCurrentStateAsync();
|
|
state.selection.addOrUpdateSelectedScript(this.scriptId, this.isReverted);
|
|
}
|
|
private handleSelectionChanged(selectedScripts: ReadonlyArray<SelectedScript>): void {
|
|
const selectedScript = selectedScripts.find((script) => script.id === this.scriptId);
|
|
if (!selectedScript) {
|
|
this.isReverted = false;
|
|
} else {
|
|
this.isReverted = selectedScript.revert;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
$width: 85px;
|
|
$height: 30px;
|
|
// https://www.designlabthemes.com/css-toggle-switch/
|
|
.checkbox-switch {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: $width;
|
|
height: $height;
|
|
-webkit-border-radius: $height;
|
|
border-radius: $height;
|
|
line-height: $height;
|
|
font-size: $height / 2;
|
|
display: inline-block;
|
|
|
|
input.input-checkbox {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: $width;
|
|
height: $height;
|
|
padding: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-animate {
|
|
position: relative;
|
|
width: $width;
|
|
height: $height;
|
|
background-color: $gray;
|
|
-webkit-transition: background-color 0.25s ease-out 0s;
|
|
transition: background-color 0.25s ease-out 0s;
|
|
|
|
// Circle
|
|
&:before {
|
|
$circle-size: $height * 0.66;
|
|
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: $circle-size;
|
|
height: $circle-size;
|
|
border-radius: $circle-size * 2;
|
|
-webkit-border-radius: $circle-size * 2;
|
|
background-color: $slate;
|
|
top: $height * 0.16;
|
|
left: $width * 0.05;
|
|
-webkit-transition: left 0.3s ease-out 0s;
|
|
transition: left 0.3s ease-out 0s;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
input.input-checkbox:checked {
|
|
+ .checkbox-animate {
|
|
background-color: $accent;
|
|
}
|
|
+ .checkbox-animate:before {
|
|
left: ($width - $width/3.5);
|
|
background-color: $light-gray;
|
|
}
|
|
+ .checkbox-animate .checkbox-off {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
+ .checkbox-animate .checkbox-on {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.checkbox-off, .checkbox-on {
|
|
float: left;
|
|
color: $white;
|
|
font-weight: 700;
|
|
-webkit-transition: all 0.3s ease-out 0s;
|
|
transition: all 0.3s ease-out 0s;
|
|
}
|
|
|
|
.checkbox-off {
|
|
margin-left: $width / 3;
|
|
opacity: 1;
|
|
}
|
|
|
|
.checkbox-on {
|
|
display: none;
|
|
float: right;
|
|
margin-right: $width / 3;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |