UI fixes

src/Influunt.Host/ClientApp/src/components/ChannelItem.vue

@@ -7,8 +7,8 @@
     <span style="width: 85%; line-height: 32px">{{ name }}</span>
     <div>
       <b-button variant="outline-warning" class="but" v-on:click="Edit"
-        ><b-icon-pencil icon="pencil" class="mr-2"
-      /></b-button>
+        ><b-icon-pencil icon="pencil" />
+      </b-button>
       <b-button
         variant="outline-warning"
         class="but"
@@ -58,11 +58,28 @@ export default {
       this.channel.hidden = !this.channel.hidden;
       InfluuntApi.UpdateChannel(this.channel);
     },
-    RemoveChannel: function () {
-      var self = this;
+    RemoveChannel: async function () {
+      var confirmResult = await this.$bvModal.msgBoxConfirm(
+        "Are you sure you want to delete this channel?",
+        {
+          title: "Confirm deletion",
+          size: "sm",
+          buttonSize: "sm",
+          okVariant: "danger",
+          okTitle: "Remove",
+          cancelTitle: "Cancel",
+          hideHeaderClose: false,
+          centered: true,
+          headerClass: "p-2 border-bottom-0",
+          footerClass: "p-2 border-top-0",
+          contentClass: "bg-dark text-light",
+        }
+      );
+      if (!confirmResult) return;
+
+      const self = this;
+      // eslint-disable-next-line
       InfluuntApi.RemoveChannel(self.id, function (r) {
-        // eslint-disable-next-line
-        var rr = r;
         self.$forceUpdate();
         self.deleted = true;
       });
@@ -81,4 +98,8 @@ export default {
 .list-group-item:hover {
   background-color: #333 !important;
 }
-</style>
+.but svg {
+  position: relative;
+  top: -2px;
+}
+</style>

src/Influunt.Host/ClientApp/src/components/FeedItem.vue

@@ -1,85 +1,125 @@
 <template>
-    <b-card v-if="!this.deleted" v-bind:title="this.title" v-bind:sub-title="this.date + ' on ' + this.channel">
-        <b-card-text>
-            <span v-html="this.description"></span>
-        </b-card-text>
-        <div style="min-height: 46px">
-            <b-button v-if="this.link" v-bind:href="this.link" target="_blank" variant="outline-secondary">Read more</b-button>
-            <b-button v-if="!this.inFavorite && !this.isFavorite" variant="outline-warning" class="favorite-button" @click="AddToFavorite"><b-icon-star-fill class="favorite-icon"/></b-button>
-            <b-button v-if="this.isFavorite" variant="outline-warning" class="favorite-button" @click="RemoveFromFavorite"><b-icon-trash-fill/></b-button>
-        </div>
-    </b-card>
+  <b-card
+    v-if="!this.deleted"
+    v-bind:title="this.title"
+    v-bind:sub-title="this.date + ' on ' + this.channel"
+  >
+    <b-card-text>
+      <span v-html="this.description"></span>
+    </b-card-text>
+    <div style="min-height: 46px">
+      <b-button
+        v-if="this.link"
+        v-bind:href="this.link"
+        target="_blank"
+        variant="outline-secondary"
+        >Read more</b-button
+      >
+      <b-button
+        v-if="!this.inFavorite && !this.isFavorite"
+        variant="outline-warning"
+        class="favorite-button"
+        @click="AddToFavorite"
+        ><b-icon-star-fill class="favorite-icon"
+      /></b-button>
+      <b-button
+        v-if="this.isFavorite"
+        variant="outline-warning"
+        class="favorite-button"
+        @click="RemoveFromFavorite"
+        ><b-icon-trash-fill
+      /></b-button>
+    </div>
+  </b-card>
 </template>
 <script>
-import {BIconStarFill, BIconTrashFill} from "bootstrap-vue";
-import InfluuntApi from "@/influunt"
+import { BIconStarFill, BIconTrashFill } from "bootstrap-vue";
+import InfluuntApi from "@/influunt";
 export default {
-    name:"FeedItem",
-    components: {
-        BIconStarFill, BIconTrashFill
+  name: "FeedItem",
+  components: {
+    BIconStarFill,
+    BIconTrashFill,
+  },
+  props: {
+    title: String,
+    channel: String,
+    description: String,
+    date: String,
+    link: String,
+    id: String,
+    isFavorite: Boolean,
+  },
+  data: function () {
+    return {
+      inFavorite: false,
+      deleted: false,
+    };
+  },
+  methods: {
+    AddToFavorite: function () {
+      var self = this;
+      /* eslint-disable */
+      var item = {
+        title: this.title,
+        link: this.link,
+        channelName: this.channel,
+        description: this.description,
+        date: this.date,
+      };
+      InfluuntApi.AddFavorite(item, function (request) {
+        self.inFavorite = true;
+      });
+      /* eslint-enable */
     },
-    props:{
-        title:String,
-        channel:String,
-        description:String,
-        date:String,
-        link:String,
-        id:String,
-        isFavorite:Boolean
-    },
-    data: function(){
-        return {
-            inFavorite:false,
-            deleted: false
+    RemoveFromFavorite: async function () {
+      var confirmResult = await this.$bvModal.msgBoxConfirm(
+        "Are you sure you want to remove this post from your favorites?",
+        {
+          title: "Confirm deletion",
+          size: "sm",
+          buttonSize: "sm",
+          okVariant: "danger",
+          okTitle: "Remove",
+          cancelTitle: "Cancel",
+          hideHeaderClose: false,
+          centered: true,
+          headerClass: "p-2 border-bottom-0",
+          footerClass: "p-2 border-top-0",
+          contentClass: "bg-dark text-light",
         }
+      );
+      if (!confirmResult) return;
+      var self = this;
+      // eslint-disable-next-line
+      InfluuntApi.RemoveFavorite(this.id, function (request) {
+        self.deleted = true;
+      });
     },
-    methods:{
-        AddToFavorite: function(){
-            var self = this
-             /* eslint-disable */
-            var item = {
-                "title":this.title,
-                "link":this.link,
-                "channelName":this.channel,
-                "description":this.description,
-                "date":this.date
-            }
-            InfluuntApi.AddFavorite(item, function(request){
-                self.inFavorite = true
-            })
-             /* eslint-enable */
-        },
-        RemoveFromFavorite: function(){
-            var self = this
-            // eslint-disable-next-line
-            InfluuntApi.RemoveFavorite(this.id, function(request){
-                self.deleted = true
-            })
-        }
-    }
-}
+  },
+};
 </script>
 
 <style>
-    .card{
-        text-align: left;
-        max-width: 99%;
-    }
-    .card-text{
-        overflow-x: hidden;
-    }
-    .card-text img{
-        width: 100%!important;
-    }
-    .card:hover{
-        background-color: #333 !important;
-    }
-    .favorite-button{
-        display: inline-block;
-        right: 15px;
-        position: absolute;
-    }
-    .favorite-icon {
-        margin-bottom: 2px;
-    }
+.card {
+  text-align: left;
+  max-width: 99%;
+}
+.card-text {
+  overflow-x: hidden;
+}
+.card-text img {
+  width: 100% !important;
+}
+.card:hover {
+  background-color: #333 !important;
+}
+.favorite-button {
+  display: inline-block;
+  right: 15px;
+  position: absolute;
+}
+.favorite-icon {
+  margin-bottom: 2px;
+}
 </style>