From 9aaa8a86f52bc97838c768a8859919a3ad6fd54f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Apr 2023 01:11:20 +0300
Subject: initial implementation of attachmentsetting

---
 .../settings_modal/helpers/attachment_setting.vue  | 70 ++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/components/settings_modal/helpers/attachment_setting.vue

(limited to 'src/components/settings_modal/helpers/attachment_setting.vue')

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
new file mode 100644
index 00000000..3a933511
--- /dev/null
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -0,0 +1,70 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="AttachmentSetting"
+  >
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <div class="attachment-input">
+      <Attachment
+        class="attachment"
+        :compact="compact"
+        :attachment="attachment"
+        size="small"
+        hide-description
+        @setMedia="onMedia"
+        @naturalSizeLoad="onNaturalSizeLoad"
+      />
+      <div class="controls">
+        <media-upload
+          normal-button
+          ref="mediaUpload"
+          class="media-upload-icon"
+          :drop-files="dropFiles"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
+        />
+        <input
+          :id="path"
+          class="string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+    </div>
+    <DraftButtons />
+  </span>
+</template>
+
+<script src="./attachment_setting.js"></script>
+
+<style lang="scss">
+.AttachmentSetting {
+  .attachment {
+    display: block;
+    width: 20em;
+    height: 15em;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From e0fbeee88edb29f04a3260560d10d1a812f84029 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Apr 2023 21:57:31 +0300
Subject: finish up attachment setting (right now only for admin section only)

---
 src/components/media_upload/media_upload.js        | 18 ++++++--
 src/components/media_upload/media_upload.vue       | 22 ++++++---
 .../settings_modal/helpers/attachment_setting.js   |  7 +--
 .../settings_modal/helpers/attachment_setting.vue  | 53 +++++++++++++++-------
 src/i18n/en.json                                   |  2 +
 5 files changed, 73 insertions(+), 29 deletions(-)

(limited to 'src/components/settings_modal/helpers/attachment_setting.vue')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index cfd42d4c..8c9e5f71 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -23,6 +23,11 @@ const mediaUpload = {
     }
   },
   methods: {
+    onClick () {
+      if (this.uploadReady) {
+        this.$refs.input.click()
+      }
+    },
     uploadFile (file) {
       const self = this
       const store = this.$store
@@ -69,10 +74,15 @@ const mediaUpload = {
       this.multiUpload(target.files)
     }
   },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: {
+    dropFiles: Object,
+    disabled: Boolean,
+    normalButton: Boolean,
+    acceptTypes: {
+      type: String,
+      default: '*/*'
+    }
+  },
   watch: {
     dropFiles: function (fileInfos) {
       if (!this.uploading) {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2799495b..c761b94f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,10 @@
 <template>
-  <label
+  <component
     class="media-upload"
-    :class="{ disabled: disabled }"
+    :is="normalButton ? 'button' : 'label'"
+    :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
     :title="$t('tool_tip.media_upload')"
+    @click="onClick"
   >
     <FAIcon
       v-if="uploading"
@@ -15,6 +17,10 @@
       class="new-icon"
       icon="upload"
     />
+    <template v-if="normalButton">
+      {{ ' ' }}
+      {{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
+    </template>
     <input
       v-if="uploadReady"
       class="hidden-input-file"
@@ -22,8 +28,10 @@
       type="file"
       multiple="true"
       @change="change"
+      ref="input"
+      :accept="acceptTypes"
     >
-  </label>
+  </component>
 </template>
 
 <script src="./media_upload.js"></script>
@@ -32,10 +40,12 @@
 @import "../../variables";
 
 .media-upload {
-  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
-
   .hidden-input-file {
     display: none;
   }
 }
- </style>
+
+label.media-upload {
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+}
+</style>
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index a0a12ead..ac5c6f86 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -7,10 +7,10 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
-    type: {
-      type: Array,
+    acceptTypes: {
+      type: String,
       required: false,
-      default: []
+      default: 'image/*'
     }
   },
   components: {
@@ -22,6 +22,7 @@ export default {
     ...Setting.computed,
     attachment () {
       const path = this.realDraftMode ? this.draft : this.state
+      // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
       const url = path.includes('://') ? path : this.$store.state.instance.server + path
       return {
         mimetype: fileTypeExt(url),
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 3a933511..cc2278b0 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -20,6 +20,23 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
+      <div>{{ $t('settings.url') }}</div>
+      <div class="controls">
+        <input
+          :id="path"
+          class="string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+      <div>{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -30,27 +47,15 @@
         @naturalSizeLoad="onNaturalSizeLoad"
       />
       <div class="controls">
-        <media-upload
-          normal-button
+        <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
           :drop-files="dropFiles"
           @uploaded="setMediaFile"
           @upload-failed="uploadFailed"
+          normal-button
+          :accept-types="acceptTypes"
         />
-        <input
-          :id="path"
-          class="string-input"
-          :disabled="shouldBeDisabled"
-          :value="realDraftMode ? draft : state"
-          @change="update"
-        >
-        {{ ' ' }}
-        <ModifiedIndicator
-          :changed="isChanged"
-          :onclick="reset"
-        />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
     </div>
     <DraftButtons />
@@ -63,8 +68,24 @@
 .AttachmentSetting {
   .attachment {
     display: block;
-    width: 20em;
+    width: 100%;
     height: 15em;
+    margin-bottom: 0.5em;
+  }
+
+  .attachment-input {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    width: 20em;
+  }
+
+  .controls {
+    margin-bottom: 0.5em;
+
+    input, button {
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 082ad826..44998453 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -519,6 +519,8 @@
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos in a popup frame",
+    "url": "URL",
+    "preview": "Preview",
     "file_export_import": {
       "backup_restore": "Settings backup",
       "backup_settings": "Backup settings to file",
-- 
cgit v1.2.3-70-g09d2


From 1492937a7e8e27a31699879dc710d3e36c67b953 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Apr 2023 23:01:29 +0300
Subject: lint

---
 src/components/media_upload/media_upload.vue       |  6 +--
 .../settings_modal/admin_tabs/frontends_tab.vue    | 56 ++++++++++++++++------
 .../settings_modal/helpers/attachment_setting.vue  |  9 ++--
 .../settings_modal/helpers/number_setting.vue      |  5 +-
 .../settings_modal/helpers/string_setting.vue      |  5 +-
 src/components/settings_modal/settings_modal.vue   | 13 +++--
 6 files changed, 66 insertions(+), 28 deletions(-)

(limited to 'src/components/settings_modal/helpers/attachment_setting.vue')

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index c761b94f..993c01a4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,7 +1,7 @@
 <template>
   <component
-    class="media-upload"
     :is="normalButton ? 'button' : 'label'"
+    class="media-upload"
     :class="{ disabled: disabled, ['media-upload button-default btn']: normalButton }"
     :title="$t('tool_tip.media_upload')"
     @click="onClick"
@@ -23,13 +23,13 @@
     </template>
     <input
       v-if="uploadReady"
+      ref="input"
       class="hidden-input-file"
       :disabled="disabled"
       type="file"
       multiple="true"
-      @change="change"
-      ref="input"
       :accept="acceptTypes"
+      @change="change"
     >
   </component>
 </template>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 71bbfa69..e108a963 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
+  <div
+    class="frontends-tab"
+    :label="$t('admin_dash.tabs.frontends')"
+  >
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
@@ -20,23 +23,26 @@
           </StringSetting>
         </li>
         <li>
-          <GroupSetting path=":pleroma.:frontends.:primary"/>
+          <GroupSetting path=":pleroma.:frontends.:primary" />
         </li>
       </ul>
       <div class="setting-list">
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
-          <li v-for="frontend in frontends" :key="frontend.name">
+          <li
+            v-for="frontend in frontends"
+            :key="frontend.name"
+          >
             <strong>{{ frontend.name }}</strong>
             {{ ' ' }}
             <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
               <i18n-t
-                keypath="admin_dash.frontend.is_default"
                 v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+                keypath="admin_dash.frontend.is_default"
               />
               <i18n-t
-                keypath="admin_dash.frontend.is_default_custom"
                 v-else
+                keypath="admin_dash.frontend.is_default_custom"
               >
                 <template #version>
                   <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
@@ -45,13 +51,30 @@
             </span>
             <dl>
               <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
-              <dd><a :href="frontend.git" target="_blank">{{ frontend.git }}</a></dd>
+              <dd>
+                <a
+                  :href="frontend.git"
+                  target="_blank"
+                >{{ frontend.git }}</a>
+              </dd>
               <template v-if="expertLevel">
                 <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
-                <dd v-for="ref in frontend.refs" :key="ref"><code>{{ ref }}</code></dd>
+                <dd
+                  v-for="ref in frontend.refs"
+                  :key="ref"
+                >
+                  <code>{{ ref }}</code>
+                </dd>
               </template>
-              <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
-              <dd v-if="expertLevel"><a :href="frontend.build_url" target="_blank">{{ frontend.build_url }}</a></dd>
+              <dt v-if="expertLevel">
+                {{ $t('admin_dash.frontend.build_url') }}
+              </dt>
+              <dd v-if="expertLevel">
+                <a
+                  :href="frontend.build_url"
+                  target="_blank"
+                >{{ frontend.build_url }}</a>
+              </dd>
             </dl>
             <div>
               <span class="btn-group">
@@ -62,7 +85,7 @@
                   @click="update(frontend)"
                 >
                   {{
-                      frontend.installed
+                    frontend.installed
                       ? $t('admin_dash.frontend.reinstall')
                       : $t('admin_dash.frontend.install')
                   }}
@@ -100,19 +123,22 @@
                   </template>
                 </Popover>
               </span>
-              <span class="btn-group" v-if="frontend.name !== 'admin-fe'">
+              <span
+                v-if="frontend.name !== 'admin-fe'"
+                class="btn-group"
+              >
                 <button
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                             adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
-                             adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
-                             "
+                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                  "
                   :title="$t('admin_dash.frontend.update')"
                   @click="setDefault(frontend)"
                 >
                   {{
-                      $t('admin_dash.frontend.set_default')
+                    $t('admin_dash.frontend.set_default')
                   }}
                 </button>
                 {{ ' ' }}
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index cc2278b0..0bede2c2 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="AttachmentSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -51,10 +54,10 @@
           ref="mediaUpload"
           class="media-upload-icon"
           :drop-files="dropFiles"
-          @uploaded="setMediaFile"
-          @upload-failed="uploadFailed"
           normal-button
           :accept-types="acceptTypes"
+          @uploaded="setMediaFile"
+          @upload-failed="uploadFailed"
         />
       </div>
     </div>
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index ce168570..065cfbcf 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="NumberSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 84d0a9d6..9de99d78 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -3,7 +3,10 @@
     v-if="matchesExpertLevel"
     class="StringSetting"
   >
-    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 57ec5535..4e7fd931 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -125,21 +125,24 @@
           id="unscrolled-content"
           class="extra-content"
         />
-        <span class="admin-buttons" v-if="modalMode === 'admin'">
+        <span
+          v-if="modalMode === 'admin'"
+          class="admin-buttons"
+        >
           <button
             class="button-default btn"
-            @click="resetAdminDraft"
             :disabled="!adminDraftAny"
+            @click="resetAdminDraft"
           >
-              {{ $t("admin_dash.reset_all") }}
+            {{ $t("admin_dash.reset_all") }}
           </button>
           {{ ' ' }}
           <button
             class="button-default btn"
-            @click="pushAdminDraft"
             :disabled="!adminDraftAny"
+            @click="pushAdminDraft"
           >
-              {{ $t("admin_dash.commit_all") }}
+            {{ $t("admin_dash.commit_all") }}
           </button>
         </span>
       </div>
-- 
cgit v1.2.3-70-g09d2


From 05a7e612aa6d9f2a44eea22266b325933da6f5ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 May 2023 21:10:06 +0300
Subject: show warning for developer for missing labels

---
 .../settings_modal/helpers/attachment_setting.vue        |  5 +++--
 .../settings_modal/helpers/boolean_setting.vue           | 16 +++++++++++++---
 src/components/settings_modal/helpers/number_setting.vue |  5 +++--
 src/components/settings_modal/helpers/string_setting.vue |  5 +++--
 4 files changed, 22 insertions(+), 9 deletions(-)

(limited to 'src/components/settings_modal/helpers/attachment_setting.vue')

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 0bede2c2..447fa172 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
 
     </label>
     <p
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 3089c3b3..5ddf5aad 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -10,16 +10,16 @@
       @update:modelValue="update"
     >
       <span
-        v-if="!!$slots.default"
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
-        <template v-else>
-          <slot />
+        <template v-else-if="source === 'admin'">
+          MISSING LABEL FOR {{ path }}
         </template>
+        <slot v-else />
       </span>
     </Checkbox>
     <ModifiedIndicator
@@ -35,6 +35,16 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
+    <!-- debugging -->
+    <!--
+    <p
+      v-else
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      MISSING DESCRIPTION FOR {{ path }}
+    </p>
+    -->
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 065cfbcf..93f11331 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 9de99d78..0cfa61ce 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -10,9 +10,10 @@
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
-      <template v-else>
-        <slot />
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
       </template>
+      <slot v-else />
     </label>
     <input
       :id="path"
-- 
cgit v1.2.3-70-g09d2


From 4664d99af26bfebadf70be740abfd49acc045897 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 9 May 2023 23:29:30 +0300
Subject: lint

---
 src/components/settings_modal/helpers/attachment_setting.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components/settings_modal/helpers/attachment_setting.vue')

diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index 447fa172..bbc5172c 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -87,7 +87,8 @@
   .controls {
     margin-bottom: 0.5em;
 
-    input, button {
+    input,
+    button {
       width: 100%;
     }
   }
-- 
cgit v1.2.3-70-g09d2