Merge branch 'rc/2.3.0' into 'master'

2.3.0 to MASTER

See merge request pleroma/pleroma-fe!1366

3 files changed, 112 insertions, 18 deletions

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
new file mode 100644
index 00000000..146ad6c1
--- /dev/null
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -0,0 +1,57 @@
+<template>
+  <label
+    class="BooleanSetting"
+  >
+    <Checkbox
+      :checked="state"
+      :disabled="disabled"
+      @change="update"
+    >
+      <span
+        v-if="!!$slots.default"
+        class="label"
+      >
+        <slot />
+      </span>
+      <ModifiedIndicator :changed="isChanged" />
+    </Checkbox>
+  </label>
+</template>
+
+<script>
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.BooleanSetting {
+}
+</style>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
new file mode 100644
index 00000000..9f4e81fe
--- /dev/null
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="changed"
+    class="ModifiedIndicator"
+  >
+    <Popover
+      trigger="hover"
+    >
+      <span slot="trigger">
+        &nbsp;
+        <FAIcon
+          icon="wrench"
+        />
+      </span>
+      <div
+        slot="content"
+        class="modified-tooltip"
+      >
+        {{ $t('settings.setting_changed') }}
+      </div>
+    </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">
+.ModifiedIndicator {
+  display: inline-block;
+  position: relative;
+
+  .modified-tooltip {
+    margin: 0.5em 1em;
+    min-width: 10em;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 86703697..2c833c0c 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,29 +1,15 @@
-import {
-  instanceDefaultProperties,
-  multiChoiceProperties,
-  defaultState as configDefaultState
-} from 'src/modules/config.js'
+import { defaultState as configDefaultState } from 'src/modules/config.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting localized values for instance-default properties
-  ...instanceDefaultProperties
-    .filter(key => multiChoiceProperties.includes(key))
+  // Getting values for default properties
+  ...Object.keys(configDefaultState)
     .map(key => [
       key + 'DefaultValue',
       function () {
-        return this.$store.getters.instanceDefaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...instanceDefaultProperties
-    .filter(key => !multiChoiceProperties.includes(key))
-    .map(key => [
-      key + 'LocalizedValue',
-      function () {
-        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
+        return this.$store.getters.defaultConfig[key]
       }
     ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),