KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Remove duplicate Switch Component (#4427)

Browse source
This commit is contained in:
Pranav Raj S 2022-04-08 18:25:08 +05:30 committed by GitHub
parent bc7bcc20b8
commit b1efcde495
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 67 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
app/javascript/dashboard/components/buttons/ToggleButton.vue
View file

@ -1,66 +0,0 @@
<template>
<button
type="button"
class="toggle-button"
:class="{ active }"
role="switch"
:aria-checked="active.toString()"
@click="onClick"
>
<span aria-hidden="true" :class="{ active }"></span>
</button>
</template>
<script>
export default {
props: {
active: { type: Boolean, default: false },
},
methods: {
onClick(e) {
this.$emit('click', e);
},
},
};
</script>
<style lang="scss" scoped>
.toggle-button {
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
background-color: var(--s-200);
border-radius: var(--border-radius-large);
border: 2px solid transparent;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 19px;
position: relative;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 34px;
&.active {
background-color: var(--w-500);
}
span {
--space-one-point-five: 1.5rem;
background-color: var(--white);
border-radius: 100%;
box-shadow: var(--toggle-button-box-shadow);
display: inline-block;
height: var(--space-one-point-five);
transform: translate(0, 0);
transition-duration: 200ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--space-one-point-five);
&.active {
transform: translate(var(--space-one-point-five), var(--space-zero));
}
}
}
</style>

98
app/javascript/dashboard/components/ui/Switch.vue
View file

@ -1,54 +1,66 @@
<template>
<label class="switch" :class="classObject">
<input
:id="id"
v-model="value"
class="switch-input"
:name="name"
:disabled="disabled"
type="checkbox"
/>
<div class="switch-paddle" :for="name">
<span class="show-for-sr">on off</span>
</div>
</label>
<button
type="button"
class="toggle-button"
:class="{ active: value }"
role="switch"
:aria-checked="value.toString()"
@click="onClick"
>
<span aria-hidden="true" :class="{ active: value }"></span>
</button>
</template>
<script>
export default {
props: {
disabled: Boolean,
type: { type: String, default: '' },
size: { type: String, default: '' },
checked: Boolean,
name: { type: String, default: '' },
id: { type: String, default: '' },
value: { type: Boolean, default: false },
},
data() {
return {
value: null,
};
},
computed: {
classObject() {
const { type, size, value } = this;
return {
[`is-${type}`]: type,
[`${size}`]: size,
checked: value,
};
methods: {
onClick() {
this.$emit('input', !this.value);
},
},
watch: {
value(val) {
this.$emit('input', val);
},
},
beforeMount() {
this.value = this.checked;
},
mounted() {
this.$emit('input', (this.value = !!this.checked));
},
};
</script>
<style lang="scss" scoped>
.toggle-button {
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
background-color: var(--s-200);
border-radius: var(--border-radius-large);
border: 2px solid transparent;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 19px;
position: relative;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 34px;
&.active {
background-color: var(--w-500);
}
span {
--space-one-point-five: 1.5rem;
background-color: var(--white);
border-radius: 100%;
box-shadow: var(--toggle-button-box-shadow);
display: inline-block;
height: var(--space-one-point-five);
transform: translate(0, 0);
transition-duration: 200ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--space-one-point-five);
&.active {
transform: translate(var(--space-one-point-five), var(--space-zero));
}
}
}
</style>

9
app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
View file

@ -34,9 +34,9 @@
<td>{{ automation.name }}</td>
<td>{{ automation.description }}</td>
<td>
<toggle-button
:active="automation.active"
@click="toggleAutomation(automation, automation.active)"
<woot-switch
:value="automation.active"
@input="toggleAutomation(automation, automation.active)"
/>
</td>
<td>{{ readableTime(automation.created_on) }}</td>
@ -131,12 +131,11 @@ import AddAutomationRule from './AddAutomationRule.vue';
import EditAutomationRule from './EditAutomationRule.vue';
import alertMixin from 'shared/mixins/alertMixin';
import timeMixin from 'dashboard/mixins/time';
import ToggleButton from 'dashboard/components/buttons/ToggleButton';
export default {
components: {
AddAutomationRule,
EditAutomationRule,
ToggleButton,
},
mixins: [alertMixin, timeMixin],
data() {

4
app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
View file

@ -62,7 +62,9 @@
/>
</div>
<div class="small-12 medium-3 business-hours">
<span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
<span class="business-hours-text margin-right-small">
{{ $t('REPORT.BUSINESS_HOURS') }}
</span>
<span>
<woot-switch v-model="businessHoursSelected" />
</span>

8
app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
View file

@ -146,9 +146,11 @@
/>
</div>
<div class="small-12 medium-3 business-hours">
<span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
<span>
<woot-switch v-model="businessHoursSelected" />
<span class="business-hours-text margin-right-small">
{{ $t('REPORT.BUSINESS_HOURS') }}
<span>
<woot-switch v-model="businessHoursSelected" />
</span>
</span>
</div>
</div>