add auto-highlighting of selected/updated code

src/presentation/Scripts/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -0,0 +1,141 @@
+<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>