proper modified icon + popup

This commit is contained in:
Henry Jameson 2020-10-17 22:28:49 +03:00
parent a664fde02f
commit e695506c51
3 changed files with 52 additions and 5 deletions

View file

@ -6,30 +6,30 @@
:checked="state"
@change="update"
:disabled="disabled"
>
>
<span
v-if="!!$slots.default"
class="label"
>
<slot />
</span>
<ModifiedIcon :changed="isChanged" />
</Checkbox>
<span v-if="isChanged">
<strong>CHANGED</strong>
</span>
</label>
</template>
<script>
import { get, set } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import ModifiedIcon from './modified_icon.vue'
export default {
props: [
'path',
'disabled'
],
components: {
Checkbox
Checkbox,
ModifiedIcon
},
computed: {
pathDefault () {

View file

@ -0,0 +1,46 @@
<template>
<span
v-if="changed"
class="ModifiedIcon"
>
<Popover
trigger="hover"
>
<i
slot="trigger"
class="icon icon-wrench"
/>
<div
class="modified-tooltip"
slot="content"
>
{{ $t('settings.setting_changed') }}
</div>
</Popover>
</span>
</template>
<script>
import Popover from 'src/components/popover/popover.vue'
export default {
props: ['changed'],
components: { Popover }
}
</script>
<style lang="scss">
.ModifiedIcon {
display: inline-block;
position: relative;
.icon {
display: inline-block;
}
.modified-tooltip {
margin: 0.5em 1em;
min-width: 10em;
text-align: center;
}
}
</style>

View file

@ -240,6 +240,7 @@
"settings": {
"app_name": "App name",
"security": "Security",
"setting_changed": "Setting is different from default",
"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
"mfa": {
"otp": "OTP",