Update admin style and notice for skins

includes/functions/_helpers-templates.php

@@ -2788,6 +2788,7 @@ function fictioneer_render_skin_interface() {
     <div class="profile__actions custom-skin-actions">
       <button type="button" class="button" data-action="click->css-skin#upload" data-disable-with="<?php esc_attr_e( 'Uploading…', 'fictioneer' ); ?>"><?php _e( 'Sync Up', 'fictioneer' ); ?></button>
       <button type="button" class="button" data-action="click->css-skin#download" data-disable-with="<?php esc_attr_e( 'Downloading…', 'fictioneer' ); ?>"><?php _e( 'Sync Down', 'fictioneer' ); ?></button>
+      <div class="invisible custom-skin-action-status" data-css-skin-target="action-status-message"><span class="dashicons dashicons-saved"></span></div>
     </div>
 
   </div>

src/js/css-skins.js

@@ -314,6 +314,7 @@ function fcn_uploadSkins(trigger) {
 
   // Toggle button progress
   fcn_toggleInProgress(trigger);
+  _$('[data-css-skin-target="action-status-message"]').classList.add('invisible');
 
   // Request
   fcn_ajaxPost({
@@ -324,6 +325,7 @@ function fcn_uploadSkins(trigger) {
   .then(response => {
     if (response.success) {
       fcn_showNotification(response.data.message, 3, 'success');
+      fcn_toggleSkinNotice(_$('[data-css-skin-target="action-status-message"]'));
     } else {
       fcn_showNotification(
         response.data.failure ?? response.data.error ?? fictioneer_tl.notification.error,
@@ -345,6 +347,7 @@ function fcn_uploadSkins(trigger) {
     console.error(error);
   })
   .then(() => {
+    _$('[data-css-skin-target="file"]').value = '';
     fcn_toggleInProgress(trigger);
   });
 }
@@ -368,6 +371,7 @@ function fcn_downloadSkins(trigger) {
 
   // Toggle button progress
   fcn_toggleInProgress(trigger);
+  _$('[data-css-skin-target="action-status-message"]').classList.add('invisible');
 
   // Request
   fcn_ajaxPost({
@@ -377,9 +381,10 @@ function fcn_downloadSkins(trigger) {
   .then(response => {
     if (response.success) {
       fcn_showNotification(response.data.message, 3, 'success');
+      fcn_toggleSkinNotice(_$('[data-css-skin-target="action-status-message"]'));
       fcn_setSkins(JSON.parse(response.data.skins));
       fcn_renderSkinList();
-      fcn_applySkin()
+      fcn_applySkin();
     } else {
       fcn_showNotification(
         response.data.failure ?? response.data.error ?? fictioneer_tl.notification.error,
@@ -409,3 +414,18 @@ function fcn_downloadSkins(trigger) {
 _$('[data-action="click->css-skin#download"]')?.addEventListener('click', event => {
   fcn_downloadSkins(event.currentTarget);
 });
+
+/**
+ * Toggles notice for 3 seconds.
+ *
+ * @since 5.26.0
+ * @param {HTMLElement} element - The targeted element.
+ */
+
+function fcn_toggleSkinNotice(element) {
+  element.classList.remove('invisible');
+
+  setTimeout(() => {
+    element.classList.add('invisible');
+  }, 3000);
+}

src/scss/_profile.scss

@@ -307,3 +307,7 @@
     }
   }
 }
+
+.custom-skin-action-status {
+  display: none !important; // Only used in admin
+}

src/scss/admin/admin.scss

@@ -1096,6 +1096,29 @@ td.fictioneer_patreon_lock_amount {
   }
 }
 
+.custom-skin-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 32px;
+
+  button {
+    margin: 0 !important;
+  }
+}
+
+.custom-skin-action-status {
+  pointer-events: none;
+  display: grid;
+  place-content: center;
+  transition: opacity .2s;
+
+  &.invisible {
+    opacity: 0;
+  }
+}
+
 .custom-skin {
   box-sizing: border-box;
   flex: 1 1 100%;
@@ -1194,10 +1217,6 @@ td.fictioneer_patreon_lock_amount {
   }
 }
 
-.custom-skin-actions {
-  margin-top: 16px;
-}
-
 .unlock-posts {
   &__unlocked-posts,
   &__search-results {