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" :checked="state"
@change="update" @change="update"
:disabled="disabled" :disabled="disabled"
> >
<span <span
v-if="!!$slots.default" v-if="!!$slots.default"
class="label" class="label"
> >
<slot /> <slot />
</span> </span>
<ModifiedIcon :changed="isChanged" />
</Checkbox> </Checkbox>
<span v-if="isChanged">
<strong>CHANGED</strong>
</span>
</label> </label>
</template> </template>
<script> <script>
import { get, set } from 'lodash' import { get, set } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import ModifiedIcon from './modified_icon.vue'
export default { export default {
props: [ props: [
'path', 'path',
'disabled' 'disabled'
], ],
components: { components: {
Checkbox Checkbox,
ModifiedIcon
}, },
computed: { computed: {
pathDefault () { 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": { "settings": {
"app_name": "App name", "app_name": "App name",
"security": "Security", "security": "Security",
"setting_changed": "Setting is different from default",
"enter_current_password_to_confirm": "Enter your current password to confirm your identity", "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
"mfa": { "mfa": {
"otp": "OTP", "otp": "OTP",