Fix revert toggle partial rendering
This commits fixes an issue where the `REVERT` label on revert toggle might render as `REVER` or in a similarly clipped manner due to its fixed width. The problem is visible when certain fonts fail to load or browser engines render content non-standardly. Changes: - Refactor UI component to have its own separate Vue component with unit tests. - Rework component design to utilize flexbox, enhancing its adaptability and simplifying the structure. - Remove obselete `webkit` directives. - Refactor SCSS for clearer structure and better SCSS best-practices. - Use `em` when possible instead of `px` for improved responsiveness.
This commit is contained in:
undergroundwires
@@ -1,29 +1,27 @@
|
||||
<template>
|
||||
<div class="checkbox-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="input-checkbox"
|
||||
v-model="isReverted"
|
||||
@change="toggleRevert()"
|
||||
v-on:click.stop>
|
||||
<div class="checkbox-animate">
|
||||
<span class="checkbox-off">revert</span>
|
||||
<span class="checkbox-on">revert</span>
|
||||
</div>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
v-model="isChecked"
|
||||
:stopClickPropagation="true"
|
||||
:label="'revert'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
PropType, defineComponent, ref, watch,
|
||||
computed,
|
||||
} from 'vue';
|
||||
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
|
||||
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
|
||||
import { IReverter } from './Reverter/IReverter';
|
||||
import { INodeContent } from './INodeContent';
|
||||
import { getReverter } from './Reverter/ReverterFactory';
|
||||
import ToggleSwitch from './ToggleSwitch.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ToggleSwitch,
|
||||
},
|
||||
props: {
|
||||
node: {
|
||||
type: Object as PropType<INodeContent>,
|
||||
@@ -46,138 +44,43 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
onStateChange((newState) => {
|
||||
updateStatus(newState.selection.selectedScripts);
|
||||
updateRevertStatusFromState(newState.selection.selectedScripts);
|
||||
events.unsubscribeAll();
|
||||
events.register(newState.selection.changed.on((scripts) => updateStatus(scripts)));
|
||||
events.register(
|
||||
newState.selection.changed.on((scripts) => updateRevertStatusFromState(scripts)),
|
||||
);
|
||||
}, { immediate: true });
|
||||
|
||||
async function onNodeChanged(node: INodeContent) {
|
||||
handler = getReverter(node, currentState.value.collection);
|
||||
updateStatus(currentState.value.selection.selectedScripts);
|
||||
updateRevertStatusFromState(currentState.value.selection.selectedScripts);
|
||||
}
|
||||
|
||||
function toggleRevert() {
|
||||
modifyCurrentState((state) => {
|
||||
handler.selectWithRevertState(isReverted.value, state.selection);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateStatus(scripts: ReadonlyArray<SelectedScript>) {
|
||||
async function updateRevertStatusFromState(scripts: ReadonlyArray<SelectedScript>) {
|
||||
isReverted.value = handler?.getState(scripts) ?? false;
|
||||
}
|
||||
|
||||
function syncReversionStatusWithState(value: boolean) {
|
||||
if (value === isReverted.value) {
|
||||
return;
|
||||
}
|
||||
modifyCurrentState((state) => {
|
||||
handler.selectWithRevertState(value, state.selection);
|
||||
});
|
||||
}
|
||||
|
||||
const isChecked = computed({
|
||||
get() {
|
||||
return isReverted.value;
|
||||
},
|
||||
set: (value: boolean) => {
|
||||
syncReversionStatusWithState(value);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
isReverted,
|
||||
toggleRevert,
|
||||
isChecked,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use 'sass:math';
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$color-bullet-unchecked : $color-primary-darker;
|
||||
$color-bullet-checked : $color-on-secondary;
|
||||
$color-text-unchecked : $color-on-primary;
|
||||
$color-text-checked : $color-on-secondary;
|
||||
$color-bg-unchecked : $color-primary;
|
||||
$color-bg-checked : $color-secondary;
|
||||
$size-width : 85px;
|
||||
$size-height : 30px;
|
||||
|
||||
// https://www.designlabthemes.com/css-toggle-switch/
|
||||
.checkbox-switch {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: $size-width;
|
||||
height: $size-height;
|
||||
-webkit-border-radius: $size-height;
|
||||
border-radius: $size-height;
|
||||
line-height: $size-height;
|
||||
font-size: math.div($size-height, 2);
|
||||
|
||||
input.input-checkbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $size-width;
|
||||
height: $size-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
@include clickable;
|
||||
}
|
||||
|
||||
.checkbox-animate {
|
||||
position: relative;
|
||||
width: $size-width;
|
||||
height: $size-height;
|
||||
background-color: $color-bg-unchecked;
|
||||
-webkit-transition: background-color 0.25s ease-out 0s;
|
||||
transition: background-color 0.25s ease-out 0s;
|
||||
|
||||
// Circle
|
||||
&:before {
|
||||
$circle-size: $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: $color-bullet-unchecked;
|
||||
top: $size-height * 0.16;
|
||||
left: $size-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: $color-bg-checked;
|
||||
}
|
||||
+ .checkbox-animate:before {
|
||||
left: ($size-width - math.div($size-width, 3.5));
|
||||
background-color: $color-bullet-checked;
|
||||
}
|
||||
+ .checkbox-animate .checkbox-off {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
+ .checkbox-animate .checkbox-on {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-off, .checkbox-on {
|
||||
text-transform: uppercase;
|
||||
float: left;
|
||||
font-weight: 700;
|
||||
-webkit-transition: all 0.3s ease-out 0s;
|
||||
transition: all 0.3s ease-out 0s;
|
||||
}
|
||||
|
||||
.checkbox-off {
|
||||
margin-left: math.div($size-width, 3);
|
||||
opacity: 1;
|
||||
color: $color-text-unchecked;
|
||||
}
|
||||
|
||||
.checkbox-on {
|
||||
display: none;
|
||||
float: right;
|
||||
margin-right: math.div($size-width, 3);
|
||||
opacity: 0;
|
||||
color: $color-text-checked;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div
|
||||
class="toggle-switch"
|
||||
@click="handleClickPropagation"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle-input"
|
||||
v-model="isChecked"
|
||||
>
|
||||
<div class="toggle-animation">
|
||||
<span class="label-off">{{ label }}</span>
|
||||
<span class="label-on">{{ label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: Boolean,
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stopClickPropagation: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
input: (isChecked: boolean) => true,
|
||||
/* eslint-enable @typescript-eslint/no-unused-vars */
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const isChecked = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(value: boolean) {
|
||||
if (value === props.value) {
|
||||
return;
|
||||
}
|
||||
emit('input', value);
|
||||
},
|
||||
});
|
||||
|
||||
function handleClickPropagation(event: Event): void {
|
||||
if (props.stopClickPropagation) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isChecked,
|
||||
handleClickPropagation,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use 'sass:math';
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$color-toggle-unchecked : $color-primary-darker;
|
||||
$color-toggle-checked : $color-on-secondary;
|
||||
$color-text-unchecked : $color-on-primary;
|
||||
$color-text-checked : $color-on-secondary;
|
||||
$color-bg-unchecked : $color-primary;
|
||||
$color-bg-checked : $color-secondary;
|
||||
$size-height : 30px;
|
||||
$size-circle : math.div($size-height * 2, 3);
|
||||
$padding-horizontal : 0.40em;
|
||||
$gap : 0.25em;
|
||||
|
||||
@mixin locateNearCircle($direction: 'left') {
|
||||
$circle-width: calc(#{$size-circle} + #{$padding-horizontal});
|
||||
$circle-space: calc(#{$circle-width} + #{$gap});
|
||||
@if $direction == 'left' {
|
||||
margin-left: $circle-space;
|
||||
} @else {
|
||||
margin-right: $circle-space;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setVisibility($isVisible: true) {
|
||||
@if $isVisible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
} @else {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: $size-height;
|
||||
border-radius: $size-height;
|
||||
line-height: $size-height;
|
||||
font-size: math.div($size-height, 2);
|
||||
|
||||
input.toggle-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
@include clickable;
|
||||
}
|
||||
|
||||
.toggle-animation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $gap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color-bg-unchecked;
|
||||
transition: background-color 0.25s ease-out;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: $padding-horizontal;
|
||||
$initial-top: 50%;
|
||||
$centered-top-offset: math.div($size-circle, 2);
|
||||
$centered-top: calc(#{$initial-top} - #{$centered-top-offset});
|
||||
top: $centered-top;
|
||||
width: $size-circle;
|
||||
height: $size-circle;
|
||||
border-radius: 50%;
|
||||
background-color: $color-toggle-unchecked;
|
||||
transition: left 0.3s ease-out;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
input.toggle-input:checked + .toggle-animation {
|
||||
background-color: $color-bg-checked;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&:before {
|
||||
$left-offset: calc(100% - #{$size-circle});
|
||||
$padded-left-offset: calc(#{$left-offset} - #{$padding-horizontal});
|
||||
left: $padded-left-offset;
|
||||
background-color: $color-toggle-checked;
|
||||
}
|
||||
|
||||
.label-off {
|
||||
@include setVisibility(false);
|
||||
}
|
||||
|
||||
.label-on {
|
||||
@include setVisibility(true);
|
||||
}
|
||||
}
|
||||
|
||||
.label-off, .label-on {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.label-off {
|
||||
@include setVisibility(true);
|
||||
@include locateNearCircle('left');
|
||||
padding-right: $padding-horizontal;
|
||||
}
|
||||
|
||||
.label-on {
|
||||
@include setVisibility(false);
|
||||
color: $color-text-checked;
|
||||
|
||||
@include locateNearCircle('right');
|
||||
padding-left: $padding-horizontal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
tests/e2e/specs/revert-toggle.cy.js
Normal file
50
tests/e2e/specs/revert-toggle.cy.js
Normal file
@@ -0,0 +1,50 @@
|
||||
describe('revert toggle', () => {
|
||||
context('toggle switch', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/');
|
||||
cy.get('.card')
|
||||
.eq(1) // to get 2nd element, first is often cleanup that may lack revert button
|
||||
.click(); // open the card card
|
||||
cy.get('.toggle-switch')
|
||||
.first()
|
||||
.as('toggleSwitch');
|
||||
});
|
||||
|
||||
it('should be visible', () => {
|
||||
cy.get('@toggleSwitch')
|
||||
.should('be.visible');
|
||||
});
|
||||
|
||||
it('should have revert label', () => {
|
||||
cy.get('@toggleSwitch')
|
||||
.find('span')
|
||||
.contains('revert');
|
||||
});
|
||||
|
||||
it('should render label completely without clipping', () => {
|
||||
cy
|
||||
.get('@toggleSwitch')
|
||||
.find('span')
|
||||
.should(($label) => {
|
||||
const text = $label.text();
|
||||
const font = getFont($label[0]);
|
||||
const expectedMinimumTextWidth = getTextWidth(text, font);
|
||||
const containerWidth = $label.parent().width();
|
||||
expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getFont(element) {
|
||||
const computedStyle = window.getComputedStyle(element);
|
||||
return `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
|
||||
}
|
||||
|
||||
function getTextWidth(text, font) {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.font = font;
|
||||
const measuredWidth = ctx.measureText(text).width;
|
||||
return measuredWidth;
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
import 'mocha';
|
||||
import {
|
||||
Wrapper, shallowMount,
|
||||
mount,
|
||||
} from '@vue/test-utils';
|
||||
import { expect } from 'chai';
|
||||
import { nextTick, defineComponent } from 'vue';
|
||||
import ToggleSwitch from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/ToggleSwitch.vue';
|
||||
|
||||
const DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR = 'input.toggle-input';
|
||||
const DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR = 'span.label-off';
|
||||
const DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR = 'span.label-on';
|
||||
|
||||
describe('ToggleSwitch.vue', () => {
|
||||
describe('initial state', () => {
|
||||
const testCases = [
|
||||
{
|
||||
initialValue: false,
|
||||
description: 'unchecked for false',
|
||||
},
|
||||
{
|
||||
initialValue: true,
|
||||
description: 'checked for true',
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ initialValue, description }) => {
|
||||
it(`renders as ${description}`, () => {
|
||||
// arrange
|
||||
const expectedState = initialValue;
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: initialValue,
|
||||
},
|
||||
});
|
||||
const { checkboxElement } = getCheckboxElement(wrapper);
|
||||
|
||||
// assert
|
||||
expect(checkboxElement.checked).to.equal(expectedState);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('label rendering', () => {
|
||||
const testCases = [
|
||||
{
|
||||
description: 'off label',
|
||||
selector: DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR,
|
||||
},
|
||||
{
|
||||
description: 'on label',
|
||||
selector: DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR,
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ selector, description }) => {
|
||||
it(description, () => {
|
||||
// arrange
|
||||
const expectedLabel = 'expected-test-label';
|
||||
|
||||
// act
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
label: expectedLabel,
|
||||
},
|
||||
});
|
||||
|
||||
// assert
|
||||
const element = wrapper.find(selector);
|
||||
expect(element.text()).to.equal(expectedLabel);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('model updates', () => {
|
||||
describe('emission on change', () => {
|
||||
const testCases = [
|
||||
{
|
||||
initialValue: true,
|
||||
newCheckValue: false,
|
||||
},
|
||||
{
|
||||
initialValue: false,
|
||||
newCheckValue: true,
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ initialValue, newCheckValue }) => {
|
||||
it(`emits ${newCheckValue} when initial value is ${initialValue} and checkbox value changes`, async () => {
|
||||
// arrange
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: initialValue,
|
||||
},
|
||||
});
|
||||
const { checkboxWrapper } = getCheckboxElement(wrapper);
|
||||
|
||||
// act
|
||||
await checkboxWrapper.setChecked(newCheckValue);
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(wrapper.emitted().input).to.deep.equal([[newCheckValue]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('no emission on identical value', () => {
|
||||
const testCases = [
|
||||
{
|
||||
value: true,
|
||||
description: 'true',
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
description: 'false',
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ value, description }) => {
|
||||
it(`does not emit for an unchanged value of ${description}`, async () => {
|
||||
// arrange
|
||||
const wrapper = mountComponent({
|
||||
properties: {
|
||||
modelValue: value,
|
||||
},
|
||||
});
|
||||
const { checkboxWrapper } = getCheckboxElement(wrapper);
|
||||
|
||||
// act
|
||||
await checkboxWrapper.setChecked(value);
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(wrapper.emitted().input).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('click propagation', () => {
|
||||
it('stops propagation `stopClickPropagation` is true', async () => {
|
||||
// arrange
|
||||
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
|
||||
{ stopClickPropagation: true },
|
||||
);
|
||||
const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
|
||||
|
||||
// act
|
||||
switchWrapper.trigger('click');
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(switchWrapper.exists());
|
||||
const receivedEvents = parentWrapper.emitted(parentClickEventName);
|
||||
expect(receivedEvents).to.equal(undefined);
|
||||
});
|
||||
it('allows propagation `stopClickPropagation` is false', async () => {
|
||||
// arrange
|
||||
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
|
||||
{ stopClickPropagation: false },
|
||||
);
|
||||
const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
|
||||
|
||||
// act
|
||||
switchWrapper.trigger('click');
|
||||
await nextTick();
|
||||
|
||||
// assert
|
||||
expect(switchWrapper.exists());
|
||||
const receivedEvents = parentWrapper.emitted(parentClickEventName);
|
||||
expect(receivedEvents).to.have.lengthOf(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getCheckboxElement(wrapper: Wrapper<Vue>) {
|
||||
const checkboxWrapper = wrapper.find(DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR);
|
||||
const checkboxElement = checkboxWrapper.element as HTMLInputElement;
|
||||
return {
|
||||
checkboxWrapper,
|
||||
checkboxElement,
|
||||
};
|
||||
}
|
||||
|
||||
function mountComponent(options?: {
|
||||
readonly properties?: {
|
||||
readonly modelValue?: boolean,
|
||||
readonly label?: string,
|
||||
readonly stopClickPropagation?: boolean,
|
||||
}
|
||||
}) {
|
||||
const wrapper = shallowMount(ToggleSwitch as unknown, {
|
||||
propsData: {
|
||||
value: options?.properties?.modelValue,
|
||||
label: options?.properties?.label ?? 'test-label',
|
||||
stopClickPropagation: options?.properties?.stopClickPropagation,
|
||||
},
|
||||
});
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function mountToggleSwitchParent(options?: {
|
||||
readonly stopClickPropagation?: boolean,
|
||||
}) {
|
||||
const parentClickEventName = 'parent-clicked';
|
||||
const parentComponent = defineComponent({
|
||||
components: {
|
||||
ToggleSwitch,
|
||||
},
|
||||
emits: [parentClickEventName],
|
||||
template: `
|
||||
<div @click="handleParentClick">
|
||||
<ToggleSwitch
|
||||
:stopClickPropagation="stopClickPropagation"
|
||||
:label="'test-label'"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
setup(_, { emit }) {
|
||||
const stopClickPropagation = options?.stopClickPropagation;
|
||||
|
||||
function handleParentClick() {
|
||||
emit(parentClickEventName);
|
||||
}
|
||||
|
||||
return {
|
||||
handleParentClick,
|
||||
stopClickPropagation,
|
||||
};
|
||||
},
|
||||
});
|
||||
const wrapper = mount(
|
||||
parentComponent as unknown,
|
||||
{
|
||||
stubs: { ToggleSwitch: false },
|
||||
},
|
||||
);
|
||||
return {
|
||||
wrapper,
|
||||
parentClickEventName,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user