Set different icon when editing microblog comment

pradoslaw · Oct 21, 2024 · 55fcc40 · 55fcc40
1 parent d8031ea
commit 55fcc40
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/app/Domain/Icon/FontAwesomeFree.php b/app/Domain/Icon/FontAwesomeFree.php
@@ -66,7 +66,8 @@ public function icons(): array
             'microblogCommentDelete'                    => 'fas fa-trash-can',
             'microblogCommentRestore'                   => 'fas fa-trash-arrow-up',
             'microblogCommentBlockAuthor'               => 'fas fa-user-slash',
-            'microblogCommentNewSave'                   => 'far fa-share-from-square',
+            'microblogCommentSaveNew'                   => 'far fa-share-from-square',
+            'microblogCommentSaveExisting'              => 'far fa-share-from-square',
             'microblogCommentMenuEditRemove'            => 'fa fa-bars',
             'microblogCommentMenuAnswerFlag'            => $genericDropdown,
 

diff --git a/app/Domain/Icon/FontAwesomePro.php b/app/Domain/Icon/FontAwesomePro.php
@@ -67,7 +67,8 @@ public function icons(): array
             'microblogCommentDelete'                    => 'fa-light fa-trash-can',
             'microblogCommentRestore'                   => 'fa-light fa-trash-can-undo',
             'microblogCommentBlockAuthor'               => 'fa-light fa-lock',
-            'microblogCommentNewSave'                   => 'fa-light fa-share-from-square',
+            'microblogCommentSaveNew'                   => 'fa-light fa-share-from-square',
+            'microblogCommentSaveExisting'              => 'fa-light fa-floppy-disk',
             'microblogCommentMenuEditRemove'            => 'fa-light fa-bars', // deprecated 
             'microblogCommentMenuAnswerFlag'            => $genericDropdown,
 

diff --git a/resources/js/components/microblog/comment-form.vue b/resources/js/components/microblog/comment-form.vue
@@ -2,7 +2,9 @@
   <form>
     <vue-comment-autocomplete
       source="/completion/prompt/users"
-      placeholder="Napisz komentarz... (Ctrl+Enter aby wysłać)"
+      :placeholder="editing 
+          ? 'Edytujesz komentarz (Ctrl+Enter aby zapisać)' 
+          : 'Napisz komentarz... (Ctrl+Enter aby wysłać)'"
       v-model="microblog.text"
 
       allow-paste
@@ -13,7 +15,8 @@
       ref="commentPrompt"
     >
       <button type="button" @click="saveComment" class="btn btn-sm btn-comment-submit" title="Zapisz (Ctrl+Enter)">
-        <vue-icon name="microblogCommentNewSave"/>
+        <vue-icon v-if="editing" name="microblogCommentSaveExisting"/>
+        <vue-icon v-else name="microblogCommentSaveNew"/>
       </button>
     </vue-comment-autocomplete>
   </form>
@@ -34,6 +37,7 @@ export default {
     VueIcon,
     'vue-comment-autocomplete': VueCommentAutocomplete,
   },
+  props: {editing: {type: Boolean}},
   mixins: [MicroblogFormMixin],
   methods: {
     focus() {

diff --git a/resources/js/components/microblog/comment.vue b/resources/js/components/microblog/comment.vue
@@ -12,6 +12,7 @@
         :microblog="comment"
         ref="form"
         class="w-100 me-1"
+        editing
         @cancel="edit(comment)"
         @save="edit(comment)"
       />