proper modified icon + popup
This commit is contained in:
parent
a664fde02f
commit
e695506c51
3 changed files with 52 additions and 5 deletions
|
@ -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 () {
|
||||
|
|
46
src/components/settings_modal/helpers/modified_icon.vue
Normal file
46
src/components/settings_modal/helpers/modified_icon.vue
Normal 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>
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue