nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 08:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

upgrade plan UI improvements

Browse Source
This commit is contained in:
Čarodej
2022-01-03 11:14:27 +01:00
parent 2363592dcd
commit 9d189b3d12
8 changed files with 232 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
resources/js/components/Others/Forms/SwitchInput.vue
View File

@@ -1,16 +1,20 @@
<template>
<div class="input-wrapper">
<div class="switch-content">
<label class="input-label" v-if="label">{{ label }}:</label>
<small class="input-info" v-if="info">{{ info }}</small>
<label class="input-label" v-if="label">
{{ label }}:
</label>
<small class="input-info" v-if="info">
{{ info }}
</small>
</div>
<div class="switch-content text-right">
<div
class="switch"
:class="{ active: state }"
@click="changeState"
>
class="switch"
:class="{ active: state }"
@click="changeState"
>
<div class="switch-button"></div>
</div>
</div>
@@ -19,92 +23,92 @@
<script>
export default {
name:'SwitchInput',
props: [
name: 'SwitchInput',
props: [
'label',
'name',
'state',
'info',
'input',
],
data() {
return {
isSwitched: undefined
}
},
methods: {
changeState() {
this.isSwitched = ! this.isSwitched
this.$emit('input', this.isSwitched)
}
},
mounted() {
this.isSwitched = this.state
}
}
data() {
return {
isSwitched: undefined
}
},
methods: {
changeState() {
this.isSwitched = !this.isSwitched
this.$emit('input', this.isSwitched)
}
},
mounted() {
this.isSwitched = this.state
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_mixins';
.input-wrapper {
display: flex;
width: 100%;
.input-wrapper {
display: flex;
width: 100%;
.input-label {
color: $text;
}
.input-label {
color: $text;
}
.switch-content {
width: 100%;
.switch-content {
width: 100%;
&:last-child {
width: 80px;
}
}
}
&:last-child {
width: 80px;
}
}
}
.switch {
width: 50px;
height: 28px;
border-radius: 50px;
display: block;
background: #f1f1f5;
position: relative;
@include transition;
.switch {
width: 50px;
height: 28px;
border-radius: 50px;
display: block;
background: #f1f1f5;
position: relative;
@include transition;
.switch-button {
@include transition;
width: 22px;
height: 22px;
border-radius: 50px;
display: block;
background: white;
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
cursor: pointer;
}
.switch-button {
@include transition;
width: 22px;
height: 22px;
border-radius: 50px;
display: block;
background: white;
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 2px 4px rgba(37, 38, 94, 0.1);
cursor: pointer;
}
&.active {
&.active {
.switch-button {
left: 25px;
}
}
}
.switch-button {
left: 25px;
}
}
}
.dark {
.switch {
background: $dark_mode_foreground;
}
.dark {
.switch {
background: $dark_mode_foreground;
}
.popup-wrapper {
.switch {
background: lighten($dark_mode_foreground, 3%);
}
}
}
.popup-wrapper {
.switch {
background: lighten($dark_mode_foreground, 3%);
}
}
}
</style>