Merge 414469d into 3ee2690

index.php

@@ -47,6 +47,7 @@
             }
             return false;
         },
+        'icon' => false,
     ],
     'fields' => [
         'janitor' => [
@@ -81,6 +82,9 @@
                 'pageURI' => function () {
                     return str_replace('/','+', $this->model()->uri());
                 },
+                'icon' => function ($icon = false) {
+                    return $icon ?? option('bnomei.janitor.icon');
+                },
             ],
         ],
     ],

package.json

@@ -21,5 +21,5 @@
   },
   "posthtml": {
     "recognizeSelfClosing": true
-  } 
+  }
 }

src/components/fields/Janitor.vue

@@ -2,6 +2,7 @@
     <div class="janitor-wrapper">
         <k-button
             class="janitor"
+            :icon="currentIcon"
             :class="status"
             @click="janitor()"
             :job="job"
@@ -28,6 +29,7 @@
             clipboard: Boolean,
             unsaved: Boolean,
             intab: Boolean,
+            icon: [Boolean, String],
         },
         data() {
             return {
@@ -40,6 +42,12 @@
         computed: {
             pageHasChanges: function() {
                 return this.$store.getters['content/hasChanges']();
+            },
+            currentIcon: function() {
+                if(!this.status) return this.icon
+                else if(this.status == 'doing-job') return 'janitorLoader'
+                else if(this.status == 'is-success') return 'check'
+                else if(this.status == 'has-error') return 'alert'
             }
         },
         methods: {
@@ -187,22 +195,26 @@
     .janitor {
         background-color: black;
         color: white;
-        font-weight: bold;
-        border-radius: 5px;
-        padding: 5px 10px 7px 10px;
+        border-radius: 3px;
+        padding: 0.5rem 1rem;
+        line-height: 1.25rem;
         min-width: 200px;
+        text-align: left;
     }
 
     .janitor:hover {
-        opacity: 0.75;
+        background-color: #1e1e1e;
     }
 
-    .janitor .k-button-text {
+    .janitor >>> .k-button-text {
         opacity: 1;
     }
 
     .janitor.doing-job {
-        background-color: #444;
+        background-color: #dcdcdc;
+    }
+    .janitor.doing-job >>> .k-button-text {
+        color: black;
     }
 
     .janitor.has-response {

src/index.js

@@ -3,5 +3,8 @@ import Janitor from './components/fields/Janitor.vue';
 panel.plugin('bnomei/janitor', {
   fields: {
     'janitor': Janitor,
+  },
+  icons: {
+    janitorLoader: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="1.75"><circle cx="7" cy="7" r="7.2" stroke="#000" stroke-opacity=".2"/><path d="M14.2,7c0-4-3.2-7.2-7.2-7.2" stroke="#000"><animateTransform attributeName="transform" type="rotate" from="0 7 7" to="360 7 7" dur="1s" repeatCount="indefinite"/></path></g></g>'
   }
 });