diff options
Diffstat (limited to 'src/components/settings_modal/helpers')
10 files changed, 190 insertions, 36 deletions
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js index 078cc5ff..0df01d31 100644 --- a/src/components/settings_modal/helpers/boolean_setting.js +++ b/src/components/settings_modal/helpers/boolean_setting.js @@ -1,13 +1,16 @@ import Checkbox from 'src/components/checkbox/checkbox.vue' -import ModifiedIndicator from './modified_indicator.vue' -import ProfileSettingIndicator from './profile_setting_indicator.vue' import Setting from './setting.js' export default { + ...Setting, components: { - Checkbox, - ModifiedIndicator, - ProfileSettingIndicator + ...Setting.components, + Checkbox }, - ...Setting + methods: { + ...Setting.methods, + getValue (e) { + return e + } + } } diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue index 260ee75e..7e05fe85 100644 --- a/src/components/settings_modal/helpers/boolean_setting.vue +++ b/src/components/settings_modal/helpers/boolean_setting.vue @@ -4,7 +4,7 @@ class="BooleanSetting" > <Checkbox - :model-value="state" + :model-value="draftMode ? draft :state" :disabled="shouldBeDisabled" @update:modelValue="update" > @@ -20,6 +20,7 @@ :onclick="reset" /> <ProfileSettingIndicator :is-profile="isProfileSetting" /> + <DraftButtons /> </Checkbox> </label> </template> diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js index 8aa5f54b..a3c3bf44 100644 --- a/src/components/settings_modal/helpers/choice_setting.js +++ b/src/components/settings_modal/helpers/choice_setting.js @@ -1,15 +1,12 @@ import Select from 'src/components/select/select.vue' -import ModifiedIndicator from './modified_indicator.vue' -import ProfileSettingIndicator from './profile_setting_indicator.vue' import Setting from './setting.js' export default { + ...Setting, components: { - Select, - ModifiedIndicator, - ProfileSettingIndicator + ...Setting.components, + Select }, - ...Setting, props: { ...Setting.props, options: { diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue new file mode 100644 index 00000000..0d99da13 --- /dev/null +++ b/src/components/settings_modal/helpers/draft_buttons.vue @@ -0,0 +1,102 @@ +<!-- this is a helper exclusive to Setting components --> +<!-- TODO make it reusable --> +<template> + <span + class="DraftButtons" + > + <Popover + trigger="hover" + :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }" + > + <template #trigger> + + <button + v-if="$parent.isDirty" + class="button button-default btn" + type="button" + :title="$t('settings.commit_value')" + @click="$parent.commitDraft" + > + {{ $t('settings.commit_value') }} + </button> + </template> + <template #content> + <div class="modified-tooltip"> + {{ $t('settings.commit_value_tooltip') }} + </div> + </template> + </Popover> + <Popover + trigger="hover" + :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }" + > + <template #trigger> + + <button + v-if="$parent.isDirty" + class="button button-default btn" + type="button" + :title="$t('settings.reset_value')" + @click="$parent.reset" + > + {{ $t('settings.reset_value') }} + </button> + </template> + <template #content> + <div class="modified-tooltip"> + {{ $t('settings.reset_value_tooltip') }} + </div> + </template> + </Popover> + <Popover + trigger="hover" + :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }" + > + <template #trigger> + + <button + v-if="$parent.canHardReset" + class="button button-default btn" + type="button" + :title="$t('settings.hard_reset_value')" + @click="$parent.hardReset" + > + {{ $t('settings.hard_reset_value') }} + </button> + </template> + <template #content> + <div class="modified-tooltip"> + {{ $t('settings.hard_reset_value_tooltip') }} + </div> + </template> + </Popover> + </span> +</template> + +<script> +import Popover from 'src/components/popover/popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faWrench } from '@fortawesome/free-solid-svg-icons' + +library.add( + faWrench +) + +export default { + components: { Popover }, + props: ['changed'] +} +</script> + +<style lang="scss"> +.DraftButtons { + display: inline-block; + position: relative; +} + +.draft-tooltip { + margin: 0.5em 1em; + min-width: 10em; + text-align: center; +} +</style> diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js index 0f29f11a..8ad033e7 100644 --- a/src/components/settings_modal/helpers/integer_setting.js +++ b/src/components/settings_modal/helpers/integer_setting.js @@ -1,15 +1,11 @@ -import ModifiedIndicator from './modified_indicator.vue' import Setting from './setting.js' export default { - components: { - ModifiedIndicator - }, ...Setting, methods: { ...Setting.methods, - update (e) { - this.configSink(this.path, parseInt(e.target.value)) + getValue (e) { + return parseInt(e.target.value) } } } diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue index 695e2673..e900b87c 100644 --- a/src/components/settings_modal/helpers/integer_setting.vue +++ b/src/components/settings_modal/helpers/integer_setting.vue @@ -13,7 +13,7 @@ step="1" :disabled="disabled" :min="min || 0" - :value="state" + :value="draftMode ? draft :state" @change="update" > {{ ' ' }} @@ -21,6 +21,8 @@ :changed="isChanged" :onclick="reset" /> + <ProfileSettingIndicator :is-profile="isProfileSetting" /> + <DraftButtons /> </span> </template> diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js index 9195d3e9..0971b919 100644 --- a/src/components/settings_modal/helpers/setting.js +++ b/src/components/settings_modal/helpers/setting.js @@ -1,5 +1,16 @@ +import Checkbox from 'src/components/checkbox/checkbox.vue' +import ModifiedIndicator from './modified_indicator.vue' +import ProfileSettingIndicator from './profile_setting_indicator.vue' +import DraftButtons from './draft_buttons.vue' import { get, set } from 'lodash' + export default { + components: { + Checkbox, + ModifiedIndicator, + DraftButtons, + ProfileSettingIndicator + }, props: { path: { type: String, @@ -23,6 +34,20 @@ export default { source: { type: String, default: 'default' + }, + draftMode: { + type: Boolean, + default: false + } + }, + data () { + return { + draft: null + } + }, + created () { + if (this.draftMode) { + this.draft = this.state } }, computed: { @@ -53,7 +78,7 @@ export default { case 'profile': return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v }) case 'admin': - return (k, v) => console.log(this.path, k, v) + return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v }) default: return (k, v) => this.$store.dispatch('setOption', { name: k, value: v }) } @@ -72,25 +97,56 @@ export default { isChanged () { switch (this.source) { case 'profile': - return false case 'admin': - console.log(this.$store.state.adminSettings.modifiedPaths) - return this.$store.state.adminSettings.modifiedPaths.has(this.path) + return false default: return this.state !== this.defaultState } }, + isDirty () { + return this.draftMode && this.draft !== this.state + }, + canHardReset () { + return this.source === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.path) + }, matchesExpertLevel () { return (this.expert || 0) <= this.$store.state.config.expertLevel > 0 } }, methods: { + getValue (e) { + return e.target.value + }, update (e) { - console.log('U', this.path, e) - this.configSink(this.path, e) + if (this.draftMode) { + this.draft = this.getValue(e) + } else { + this.configSink(this.path, this.getValue(e)) + } + }, + commitDraft () { + if (this.draftMode) { + this.configSink(this.path, this.draft) + } }, reset () { - set(this.$store.getters.mergedConfig, this.path, this.defaultState) + console.log('reset') + if (this.draftMode) { + console.log(this.draft) + console.log(this.state) + this.draft = this.state + } else { + set(this.$store.getters.mergedConfig, this.path, this.defaultState) + } + }, + hardReset () { + switch (this.source) { + case 'admin': + return this.$store.dispatch('resetAdminSetting', { path: this.path }) + .then(() => { this.draft = this.state }) + default: + console.warn('Hard reset not implemented yet!') + } } } } diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js index 4a0f7e48..12cef705 100644 --- a/src/components/settings_modal/helpers/size_setting.js +++ b/src/components/settings_modal/helpers/size_setting.js @@ -1,4 +1,3 @@ -import ModifiedIndicator from './modified_indicator.vue' import Select from 'src/components/select/select.vue' import Setting from './setting.js' @@ -7,11 +6,11 @@ export const defaultHorizontalUnits = ['px', 'rem', 'vw'] export const defaultVerticalUnits = ['px', 'rem', 'vh'] export default { + ...Setting, components: { - ModifiedIndicator, + ...Setting.components, Select }, - ...Setting, props: { ...Setting.props, min: Number, diff --git a/src/components/settings_modal/helpers/string_setting.js b/src/components/settings_modal/helpers/string_setting.js index 64f8772d..b368cfc8 100644 --- a/src/components/settings_modal/helpers/string_setting.js +++ b/src/components/settings_modal/helpers/string_setting.js @@ -1,9 +1,5 @@ -import ModifiedIndicator from './modified_indicator.vue' import Setting from './setting.js' export default { - components: { - ModifiedIndicator - }, ...Setting } diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue index e4bd2de9..0a71aeab 100644 --- a/src/components/settings_modal/helpers/string_setting.vue +++ b/src/components/settings_modal/helpers/string_setting.vue @@ -11,7 +11,7 @@ class="string-input" step="1" :disabled="disabled" - :value="state" + :value="draftMode ? draft :state" @change="update" > {{ ' ' }} @@ -19,7 +19,9 @@ :changed="isChanged" :onclick="reset" /> + <ProfileSettingIndicator :is-profile="isProfileSetting" /> + <DraftButtons /> </label> </template> -<script src="./boolean_setting.js"></script> +<script src="./string_setting.js"></script> |